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

machine.js

const fetchMachine = Machine({
  id: 'Shopping Cart Checkout',
  initial: 'SERVICE_CALL',
  context: {},
  states: {
    'SERVICE_CALL': {
      invoke: {
        id: 'getData',
        src: 'getMockData',
        onDone: {
          target: 'TRANSIENT_PAGE',
          actions: ['APPLICATION.REFRESH'],
        },
        onError: {
          target: 'ERROR_PAGE',
          actions: ['APPLICATION.REFRESH'],
        },
      },
    },
    'TRANSIENT_PAGE': {
      after: {
        1500: [
          {
            target: 'CART_MAIN_PAGE',
            actions: ['buildItemsList', 'APPLICATION.REFRESH'],
          },
        ],
      },
    },
    'CART_MAIN_PAGE': {
      on: {
        SHIPPING: {
          target: 'SHIPPING_ADDRESS',
          actions: ['buildItemsList'],
        },
      },
    },
    'SHIPPING_ADDRESS': {
      on: {
        PAYMENT: {
          target: 'PAYMENT_METHOD',
          actions: ['saveShippingData'],
        },
        CART: {
          target: 'CART_MAIN_PAGE',
          actions: [],
        },
      },
    },
    'PAYMENT_METHOD': {
      on: {
        'CREDIT CARD': {
          target: 'CREDIT_CARD_DETAILS',
          actions: ['setPaymentMethod'],
        },
        PAYPAL: {
          target: 'PAYPAL_DETAILS',
          actions: ['setPaymentMethod'],
        },
      },
    },
    'CREDIT_CARD_DETAILS': {
      on: {
        BILLING: {
          target: 'BILLING_ADDRESS',
          actions: [],
        },
        PAYMENT: {
          target: 'PAYMENT_METHOD',
          actions: [],
        },
      },
    },
    'BILLING_ADDRESS': {
      on: {
        'REVIEW ORDER': {
          target: 'ORDER_REVIEW',
          actions: ['saveBillingData'],
        },
        'CREDIT CARD': {
          target: 'CREDIT_CARD_DETAILS',
          actions: [],
        },
      },
    },
    'ORDER_REVIEW': {
      on: {
        'SUBMIT ORDER': {
          target: 'SUCCESS_PAGE',
          actions: ['chargePaymentMethod', 'processOrder'],
        },
        SHIPPING: {
          target: 'SHIPPING_ADDRESS',
          actions: [],
        },
        BILLING: {
          target: 'BILLING_ADDRESS',
          actions: [],
        },
        PAYMENT: {
          target: 'CREDIT_CARD_DETAILS',
          actions: [],
        },
        ERROR: {
          target: 'ERROR_PAGE',
        },
      },
    },
    'PAYPAL_DETAILS': {
      on: {
        'REVIEW ORDER': {
          target: 'ORDER_REVIEW',
          actions: [],
        },
      },
    },
    'SUCCESS_PAGE': {
      type: 'final',
    },
    'ERROR_PAGE': {
      on: {},
    },
  }
});