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

machine.js

// v6.1
// assumes consumer prompt in every possible case
// no network requests
// no saving local data
// no saving network response
// actions not optimized

const withConsumerPromptMachine = Machine({
  id: 'withConsumerPromptAsDefault',
  initial: 'closed',
  context: {},
  states: {
    closed: {
      id: 'closed',
      on: {
        OPEN: 'open'
      }
    },
    open: {
      initial: 'addressList',
      states: {
        addressList: {
          id: 'addressList',
          initial: 'savedAddressesList',
          states: {
            savedAddressesList: {
              id: 'savedAddressesList',
              on: {
                EDIT: {
                  target: '#consumerPrompt',
                  actions: ['prevEditAddressExisting']
                },
                SELECT: {
                  target: '#consumerPrompt',
                  actions: ['prevSavedAddressesList']
                },
                SEARCH: '#searchForNewAddress'
              }
            },
            searchForNewAddress: {
              id: 'searchForNewAddress',
              on: {
                SELECT: {
                  target: '#consumerPrompt',
                  actions: ['prevEditAddressNew']
                },
                CLOSE: '#savedAddressesList'
              }
            },
          },
        },
        editAddress: {
          states: {
            editAddressExisting: {
              id: 'editAddressExisting',
              on: {
                ADJUST_PIN: {
                  target: '#adjustPinExisting',
                  actions: ['prevEditAddressExisting']
                },
                CANCEL: '#addressList',
                SUBMIT: {
                  target: '#loading',
                  actions: ['prevEditAddressExisting']
                }
              }
            },
            editAddressNew: {
              id: 'editAddressNew',
              on: {
                ADJUST_PIN: '#adjustPinNew',
                CANCEL: '#addressList',
                SUBMIT: {
                  target: '#loading',
                  actions: ['prevEditAddressNew',]
                }
              }
            },
          }
        },
        adjustPin: {
          states: {
            adjustPinExisting: {
              id: 'adjustPinExisting',
              on: {
                CANCEL: [
                  {
                    target: '#editAddressExisting',
                    actions: ['prevAdjustPinExisting'],
                    cond: (context) => context.prevLocation === 'editAddressExisting'
                  },
                  {
                    target: '#savedAddressesList',
                    actions: ['prevSavedAddressesList'],
                    cond: (context) => context.prevLocation === 'savedAddressesList'
                  }
                ],
                SAVE: [
                  {
                    target: '#loading',
                    actions: ['prevAdjustPinExisting'],
                    cond: (context) => context.prevLocation === 'editAddressExisting'
                  },
                  {
                    target: '#loading',
                    actions: ['prevSavedAddressesList'],
                    cond: (context) => context.prevLocation === 'savedAddressesList'
                  }
                ]
              }
            },
            adjustPinNew: {
              id: 'adjustPinNew',
              on: {
                CANCEL: '#editAddressNew',
                SAVE: {
                  target: '#editAddressNew'
                }
              }
            },
          }
        },
        consumerPrompt: {
          id: 'consumerPrompt',
          on: {
            AGREE: [
              { target: '#adjustPinExisting', cond: (context) => context.prevLocation === 'editAddressExisting' },
              { target: '#adjustPinExisting', actions: ['prevSavedAddressesList'], cond: (context) => context.prevLocation === 'savedAddressesList' },
            ],
            DECLINE: [
              { target: '#editAddressExisting', cond: (context) => context.prevLocation === 'editAddressExisting' },
              { target: '#loading', cond: (context) => context.prevLocation === 'savedAddressesList' },
            ]
          }
        },
        loading: {
          id: 'loading',
          on: {
            RESOLVE: [
              { target: '#closed', cond: (context) => context.prevLocation === 'editAddressNew' },
              { target: '#addressList', cond: (context) => context.prevLocation === 'editAddressExisting' },
              { target: '#closed', cond: (context) => context.prevLocation === 'savedAddressesList' },
              { target: '#editAddressExisting', cond: (context) => context.prevLocation === 'adjustPinExisting' },
            ],
            REJECT: [
              { target: '#editAddressNew', cond: (context) => context.prevLocation === 'editAddressNew' },
              { target: '#editAddressExisting', cond: (context) => context.prevLocation === 'editAddressExisting' },
              { target: '#savedAddressesList', cond: (context) => context.prevLocation === 'savedAddressesList' },
              { target: '#adjustPinExisting', cond: (context) => context.prevLocation === 'adjustPinExisting' },
            ]
          },
          exit: 'clearPrevLocation'
        }
      },
      on: {
        CLOSE: 'closed'
      }
    }
  }
}, {
  actions: {
    updatePrevLocationWithCurrentState: assign({
      prevLocation: (_, event) => {
        return event.location
      }
    }),
    prevSavedAddressesList: assign({
      prevLocation: () => 'savedAddressesList'
    }),
    prevEditAddressExisting: assign({
      prevLocation: () => 'editAddressExisting'
    }),
    prevEditAddressNew: assign({
      prevLocation: () => 'editAddressNew'
    }),
    prevAdjustPinExisting: assign({
      prevLocation: () => 'adjustPinExisting'
    }),
    clearPrevLocation: assign({
      prevLocation: undefined
    })
  }
})