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

machine.js

const saveOrder = assign({
  order: (context, event) => {
    console.log('ev', event);
    return event.data;
  },
});
function hasCustomer(context, event) {
  console.log('event', event);
  console.log('order', context.order);
  return context.order.customer_email != null;
}

const checkoutMachine = Machine(
  {
    id: 'checkout',
    initial: 'fetch_order',
    context: {
      order: null,
    },
    states: {
      fetch_order: {
        on: {
          RECEIVED: [
            {
              target: 'choose_address',
              actions: saveOrder,
              cond: hasCustomer,
            },
            {
              target: 'create_address',
              actions: saveOrder,
            },
          ],
        },
      },
      create_address: {
        on: {
          DONE: 'choose_address',
          actions: saveOrder,
        },
      },
      choose_address: {
        on: {
          DONE: {
            target: 'choose_payment',
            actions: saveOrder,
          },
          NEW: 'create_address',
        },
      },
      choose_payment: {
        on: {
          DONE: {
            target: 'payment',
            actions: saveOrder,
          },
        },
      },
      payment: {
        on: {
          DONE: {
            target: 'place',
            actions: saveOrder,
          },
          CHANGE: 'choose_payment',
        },
      },
      place: {
        type: 'final',
      },
    },
  },

  {
    actions: {
      saveOrder,
    },

    guards: {
      hasCustomer,
    },
  }
);