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

machine.js

const fetchSeller = () => Promise.resolve({ streetAddress: 'Test street' })

const sellerInformationValid = (ctx, event) => !!ctx.seller.streetAddress

const validId = () => false

const fetchMachine = Machine(
  {
    id: 'kp-form',
    initial: 'seller',
    context: {
      listingId: 1,
      seller: {},
      sellerError: null,
    },
    states: {
      seller: {
        on: {
          NEXT: [
            { target: 'payment', cond: { type: 'validId' } },
            { target: 'fetch_information' },
          ],
        },
      },
      payment: {
        on: {
          NEXT: {
            target: 'recommendation',
            cond: { type: 'sellerInformationValid' },
          },
          PREVIOUS: 'seller',
        },
      },
      fetch_information: {
        invoke: {
          id: 'getInvoiceInformation',
          src: (ctx, event) => fetchSeller(),
          onDone: {
            target: 'payment',
            actions: assign({ seller: (ctx, event) => event.data }),
          },
          onError: {
            target: 'payment',
            actions: assign({ sellerError: (ctx, event) => event.data }),
          },
        },
      },
      recommendation: {
        on: {
          NEXT: 'review',
          PREVIOUS: 'payment',
        },
      },
      review: {
        type: 'final',
      },
    },
  },
  {
    guards: {
      sellerInformationValid,
      validId,
    },
  }
)