Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  function fetchQuote() {
    return new Promise((resolve) => {
      setTimeout(() => resolve(), 1000)
    })
  }
  const { cancel } = actions
  
  const fetchMachine = Machine({
  id: 'priceCalculatorMachine',
  context: {
    schutzbrief: false,
    billing: 'none',
    cycle: 'none',
    seats: 100,
    total: 0,
  },
  type: 'parallel',
  states: {
    price: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            FETCH: 'fetching',
          },
        },
        fetching: {
          invoke: {
            id: 'fetchQuote',
            src: (context) => fetchQuote({
              seats: context.seats,
              schutzbrief: context.schutzbrief,
              billing: context.billing,
              cycle: context.cycle,
            }),
            onDone: {
              target: 'idle',
              actions: [
                assign({
                  total: (_, event) => event.data,
                }),
                send('DONE'),
              ],
            },
          },
        },
      },
    },
    planConfig: {
      initial: 'active',
      states: {
        active: {
          on: {
            CHANGING: 'changing',
          },
        },
        changing: {
          on: {
            DONE: 'active',
          },
        },
      },
      on: {
        CHANGE: {
          actions: [
            assign((context, event) => ({
              ...context,
              [event.target]: event.value,
            })),
            send('CHANGING'),
            cancel('debounce'),
            send('FETCH', { id: 'debounce', delay: 1000 }),
          ],
        },
      },
    },
  },
});