fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/Cart/CartTotals.js

@@ -0,0 +1,97 @@
+"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); }
+function percentage(decimalValue) {
+  if (!decimalValue) return null;
+  return `${parseFloat(decimalValue) * 100}%`;
+}
+function PriceBlock({
+  label,
+  belowPrice,
+  price,
+  invert,
+  ...rest
+}) {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: "cart__price-block",
+    "data-label": label
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block__label"
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block__price"
+  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: price,
+    invert: invert
+  }), belowPrice));
+}
+function CartTotals({
+  order: orderKey,
+  onRemoveDiscount,
+  allowDiscountRemoval = true,
+  billingIdentity,
+  taxSystem
+}) {
+  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", {
+    className: "cart__price-blocks",
+    "data-has-discount": Boolean(order.discount)
+  }, /*#__PURE__*/_react.default.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, {
+    label: "Discount applied",
+    price: order.discount.amount,
+    invert: true,
+    belowPrice: allowDiscountRemoval && /*#__PURE__*/_react.default.createElement("button", {
+      title: "Remove discount",
+      type: "button",
+      onClick: onRemoveDiscount,
+      className: "cart__remove-discount-button"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)),
+    "data-line": "discount"
+  }), order.discount.coupon && /*#__PURE__*/_react.default.createElement("p", {
+    className: "cart__coupon-text"
+  }, '(', /*#__PURE__*/_react.default.createElement(_CouponText.default, {
+    coupon: order.discount.coupon,
+    subtract: order.discount.amount ? order.discount.amount.amount : 0
+  }), ')'), /*#__PURE__*/_react.default.createElement(PriceBlock, {
+    label: "Discounted subtotal",
+    price: order.discountedSubtotal,
+    "data-line": "discounted-subtotal"
+  })), taxSystem !== 'none' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block",
+    "data-line": "taxes"
+  }, /*#__PURE__*/_react.default.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", {
+    className: "cart__price-block__placeholder"
+  }, order.taxNotApplicableReason))) : order.taxes && order.taxName ? `${order.taxName} (${percentage(order.taxRate)})` : 'Tax'), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block__price"
+  }, order.taxes ? /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: order.taxes
+  }) : taxSystem === 'stripe' || taxSystem === 'fontdue' && !billingIdentity ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "cart__price-block__placeholder"
+  }, "Calculated at checkout") : '-')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block",
+    "data-line": "total"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block__label"
+  }, "Total", order.gstIncluded ? ' including GST' : ''), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-block__price"
+  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: order.total
+  }))));
+}

package/dist-cjs/components/Cart/Checkout.js

@@ -0,0 +1,473 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Checkout_viewer2 = _interopRequireDefault(require("../../__generated__/Checkout_viewer.graphql"));
+var _Checkout_order2 = _interopRequireDefault(require("../../__generated__/Checkout_order.graphql"));
+var _CheckoutUpdateOrderMutation2 = _interopRequireDefault(require("../../__generated__/CheckoutUpdateOrderMutation.graphql"));
+var _Checkout_UpdateOrderErrors2 = _interopRequireDefault(require("../../__generated__/Checkout_UpdateOrderErrors.graphql"));
+var _CheckoutUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/CheckoutUpdateCustomerMutation.graphql"));
+var _Checkout_identity2 = _interopRequireDefault(require("../../__generated__/Checkout_identity.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactStripeJs = require("@stripe/react-stripe-js");
+var _Icons = require("../Icons");
+var _AddressFields = _interopRequireDefault(require("./AddressFields"));
+var _CustomerFields = _interopRequireDefault(require("./CustomerFields"));
+var _CheckoutSteps = _interopRequireDefault(require("./CheckoutSteps"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _utils = require("../../utils");
+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 }; }
+const MOBILE = 'mobile';
+const DESKTOP = 'desktop';
+
+// countryData will take care of knowing which address fields
+// are required
+const IDENTITY_REQUIRED_FIELDS = ['name', 'email', 'country'];
+_Checkout_identity2.default.hash && _Checkout_identity2.default.hash !== "bd574bf28c2ab018312eb3f033fabb73" && console.error("The definition of 'Checkout_identity' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_identity2.default;
+const updateCustomerMutation = (_CheckoutUpdateCustomerMutation2.default.hash && _CheckoutUpdateCustomerMutation2.default.hash !== "0b5cfd0771be9b3107817aefcc7029cf" && console.error("The definition of 'CheckoutUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CheckoutUpdateCustomerMutation2.default);
+_Checkout_UpdateOrderErrors2.default.hash && _Checkout_UpdateOrderErrors2.default.hash !== "15a33f6b0c5a3de7f1b1dee6982f12ff" && console.error("The definition of 'Checkout_UpdateOrderErrors' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_UpdateOrderErrors2.default;
+const updateOrderMutation = (_CheckoutUpdateOrderMutation2.default.hash && _CheckoutUpdateOrderMutation2.default.hash !== "089745e2478edf385a09357905e4173c" && console.error("The definition of 'CheckoutUpdateOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CheckoutUpdateOrderMutation2.default);
+const Checkout = ({
+  order,
+  viewer,
+  checkoutStep,
+  setCheckoutStep,
+  onScrollToTop,
+  onComplete,
+  error: errorProp,
+  saveText = 'Next',
+  onCancel,
+  skipPaymentMethod = false
+}) => {
+  const orderData = (0, _reactRelay.useFragment)((_Checkout_order2.default.hash && _Checkout_order2.default.hash !== "693ae9c7f2c7fe9a179bad7b86c16928" && console.error("The definition of 'Checkout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_order2.default), order);
+  const viewerData = (0, _reactRelay.useFragment)((_Checkout_viewer2.default.hash && _Checkout_viewer2.default.hash !== "be63ce5562013aa6a1439e6259c80e2f" && console.error("The definition of 'Checkout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_viewer2.default), viewer);
+  const identity = {
+    name: '',
+    organization: '',
+    email: '',
+    phone: '',
+    country: viewerData.country,
+    administrativeArea: null,
+    street: '',
+    locality: '',
+    sublocality: '',
+    zip: '',
+    vatNumber: ''
+  };
+
+  // Transform phoneNullable from GraphQL to phone for internal state
+  const transformIdentity = data => {
+    if (!data) return identity;
+    return {
+      name: data.name ?? '',
+      organization: data.organization ?? null,
+      email: data.email ?? '',
+      phone: data.phoneNullable ?? '',
+      country: data.country ?? '',
+      administrativeArea: data.administrativeArea ?? null,
+      street: data.street ?? null,
+      locality: data.locality ?? null,
+      sublocality: data.sublocality ?? null,
+      zip: data.zip ?? null,
+      vatNumber: data.vatNumber ?? null
+    };
+  };
+  const [customer, setCustomer] = (0, _react.useState)(orderData?.customer ?? {
+    name: null,
+    email: null,
+    newsletterOptIn: false
+  });
+  const [billingIdentity, setBillingIdentity] = (0, _react.useState)(transformIdentity(orderData?.billingIdentity));
+  const [licenseeIdentity, setLicenseeIdentity] = (0, _react.useState)(transformIdentity(orderData?.licenseeIdentity));
+  const [billingRequired, setBillingRequired] = (0, _react.useState)();
+  const [licenseeRequired, setLicenseeRequired] = (0, _react.useState)(null);
+  const [licenseeIsBillingIdentity, setLicenseeIsBillingIdentity] = (0, _react.useState)(orderData?.licenseeIsBillingIdentity ?? true);
+  const [error, setError] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [mediaQuery, setMediaQuery] = (0, _react.useState)(DESKTOP);
+  (0, _react.useEffect)(() => {
+    const updateMediaQuery = () => {
+      setMediaQuery(window.innerWidth < 960 ? MOBILE : DESKTOP);
+    };
+    updateMediaQuery();
+    window.addEventListener('resize', updateMediaQuery);
+    return () => window.removeEventListener('resize', updateMediaQuery);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setError(null);
+    setErrorsObject(null);
+    onScrollToTop();
+  }, [checkoutStep]);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [errorsObject, setErrorsObject] = (0, _react.useState)(null);
+  const onCompleted = (res, errors, onSuccess) => {
+    if (errors && errors.length > 0) {
+      setError(errors[0].message);
+      setSubmitting(false);
+      onScrollToTop();
+    } else if ('updateOrder' in res && res.updateOrder?.errors) {
+      setSubmitting(false);
+      setErrorsObject(res.updateOrder.errors);
+      onScrollToTop();
+    } else {
+      if (typeof onSuccess === 'function') onSuccess();
+      setSubmitting(false);
+      setError(null);
+    }
+  };
+  const onError = error => {
+    setError(error.message);
+    setSubmitting(false);
+    onScrollToTop();
+  };
+  const updateCustomer = (variables, onSuccess) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateCustomerMutation,
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess),
+      onError
+    });
+  };
+  const updateOrder = (variables, onSuccess) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateOrderMutation,
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess)
+    });
+  };
+  let stripe;
+  let elements;
+  if (!skipPaymentMethod) {
+    // https://twitter.com/acdlite/status/1581401077915975680
+    stripe = (0, _reactStripeJs.useStripe)();
+    elements = (0, _reactStripeJs.useElements)();
+  }
+  const handleSubmit = async () => {
+    // Validate Stripe elements first (for Billing and Licensee steps)
+    if ((checkoutStep === _CheckoutSteps.default.Billing || checkoutStep === _CheckoutSteps.default.Licensee && !licenseeIsBillingIdentity) && elements) {
+      const result = await elements.submit();
+      if (result.error) {
+        // Stripe will show validation errors in the UI
+        onScrollToTop();
+        return;
+      }
+    }
+    setSubmitting(true);
+    setError(null);
+    if (checkoutStep === _CheckoutSteps.default.Customer) {
+      if (!billingIdentity.name && !billingIdentity.email) {
+        setBillingIdentity({
+          ...billingIdentity,
+          name: customer.name ?? '',
+          email: customer.email ?? ''
+        });
+      }
+      updateCustomer({
+        input: customer
+      }, () => setCheckoutStep(_CheckoutSteps.default.Billing));
+    }
+    if (checkoutStep === _CheckoutSteps.default.Billing) {
+      updateOrder({
+        input: {
+          billingIdentity
+        }
+      }, () => setCheckoutStep(_CheckoutSteps.default.Licensee));
+    }
+    if (checkoutStep === _CheckoutSteps.default.Licensee) {
+      updateOrder({
+        input: {
+          licenseeIsBillingIdentity,
+          licenseeIdentity: licenseeIsBillingIdentity ? null : licenseeIdentity
+        }
+      }, () => {
+        if (orderData?.canCompleteWithCoupon || skipPaymentMethod) {
+          onComplete();
+        } else {
+          setCheckoutStep(_CheckoutSteps.default.Payment);
+        }
+      });
+    }
+    if (checkoutStep === _CheckoutSteps.default.Payment) {
+      if (!stripe || !elements) {
+        console.error('Stripe failed to load');
+        return;
+      }
+      const card = elements.getElement(_reactStripeJs.CardElement);
+      if (!card) {
+        console.error('Didnt find Stripe Card element');
+        return;
+      }
+      stripe.createPaymentMethod({
+        type: 'card',
+        card,
+        billing_details: {
+          email: billingIdentity.email,
+          name: billingIdentity.name,
+          address: {
+            line1: billingIdentity.street?.split(/\n/)[0],
+            city: billingIdentity.locality || '',
+            state: billingIdentity.administrativeArea || '',
+            country: billingIdentity.country,
+            postal_code: billingIdentity.zip ?? undefined
+          }
+        }
+      }).then(({
+        paymentMethod,
+        error
+      }) => {
+        if (error) {
+          setError(error?.message ?? 'Unknown Stripe error');
+          setSubmitting(false);
+        } else {
+          if (paymentMethod) {
+            updateOrder({
+              input: {
+                stripePaymentMethodId: paymentMethod.id
+              }
+            }, onComplete);
+          }
+        }
+      }).catch(console.error);
+    }
+  };
+  const handleCustomerChange = value => setCustomer(currentValue => ({
+    ...currentValue,
+    ...value
+  }));
+  const handleBillingChange = value => {
+    setErrorsObject(currentValue => {
+      if (currentValue?.billingIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          billingIdentity: {
+            ...currentValue.billingIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = null;
+              return acc;
+            }, {})
+          }
+        };
+      }
+      return null;
+    });
+    setBillingIdentity(currentValue => ({
+      ...currentValue,
+      ...value
+    }));
+  };
+  const handleLicenseeChange = value => {
+    setErrorsObject(currentValue => {
+      if (currentValue?.licenseeIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          licenseeIdentity: {
+            ...currentValue.licenseeIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = undefined;
+              return acc;
+            }, {})
+          }
+        };
+      }
+      return null;
+    });
+    setLicenseeIdentity(currentValue => ({
+      ...currentValue,
+      ...value
+    }));
+  };
+  const isValid = () => {
+    if (checkoutStep === _CheckoutSteps.default.Customer) {
+      return Boolean(customer.name && customer.email);
+    }
+    if (checkoutStep === _CheckoutSteps.default.Billing) {
+      const requiredFields = IDENTITY_REQUIRED_FIELDS.concat(billingRequired ?? []);
+      return requiredFields.every(field => billingIdentity[field]);
+    }
+    if (checkoutStep === _CheckoutSteps.default.Licensee) {
+      if (licenseeIsBillingIdentity) return true;
+      const requiredFields = IDENTITY_REQUIRED_FIELDS.concat(licenseeRequired ?? []);
+      return requiredFields.every(field => licenseeIdentity[field]);
+    }
+    return true;
+  };
+  const renderErrors = () => {
+    if (errorsObject) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__errors"
+      }, "Please correct the errors.");
+    }
+    if (!error && !errorProp) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__errors"
+    }, error && /*#__PURE__*/_react.default.createElement("p", null, error), errorProp && /*#__PURE__*/_react.default.createElement("p", null, errorProp));
+  };
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const renderStep = checkoutStep => {
+    const customProperties = (0, _utils.parseCustomProperties)(viewerData.themeConfig?.customProperties);
+
+    // stripe validates that the strings match this pattern and throws an error
+    // if they don't, and refuses to render the element. for example if a font
+    // family has a special character in the name (which is actually valid).
+    // so we just don't try to the fontFamily if it's not gonna be valid.
+    // this regex is copied from the stripe js
+    const stripeRegex = /^[#a-zA-Z0-9-_\s,"'().]*$/;
+    let fontFamily = `"${viewerData.settings?.uiFontName}", sans-serif`;
+    if (!stripeRegex.test(fontFamily)) fontFamily = undefined;
+    const inputStyles = {
+      base: {
+        fontFamily,
+        fontSize: mediaQuery === MOBILE ? '14px' : '36px',
+        fontWeight: '400',
+        color: customProperties['--primary_text_color'],
+        '::placeholder': {
+          color: customProperties['--secondary_text_color']
+        }
+      },
+      invalid: {
+        color: customProperties['--error_color']
+      }
+    };
+    if (checkoutStep === _CheckoutSteps.default.Customer) {
+      return /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
+        title: "Contact information",
+        value: customer,
+        onChange: handleCustomerChange,
+        optInLabel: viewerData.settings?.newsletterOptInLabel
+      });
+    }
+    const customerBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__section"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__customer-info"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "checkout-modal__customer-info__button",
+      onClick: () => setCheckoutStep(_CheckoutSteps.default.Customer),
+      type: "button"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.User, null), " Contact information", ' ', /*#__PURE__*/_react.default.createElement("span", {
+      className: "checkout-modal__customer-info__check"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
+    if (checkoutStep === _CheckoutSteps.default.Billing) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__section"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__header"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__customer-info-message"
+      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null), " Billing information")))), /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
+        viewer: viewerData,
+        value: billingIdentity,
+        onChange: handleBillingChange,
+        errorsObject: errorsObject?.billingIdentity,
+        identityType: "billing"
+      }));
+    }
+    const billingBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__section"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__customer-info"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "checkout-modal__customer-info__button",
+      onClick: () => setCheckoutStep(_CheckoutSteps.default.Billing),
+      type: "button"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null), " Billing information", ' ', /*#__PURE__*/_react.default.createElement("span", {
+      className: "checkout-modal__customer-info__check"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
+    if (checkoutStep === _CheckoutSteps.default.Licensee) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, billingBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__section"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__header"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__customer-info-message"
+      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Icons.License, null), " Licensee information")))), /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__checkbox-field"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkbox"
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        type: "checkbox",
+        id: "licensee-is-billing-identity",
+        checked: licenseeIsBillingIdentity,
+        onChange: e => setLicenseeIsBillingIdentity(e.target.checked)
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkbox__icon"
+      }, config.form?.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
+        htmlFor: "licensee-is-billing-identity"
+      }, "Use the same billing details for licensee")), licenseeIsBillingIdentity === false && /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
+        viewer: viewerData,
+        value: licenseeIdentity,
+        onChange: handleLicenseeChange,
+        errorsObject: errorsObject?.licenseeIdentity,
+        identityType: "licensee"
+      }));
+    }
+    const licenseeBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__section"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "checkout-modal__customer-info"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "checkout-modal__customer-info__button",
+      onClick: () => setCheckoutStep(_CheckoutSteps.default.Licensee),
+      type: "button"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.License, null), " Licensee information", ' ', /*#__PURE__*/_react.default.createElement("span", {
+      className: "checkout-modal__customer-info__check"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
+    if (checkoutStep === _CheckoutSteps.default.Payment) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, billingBreadcrumb, licenseeBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__section"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__header"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__customer-info-message"
+      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Icons.CreditCard, null), " Payment")), /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__credit-card-message"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__credit-card-message__text"
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        className: "checkout-modal__credit-card-message__primary-text"
+      }, "Please enter your credit card info."), /*#__PURE__*/_react.default.createElement("p", {
+        className: "checkout-modal__credit-card-message__secondary-text"
+      }, "(Secure payments powered by Stripe)"))))), /*#__PURE__*/_react.default.createElement("div", {
+        className: "checkout-modal__section"
+      }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.CardElement, {
+        options: {
+          style: inputStyles,
+          hidePostalCode: true
+        }
+      })), errorsObject && errorsObject.stripePaymentMethodId && errorsObject.stripePaymentMethodId.length > 0 && /*#__PURE__*/_react.default.createElement("p", {
+        className: "checkout-modal__section__errors"
+      }, errorsObject.stripePaymentMethodId[0]));
+    }
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, renderErrors(), /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: e => (e.preventDefault(), handleSubmit())
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__sections"
+  }, renderStep(checkoutStep)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "checkout-modal__button",
+    onClick: onCancel,
+    "data-label": "cancel",
+    type: "button"
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "checkout-modal__button",
+    "data-label": "confirm",
+    disabled: !isValid() || submitting,
+    type: "submit"
+  }, submitting ? 'Submitting...' : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, saveText, /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkout-modal__button__arrow"
+  }, " \u2192"))))));
+};
+var _default = Checkout;
+exports.default = _default;

package/dist-cjs/components/Cart/CheckoutSteps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var CheckoutSteps;
+(function (CheckoutSteps) {
+  CheckoutSteps[CheckoutSteps["Customer"] = 0] = "Customer";
+  CheckoutSteps[CheckoutSteps["Billing"] = 1] = "Billing";
+  CheckoutSteps[CheckoutSteps["Licensee"] = 2] = "Licensee";
+  CheckoutSteps[CheckoutSteps["Payment"] = 3] = "Payment";
+})(CheckoutSteps || (CheckoutSteps = {}));
+var _default = CheckoutSteps;
+exports.default = _default;