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

machine.js

  const contactAndDelivery = {
    id: 'contactAndDelivery',
    initial: 'name',
    states: {
      name: {
        on: {
          SUCCESS: 'address'
        }
      },
      address: {
        on: {
          SUCCESS: 'end'
        }
      },
      end: {
        type: 'final'
      }
    }
  }

  const yourKit = {
    id: 'yourKit',
    initial: 'kit_type',
    states: {
      kit_type: {
        on: {
          valid: 'gender'
        }
      },
      gender: {
        on: {
          SUCCESS: '#contactAndDelivery'
        }
      }
    }
  };
  
  const ageAndPostcode = {
      id: 'step1',
      initial: 'dob',
      states: {
        dob: {
          on: {
            SUCCESS: 'postcode',
            UNDER_AGE: '#failure.underage',
            OVERAGE_AGE: '#failure.overage'
          }
        },
        postcode: {
          on: {
            SUBMIT: {
              target: 'check_region',
              cond: ctx => ctx.postcode.length === 0
            }
          }
        },
        check_region: {
          on: {
            VALID_REGION: 'signs'
          }
        },
        signs: {
          on: {
            SUCCESS: 'consent',
          } 
        },
        consent: {
          on: {
            SUCCESS: '#yourKit'
          }
        }
      }
  }

  const fetchMachine = Machine({
    id: "sh24",
    context: {
      retries: 0,
      postcode: ''
    },
    initial: 'step1',
    states: {
      step1: {
        ...ageAndPostcode
      },
      step2: {
        ...yourKit
      },
      step3: {
        ...contactAndDelivery
      },
      failure: {
        id: 'failure',
        initial: 'underage',
        states: {
          underage: {
            meta: {
              message: "underage"
            }
          },
          overage: {
            meta: {
              message: "overage"
            }
          },
          outside: {
            meta: {
              message: "outside"
            }
          }
        }
      }
    }
  });