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

machine.js

const shopLoadingMachine = Machine({
  id: 'shop-loading',
  initial: 'entry',
  context: {
    shopSettings: null
  },
  states: {
    entry: {
      on: {
        LOAD: {
          target: 'step1_invalid',
          actions: assign({
            shopSettings: (context, { shopSettings }) => ({ shopPurpose: false })
          })
        }
      }
    },
    step1_invalid: {
      on: {
        ENTER_NAME: 'step1_valid',
        GO_BACK: 'step1_invalid',
        GO_NEXT: 'step1_invalid'
      }
    },
    step1_valid: {
      on: {
        GO_BACK: 'step1_valid',
        GO_NEXT: 'step2_invalid'
      }
    },
    step2_invalid: {
      on: {
        ENTER_LASTNAME: 'step2_valid',
        GO_BACK: 'step1_valid',
        GO_NEXT: 'step2_invalid'
      }
    },
    step2_valid: {
      on: {
        GO_BACK: 'step1_valid',
        GO_NEXT: 'step3_invalid'
      }
    },
    step3_invalid: {
      on: {
        ENTER_EMAIL: 'step3_valid',
        GO_BACK: 'step2_valid',
        GO_NEXT: [{ cond: {type: 'isEmailRequired'}, target: 'step3_invalid'},{ cond: {type: 'isEmailOptional'}, target: 'step4_invalid'}]
      }
    },  
    step3_valid: {
      on: {
        GO_BACK: 'step2_valid',
        GO_NEXT: [{ cond: {type: 'isShowPurpose'}, target: 'step4_invalid'},{ cond: {type: 'isHidePurpose'}, target: 'step5_invalid'}]
      }
    },
    step4_invalid: {
      on: {
          ENTER_PURPOSE: 'step4_valid',
          GO_BACK: 'step3_valid',
          GO_NEXT: 'step4_invalid'
        }
    },
     step4_valid: {
      on: {
        GO_BACK: 'step3_valid',
        GO_NEXT: 'step5_invalid'
      }
    },
    step5_invalid: {
      on: {
          ENTER_REQUESTS: 'step5_valid',
          GO_BACK: [{ cond: {type: 'isShowPurpose'}, target: 'step4_valid'},{ cond: {type: 'isHidePurpose'}, target: 'step3_valid'}],
          GO_NEXT: 'step5_invalid'
        }
    },
    step5_valid: {
      on: {
        GO_BACK: 'step4_valid',
        SUBMIT: 'thank_you_message'
      }
    },
    thank_you_message: {
    }
  }
}, {
  guards: {
    isShowPurpose: (context) => !!context.shopSettings.shopPurpose,
    isHidePurpose: (context) => !context.shopSettings.shopPurpose
  }
});