Two stories, one screen

One Place the order button reports that the order went through, and only the story waiting for that moves; the other story on the same screen stays put.

The story

const firstOrder = {
  id: 'first-order',
  steps: [
    {
      id: 'quantity',
      target: { elements: 'input[name="quantity"]', interactive: true },
      message: 'How many you want. Change it if you like, then press Next.',
    },
    {
      id: 'place',
      target: { elements: '[data-place]', interactive: true },
      message: 'Place the order. This step is waiting for “order-placed”.',
      awaits: 'order-placed',
    },
    {
      id: 'receipt',
      target: '[data-status]',
      message: 'And the order went through. That is what ended the last step.',
    },
  ],
} satisfies LekoStory

const whatYouPay = {
  id: 'what-you-pay',
  steps: [
    {
      id: 'tax',
      target: ['[data-tax]', '[data-total]'],
      message:
        'Tax, worked out from the quantity. Press the button — this story ' +
        'declares no signal, so “order-placed” does nothing here.',
    },
    {
      id: 'total',
      target: '[data-total]',
      message: 'And this is what you actually pay.',
    },
  ],
} satisfies LekoStory

What the page reports

button.addEventListener('click', async () => {
  button.disabled = true
  status.textContent = 'Placing…'
  await new Promise((resolve) => setTimeout(resolve, 800))
  status.textContent = 'Order placed.'
  button.disabled = false

  // Written once, where the thing actually happened, and never edited again
  // as stories are added or their steps reordered. Whether anybody is
  // listening is not this function's business.
  leko.reached('order-placed')
})