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

machine.js

const machine = {
  id: "checkoutMachine",
  context: {
    contact: {
      email: undefined
    },
    shipInfo: {
      street: undefined,
      country: undefined,
      province: undefined,
      city: undefined,
      postalCode: undefined
    },
    shippingMethod: undefined,
    creditCard: {
      number: undefined,
      name: undefined,
      expiry: undefined,
      verification_value: undefined
    }
  },
  initial: "information",
  states: {
    information: {
      on: {
        CONTACT: {
          actions: assign({ contact: { email: "foo@bar.com" } })
        },
        SHIPPING_INFO: {
          actions: assign({
            shipInfo: {
              street: "43 kennedy ave.",
              country: "Canada",
              province: "Ontario",
              city: "Toronto",
              postalCode: "M6X 2S6"
            }
          })
        },
        NEXT_STEP: {
          target: "shipping",
          cond: (context, event) => {
            return Boolean(
              context.contact.email && context.shipInfo.postalCode
            );
          }
        }
      }
    },
    shipping: {
      id: "fetch",
      initial: "loading",
      context: {
        data: undefined,
        error: undefined
      },
      states: {
        loading: {
          invoke: [
            {
              src: context =>
                new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve();
                  }, 1000);
                }),
              onDone: {
                target: "success",
                actions: assign({
                  data: (ctx, event) =>
                    (ctx.deliveryOptions = [
                      { name: "Free Shipping" },
                      { name: "Standard Shipping" }
                    ])
                })
              },
              onError: {
                target: "failure",
                actions: assign({
                  error: (ctx, event) => event.data
                })
              }
            }
          ]
        },
        success: {
          entry: "notifySuccess",
          type: "final"
        },
        failure: {
          on: {
            RETRY: "loading"
          }
        }
      },
      on: {
        SHIPPING_METHOD: {
          actions: assign({
            shippingMethod: "UPS"
          }),
          cond: (context, event) => {
            return Boolean(context.deliveryOptions);
          }
        },
        NEXT_STEP: {
          target: "payment",
          cond: (context, event) => {
            return Boolean(context.shippingMethod);
          }
        }
      }
    },
    payment: {
      on: {
        CREDIT_CARD: {
          actions: assign({
            creditCard: {
              number: "111 111 111 111",
              name: "Antoine Grant",
              expiry: "11/21",
              verification_value: "111"
            }
          })
        },
        NEXT_STEP: {
          target: "thankYou",
          cond: (context, event) => {
            return Boolean(
              context.creditCard.number &&
                context.creditCard.name &&
                context.creditCard.expiry &&
                context.creditCard.verification_value
            );
          }
        }
      }
    },
    thankYou: {
      type: "final"
    }
  }
};

const checkoutMachine = Machine(machine);