fontdue-js 2.10.0 → 2.11.0

package/dist/components/StoreModalProductSummary/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _StoreModalProductSummaryRefetchQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalProductSummaryRefetchQuery.graphql"));
 var _StoreModalProductSummary_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalProductSummary_viewer.graphql"));
 var _StoreModalProductSummaryAddToCartMutation2 = _interopRequireDefault(require("../../__generated__/StoreModalProductSummaryAddToCartMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
@@ -12,10 +11,14 @@ var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
 var _Price = _interopRequireWildcard(require("../Price"));
 var _Button = _interopRequireDefault(require("../elements/Button"));
+var _StoreModalProductSummaryRefetchQuery = _interopRequireDefault(require("../../__generated__/StoreModalProductSummaryRefetchQuery.graphql"));
 var _utils = require("../../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useLicenseAndOrderVariables = require("../../hooks/useLicenseAndOrderVariables");
+var _useRefetchOnLicenseChanges = require("../../hooks/useRefetchOnLicenseChanges");
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+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 addToCartMutation = (_StoreModalProductSummaryAddToCartMutation2.default.hash && _StoreModalProductSummaryAddToCartMutation2.default.hash !== "91ea762e3842af2919da3a4c710a48cc" && console.error("The definition of 'StoreModalProductSummaryAddToCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummaryAddToCartMutation2.default);
 const countStyles = viewer => {
   const {
@@ -44,26 +47,31 @@ const countStylesPrice = viewer => {
   }, 0);
 };
 const StoreModalProductSummary = _ref => {
+  var _viewer$orderVariable;
   let {
-    viewer,
-    relay
+    viewer: viewerKey
   } = _ref;
   const dispatch = (0, _reactRedux.useDispatch)();
-  const selectedSkuIds = (0, _reactRedux.useSelector)(state => state.selectedSkuIds);
-  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
-  const licenseOptionSpecs = (0, _react.useMemo)(() => licenseOptions.map(spec => ({
-    licenseId: spec.licenseId,
-    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
-  })), [licenseOptions]);
-  (0, _react.useEffect)(() => {
-    if (!licenseOptionSpecs) return;
-    relay.refetch({
-      selectedSkuIds: Object.keys(selectedSkuIds).filter(id => selectedSkuIds[id] === true),
-      licenseOptions: licenseOptionSpecs
-    });
-  }, [relay, selectedSkuIds, licenseOptionSpecs]);
-  const [submitting, setSubmitting] = (0, _react.useState)(false);
   const environment = (0, _reactRelay.useRelayEnvironment)();
+  const selectedSkuIds = (0, _reactRedux.useSelector)(state => state.selectedSkuIds, _reactRedux.shallowEqual);
+  const {
+    orderVariableSelections
+  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  const licenseeIsBillingIdentity = (0, _reactRedux.useSelector)(state => state.licenseeIsBillingIdentity);
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions, _reactRedux.shallowEqual);
+  const selectedSkuIdsArray = (0, _react.useMemo)(() => Object.keys(selectedSkuIds).filter(id => selectedSkuIds[id] === true), [selectedSkuIds]);
+  const refetchVariables = (0, _react.useMemo)(() => ({
+    selectedSkuIds: selectedSkuIdsArray
+  }), [selectedSkuIdsArray]);
+  const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductSummary_viewer2.default.hash && _StoreModalProductSummary_viewer2.default.hash !== "e21762fcdb76ac693bcdf7b98effc40b" && console.error("The definition of 'StoreModalProductSummary_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummary_viewer2.default), viewerKey);
+  (0, _useRefetchOnLicenseChanges.useRefetchOnLicenseChanges)({
+    environment,
+    refetch,
+    query: _StoreModalProductSummaryRefetchQuery.default,
+    variables: refetchVariables
+  });
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [commitAddToCart] = (0, _reactRelay.useMutation)(addToCartMutation);
   const handleAddToCart = (0, _react.useCallback)(() => {
     setSubmitting(true);
     const variables = {
@@ -85,20 +93,22 @@ const StoreModalProductSummary = _ref => {
           return res.concat({
             licenseId
           });
-        }, [])
+        }, []),
+        orderVariableSelections,
+        licenseeIsBillingIdentity
       }
     };
-    (0, _reactRelay.commitMutation)(environment, {
-      mutation: addToCartMutation,
+    commitAddToCart({
       variables,
       onError: error => {
-        console.error('Failed:', error); // TODO ...
+        console.error('Failed:', error);
         setSubmitting(false);
       },
-      onCompleted: (res, errors) => {
+      onCompleted: (_res, errors) => {
         if (errors) {
-          console.error('Failed:', errors); // TODO ...
+          console.error('Failed:', errors);
           setSubmitting(false);
+          return;
         }
         dispatch({
           type: 'STORE_MODAL_NAVIGATE',
@@ -109,11 +119,10 @@ const StoreModalProductSummary = _ref => {
         store.invalidateStore();
       }
     });
-  }, [selectedSkuIds, licenseOptions, dispatch]);
+  }, [selectedSkuIds, licenseOptions, orderVariableSelections, licenseeIsBillingIdentity, dispatch, commitAddToCart]);
   if (!viewer.precart) return null;
   const anySkusSelected = Object.keys(selectedSkuIds).filter(skuId => selectedSkuIds[skuId]).length > 0;
   const stylesPrice = countStylesPrice(viewer);
-  const hasSelection = anySkusSelected && licenseOptions.length > 0;
   let taxLabel = null;
   if (viewer.taxCollections.some(_ref3 => {
     let {
@@ -124,30 +133,51 @@ const StoreModalProductSummary = _ref => {
   })) {
     taxLabel = ' excl. VAT';
   }
+  let message = null;
+  const requiredOrderVariablesNotYetSelected = (_viewer$orderVariable = viewer.orderVariables) === null || _viewer$orderVariable === void 0 ? void 0 : _viewer$orderVariable.filter(variable => variable.variableType === 'select').find(variable => !orderVariableSelections.find(selection => selection.orderVariableId === variable.id));
+  const hasSelectionForLicenseeIsBillingIdentity = licenseeIsBillingIdentity !== null;
+  const validSelections = anySkusSelected && licenseOptions.length > 0 && !requiredOrderVariablesNotYetSelected && hasSelectionForLicenseeIsBillingIdentity;
+  const {
+    storeModal: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const licensesPosition = config.productLicensesPosition;
+  if (validSelections) {
+    if (viewer.precart.subtotal) {
+      message = /*#__PURE__*/_react.default.createElement("div", {
+        className: "store-modal__product-summary__selection-text"
+      }, (0, _utils.pluralize)(countStyles(viewer), 'font'), ' for ', viewer.precart.subtotal.amount < stylesPrice && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: "store-modal__product-summary__styles-price"
+      }, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+        price: {
+          amount: stylesPrice,
+          currency: viewer.precart.subtotal.currency
+        }
+      })), ' '), /*#__PURE__*/_react.default.createElement(_Price.default, {
+        price: viewer.precart.subtotal
+      }), taxLabel);
+    } else {
+      message = /*#__PURE__*/_react.default.createElement("span", {
+        className: "store-modal__product-summary__nothing-selected"
+      }, "Calculating price...");
+    }
+  } else {
+    let validationMessage;
+    if (!anySkusSelected && licensesPosition === 'top') validationMessage = 'Please select some fonts';
+    if (licenseOptions.length === 0) validationMessage = 'Please select a license';
+    if (requiredOrderVariablesNotYetSelected) validationMessage = `Please select a ${requiredOrderVariablesNotYetSelected.name.toLocaleLowerCase()}`;
+    if (!hasSelectionForLicenseeIsBillingIdentity) validationMessage = 'Please select the licensee';
+    if (!anySkusSelected && licensesPosition === 'bottom') validationMessage = 'Please select some fonts';
+    message = /*#__PURE__*/_react.default.createElement("span", {
+      className: "store-modal__product-summary__nothing-selected"
+    }, validationMessage);
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__product-summary__container"
-  }, hasSelection ? viewer.precart.subtotal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "store-modal__product-summary__selection-text"
-  }, (0, _utils.pluralize)(countStyles(viewer), 'font'), ' for ', viewer.precart.subtotal.amount < stylesPrice && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "store-modal__product-summary__styles-price"
-  }, /*#__PURE__*/_react.default.createElement(_Price.Price, {
-    price: {
-      amount: stylesPrice,
-      currency: viewer.precart.subtotal.currency
-    }
-  })), ' '), /*#__PURE__*/_react.default.createElement(_Price.default, {
-    price: viewer.precart.subtotal
-  }), taxLabel)) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "store-modal__product-summary__nothing-selected"
-  }, "Calculating price...") : /*#__PURE__*/_react.default.createElement("span", {
-    className: "store-modal__product-summary__nothing-selected"
-  }, anySkusSelected ? 'Please select a license' : 'Please select some fonts'), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, message, /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "store-modal__product-summary__add-to-cart-button",
     onClick: handleAddToCart,
-    disabled: submitting || !hasSelection
+    disabled: submitting || !validSelections
   }, submitting ? 'Adding...' : 'Add to cart'));
 };
-var _default = (0, _reactRelay.createRefetchContainer)(StoreModalProductSummary, {
-  viewer: (_StoreModalProductSummary_viewer2.default.hash && _StoreModalProductSummary_viewer2.default.hash !== "d4b6958e3c6fb528399504365d4e37e8" && console.error("The definition of 'StoreModalProductSummary_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummary_viewer2.default)
-}, (_StoreModalProductSummaryRefetchQuery2.default.hash && _StoreModalProductSummaryRefetchQuery2.default.hash !== "7c268bb004999fc028d56f9ee2914960" && console.error("The definition of 'StoreModalProductSummaryRefetchQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummaryRefetchQuery2.default));
+var _default = StoreModalProductSummary;
 exports.default = _default;

package/dist/components/StripeLogo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function StripeLogo(): React.JSX.Element;

package/dist/components/StripeLogo.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StripeLogo;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function StripeLogo() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "33",
+    height: "15"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M32.956 7.925c0-2.313-1.12-4.138-3.261-4.138-2.15 0-3.451 1.825-3.451 4.12 0 2.719 1.535 4.092 3.74 4.092 1.075 0 1.888-.244 2.502-.587V9.605c-.614.307-1.319.497-2.213.497-.876 0-1.653-.307-1.753-1.373h4.418c0-.118.018-.588.018-.804m-4.463-.859c0-1.02.624-1.445 1.193-1.445.55 0 1.138.424 1.138 1.445h-2.33zm-5.737-3.279c-.885 0-1.454.415-1.77.704l-.118-.56H18.88v10.535l2.259-.48.009-2.556c.325.235.804.57 1.6.57 1.616 0 3.089-1.302 3.089-4.166-.01-2.62-1.5-4.047-3.08-4.047zm-.542 6.225c-.533 0-.85-.19-1.066-.425l-.009-3.352c.235-.262.56-.443 1.075-.443.822 0 1.391.922 1.391 2.105 0 1.211-.56 2.115-1.39 2.115zM18.04 2.766V.932l-2.268.479v1.843zM15.772 3.94h2.268v7.905h-2.268zm-2.43.669-.144-.669h-1.952v7.906h2.259V6.488c.533-.696 1.436-.57 1.716-.47V3.94c-.289-.108-1.346-.307-1.879.669M8.825 1.98l-2.205.47-.009 7.236c0 1.337 1.003 2.322 2.34 2.322.741 0 1.283-.135 1.581-.298V9.876c-.289.117-1.716.533-1.716-.804V5.865h1.716V3.94H8.816zM2.718 6.235c0-.352.289-.488.767-.488.687 0 1.554.208 2.241.578V4.202a6 6 0 0 0-2.24-.415c-1.835 0-3.054.957-3.054 2.557 0 2.493 3.433 2.096 3.433 3.17 0 .416-.361.552-.867.552-.75 0-1.708-.307-2.467-.723v2.15c.84.362 1.69.515 2.467.515 1.879 0 3.17-.93 3.17-2.548-.008-2.692-3.45-2.213-3.45-3.225"
+  }));
+}

package/dist/components/StripeProvider/index.d.ts

@@ -3,7 +3,8 @@ import { StripeProvider_viewer$key } from '../../__generated__/StripeProvider_vi
 interface StripeProvider_props {
     viewer: StripeProvider_viewer$key;
     children: JSX.Element;
+    providerType: 'checkout' | 'elements';
     requireClientSecret?: boolean;
 }
-declare const StripeProvider: ({ viewer, children, requireClientSecret, }: StripeProvider_props) => React.JSX.Element;
+declare const StripeProvider: ({ viewer, providerType, children, requireClientSecret, }: StripeProvider_props) => React.JSX.Element | null;
 export default StripeProvider;

package/dist/components/StripeProvider/index.js

@@ -4,33 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _StripeProviderCreateCheckoutSessionMutation2 = _interopRequireDefault(require("../../__generated__/StripeProviderCreateCheckoutSessionMutation.graphql"));
 var _StripeProvider_viewer2 = _interopRequireDefault(require("../../__generated__/StripeProvider_viewer.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactStripeJs = require("@stripe/react-stripe-js");
 var _stripeJs = require("@stripe/stripe-js");
 var _utils = require("../../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 StripeProvider = _ref => {
   var _data$settings, _data$currentOrder, _data$currentOrder$st, _data$settings2, _data$themeConfig;
   let {
     viewer,
+    providerType,
     children,
-    requireClientSecret = true
+    requireClientSecret
   } = _ref;
-  const data = (0, _reactRelay.useFragment)((_StripeProvider_viewer2.default.hash && _StripeProvider_viewer2.default.hash !== "efff082269b64afc7019b4d725285afa" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer2.default), viewer);
+  const data = (0, _reactRelay.useFragment)((_StripeProvider_viewer2.default.hash && _StripeProvider_viewer2.default.hash !== "f605dbdf8e21abec2830e0ce0c7bcc4a" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer2.default), viewer);
   const stripeKey = data.stripePublishableKey;
   const stripeAccount = data.stripeAccountId;
   const stripePromiseRef = (0, _react.useRef)(stripeKey && stripeAccount ? (0, _stripeJs.loadStripe)(stripeKey, {
     stripeAccount
   }) : null);
   const cssSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.uiFontUrl;
-  const clientSecret = ((_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st === void 0 ? void 0 : _data$currentOrder$st.clientSecret) ?? undefined;
 
   // the stripe provider may not be rendered, so we have to conditonally call
   // useStripe down in the children
+  const clientSecret = ((_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st === void 0 ? void 0 : _data$currentOrder$st.clientSecret) ?? undefined;
   if (requireClientSecret && !clientSecret) return children;
 
   // stripe validates that the strings match this pattern and throws an error
@@ -42,63 +44,123 @@ const StripeProvider = _ref => {
   let fontFamily = `"${(_data$settings2 = data.settings) === null || _data$settings2 === void 0 ? void 0 : _data$settings2.uiFontName}", sans-serif`;
   if (!stripeRegex.test(fontFamily)) fontFamily = undefined;
   const customProperties = (0, _utils.parseCustomProperties)((_data$themeConfig = data.themeConfig) === null || _data$themeConfig === void 0 ? void 0 : _data$themeConfig.customProperties);
-  return /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
-    stripe: stripePromiseRef.current,
-    options: {
-      appearance: {
-        theme: 'flat',
-        variables: {
-          borderRadius: '0',
-          fontFamily,
-          fontWeightLight: '400',
-          fontWeightNormal: '400',
-          fontWeightMedium: '400',
-          fontWeightBold: '400',
-          colorBackground: customProperties['--secondary_background_color'],
-          colorText: customProperties['--primary_text_color'],
-          colorBackgroundText: customProperties['--primary_text_color'],
-          colorSuccessText: customProperties['--success_color'],
-          colorDangerText: customProperties['--error_color'],
-          colorTextPlaceholder: customProperties['--secondary_text_color'],
-          focusBoxShadow: `0 0 0 1px ${customProperties['--primary_text_color']}`,
-          fontSizeBase: '16px',
-          fontSmooth: 'auto'
-        },
-        rules: {
-          '.Tab': {
-            border: `1px solid ${customProperties['--button_border_color']}`,
-            backgroundColor: customProperties['--button_background_color'],
-            color: customProperties['--button_text_color']
-          },
-          '.Tab:hover': {
-            border: `1px solid ${customProperties['--button_hover_border_color']}`,
-            backgroundColor: customProperties['--button_hover_background_color'],
-            color: customProperties['--button_hover_text_color']
-          },
-          '.Tab--selected': {
-            border: `1px solid ${customProperties['--button_selected_border_color']}`,
-            backgroundColor: customProperties['--button_selected_background_color'],
-            color: customProperties['--button_selected_text_color']
-          },
-          '.Label': {
-            color: customProperties['--secondary_text_color'],
-            fontSize: '1em'
-          },
-          '.Input': {
-            marginTop: '3px',
-            fontSize: '20px'
-          },
-          '.Input--invalid': {
-            boxShadow: 'none'
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const fetchClientSecret = (0, _react.useCallback)(() => {
+    return new Promise((resolve, reject) => {
+      (0, _reactRelay.commitMutation)(environment, {
+        mutation: (_StripeProviderCreateCheckoutSessionMutation2.default.hash && _StripeProviderCreateCheckoutSessionMutation2.default.hash !== "2ca9a7fcfed1292117e3cd6d0d95cca6" && console.error("The definition of 'StripeProviderCreateCheckoutSessionMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProviderCreateCheckoutSessionMutation2.default),
+        variables: {},
+        onCompleted: response => {
+          var _response$createOrder, _response$createOrder2, _response$createOrder3;
+          const clientSecret = (_response$createOrder = response.createOrderCheckoutSession) === null || _response$createOrder === void 0 ? void 0 : (_response$createOrder2 = _response$createOrder.order) === null || _response$createOrder2 === void 0 ? void 0 : (_response$createOrder3 = _response$createOrder2.stripeCheckoutSession) === null || _response$createOrder3 === void 0 ? void 0 : _response$createOrder3.clientSecret;
+          if (clientSecret) {
+            resolve(clientSecret);
+          } else {
+            reject("Didn't find client secret");
           }
+        },
+        onError: error => {
+          reject(`Error creating checkout session: ${error.message}`);
         }
+      });
+    });
+  }, [environment]);
+  const options = {
+    appearance: {
+      theme: 'flat',
+      variables: {
+        borderRadius: '0',
+        fontFamily,
+        fontWeightLight: '400',
+        fontWeightNormal: '400',
+        fontWeightMedium: '400',
+        fontWeightBold: '400',
+        colorBackground: customProperties['--secondary_background_color'],
+        colorText: customProperties['--primary_text_color'],
+        colorBackgroundText: customProperties['--primary_text_color'],
+        colorSuccessText: customProperties['--success_color'],
+        colorDangerText: customProperties['--error_color'],
+        colorTextPlaceholder: customProperties['--secondary_text_color'],
+        focusBoxShadow: `0 0 0 1px ${customProperties['--primary_text_color']}`,
+        fontSizeBase: '16px',
+        fontSmooth: 'auto',
+        gridRowSpacing: '30px',
+        spacingUnit: '5px',
+        accordionItemSpacing: '20px'
       },
-      fonts: cssSrc ? [{
-        cssSrc
-      }] : undefined,
-      clientSecret
-    }
-  }, children);
+      rules: {
+        '.Tab': {
+          border: `1px solid ${customProperties['--button_border_color']}`,
+          backgroundColor: customProperties['--button_background_color'],
+          color: customProperties['--button_text_color']
+        },
+        '.Tab:hover': {
+          border: `1px solid ${customProperties['--button_hover_border_color']}`,
+          backgroundColor: customProperties['--button_hover_background_color'],
+          color: customProperties['--button_hover_text_color']
+        },
+        '.Tab--selected,.Tab--selected:hover': {
+          border: `1px solid ${customProperties['--button_selected_border_color']}`,
+          backgroundColor: customProperties['--button_selected_background_color'],
+          color: customProperties['--button_selected_text_color']
+        },
+        '.TabIcon': {
+          fill: customProperties['--button_text_color']
+        },
+        '.TabIcon--selected': {
+          fill: customProperties['--button_selected_text_color']
+        },
+        '.TabIcon:hover,.TabIcon--selected:hover': {
+          fill: customProperties['--button_hover_text_color']
+        },
+        '.AccordionItem': {
+          border: `1px solid ${customProperties['--button_border_color']}`,
+          backgroundColor: customProperties['--button_background_color'],
+          color: customProperties['--button_text_color']
+        },
+        '.AccordionItem:hover': {
+          border: `1px solid ${customProperties['--button_hover_border_color']}`,
+          backgroundColor: customProperties['--button_hover_background_color'],
+          color: customProperties['--button_hover_text_color']
+        },
+        '.AccordionItem--selected': {
+          border: `1px solid ${customProperties['--button_selected_border_color']}`,
+          backgroundColor: customProperties['--button_selected_background_color'],
+          color: customProperties['--button_selected_text_color']
+        },
+        '.Label': {
+          color: customProperties['--secondary_text_color'],
+          fontSize: '1em'
+        },
+        '.Input': {
+          marginTop: '3px',
+          fontSize: '20px'
+        },
+        '.Input--invalid': {
+          boxShadow: 'none'
+        }
+      }
+    },
+    fonts: cssSrc ? [{
+      cssSrc
+    }] : undefined,
+    clientSecret
+  };
+  if (providerType === 'checkout') {
+    return /*#__PURE__*/_react.default.createElement(_reactStripeJs.EmbeddedCheckoutProvider, {
+      stripe: stripePromiseRef.current,
+      options: {
+        fetchClientSecret
+      }
+    }, children);
+  }
+  if (providerType === 'elements') {
+    return /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
+      stripe: stripePromiseRef.current,
+      options: options
+    }, children);
+  }
+  return null;
 };
 var _default = StripeProvider;
 exports.default = _default;

package/dist/components/Stylesheet/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StylesheetContainer = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 // a virtual kind of compoennt that registers stylesheets; we'll only add
 // one of each href and keep them around on the page. this prevents some
 // undesirable/unnecessary re-loading of fonts when components mount & unmount

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 const TestFontsFormElement = props => /*#__PURE__*/_react.default.createElement(_.default, _extends({}, props, {
   newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
 }));

package/dist/components/TestFontsForm/index.js

@@ -14,10 +14,10 @@ var _TextField = _interopRequireDefault(require("../TextField"));
 var _Icons = require("../Icons");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 }; }
+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); }
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation2.default.hash && _TestFontsFormUpdateCustomerMutation2.default.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation2.default);
 const TestFontsDownloading = _ref => {
   let {

package/dist/components/TestFontsForm/index.server.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
 var _index = require("./index");
 var _TestFontsForm_Query = _interopRequireDefault(require("../../__generated__/TestFontsForm_Query.graphql"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 async function TestFontsForm(props) {
   const preloadedQuery = await (0, _loadSerializableQuery.default)(_TestFontsForm_Query.default, {});
   return /*#__PURE__*/_react.default.createElement(_index.TestFontsFormPreloadedQueryRenderer, _extends({

package/dist/components/TestModeBanner/index.js

@@ -8,7 +8,7 @@ exports.default = TestModeBanner;
 var _TestModeBannerQuery2 = _interopRequireDefault(require("../../__generated__/TestModeBannerQuery.graphql"));
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function TestModeBannerComponent(_ref) {
   var _data$viewer, _data$viewer$testMode;
   let {

package/dist/components/TextField/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 const TextField = _ref => {
   let {
     Component = 'input',

package/dist/components/ThemeConfig/index.js

@@ -10,7 +10,7 @@ var _ThemeConfigQuery2 = _interopRequireDefault(require("../../__generated__/The
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // gets the custom properties entered by users in the admin panel,
 // which also includes default values. we put the defaults there instead of
 // every call to var() so that we have defaults all in one place

package/dist/components/ThemeConfig/index.server.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
 var _index = require("./index");
 var _ThemeConfigQuery = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 async function ThemeConfig() {
   const preloadedQuery = await (0, _loadSerializableQuery.default)(_ThemeConfigQuery.default, {});
   return /*#__PURE__*/_react.default.createElement(_index.ThemeConfigPreloadedQueryRenderer, {

package/dist/components/TypeTester/TypeTesterAlignButtons.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Align = require("../Icons/Align");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TypeTesterAlignButtons = _ref => {
   let {
     alignment,

package/dist/components/TypeTester/TypeTesterBullet.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Bullet = _ref => {
   let {
     checked,

package/dist/components/TypeTester/TypeTesterContent.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
 var _draftJs = require("draft-js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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); }
 const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     content,