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

machine.js

  const canVlidate = (context, event) => {
    // check if the user can send a vertification code
  return true
  };
  
  const fetchMachine = Machine({
    id: 'newUser',
    initial: 'renderCart',
    context: {
      verified: false,
      resends: 0,
      edits: 0,
      phone: false,
      address: false,
      resendTimeout: false,
      editTimeout: false,
      pendingPhone: false
    },
    states: {
      renderCart: {
        on: {
          CONTINUE: [
            {
              target: 'userCanNotProceed',
              cond: {
                type: 'canNotResend',
                maxResends: 2
              }
            },
            { target: 'renderPhoneForm', cond: 'doesNotHaveAPhone' },
            { target: 'renderCheckCodeForm', cond: 'unverifiedPhone' },
            { target: 'renderAddAddressForm', cond: 'doesNotHaveAnAddress' },
          ],
          CLOSE: {
            target: 'postData'
          }
        }
      },
      userCanNotProceed: {
        type: 'final'
      },
      renderPhoneForm: {
        on: {
          SUBMIT: {
            target: 'renderCheckCodeForm'
          }
        }
      },
      renderCheckCodeForm: {
        on: {
          RESEND: {
            target: 'renderCheckCodeForm',
            cond: {
              type: 'canResend',
              maxResends: 2
            },
            actions: assign((context, event) => {
              return {
                resends: context.resends + 1
              }
            })
          },
          CHANGE_PHONE: {
            target: 'renderPhoneForm',
            cond: {
              type: 'canChange',
              maxedits: 1
            },
            actions: assign((context, event) => {
              return {
                edits: context.edits + 1
              }
            })
          },
          SUBMIT: 'renderAddAddressForm'
        }
      },
      renderAddAddressForm: {
        on: {
          SUBMIT: 'postData'
        }
      },
      postData: {
        type: 'final'
      }
    }
  },
  {
    guards: {
      doesNotHaveAPhone: (context, event) => {
        return !context.phone
      },
      unverifiedPhone: (context, event, meta) => {
        return context.phone && !context.verified && context.resends < 2
      },
      doesNotHaveAnAddress: (context, event) => {
        return context.phone && context.verified && !context.address
      },
      canNotResend: (context, event, meta) => {
        return context.resends >= 2
      },
      canResend: (context, event, meta) => {
        return context.resends < meta.cond.maxResends
      },
      canChange: (context, event, meta) => {
        return context.edits < meta.cond.maxedits
      }
    }
  });