fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/components/Cart/CartOrder.js

@@ -1,37 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _CartOrder_viewer2 = _interopRequireDefault(require("../../__generated__/CartOrder_viewer.graphql"));
-var _CartOrder_order2 = _interopRequireDefault(require("../../__generated__/CartOrder_order.graphql"));
-var _CartOrderRemoveDiscountMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderRemoveDiscountMutation.graphql"));
-var _CartOrderUpdateMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderUpdateMutation.graphql"));
-var _CartOrder_UpdateErrors2 = _interopRequireDefault(require("../../__generated__/CartOrder_UpdateErrors.graphql"));
-var _CartOrderCompleteOrderMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderCompleteOrderMutation.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _Checkout = _interopRequireDefault(require("./Checkout"));
-var _CheckoutSteps = _interopRequireDefault(require("./CheckoutSteps"));
-var _CartItem = _interopRequireDefault(require("./CartItem"));
-var _Icons = require("../Icons");
-var _Download = _interopRequireDefault(require("./Download"));
-var _CouponCodeInput = _interopRequireDefault(require("./CouponCodeInput"));
-var _EmptyCart = _interopRequireDefault(require("./EmptyCart"));
-var _IdentityBox = _interopRequireDefault(require("./IdentityBox"));
-var _CartTotals = _interopRequireDefault(require("./CartTotals"));
-var _utils = require("./utils");
-var _reactStripeJs = require("@stripe/react-stripe-js");
-var _reactRedux = require("react-redux");
-var _CartState = _interopRequireDefault(require("./CartState"));
-var _orderTracking = require("./orderTracking");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _CartOrder_viewer from "../../__generated__/CartOrder_viewer.graphql.js";
+import _CartOrder_order from "../../__generated__/CartOrder_order.graphql.js";
+import _CartOrderRemoveDiscountMutation from "../../__generated__/CartOrderRemoveDiscountMutation.graphql.js";
+import _CartOrderUpdateMutation from "../../__generated__/CartOrderUpdateMutation.graphql.js";
+import _CartOrder_UpdateErrors from "../../__generated__/CartOrder_UpdateErrors.graphql.js";
+import _CartOrderCompleteOrderMutation from "../../__generated__/CartOrderCompleteOrderMutation.graphql.js";
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
+import Checkout from './Checkout.js';
+import CheckoutSteps from './CheckoutSteps.js';
+import CartItem from './CartItem/index.js';
+import { Check, CreditCard, Receipt, License, User, X } from '../Icons/index.js';
+import Download from './Download.js';
+import CouponCodeInput from './CouponCodeInput.js';
 // @ts-ignore
-
+import EmptyCart from './EmptyCart.js';
 // @ts-ignore
+import IdentityBox from './IdentityBox.js';
+import CartTotals from './CartTotals.js';
+import { textVariablesAllHaveText } from './utils.js';
+import { useStripe } from '@stripe/react-stripe-js';
+import { useDispatch } from 'react-redux';
+import CartState from './CartState.js';
+import { sendOrderTracking } from './orderTracking.js';
 
 // note here we're only updating the order (by id).
 // careful not to update the current customer's reference
@@ -41,10 +31,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 //   want to reset the cart back to empty).
 // but here we want to keep displaying the order that they
 // just paid for
-const submitCompleteMutation = (_CartOrderCompleteOrderMutation2.default.hash && _CartOrderCompleteOrderMutation2.default.hash !== "86f8fe7e3a867ae234cb381df186c107" && console.error("The definition of 'CartOrderCompleteOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderCompleteOrderMutation2.default);
-_CartOrder_UpdateErrors2.default.hash && _CartOrder_UpdateErrors2.default.hash !== "0bc5cd4fa568238d362a545367f9c306" && console.error("The definition of 'CartOrder_UpdateErrors' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_UpdateErrors2.default;
-const orderChangeMutation = (_CartOrderUpdateMutation2.default.hash && _CartOrderUpdateMutation2.default.hash !== "9f208ec36dbea5d90eeae4574b48bd15" && console.error("The definition of 'CartOrderUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderUpdateMutation2.default);
-const removeDiscountMutation = (_CartOrderRemoveDiscountMutation2.default.hash && _CartOrderRemoveDiscountMutation2.default.hash !== "8a84a9135f1406fa9c4cc16dc2e11d30" && console.error("The definition of 'CartOrderRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderRemoveDiscountMutation2.default);
+const submitCompleteMutation = (_CartOrderCompleteOrderMutation.hash && _CartOrderCompleteOrderMutation.hash !== "86f8fe7e3a867ae234cb381df186c107" && console.error("The definition of 'CartOrderCompleteOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderCompleteOrderMutation);
+_CartOrder_UpdateErrors.hash && _CartOrder_UpdateErrors.hash !== "0bc5cd4fa568238d362a545367f9c306" && console.error("The definition of 'CartOrder_UpdateErrors' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_UpdateErrors;
+const orderChangeMutation = (_CartOrderUpdateMutation.hash && _CartOrderUpdateMutation.hash !== "9f208ec36dbea5d90eeae4574b48bd15" && console.error("The definition of 'CartOrderUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderUpdateMutation);
+const removeDiscountMutation = (_CartOrderRemoveDiscountMutation.hash && _CartOrderRemoveDiscountMutation.hash !== "8a84a9135f1406fa9c4cc16dc2e11d30" && console.error("The definition of 'CartOrderRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderRemoveDiscountMutation);
 const CartOrder = _ref => {
   var _order$stripePaymentM, _viewer$settings;
   let {
@@ -52,32 +42,32 @@ const CartOrder = _ref => {
     viewer: viewerKey,
     open
   } = _ref;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const stripe = (0, _reactStripeJs.useStripe)();
-  const dispatch = (0, _reactRedux.useDispatch)();
+  const environment = useRelayEnvironment();
+  const stripe = useStripe();
+  const dispatch = useDispatch();
 
   // Capture analytics consent + attribution on the order for the purchase
   // event the server emits on completion (from a Stripe webhook, where no
   // browser context exists).
-  (0, _react.useEffect)(() => {
-    if (open) (0, _orderTracking.sendOrderTracking)(environment);
+  useEffect(() => {
+    if (open) sendOrderTracking(environment);
   }, [open, environment]);
-  const order = (0, _reactRelay.useFragment)((_CartOrder_order2.default.hash && _CartOrder_order2.default.hash !== "25ef000c40000c4f76f973ac6ac7f593" && console.error("The definition of 'CartOrder_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_order2.default), orderKey);
-  const viewer = (0, _reactRelay.useFragment)((_CartOrder_viewer2.default.hash && _CartOrder_viewer2.default.hash !== "8cf5ab5a33a474483a6c231cc44b0df1" && console.error("The definition of 'CartOrder_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_viewer2.default), viewerKey);
+  const order = useFragment((_CartOrder_order.hash && _CartOrder_order.hash !== "25ef000c40000c4f76f973ac6ac7f593" && console.error("The definition of 'CartOrder_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_order), orderKey);
+  const viewer = useFragment((_CartOrder_viewer.hash && _CartOrder_viewer.hash !== "8cf5ab5a33a474483a6c231cc44b0df1" && console.error("The definition of 'CartOrder_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_viewer), viewerKey);
 
   // errors is from the payload, typically user errors,
   // whereas 'error' refers to schema/network/catastrophic errors
-  const [error, setError] = (0, _react.useState)(null);
-  const [errors, setErrors] = (0, _react.useState)(null);
-  const [checkingOut, setCheckingOut] = (0, _react.useState)(false);
-  const [completing, setCompleting] = (0, _react.useState)(false);
-  const [paymentError, setPaymentError] = (0, _react.useState)(null);
-  const [checkoutStep, setCheckoutStep] = (0, _react.useState)(0);
-  const [eulaAgreed, setEulaAgreed] = (0, _react.useState)(false);
-  const modal = (0, _react.useRef)(null);
+  const [error, setError] = useState(null);
+  const [errors, setErrors] = useState(null);
+  const [checkingOut, setCheckingOut] = useState(false);
+  const [completing, setCompleting] = useState(false);
+  const [paymentError, setPaymentError] = useState(null);
+  const [checkoutStep, setCheckoutStep] = useState(0);
+  const [eulaAgreed, setEulaAgreed] = useState(false);
+  const modal = useRef(null);
   const submitOrderChange = orderItems => {
     if (!orderItems) return;
-    (0, _reactRelay.commitMutation)(environment, {
+    commitMutation(environment, {
       mutation: orderChangeMutation,
       variables: {
         input: {
@@ -102,7 +92,7 @@ const CartOrder = _ref => {
   };
   const complete = () => {
     setCompleting(true);
-    (0, _reactRelay.commitMutation)(environment, {
+    commitMutation(environment, {
       mutation: submitCompleteMutation,
       variables: {},
       onCompleted: (response, errors) => {
@@ -117,7 +107,7 @@ const CartOrder = _ref => {
               setPaymentError(result.error.message);
               setCompleting(false);
               setCheckingOut(true);
-              setCheckoutStep(_CheckoutSteps.default.Payment);
+              setCheckoutStep(CheckoutSteps.Payment);
             } else {
               // re-confirm
               complete();
@@ -129,7 +119,7 @@ const CartOrder = _ref => {
           setPaymentError('We were unable to complete your payment, please re-enter your card details and try again');
           setCompleting(false);
           setCheckingOut(true);
-          setCheckoutStep(_CheckoutSteps.default.Payment);
+          setCheckoutStep(CheckoutSteps.Payment);
           return;
         }
         if (errors && errors.length > 0) {
@@ -141,7 +131,7 @@ const CartOrder = _ref => {
     });
   };
   const removeDiscount = () => {
-    (0, _reactRelay.commitMutation)(environment, {
+    commitMutation(environment, {
       mutation: removeDiscountMutation,
       variables: {},
       onCompleted: (_result, errors) => {
@@ -157,7 +147,7 @@ const CartOrder = _ref => {
     setError(null);
   };
   const validateCanSubmit = () => {
-    return eulaAgreed && (0, _utils.textVariablesAllHaveText)(order);
+    return eulaAgreed && textVariablesAllHaveText(order);
   };
   const handleScrollToTop = () => {
     if (modal.current) {
@@ -169,153 +159,153 @@ const CartOrder = _ref => {
     orderItems
   } = order;
   if (!orderItems || orderItems.length < 1) {
-    return /*#__PURE__*/_react.default.createElement(_EmptyCart.default, {
+    return /*#__PURE__*/React.createElement(EmptyCart, {
       open: open
     });
   }
   const reviewing = Boolean(order.customer && !order.customer.anonymous && order.billingIdentity && (order.licenseeIdentity || order.licenseeIsBillingIdentity) && (order.stripePaymentMethod || order.canCompleteWithCoupon));
   if (order.completedWithCoupon || order.stripePaymentIntent && order.stripePaymentIntent.status === 'succeeded') {
-    return /*#__PURE__*/_react.default.createElement(_Download.default, {
+    return /*#__PURE__*/React.createElement(Download, {
       order: order
     });
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "cart",
     "data-open": open,
     "data-eula-agreed": eulaAgreed
-  }, open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, open && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "cart__scroller"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__top"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__nav"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     className: "cart__nav__back",
     type: "button",
     onClick: () => dispatch({
       type: 'CLOSE_CART'
     })
-  }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement(X, null)), /*#__PURE__*/React.createElement("div", {
     className: "cart__nav__title"
-  }, "Your cart")), (order.customer || order.billingIdentity || order.licenseeIdentity || order.stripePaymentMethod) && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Your cart")), (order.customer || order.billingIdentity || order.licenseeIdentity || order.stripePaymentMethod) && /*#__PURE__*/React.createElement("div", {
     className: "cart__review"
-  }, order.billingIdentity && /*#__PURE__*/_react.default.createElement(_IdentityBox.default, {
+  }, order.billingIdentity && /*#__PURE__*/React.createElement(IdentityBox, {
     identity: order.billingIdentity,
     title: "Billing information",
-    onClick: () => openCheckoutStep(_CheckoutSteps.default.Billing)
+    onClick: () => openCheckoutStep(CheckoutSteps.Billing)
   }, {
-    icon: /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null)
-  }), order.licenseeIdentity && /*#__PURE__*/_react.default.createElement(_IdentityBox.default, {
+    icon: /*#__PURE__*/React.createElement(Receipt, null)
+  }), order.licenseeIdentity && /*#__PURE__*/React.createElement(IdentityBox, {
     identity: order.licenseeIdentity,
     title: "Licensee information",
-    onClick: () => openCheckoutStep(_CheckoutSteps.default.Licensee)
+    onClick: () => openCheckoutStep(CheckoutSteps.Licensee)
   }, {
-    icon: /*#__PURE__*/_react.default.createElement(_Icons.License, null)
-  }), order.customer && !order.customer.anonymous && /*#__PURE__*/_react.default.createElement("button", {
+    icon: /*#__PURE__*/React.createElement(License, null)
+  }), order.customer && !order.customer.anonymous && /*#__PURE__*/React.createElement("button", {
     className: "cart__review__button cart__review__user-info",
     type: "button",
-    onClick: () => openCheckoutStep(_CheckoutSteps.default.Customer)
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => openCheckoutStep(CheckoutSteps.Customer)
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__review__label"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.User, null), " Contact information", ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement(User, null), " Contact information", ' ', /*#__PURE__*/React.createElement("span", {
     className: "cart__review__label__text"
-  }, "Edit")), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Edit")), /*#__PURE__*/React.createElement("div", {
     className: "cart__review__section"
-  }, order.customer.name), /*#__PURE__*/_react.default.createElement("div", {
+  }, order.customer.name), /*#__PURE__*/React.createElement("div", {
     className: "cart__review__section"
-  }, order.customer.email)), order.stripePaymentMethod && /*#__PURE__*/_react.default.createElement("button", {
+  }, order.customer.email)), order.stripePaymentMethod && /*#__PURE__*/React.createElement("button", {
     className: "cart__review__button cart__review__credit-info",
     type: "button",
-    onClick: () => openCheckoutStep(_CheckoutSteps.default.Payment)
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => openCheckoutStep(CheckoutSteps.Payment)
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__review__label"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CreditCard, null), " Payment", ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement(CreditCard, null), " Payment", ' ', /*#__PURE__*/React.createElement("span", {
     className: "cart__review__label__text"
-  }, "Edit")), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Edit")), /*#__PURE__*/React.createElement("div", {
     className: "cart__review__section"
-  }, "\u2013\u2013\u2013\u2013\u2013\u2013 \u2013\u2013\u2013\u2013\u2013\u2013 ", (_order$stripePaymentM = order.stripePaymentMethod.card) === null || _order$stripePaymentM === void 0 ? void 0 : _order$stripePaymentM.last4)))), (error || errors) && /*#__PURE__*/_react.default.createElement("div", {
+  }, "\u2013\u2013\u2013\u2013\u2013\u2013 \u2013\u2013\u2013\u2013\u2013\u2013 ", (_order$stripePaymentM = order.stripePaymentMethod.card) === null || _order$stripePaymentM === void 0 ? void 0 : _order$stripePaymentM.last4)))), (error || errors) && /*#__PURE__*/React.createElement("div", {
     className: "cart__error"
-  }, "There was a problem with your order.", ' ', /*#__PURE__*/_react.default.createElement("button", {
+  }, "There was a problem with your order.", ' ', /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: clearError,
     className: "cart__error__button"
-  }, "Click here"), ' ', "to empty your cart and continue shopping."), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Click here"), ' ', "to empty your cart and continue shopping."), /*#__PURE__*/React.createElement("div", {
     className: "cart__middle"
-  }, /*#__PURE__*/_react.default.createElement(_CartState.default, {
+  }, /*#__PURE__*/React.createElement(CartState, {
     order: order
   }, _ref2 => {
     let {
       onUpdateOrderItem
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orderItems.map((item, i) => /*#__PURE__*/_react.default.createElement(_CartItem.default, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, orderItems.map((item, i) => /*#__PURE__*/React.createElement(CartItem, {
       key: i,
       node: item,
       onChange: onUpdateOrderItem
     })));
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "cart__bottom"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__bottom__wrapper"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__price-blocks-and-agreement"
-  }, /*#__PURE__*/_react.default.createElement(_CartTotals.default, {
+  }, /*#__PURE__*/React.createElement(CartTotals, {
     order: order,
     onRemoveDiscount: removeDiscount
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-agreement",
     "data-highlighted": !eulaAgreed && reviewing
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "checkbox"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: "eula-agreement",
     checked: eulaAgreed,
     onChange: e => setEulaAgreed(e.target.checked)
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "checkbox__icon"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null))), /*#__PURE__*/_react.default.createElement("label", {
+  }, /*#__PURE__*/React.createElement(Check, null))), /*#__PURE__*/React.createElement("label", {
     htmlFor: "eula-agreement",
     dangerouslySetInnerHTML: {
       __html: ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.eulaAgreementLabel) ?? ''
     }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "cart__additions"
-  }, !order.discount && /*#__PURE__*/_react.default.createElement("div", {
+  }, !order.discount && /*#__PURE__*/React.createElement("div", {
     className: "cart__coupon-input"
-  }, /*#__PURE__*/_react.default.createElement(_CouponCodeInput.default, null))), reviewing ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CouponCodeInput, null))), reviewing ? /*#__PURE__*/React.createElement("div", {
     className: "cart__checkout-button"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     onClick: complete,
     disabled: completing || !validateCanSubmit(),
     "data-label": "submit",
     type: "button",
     "data-highlighted": true
-  }, completing ? 'Submitting...' : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, order.canCompleteWithCoupon ? 'Complete order using coupon' : 'Submit payment', /*#__PURE__*/_react.default.createElement("span", {
+  }, completing ? 'Submitting...' : /*#__PURE__*/React.createElement(Fragment, null, order.canCompleteWithCoupon ? 'Complete order using coupon' : 'Submit payment', /*#__PURE__*/React.createElement("span", {
     className: "submit-button__arrow"
-  }, ' →')))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, ' →')))) : /*#__PURE__*/React.createElement("div", {
     className: "cart__checkout-button"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     onClick: openCheckout,
     type: "button"
-  }, "Proceed", requiresCheckout() && ' to checkout', /*#__PURE__*/_react.default.createElement("span", {
+  }, "Proceed", requiresCheckout() && ' to checkout', /*#__PURE__*/React.createElement("span", {
     className: "submit-button__arrow"
-  }, ' →'))))), /*#__PURE__*/_react.default.createElement("div", {
+  }, ' →'))))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: checkingOut ? 'initial' : 'none'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "checkout-modal"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "checkout-modal__click-out",
     onClick: closeCheckout
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "checkout-modal__modal",
     ref: modal
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "checkout-modal__form"
-  }, /*#__PURE__*/_react.default.createElement(_Checkout.default, {
+  }, /*#__PURE__*/React.createElement(Checkout, {
     viewer: viewer,
     order: order,
     error: paymentError,
@@ -326,5 +316,4 @@ const CartOrder = _ref => {
     onScrollToTop: handleScrollToTop
   }))))))));
 };
-var _default = CartOrder;
-exports.default = _default;
+export default CartOrder;

package/dist/components/Cart/CartState.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { OrderVariableSelectionInput } from '../../__generated__/CartStateUpdateMutation.graphql';
-import { CartState_order$key } from '../../__generated__/CartState_order.graphql';
-import { CartItemChangeInput } from './types';
+import { OrderVariableSelectionInput } from '../../__generated__/CartStateUpdateMutation.graphql.js';
+import { CartState_order$key } from '../../__generated__/CartState_order.graphql.js';
+import { CartItemChangeInput } from './types.js';
 interface CartStateProps {
     order: CartState_order$key;
     children: (props: {

package/dist/components/Cart/CartState.js

@@ -1,28 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CartState;
-var _CartState_order2 = _interopRequireDefault(require("../../__generated__/CartState_order.graphql"));
-var _CartStateRemoveDiscountMutation2 = _interopRequireDefault(require("../../__generated__/CartStateRemoveDiscountMutation.graphql"));
-var _CartStateUpdateMutation2 = _interopRequireDefault(require("../../__generated__/CartStateUpdateMutation.graphql"));
-var _react = require("react");
-var _reactRelay = require("react-relay");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const orderChangeMutation = (_CartStateUpdateMutation2.default.hash && _CartStateUpdateMutation2.default.hash !== "07a639cd3bfbfa0d797f6b8380603859" && console.error("The definition of 'CartStateUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateUpdateMutation2.default);
-const removeDiscountMutation = (_CartStateRemoveDiscountMutation2.default.hash && _CartStateRemoveDiscountMutation2.default.hash !== "bdcfcd6638660e83a61555dcd1786886" && console.error("The definition of 'CartStateRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateRemoveDiscountMutation2.default);
-function CartState(_ref) {
+import _CartState_order from "../../__generated__/CartState_order.graphql.js";
+import _CartStateRemoveDiscountMutation from "../../__generated__/CartStateRemoveDiscountMutation.graphql.js";
+import _CartStateUpdateMutation from "../../__generated__/CartStateUpdateMutation.graphql.js";
+import { useCallback, useState } from 'react';
+import { commitMutation, graphql, useRelayEnvironment, useFragment } from 'react-relay';
+const orderChangeMutation = (_CartStateUpdateMutation.hash && _CartStateUpdateMutation.hash !== "07a639cd3bfbfa0d797f6b8380603859" && console.error("The definition of 'CartStateUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateUpdateMutation);
+const removeDiscountMutation = (_CartStateRemoveDiscountMutation.hash && _CartStateRemoveDiscountMutation.hash !== "bdcfcd6638660e83a61555dcd1786886" && console.error("The definition of 'CartStateRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateRemoveDiscountMutation);
+export default function CartState(_ref) {
   let {
     order: orderKey,
     children
   } = _ref;
-  const order = (0, _reactRelay.useFragment)((_CartState_order2.default.hash && _CartState_order2.default.hash !== "43fd3d7af7ffe0b50a192674fde8286c" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order2.default), orderKey);
-  const [error, setError] = (0, _react.useState)(null);
-  const [errors, setErrors] = (0, _react.useState)(null);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const handleUpdateOrder = (0, _react.useCallback)(input => {
-    (0, _reactRelay.commitMutation)(environment, {
+  const order = useFragment((_CartState_order.hash && _CartState_order.hash !== "43fd3d7af7ffe0b50a192674fde8286c" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order), orderKey);
+  const [error, setError] = useState(null);
+  const [errors, setErrors] = useState(null);
+  const environment = useRelayEnvironment();
+  const handleUpdateOrder = useCallback(input => {
+    commitMutation(environment, {
       mutation: orderChangeMutation,
       variables: {
         input
@@ -39,8 +32,8 @@ function CartState(_ref) {
       }
     });
   }, [environment, order]);
-  const handleRemoveDiscount = (0, _react.useCallback)(() => {
-    (0, _reactRelay.commitMutation)(environment, {
+  const handleRemoveDiscount = useCallback(() => {
+    commitMutation(environment, {
       mutation: removeDiscountMutation,
       variables: {},
       onCompleted: (_result, error) => {
@@ -50,7 +43,7 @@ function CartState(_ref) {
       }
     });
   }, [environment]);
-  const handleUpdateOrderItem = (0, _react.useCallback)(item => {
+  const handleUpdateOrderItem = useCallback(item => {
     // Handle CartItemChangeInput to maintain backward compatibility
     const newItem = item;
     const orderItems = (order.orderItems || []).reduce((res, item) => {
@@ -80,7 +73,7 @@ function CartState(_ref) {
       orderItems
     });
   }, [order.orderItems]);
-  const handleUpdateOrderVariableSelections = (0, _react.useCallback)(variables => {
+  const handleUpdateOrderVariableSelections = useCallback(variables => {
     handleUpdateOrder({
       orderVariableSelections: variables
     });

package/dist/components/Cart/CartTotals.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CartTotals_order$key } from '../../__generated__/CartTotals_order.graphql';
+import { CartTotals_order$key } from '../../__generated__/CartTotals_order.graphql.js';
 interface CartTotalsProps {
     order: CartTotals_order$key;
     onRemoveDiscount?: () => void;

package/dist/components/Cart/CartTotals.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CartTotals;
-var _CartTotals_order2 = _interopRequireDefault(require("../../__generated__/CartTotals_order.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _relayRuntime = require("relay-runtime");
-var _Price = _interopRequireDefault(require("../Price"));
-var _CouponText = _interopRequireDefault(require("../CouponText"));
-var _Icons = require("../Icons");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _CartTotals_order from "../../__generated__/CartTotals_order.graphql.js";
+import React from 'react';
+import { useFragment } from 'react-relay';
+import { graphql } from 'relay-runtime';
+import Price from '../Price/index.js';
+import CouponText from '../CouponText/index.js';
+import { X } from '../Icons/index.js';
 function percentage(decimalValue) {
   if (!decimalValue) return null;
   return `${parseFloat(decimalValue) * 100}%`;
@@ -25,19 +18,19 @@ function PriceBlock(_ref) {
     invert,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: "cart__price-block",
     "data-label": label
-  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__label"
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__price"
-  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+  }, /*#__PURE__*/React.createElement(Price, {
     price: price,
     invert: invert
   }), belowPrice));
 }
-function CartTotals(_ref2) {
+export default function CartTotals(_ref2) {
   let {
     order: orderKey,
     onRemoveDiscount,
@@ -45,55 +38,55 @@ function CartTotals(_ref2) {
     billingIdentity,
     taxSystem
   } = _ref2;
-  const order = (0, _reactRelay.useFragment)((_CartTotals_order2.default.hash && _CartTotals_order2.default.hash !== "aee2e882d4d0d063fd4eaf6cb43485db" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order2.default), orderKey);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  const order = useFragment((_CartTotals_order.hash && _CartTotals_order.hash !== "aee2e882d4d0d063fd4eaf6cb43485db" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order), orderKey);
+  return /*#__PURE__*/React.createElement("div", {
     className: "cart__price-blocks",
     "data-has-discount": Boolean(order.discount)
-  }, /*#__PURE__*/_react.default.createElement(PriceBlock, {
+  }, /*#__PURE__*/React.createElement(PriceBlock, {
     label: "Subtotal",
     price: order.subtotal,
     "data-line": "subtotal"
-  }), order.discount && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PriceBlock, {
+  }), order.discount && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PriceBlock, {
     label: "Discount applied",
     price: order.discount.amount,
     invert: true,
-    belowPrice: allowDiscountRemoval && /*#__PURE__*/_react.default.createElement("button", {
+    belowPrice: allowDiscountRemoval && /*#__PURE__*/React.createElement("button", {
       title: "Remove discount",
       type: "button",
       onClick: onRemoveDiscount,
       className: "cart__remove-discount-button"
-    }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)),
+    }, /*#__PURE__*/React.createElement(X, null)),
     "data-line": "discount"
-  }), order.discount.coupon && /*#__PURE__*/_react.default.createElement("p", {
+  }), order.discount.coupon && /*#__PURE__*/React.createElement("p", {
     className: "cart__coupon-text"
-  }, '(', /*#__PURE__*/_react.default.createElement(_CouponText.default, {
+  }, '(', /*#__PURE__*/React.createElement(CouponText, {
     coupon: order.discount.coupon,
     subtract: order.discount.amount ? order.discount.amount.amount : 0
-  }), ')'), /*#__PURE__*/_react.default.createElement(PriceBlock, {
+  }), ')'), /*#__PURE__*/React.createElement(PriceBlock, {
     label: "Discounted subtotal",
     price: order.discountedSubtotal,
     "data-line": "discounted-subtotal"
-  })), taxSystem !== 'none' && /*#__PURE__*/_react.default.createElement("div", {
+  })), taxSystem !== 'none' && /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block",
     "data-line": "taxes"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__label"
-  }, order.taxNotApplicable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, order.taxName ?? 'VAT', " not applicable", order.taxNotApplicableReason && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
+  }, order.taxNotApplicable ? /*#__PURE__*/React.createElement(React.Fragment, null, order.taxName ?? 'VAT', " not applicable", order.taxNotApplicableReason && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
     className: "cart__price-block__placeholder"
-  }, order.taxNotApplicableReason))) : order.taxes && order.taxName ? `${order.taxName} (${percentage(order.taxRate)})` : 'Tax'), /*#__PURE__*/_react.default.createElement("div", {
+  }, order.taxNotApplicableReason))) : order.taxes && order.taxName ? `${order.taxName} (${percentage(order.taxRate)})` : 'Tax'), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__price"
-  }, order.taxes ? /*#__PURE__*/_react.default.createElement(_Price.default, {
+  }, order.taxes ? /*#__PURE__*/React.createElement(Price, {
     price: order.taxes
-  }) : taxSystem === 'stripe' || taxSystem === 'fontdue' && !billingIdentity ? /*#__PURE__*/_react.default.createElement("span", {
+  }) : taxSystem === 'stripe' || taxSystem === 'fontdue' && !billingIdentity ? /*#__PURE__*/React.createElement("span", {
     className: "cart__price-block__placeholder"
-  }, "Calculated at checkout") : '-')), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Calculated at checkout") : '-')), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block",
     "data-line": "total"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__label"
-  }, "Total", order.gstIncluded ? ' including GST' : ''), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Total", order.gstIncluded ? ' including GST' : ''), /*#__PURE__*/React.createElement("div", {
     className: "cart__price-block__price"
-  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+  }, /*#__PURE__*/React.createElement(Price, {
     price: order.total
   }))));
 }