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

machine.js

const submitMachine = Machine(
  {
    initial: "idle",
    context: {
      orderCode: "some"
    },
    states: {
      idle: {
        on: {
          SUBMIT: [
            { target: "updating", cond: "orderIsCreated" },
            { target: "creating" }
          ]
        }
      },
      creating: {
        invoke: {
          id: "create-order",
          src: "invokeCreateOrder",
          onDone: "created",
          onError: "create_failed"
        }
      },
      create_failed: {
        on: {
          RETRY: "creating"
        }
      },
      created: {
        on: {
          SUBMIT: "updating"
        }
      },
      updating: {
        invoke: {
          id: "update-order",
          src: "invokeUpdateOrder",
          onDone: "updated",
          onError: "update_failed"
        }
      },
      update_failed: {
        on: {
          RETRY: "updating"
        }
      },
      updated: {
        on: {
          SUBMIT: "updating"
        }
      }
    }
  },
  {
    guards: {
      orderIsCreated: context => context.orderCode !== undefined
    },
    services: {
      invokeCreateOrder: () =>
        new Promise((resolve, reject) =>
          setTimeout(() => {
            Math.floor(Math.random() * 10) % 2 === 0
              ? resolve({
                  orderCode: String(Math.floor(Math.random() * 10000))
                })
              : reject("fail to create order");
          }, 500)
        ),
      invokeUpdateOrder: () =>
        new Promise((resolve, reject) =>
          setTimeout(() => {
            Math.floor(Math.random() * 10) % 2 === 0
              ? resolve()
              : reject("fail to update order");
          }, 500)
        )
    }
  }
);