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

machine.js

// V1.1 basic with new vs existing address flow states
const addressManagerMachine = Machine({
  id: 'addressManager',
  initial: 'closed',
  states: {
    closed: {
      on: {
        CLICK: 'addressList'
      }
    },
    addressList: {
      initial: 'list',
      states: {
        list: {
          on: {
            SELECT: '#addressManager.setAddressAsDefault',
            EDIT: '#addressManager.editExistingAddress',
            SEARCH: 'searchResults',
          }
        },
        searchResults: {
          on: {
            SELECT: '#addressManager.editNewAddress',
          }
        }
      },
    },
    editExistingAddress: {
      on: {
        CANCEL: 'addressList',
        SAVE: 'addressList',
        ADJUST_PIN: 'changeExistingPinLocation'
      }
    },
    editNewAddress: {
      on: {
        CANCEL: 'addressList',
        SAVE: 'setAddressAsDefault',
        ADJUST_PIN: 'changeNewPinLocation'
      }
    },
    setAddressAsDefault: {
      on: {
        SUCCESS: 'closed',
        FAIL: 'addressList'
      }
    },
    changeExistingPinLocation: {
      on: {
        CANCEL: 'editExistingAddress',
        SAVE: 'editExistingAddress'
      }
    },
    changeNewPinLocation: {
      on: {
        CANCEL: 'editNewAddress',
        SAVE: 'editNewAddress'
      }
    },
    loading: {},
  },
  on: {
    CLOSE: '.closed'
  }
})