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: 'oldUser',
    initial: 'renderCart',
    context: {
      verified: true,
      resends: 1,
      edits: 0,
      phone:  true,
      address: true,
      resendTimeout: false,
      editTimeout: false,
      pendingPhone: false
    },
    states: {
      renderCart: {
        on: {
          CONTINUE: [
            { target: 'renderCheckCodeForm', cond: 'hasUnverefiedPhone' },
            { target: 'renderPhoneForm', cond: 'doesNotHaveAPhone' },
            { target: 'renderAddAddressForm', cond: 'verifiedWithoutAddress' },
            {
              target: 'userInfo',
              cond: 'verifiedAndHasAnAddress'
            }
          ],
          CLOSE: {
            target: 'postData'
          }
        }
      },
      userInfo: {
        on: {
          CHANGE_PHONE: {
            target: 'renderPhoneForm',
            cond: {
              type: 'canEdit',
              maxEdits: 1
            },
            actions: assign((context, event) => {
              return {
                edits: context.edits + 1
              }
            })
          },
          CHANGE_ADDRESS: {
            target: 'renderAddAddressForm'
          },
          SUBMIT: {
            target: 'postData'
          }
        }
      },
      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: 'canEdit',
              maxChanges: 1
            },
            actions: assign((context, event) => {
              return {
                edits: context.edits + 1
              }
            })
          },
          SUBMIT: 'userInfo'
        }
      },
      renderAddAddressForm: {
        on: {
          SUBMIT: 'userInfo'
        }
      },
      postData: {
        type: 'final'
      }
    }
  },
  {
    guards: {
      verifiedAndHasAnAddress: (context, event) => {
        return context.phone && context.verified && context.address
      },
      hasUnverefiedPhone: (context, event) => {
        return context.phone && !context.verified
      },
      doesNotHaveAPhone: (context, event) => {
        return !context.phone
      },
      verifiedWithoutAddress: (context, event) => {
        return context.phone && context.verified && !context.address
      },
      canEdit: (context, event, meta) => {
        return context.edits < meta.cond.maxEdits && context.resends < 2
      },
      canResend: (context, event, meta) => {
        return context.resends < meta.cond.maxResends
      },
      
      
      
      // showUserInfo: (context, event) => {
      //   return context.phoneExists && context.isVerified && context.addressExists
      // },
      // unverifiedPhone: (context, event) => {
      //   return context.phoneExists && !context.isVerified
      // },
      // canValidate: (context, event) => {
      //   // check if the user can send a vertification code
      //   return true
      // },
      // canNot: (context, event) => {
      //   return true
      // }
    }
  })