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

machine.js

const isAuthenticated = true


const machine = Machine({
    id: "checkout",
    initial: "emailAndAddress",
    context: {
      isAuthenticated,
      addresses: [],
      paymentMethods: [],
      saving: undefined,
      paying: undefined,
      error: undefined,
    },
    states: {
      emailAndAddress: {
        initial: "initial",
        states: {
          initial: {
            on: {
              "": [
                {
                  target: "fetchingAddresses",
                  cond: (context, event) => context.isAuthenticated,
                },
                {
                  target: "idle",
                },
              ],
            },
          },
          fetchingAddresses: {
            invoke: {
              id: "fetchingAddresses",
              src: (context, event) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve([{ city: "SD" }]);
                  }, 500);
                });
              },
              onDone: {
                target: "idle",
                actions: assign({ addresses: (context, event) => event.data }),
              },
              onError: {
                target: "fetchingAddressesFailed",
                actions: assign({ error: (context, event) => event.data }),
              },
            },
          },
          fetchingAddressesFailed: {
            on: {
              RETRY: "fetchingAddresses",
            },
          },
          idle: {
            on: {
              SAVE: "saving",
            },
          },
          saving: {
            invoke: {
              id: "savingEmailAndAddress",
              src: (context, event) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve(123);
                  }, 500);
                });
              },
              onDone: {
                target: "#checkout.billing",
                actions: assign({ saving: (context, event) => event.data }),
              },
              onError: {
                target: "savingFailed",
                actions: assign({ error: (context, event) => event.data }),
              },
            },
          },
          savingFailed: {
            on: {
              SAVE: "saving",
            },
          },
        },
      },

      billing: {
        on: {
          BACK: "emailAndAddress",
        },
        initial: "initial",
        states: {
          initial: {
            on: {
              "": [
                {
                  target: "fetchingPaymentMethods",
                  cond: (context, event) => context.isAuthenticated,
                },
                {
                  target: "idle",
                },
              ],
            },
          },
          fetchingPaymentMethods: {
            invoke: {
              id: "fetchingPaymentMethods",
              src: (context, event) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve([{ method: "Some Method" }]);
                  }, 500);
                });
              },
              onDone: {
                target: "idle",
                actions: assign({
                  paymentMethods: (context, event) => event.data,
                }),
              },
              onError: {
                target: "fetchingPaymentMethodsFailed",
                actions: assign({ error: (context, event) => event.data }),
              },
            },
          },
          fetchingPaymentMethodsFailed: {
            on: {
              RETRY: "fetchingPaymentMethods",
            },
          },
          idle: {
            on: {
              PAY: "paying",
            },
          },
          paying: {
            invoke: {
              id: "paying",
              src: (context, event) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve(123);
                  }, 500);
                });
              },
              onDone: {
                target: "#checkout.thankYou",
                actions: assign({ paying: (context, event) => event.data }),
              },
              onError: {
                target: "payingFailed",
                actions: assign({ error: (context, event) => event.data }),
              },
            },
          },
          payingFailed: {
            on: {
              PAY: "paying",
            },
          },
        },
      },

      thankYou: {
        type: "final",
      },
    },
  });