Shopping Cart Checkout

Demo Shopping Cart Checkout.ts

// https://stately.ai/viz/7fc86d22-a6f6-4f64-a6a5-580c76cb6567

import { createMachine, assign } from "xstate";

interface Context {}

const fetchMachine = createMachine<Context>(
  {
    id: "Shopping Cart Checkout",
    initial: "SERVICE CALL",
    context: {},
    states: {
      "SERVICE CALL": {
        invoke: {
          id: "getData",
          src: "getMockData",
          onDone: {
            target: "TRANSIENT PAGE",
            actions: ["APPLICATION.REFRESH"],
          },
          onError: {
            target: "ERROR PAGE",
            actions: ["APPLICATION.REFRESH"],
          },
        },
      },
      "TRANSIENT PAGE": {
        after: {
          1500: [
            {
              target: "CART MAIN PAGE",
              actions: ["buildItemsList", "APPLICATION.REFRESH"],
            },
          ],
        },
      },
      "CART MAIN PAGE": {
        on: {
          SHIPPING: {
            target: "SHIPPING ADDRESS",
          },
        },
      },
      "SHIPPING ADDRESS": {
        on: {
          PAYMENT: {
            target: "PAYMENT_METHOD",
            actions: ["saveShippingData"],
          },
          "CART (back)": {
            target: "CART MAIN PAGE",
            actions: [],
          },
        },
      },
      PAYMENT_METHOD: {
        on: {
          CREDIT_CARD: {
            target: "CREDIT CARD DETAILS",
            actions: ["setPaymentMethod"],
          },
          PAYPAL: {
            target: "PAYPAL DETAILS",
            actions: ["setPaymentMethod"],
          },
        },
      },
      "CREDIT CARD DETAILS": {
        on: {
          BILLING: {
            target: "BILLING ADDRESS",
            actions: [],
          },
          "PAYMENT (back)": {
            target: "PAYMENT_METHOD",
            actions: [],
          },
        },
      },
      "BILLING ADDRESS": {
        on: {
          REVIEW_ORDER: {
            target: "ORDER REVIEW",
            actions: ["saveBillingData"],
          },
          "CREDIT_CARD (back)": {
            target: "CREDIT CARD DETAILS",
            actions: [],
          },
        },
      },
      "ORDER REVIEW": {
        on: {
          SUBMIT_ORDER: {
            target: "SUCCESS PAGE",
            actions: ["chargePaymentMethod", "processOrder"],
          },
          SHIPPING: {
            target: "SHIPPING ADDRESS",
            actions: [],
          },
          BILLING: {
            target: "BILLING ADDRESS",
            actions: [],
          },
          PAYMENT: {
            target: "CREDIT CARD DETAILS",
            actions: [],
          },
          ERROR: {
            target: "ERROR PAGE",
          },
        },
      },
      "PAYPAL DETAILS": {
        on: {
          "REVIEW ORDER": {
            target: "ORDER REVIEW",
            actions: [],
          },
          "PAYMENT (back)": {
            target: "PAYMENT_METHOD",
            actions: [],
          },
        },
      },
      "SUCCESS PAGE": {
        type: "final",
      },
      "ERROR PAGE": {
        on: {
          SUPPORT: "SUPPORT PAGE",
          TRY_AGAIN: {
            target: "SERVICE CALL",
            actions: [],
          },
        },
      },
      "SUPPORT PAGE": {
        type: "final",
        on: {},
      },
    },
  },
  {
    actions: {
      something: () => console.log("something"),
    },
    services: {
      getMockData: () =>
        new Promise(function (resolve) {
          setTimeout(function () {
            resolve({});
          }, 1500);
        }),
    },
    guards: {
      immediate: (context, event) => {
        return true;
      },
    },
  }
);