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 modalStates = {
  initial: 'edit',
  states: {
    edit: {
      on: {
        SAVE: 'saving',
        CLOSE: 'close'
      }
    },
    saving: {
      on: {
        ERROR: 'edit',
        SUCCESS: 'success'
      }
    },
    success: {
      type: 'final'
    },
    close: {
      type: 'final'
    }
  },
  // onDone: 'history'
};

const checkoutStates = {
  id: 'checkout',
  type: 'parallel',
  states: {
    address: {
      id: 'address',
      initial: 'firstTime',
      states: {
        firstTime: {
          initial: 'edit',
          states: {
            edit: {
              on: {
                SAVE: 'saving',
              }
            },
            saving: {
              on: {
                ERROR: 'edit',
                SUCCESS: 'success'
              }
            },
            success: {
              type: 'final'
            }
          },
          onDone: 'selected',
        },
        selected: {
          on: { CHANGE: 'list' }
        },
        list: {
          on: {
            CLOSE: 'selected',
            //ADD: 'parent.parent.addressModal'
            //EDIT: 'parent.parent.addressModal'
          }
        },
      }
    },
    paymentMethod: {
      id: 'paymentMethod',
      initial: 'firstTime',

      states: {
        firstTime: {
          initial: 'edit',
          states: {
            edit: {
              on: {
                SAVE: 'saving',
              }
            },
            saving: {
              on: {
                ERROR: 'edit',
                SUCCESS: 'success'
              }
            },
            success: {
              type: 'final'
            }
          },
          onDone: 'selected',
        },
        selected: {
          on: { CHANGE: 'list' }
        },
        list: {
          on: {
            CLOSE: 'selected',
            //ADD: 'parent.parent.addressModal'
            //EDIT: 'parent.parent.addressModal'
          }
        },
      }
    },
  }
}

const checkoutMachine = Machine({
  id: 'checkout',
  initial: 'checkout',
  states: {
    checkout: {
      ...checkoutStates
    },
    addressModal: {
      ...modalStates
    },
    paymentMethodModal: {
      ...modalStates
    }
  }
});