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)
  
  const fetchMachine = Machine({
    id: 'checkout',
    initial: 'selectCountry',
    type: 'parallel',
    context: {
      shippingCountry: 'US',
      shippingMethod: null,
    },
    states: {
      selectCountry: {
        initial: 'fetching',
        onDone: 'selectShippingMethod',
        on: {
          CHANGE: {
            target: '.idle'
          }
        },
        states: {
          fetching: {
            invoke: {
              src: 'fetchCountryOptions',
              onDone: {
                target: 'idle',
              }
            }
          },
          idle: {
            on: {
              SAVE: {
                target: 'complete'
              }
            }
          },
          complete: {
            type: 'final'
          },
        }
      },
      selectShippingMethod: {
        initial: 'fetching',
        onDone: {
          target: 'selectAddress',
        },
        states: {
          fetching: {
            invoke: {
              src: 'fetchShippingMethodOptions',
              onDone: {
                target: 'idle',
              }
            }
          },
          idle: {
            on: {
              SAVE: {
                target: 'complete'
              }
            }
          },
          complete: {
            type: 'final'
          },
        }
      },
      selectAddress: {
        initial: 'fetching',
        states: {
          fetching: {
            invoke: {
              src: 'fetchAddressOptions',
              onDone: {
                target: 'idle',
              }
            }
          },
          idle: {
            on: {
              SAVE: {
                target: 'submitting'
              }
            }
          },
          submitting: {
            invoke: {
              src: 'validate',
              onDone: {
                target: 'complete',
              },
              onError: {
                target: 'idle',
                actions: 'assignErrorMessageToContext',
              },
            }
          },
          complete: {
            type: 'final'
          },
        }
      },
      selectPaymentMethod: {
        initial: 'idle',
        states: {
          idle: {}
        }
      }
    }
  });