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 createUser = ({
    name,
    phone,
    email,
    password,
    country,
  }) =>
  fetch(`url/to/user/`).then((response) => response.json());
  
  const signupMachine = Machine({
    id: 'signup',
    initial: 'fill_form',
    context: {
      name: null
    },
    states: {
      fill_form: {
        initial: 'fill',
        states: {
          fill: {
            on: {
              SUBMIT: 'create_user',
              actions: assign({
                name: (context, event) => event.name,
                name: (context, event) => event.phone,
                name: (context, event) => event.email,
                name: (context, event) => event.password,
                name: (context, event) => event.country,
              })
            }
          },          
          create_user: {
            invoke: {
              id: 'createUser',
              src: (context, event) => createUser(context),
              onDone: {
                target: 'user_created',
                actions: assign({ pincode: (context, event) => event.data.pincode })
              },
              onError: {
                target: 'fill',
                actions: assign({ error: (context, event) => event.data })
              }
            }
          },
          user_created: {
            type: 'final'
          }
        },
        onDone: 'validate_pincode'
      },
      validate_pincode: {
        on: {
          RESEND: {
            actions: 'resendPincode'
          },
          CHECK: [
            {
              target: 'info_screen',
              cond: (context, event) => context.pincode === event.pincode
            },
            {
              target: 'validate_pincode',
              cond: (context, event) => context.retries < 3,
              actions: assign({
              error: 'wrong pincode',
              retries: (context, event) => context.retries + 1
              })
            },
            {
              target: 'failure'
            }            
          ]
        }
      },
      info_screen: {
        on: {
          NEXT: 'success',
        }
      },
      success: {
        type: 'final'
      },
      failure: {
        type: 'final'
      }
    }
  });