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

machine.js

// @TODO: Handle US Taxes
// @TODO: Handle Abandoned Checkout
// @TODO: Handle guest checkout
// @TODO: What/when do we tell PayPal when a gift card is redeemed?
// @TODO: What/when do we tell PayPal when a coupon code is redeemed?
// @TODO: Handle when to mount and unmount the paypal library/iframe safely
// @TODO: Include how we handle errors
// @TODO: What side-effects do we need to fire and when?
// @TODO: What response data do we need to store from requests and when?
// @TODO: Loqate?
// @TODO: Redeeming Coupons - this can be done at any stage of checkout
// @TODO: Web analytics driven by the machine
// @TODO: How does "Save address for later" work?

const createMockMachine = (id) =>
  Machine({
    id,
    initial: 'pending',
    states: {
      pending: {
        on: {
          COMPLETE: 'completed',
        },
      },
      completed: {
        type: 'final',
      },
    },
  });

const checkoutMachine = Machine(
  {
    id: 'checkout',
    type: 'parallel',
    context: {
      formData: {
        shippingAddress: {},
        billingAddress: {},
        shippingMethod: {},
        paymentDetails: {},
      },
    },
    states: {
      paymentFlow: {
        initial: 'choosePaymentMethod',
        states: {
          choosePaymentMethod: {
            on: {
              BANK_CARD: 'bankCard',
              PAYPAL: 'payPal',
              STRIPE: 'stripe',
            },
          },
          bankCard: {
            initial: 'setShippingAddress',
            states: {
              setShippingAddress: {
                invoke: {
                  src: 'shippingAddress',
                  onDone: 'setBillingAddress',
                },
              },
              setBillingAddress: {
                invoke: {
                  src: 'billingAddress',
                  onDone: 'setShippingMethod',
                },
              },
              setShippingMethod: {
                invoke: {
                  src: 'shippingMethod',
                  onDone: 'setPaymentDetails',
                },
              },
              setPaymentDetails: {
                invoke: {
                  src: 'paymentDetails',
                  onDone: 'reviewAndComplete',
                },
              },
              reviewAndComplete: {
                on: {
                  SUBMIT_ORDER: 'completed',
                },
              },
              completed: {
                type: 'final',
              },
            },
          },
          payPal: {
            initial: 'userCreatingOrderAtPayPalDotCom',
            states: {
              userCreatingOrderAtPayPalDotCom: {
                invoke: {
                  src: 'createPayPalOrder',
                  onDone: {
                    actions: 'storeResponseDataFromCreatingOrderAtPayPal',
                    target: 'setShippingMethod',
                  },
                },
              },
              setShippingMethod: {
                invoke: {
                  src: 'shippingMethod',
                  onDone: 'sendUpdatedCheckoutTotalIncludingShippingMethodCostToPaypal',
                },
              },
              sendUpdatedCheckoutTotalIncludingShippingMethodCostToPaypal: {
                invoke: {
                  src: 'sendUpdatedCheckoutTotalIncludingShippingMethodCostToPaypal',
                  onDone: 'reviewAndComplete',
                },
              },
              reviewAndComplete: {
                on: {
                  SUBMIT_ORDER: 'completed',
                },
              },
              completed: {
                type: 'final',
              },
            },
          },
          stripe: {
            initial: 'userCompletingCheckoutUsingStripe',
            states: {
              userCompletingCheckoutUsingStripe: {
                invoke: {
                  src: 'userCompletingCheckoutUsingStripe',
                  onDone: {
                    actions: 'storeResponseDataFromCompletingCheckoutAtStripe',
                    target: 'reviewAndComplete',
                  },
                },
              },
              reviewAndComplete: {
                on: {
                  SUBMIT_ORDER: 'completed',
                },
              },
              completed: {
                type: 'final',
              },
            },
          },
          orderConfirmation: {
            id: 'orderConfirmation',
            type: 'final',
          },
        },
      },
      promoCodes: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              REDEEM_PROMO_CODE: 'sending',
            },
          },
          sending: {
            src: 'redeemPromoCode',
            onDone: {
              actions: 'storeResponseDataFromRedeemingCoupon',
              target: 'idle',
            },
          },
        },
      },
      giftCards: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              REDEEM_GIFT_CARD: 'sending',
            },
          },
          sending: {
            src: 'redeemGiftCard',
            onDone: {
              actions: 'storeResponseDataFromRedeemingGiftCard',
              target: 'idle',
            },
          },
        },
      },
    },
  },
  {
    actions: {
      storeResponseDataFromCreatingOrderAtPayPal() {
        window.alert('@TODO: Store Shipping/Billing Address(/What Else?) from PayPal');
      },
      storeResponseDataFromCompletingCheckoutAtStripe() {
        window.alert('@TODO: Store What from Stripe?');
      },
      storeResponseDataFromRedeemingCoupon() {
        window.alert('@TODO: Store What from Redeeming a Coupon?');
      },
      storeResponseDataFromRedeemingGiftCard() {
        window.alert('@TODO: Store What from Redeeming a Gift Card?');
      },
    },
    services: {
      // updatePayPalOrderTotal
      // authorizePayPalOrder
      // authorizePayPalAndCreateOrder
      // createPaymentIntent
      // confirmPaymentIntent
      // deleteCouponCode
      // fetchShippingMethods
      // setCartItemsCount
      // manualSetShippingMethod
      billingAddress: createMockMachine('billingAddress'),
      createPayPalOrder: createMockMachine('createPayPalOrder'),
      paymentDetails: createMockMachine('paymentDetails'),
      redeemPromoCode: createMockMachine('redeemPromoCode'),
      redeemGiftCard: createMockMachine('redeemGiftCard'),
      sendUpdatedCheckoutTotalIncludingShippingMethodCostToPaypal: createMockMachine(
        'sendUpdatedCheckoutTotalIncludingShippingMethodCostToPaypal'
      ),
      shippingAddress: createMockMachine('shippingAddress'),
      shippingMethod: createMockMachine('shippingMethod'),
      userCompletingCheckoutUsingStripe: createMockMachine('userCompletingCheckoutUsingStripe'),
    },
  }
);