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 addressMachine = Machine({
    id: 'matching',
    initial: 'address',
    context: {
      billingAddress: undefined,
      shippingAddress: undefined
    },
    states: {
      address: {
        initial: 'choosing',
        states: {
          choosing: {
            type: 'parallel',
            on: {
              CONTINUE: {
                target: 'verifying'
              }
            },
            states: {
              billing: {
                initial: 'unselected',
                states: {
                  unselected: {
                    on: {
                      SELECT_BILLING: {
                        target: 'selected',
                        actions: ['setBilling']
                      }
                    }
                  },
                  selected: {
                    on: {
                      SELECT_BILLING: {
                        target: 'selected',
                        actions: ['setBilling']
                      }
                    },
                    type: 'final'
                  }
                }
              },
              shipping: {
                initial: 'unselected',
                states: {
                  unselected: {
                    on: {
                      SELECT_SHIPPING: {
                        target: 'selected',
                        actions: ['setShipping']
                      }
                    }
                  },
                  selected: {
                    on: {
                      SELECT_SHIPPING: {
                        target: 'selected',
                        actions: ['setShipping']
                      }
                    },
                    type: 'final'
                  }
                }
              },
              hist: {
                type: 'history',
                history: 'deep'
              }
            }
          },
          verifying: {
            on: {
              CHANGE_ADDRESS: 'choosing.hist',
              SUBMIT: '#submitted'
            }
          }
        }
      },
      submitted: {
        id: 'submitted',
        initial: 'evaluating',
        on: {
          CHANGE_ADDRESS: 'address.choosing.hist',
          RESET: { target: 'address', actions: ['clearSelection'] }
        },
        states: {
          evaluating: {
            on: {
              '': [
                { target: 'correct', cond: 'isCorrect' },
                { target: 'incorrect' }
              ]
            }
          },
          correct: {},
          incorrect: {}
        }
      }
    }
  },
  {
    actions: {
      setBilling: assign((ctx, event ) => ({
        billingAddress: event.selectedItem
      })),
      setShipping: assign((ctx, event ) => ({
        shippingAddress: event.selectedItem
      })),
      clearSelection: assign((ctx, event) => ({
        topSelectedItem: undefined,
        shippingAddress: undefined
      }))
    },
    guards: {
      isCorrect: ctx => {
        return true;
      }
    },
  });