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

machine.js

const SERVICE_CONFIRM_ORDER_FETCHER = "confirmOrderFetcher";
const ACTION_ON_ORDER_CONFIRMED = "onOrderConfirmed";
const STATE_SUBMITTING = "submitting";

// https://xstate.js.org/viz/?gist=886857c070d6f5a20bc1fd638e99192c
const confirmationMachine = Machine({
  id: "confirmation",
  initial: "editing",
  context: {},
  states: {
    editing: {
      on: {
        "products.UPDATE": {
          actions: assign({ products: (_context, event) => event.products })
        },
        SUBMIT: {
          target: STATE_SUBMITTING,
          cond: canSubmit
        }
      }
    },
    submitting: {
      invoke: {
        id: "confirmOrder",
        src: SERVICE_CONFIRM_ORDER_FETCHER,
        onDone: {
          target: "submitted",
          actions: assign({ order: (_context, event) => event.data })
        },
        onError: {
          target: "editing",
          actions: assign({ error: (_context, event) => event.data })
        }
      }
    },
    submitted: {
      entry: ACTION_ON_ORDER_CONFIRMED
    }
  }
});

function canSubmit(context) {
  if (context.order != null) {
    return false;
  }

  if (context.error != null) {
    return false;
  }

  return orderInputIsValid(context);
}

function orderInputIsValid(context) {
  return (
    context.storeId != null &&
    context.products != null &&
    context.products.length > 0
  );
}