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

machine.js

const contactPostalSendMachine = Machine(
  {
    id: 'postal',
    initial: 'postal',
    context: {
      postal: null,
      variant: null,
      messages: null
    },
    states: {
      postal: {
        on: {
          SELECT_POSTAL: {
            cond: 'hasPayload',
            actions: ['selectPostal', 'next']
          },
          NEXT: [
            { target: 'variant', cond: 'toVariant' },
            { target: 'message', cond: 'toMessage' },
            { target: 'review', cond: 'toReview' }
          ]
        }
      },
      variant: {
        on: {
          SELECT_VARIANT: {
            cond: 'hasPayload',
            actions: ['selectVariant', 'next']
          },
          BACK: 'postal',
          NEXT: [
            { target: 'message', cond: 'toMessage' },
            { target: 'review', cond: 'toReview' }
          ]
        }
      },
      message: {
        on: {
          SELECT_MESSAGE: {
            target: 'review',
            actions: ['selectMessage', 'next']
          },
          BACK: [{ target: 'variant', cond: 'toVariant' }, { target: 'postal' }],
          NEXT: { target: 'review', cond: 'toReview' }
        }
      },
      review: {
        on: {
          BACK: [
            { target: 'message', cond: 'toMessage' },
            { target: 'variant', cond: 'toVariant' },
            { target: 'postal' }
          ]
        }
      }
    }
  },
  {
    actions: {
      next: send('NEXT'),
      selectPostal: assign((_, evt) => ({
        postal: evt.payload,
        variant: evt.payload.variants.length === 1 ? evt.payload.variants[0] : null
      })),
      selectVariant: assign((_, evt) => ({
        variant: evt.payload
      })),
      selectMessage: assign((_, evt) => ({
        message: evt.payload
      }))
    },
    guards: {
      hasPayload: (_, evt) => {
        return evt?.payload
      },
      toVariant: ctx => {
        return ctx.postal?.variants.length > 1
      },
      toMessage: ctx => {
        return ctx.variant?.giftMessageSupported
      },
      toReview: ctx => {
        if (!ctx.postal || !ctx.variant) return false
        return ctx.variant.giftMessageSupported ? ctx.message : true
      }
    }
  }
)