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

machine.js

/**
 * Account Machine
 * ---
 * 
 * Type: Backend
 * 
 */
if (console) {
  console.clear()
}

const guards = {
  accountExists: (ctx) => false,
  hasVerifiedEmail: ({ hasVerifiedEmail }) => hasVerifiedEmail,
  hasAcceptedTos: ({hasAcceptedTos }) => hasAcceptedTos,
  hasAddress: ({ hasAddress }) => hasAddress
}

const markAsVerified = assign({
  hasVerifiedEmail: () =>  true
}) 

const AccountMachine = Machine({
  id: 'AccountMachine',
  initial: 'landingPage',
  
  context: {
    // data
    email: undefined,
    
    // flags
    hasVerifiedEmail: false,
    hasAcceptedTos: false,
    hasAddress: false
    // ...
    // isFlagged: false
  },
  
  states: {
    landingPage: {
      id: 'landingPage',
      exit: () => console.log('start of the flow: Submission of a form on the home/landing page inluding AMOUNT, CYCLE, and EMAIL'),
      on: {
        SUBMIT: 'createAccount',
      }
    },
    
    createAccount: {
      id: 'createAccount',
      initial: 'unknown',
      onDone: 'verifyEmail',
      
      states: {
        unknown: {
          on: {
            // https://xstate.js.org/docs/guides/transitions.html#transient-transitions
            '': [
              {
                cond: 'accountExists',
                target: 'exists'
              },
              {
                target: 'createAccount'
              }
            ]
          },
        },
          
        createAccount: {
          entry: () => console.log('Creating Account.'),
          on: {
            ACCOUNT_CREATED: 'created'
          }
        },
        
        exists: {
          type: 'final'
        },
        
        created: {
          entry: () => console.log('Account Created.'),
          type: 'final'
        }
      },
    },
    
    
    verifyEmail: {
      id: 'verifyEmail',
      initial: 'unknown',
      onDone: 'personalInfoAndTos',
      
      states: {
        unknown: {
          on: {
            '': [
              {
                cond: 'hasVerifiedEmail',
                target: 'verified'
              },
              
              {
                target: 'sendVerificationEmail'
              }
            ]
          }
        },
        
        sendVerificationEmail:  {
          entry: () => console.log('Sending Email Verification Mail'),
          on: {
            EMAIL_EXPIRED: 'expired',
            EMAIL_VERIFIED: {
              actions: ['markAsVerified'],
              target: 'verified'
            }
          },
          
          // TODO email verification states. 
          // initial, sent, pending, expired.
        },
        
        expired: {
          entry: () => console.log('show email expired message'),
          exit: () => console.log('redirecting to start'),
          after: {
            2000: '#landingPage'
          }
        },
        
        verified: {
          entry: () => console.log('Email Verified'),
          type: 'final'
        }
      }
    },
    
    personalInfoAndTos: {
      id: 'personalInfoAndTos',
      initial: 'unknown',
      onDone: 'addAddress',
      
      states: {
        unknown: {
          on: {
            '': [
              {
                cond: 'hasAcceptedTos',
                target: 'done'
              },
              {
                target: 'personalInfosForm',
              }
            ]
          }
        },
        
        personalInfosForm: {
          entry: () => console.log('Personal Info Form'),
          on: {
            SUBMIT: 'done'
          }
        },
        
        done: {
          type: 'final'
        }
      }
    },
    
    addAddress: {
      id: 'addAddress',
      initial: 'unknown',
      
      states: {
        unknown: {
          on: {
            '': [
              {
                cond: 'hasAddress',
                target: 'done'
              },
              {
                target: 'addressForm',
              }
            ]
          }
        },
        
        addressForm: {
          entry: () => console.log('Address Form'),
          on: {
            SUBMIT: 'done'
          }
        },
        
        done: {
          type: 'final'
        }
      }
    }
  }
}, {
  guards
});