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

machine.js

const machine = Machine({
  id: 'subscriptionFlow',
  initial: 'pickingBrand',
  context: {
    value: 'pickingBrand',
  },
  states: {
    pickingBrand: {
      on: {
        PICK_BRAND: 'loadingBrand',
      },
    },
    loadingBrand: {
      entry: 'syncBrandSlugWithUrlParams',
      invoke: {
        src: 'loadBrand',
        onDone: {
          target: 'pickingPlan',
          actions: assign({ brand: (context, event) => event.data }),
        },
        onError: {
          target: 'pickingBrand',
          actions: assign({ loadBrandError: (context, event) => event.data }),
        },
      },
    },
    pickingPlan: {
      on: {
        PICK_PLAN: 'pickingPayment',
      },
    },
    pickingPayment: {
      on: {
        PICK_PAYMENT: 'viewingSummary',
      },
    },
    viewingSummary: {
      on: {
        INITIATE_SUBSCRIPTION: 'initiatingSubscription',
      },
    },
    initiatingSubscription: {
      invoke: {
        src: 'dispatchInitiateSubscription',
        onDone: {
          target: 'success',
        },
        onError: {
          target: 'failure',
          actions: assign({
            initiateSubscriptionError: (context, event) => event.data,
          }),
        },
      },
    },
    failure: {},
    success: {
      entry: 'redirectToBrandDashboard',
    },
  },
});