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

machine.js

// @TODO: handle US Taxes
// @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',
    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',
                },
              },
            },
          },
          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',
                },
              },
            },
          },
          stripe: {
            initial: 'userCompletingCheckoutUsingStripe',
            states: {
              userCompletingCheckoutUsingStripe: {
                invoke: {
                  src: 'userCompletingCheckoutUsingStripe',
                  onDone: {
                    actions: 'storeResponseDataFromCompletingCheckoutAtStripe',
                    target: '#reviewAndComplete',
                  },
                },
              },
            },
          },
          reviewAndComplete: {
            id: 'reviewAndComplete',
            on: {
              SUBMIT_ORDER: 'completed',
            },
          },
          completed: {
            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: {
      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'),
    },
  }
);

/*
invoke: {
  id: 'sendLogin',
  src: 'sendLogin',
  onError: {
    actions: 'setLoginError',
    target: 'apiError',
  },
  onDone: {
    target: 'complete',
  },
},
*/