fontdue-js 2.18.1 → 2.18.3

package/dist/__generated__/productState_collectionBundle.graphql.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<c1a8446af3677d58e3851338c54cf16e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v1 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "Sku",
+      "kind": "LinkedField",
+      "name": "sku",
+      "plural": false,
+      "selections": [v0 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "Money",
+        "kind": "LinkedField",
+        "name": "price",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "amount",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    };
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": {
+      "mask": false
+    },
+    "name": "productState_collectionBundle",
+    "selections": [v0 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    }, v1 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "memberCollections",
+      "plural": true,
+      "selections": [v0 /*: any*/, v1 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontStyle",
+        "kind": "LinkedField",
+        "name": "fontStyles",
+        "plural": true,
+        "selections": [v0 /*: any*/, v1 /*: any*/],
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "type": "CollectionBundle",
+    "abstractKey": null
+  };
+}();
+node.hash = "6744aa8f57d14b0111a0c49f488d7b03";
+var _default = node;
+exports.default = _default;

package/dist/__generated__/productState_node.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<516d3d7a123f16a93143726e2a11f81d>>
+ * @generated SignedSource<<89ccca0787788a2ceb37d58b6ab5340a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -63,6 +63,34 @@ export type productState_node$data = {
             };
         } | null;
     }> | null;
+    readonly collectionBundles: ReadonlyArray<{
+        readonly id: string;
+        readonly memberCollections: ReadonlyArray<{
+            readonly fontStyles: ReadonlyArray<{
+                readonly id: string;
+                readonly sku: {
+                    readonly id: string;
+                    readonly price: {
+                        readonly amount: number;
+                    };
+                } | null;
+            }>;
+            readonly id: string;
+            readonly sku: {
+                readonly id: string;
+                readonly price: {
+                    readonly amount: number;
+                };
+            } | null;
+        }> | null;
+        readonly name: string;
+        readonly sku: {
+            readonly id: string;
+            readonly price: {
+                readonly amount: number;
+            };
+        } | null;
+    }> | null;
     readonly fontStyles: ReadonlyArray<{
         readonly id: string;
         readonly sku: {

package/dist/__generated__/productState_node.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<516d3d7a123f16a93143726e2a11f81d>>
+ * @generated SignedSource<<89ccca0787788a2ceb37d58b6ab5340a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -82,6 +82,24 @@ const node = function () {
     },
     "name": "productState_node",
     "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "CollectionBundle",
+      "kind": "LinkedField",
+      "name": "collectionBundles",
+      "plural": true,
+      "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontCollection",
+        "kind": "LinkedField",
+        "name": "memberCollections",
+        "plural": true,
+        "selections": [v0 /*: any*/, v2 /*: any*/, v3 /*: any*/],
+        "storageKey": null
+      }],
+      "storageKey": null
+    }, {
       "alias": null,
       "args": [{
         "kind": "Literal",
@@ -99,6 +117,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "aab1ef07e0192a0d22a4c300084d9d05";
+node.hash = "a1e172db45ca550a254819d877497d12";
 var _default = node;
 exports.default = _default;

package/dist/components/Cart/CartItem/CartItemProduct.js

@@ -17,7 +17,7 @@ function CartItemProduct(_ref) {
   let {
     product: productKey
   } = _ref;
-  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "93463fc6e5eab6e2f910904bf0c2393e" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
+  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "22f49bcb8a461d2d3eefc4f8ba1e575c" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
   let productCss;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle') productCss = (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') productCss = (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
@@ -27,7 +27,7 @@ function CartItemProduct(_ref) {
     className: "cart-item__aa"
   }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
     href: productCss
-  }), ['FontCollection', 'Bundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
+  }), ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
     product: product
   }) : /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: product
@@ -37,7 +37,7 @@ function CartItemProduct(_ref) {
     className: "cart-item__name"
   }, productName), product !== null && product !== void 0 && product.isVariableFont || product !== null && product !== void 0 && (_product$variableInst = product.variableInstances) !== null && _product$variableInst !== void 0 && _product$variableInst.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__label"
-  }, "Variable font") : (product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Variable font") : ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__label"
   }, "(", (0, _utils.pluralize)(product.totalStyles ?? 0, 'style'), ")")));
 }

package/dist/components/Root/productState.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.populateProductStateReducer = exports.populateProductState = void 0;
 var _productState_Query2 = _interopRequireDefault(require("../../__generated__/productState_Query.graphql"));
 var _productState_node2 = _interopRequireDefault(require("../../__generated__/productState_node.graphql"));
+var _productState_collectionBundle2 = _interopRequireDefault(require("../../__generated__/productState_collectionBundle.graphql"));
 var _productState_bundle2 = _interopRequireDefault(require("../../__generated__/productState_bundle.graphql"));
 var _productState_collection2 = _interopRequireDefault(require("../../__generated__/productState_collection.graphql"));
 var _productState_sku2 = _interopRequireDefault(require("../../__generated__/productState_sku.graphql"));
@@ -15,7 +16,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 _productState_sku2.default.hash && _productState_sku2.default.hash !== "2cee6ddddc85699f0c90e2607c0634ef" && console.error("The definition of 'productState_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_sku2.default;
 _productState_collection2.default.hash && _productState_collection2.default.hash !== "90e56933f956c6773c0958284de81884" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection2.default;
 _productState_bundle2.default.hash && _productState_bundle2.default.hash !== "fa38bbc9f2062a727da4f5062b362054" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle2.default;
-_productState_node2.default.hash && _productState_node2.default.hash !== "aab1ef07e0192a0d22a4c300084d9d05" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node2.default;
+_productState_collectionBundle2.default.hash && _productState_collectionBundle2.default.hash !== "6744aa8f57d14b0111a0c49f488d7b03" && console.error("The definition of 'productState_collectionBundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collectionBundle2.default;
+_productState_node2.default.hash && _productState_node2.default.hash !== "a1e172db45ca550a254819d877497d12" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node2.default;
 const query = (_productState_Query2.default.hash && _productState_Query2.default.hash !== "ac3292bae9a274139d5a525fd0162711" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query2.default);
 const populateProductState = (store, environment, id) => {
   const existingState = store.getState().fetchedCollectionIds;
@@ -39,12 +41,25 @@ const allSkus = function (collection) {
     var _collection$bundles;
     bundleSkus = (collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.flatMap(bundle => allSkus(bundle, includeCollections, includeFontStyles))) ?? [];
   }
+  let collectionBundleSkus = [];
+  if ('collectionBundles' in collection && collection.collectionBundles) {
+    collectionBundleSkus = collection.collectionBundles.flatMap(collBundle => allSkus(collBundle, includeCollections, includeFontStyles));
+  }
+
+  // For collection bundles, get SKUs from member collections
+  let memberCollectionSkus = [];
+  if ('memberCollections' in collection && collection.memberCollections) {
+    memberCollectionSkus = collection.memberCollections.flatMap(member => {
+      var _member$fontStyles;
+      return [includeCollections ? member.sku : null, ...(includeFontStyles ? ((_member$fontStyles = member.fontStyles) === null || _member$fontStyles === void 0 ? void 0 : _member$fontStyles.map(style => style.sku)) ?? [] : [])];
+    }).filter(_utils.notEmpty);
+  }
   let childrenSkus = [];
   if ('children' in collection) {
     var _collection$children;
     childrenSkus = ((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.flatMap(child => allSkus(child, includeCollections, includeFontStyles))) ?? [];
   }
-  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...childrenSkus].filter(_utils.notEmpty);
+  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...collectionBundleSkus, ...memberCollectionSkus, ...childrenSkus].filter(_utils.notEmpty);
 };
 const flattenSkuData = collection => {
   let bundles = {};
@@ -54,6 +69,13 @@ const flattenSkuData = collection => {
       ...flattenSkuData(bundle)
     }), {});
   }
+  let collectionBundles = {};
+  if ('collectionBundles' in collection && collection.collectionBundles) {
+    collectionBundles = collection.collectionBundles.reduce((res, collBundle) => ({
+      ...res,
+      ...flattenSkuData(collBundle)
+    }), {});
+  }
   let children = {};
   if ('children' in collection && collection.children) {
     children = collection.children.reduce((res, child) => ({
@@ -64,12 +86,17 @@ const flattenSkuData = collection => {
   let collectionData = {};
   if (collection.sku) {
     var _collection$fontStyle2, _collection$children2;
+    // For collection bundles, get font style IDs from member collections
+    const fontStyleIds = 'memberCollections' in collection && collection.memberCollections ? collection.memberCollections.flatMap(member => {
+      var _member$fontStyles2;
+      return ((_member$fontStyles2 = member.fontStyles) === null || _member$fontStyles2 === void 0 ? void 0 : _member$fontStyles2.map(style => style.id)) ?? [];
+    }) : 'fontStyles' in collection ? (((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(style => style.id)) ?? []).concat('children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
+      var _child$fontStyles;
+      return ((_child$fontStyles = child.fontStyles) === null || _child$fontStyles === void 0 ? void 0 : _child$fontStyles.map(style => style.id)) ?? [];
+    })) ?? [] : []) : [];
     collectionData = {
       [collection.sku.id]: {
-        fontStyleIds: (((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(style => style.id)) ?? []).concat('children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
-          var _child$fontStyles;
-          return ((_child$fontStyles = child.fontStyles) === null || _child$fontStyles === void 0 ? void 0 : _child$fontStyles.map(style => style.id)) ?? [];
-        })) ?? [] : []),
+        fontStyleIds,
         fontStyleSkuIds: allSkus(collection, false, true).map(sku => sku.id),
         childrenSkuIds: allSkus(collection, true, false).map(sku => sku.id).filter(skuId => {
           var _collection$sku;
@@ -83,7 +110,8 @@ const flattenSkuData = collection => {
   return {
     ...collectionData,
     ...children,
-    ...bundles
+    ...bundles,
+    ...collectionBundles
   };
 };
 const flattenSkuPrices = collection => {

package/dist/components/StoreModal/StoreModalCart.js

@@ -35,7 +35,7 @@ const StoreModalCart = _ref => {
     body: order && orderHasItems ? /*#__PURE__*/_react.default.createElement(_CartState.default, {
       order: order
     }, _ref2 => {
-      var _data$viewer, _data$viewer$currentO, _data$viewer$currentO2, _order$orderItems2, _order$total, _data$viewer2, _data$viewer2$setting, _data$viewer3, _data$viewer3$setting;
+      var _data$viewer, _data$viewer$currentO, _data$viewer$currentO2, _order$orderItems2, _order$total, _data$viewer2, _data$viewer2$setting;
       let {
         onUpdateOrderVariableSelections,
         onRemoveDiscount,
@@ -71,8 +71,7 @@ const StoreModalCart = _ref => {
         }),
         checkout: /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
           viewer: data.viewer,
-          providerType: "elements",
-          requireClientSecret: ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$setting = _data$viewer3.settings) === null || _data$viewer3$setting === void 0 ? void 0 : _data$viewer3$setting.taxSystem) === 'fontdue'
+          providerType: "elements"
         }, /*#__PURE__*/_react.default.createElement(_StoreModalUnifiedCheckout.default, {
           viewer: data.viewer,
           order: order,

package/dist/components/StoreModalProductSummary/index.js

@@ -63,7 +63,7 @@ const StoreModalProductSummary = _ref => {
   const refetchVariables = (0, _react.useMemo)(() => ({
     selectedSkuIds: selectedSkuIdsArray
   }), [selectedSkuIdsArray]);
-  const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductSummary_viewer2.default.hash && _StoreModalProductSummary_viewer2.default.hash !== "d95602902697c0bb7ca4be2089649198" && 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);
+  const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductSummary_viewer2.default.hash && _StoreModalProductSummary_viewer2.default.hash !== "81a5f120d76cbb84753d158a7ff38c19" && 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,

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

@@ -4,7 +4,6 @@ interface StripeProvider_props {
     viewer: StripeProvider_viewer$key;
     children: JSX.Element;
     providerType: 'checkout' | 'elements';
-    requireClientSecret?: boolean;
 }
-declare const StripeProvider: ({ viewer, providerType, children, requireClientSecret, }: StripeProvider_props) => JSX.Element | null;
+declare const StripeProvider: ({ viewer, providerType, children, }: StripeProvider_props) => JSX.Element | null;
 export default StripeProvider;

package/dist/components/StripeProvider/index.js

@@ -20,8 +20,7 @@ const StripeProvider = _ref => {
   let {
     viewer,
     providerType,
-    children,
-    requireClientSecret
+    children
   } = _ref;
   const data = (0, _reactRelay.useFragment)((_StripeProvider_viewer2.default.hash && _StripeProvider_viewer2.default.hash !== "dd5fd4cdd75d727050b8d1d6f4269fa8" && 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;
@@ -29,6 +28,12 @@ const StripeProvider = _ref => {
   const stripePromiseRef = (0, _react.useRef)(stripeKey && stripeAccount ? (0, _stripeJs.loadStripe)(stripeKey, {
     stripeAccount
   }) : null);
+
+  // All hooks must be called before any conditional returns (React rules of hooks)
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const {
+    stripe: config
+  } = (0, _react.useContext)(_ConfigContext.default);
   let customFontSource;
   const woffSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : (_data$settings$uiFont = _data$settings.uiFontStyle) === null || _data$settings$uiFont === void 0 ? void 0 : (_data$settings$uiFont2 = _data$settings$uiFont.webfontSources) === null || _data$settings$uiFont2 === void 0 ? void 0 : (_data$settings$uiFont3 = _data$settings$uiFont2.find(source => (source === null || source === void 0 ? void 0 : source.format) === 'woff2')) === null || _data$settings$uiFont3 === void 0 ? void 0 : _data$settings$uiFont3.url;
   let fontFamily = (_data$settings2 = data.settings) !== null && _data$settings2 !== void 0 && _data$settings2.uiFontStyle ? `${data.settings.uiFontStyle.cssFamily} ${data.settings.uiFontStyle.name}` : undefined;
@@ -46,13 +51,8 @@ const StripeProvider = _ref => {
       weight: '400'
     };
   }
-
-  // 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;
   const customProperties = (0, _utils.parseCustomProperties)((_data$themeConfig = data.themeConfig) === null || _data$themeConfig === void 0 ? void 0 : _data$themeConfig.customProperties);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
   const fetchClientSecret = (0, _react.useCallback)(() => {
     return new Promise((resolve, reject) => {
       (0, _reactRelay.commitMutation)(environment, {
@@ -73,9 +73,6 @@ const StripeProvider = _ref => {
       });
     });
   }, [environment]);
-  const {
-    stripe: config
-  } = (0, _react.useContext)(_ConfigContext.default);
   const options = {
     appearance: config.appearance ?? {
       theme: 'flat',

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -10,6 +10,7 @@ var _StoreModalUnifiedCheckoutUpdateCustomerMutation2 = _interopRequireDefault(r
 var _StoreModalUnifiedCheckout_order2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_order.graphql"));
 var _StoreModalUnifiedCheckout_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_viewer.graphql"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
 var Sentry = _interopRequireWildcard(require("@sentry/react"));
 var _reactRelay = require("react-relay");
 var _AddressFields = _interopRequireDefault(require("../Cart/AddressFields"));
@@ -168,15 +169,15 @@ function EditableSection(_ref) {
   }, "Change")));
 }
 function StoreModalUnifiedCheckout(_ref2) {
-  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _order$stripePaymentI, _order$stripePaymentI2;
+  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _order$stripePaymentI, _viewer$settings5, _order$stripePaymentI2, _order$stripePaymentI3;
   let {
     order: orderKey,
     viewer: viewerKey,
     onScrollToTop,
     onUpdateOrderVariableSelections
   } = _ref2;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "83cc5e6f8d508fb1c2356a72b040f9b0" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
-  const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "ea43fb766c4dd1183b46ddf449aa85bd" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "048ce405742611f6684cb5306d28478b" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
+  const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "7c5503876a562732ebaead9b2ae97180" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
 
   // Check if order has a country-type order variable with a different country than detected
   // This is important for order snapshot/quote functionality where a quote was created for
@@ -292,6 +293,13 @@ function StoreModalUnifiedCheckout(_ref2) {
   const {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
+
+  // reCAPTCHA state
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingCustomerSubmit, setPendingCustomerSubmit] = (0, _react.useState)(null);
+  const recaptchaRef = (0, _react.useRef)(null);
+  const recaptchaEnabled = ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.recaptchaEnabled) ?? false;
+  const recaptchaSiteKey = (_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.recaptchaSiteKey;
   const onCompleted = (res, errors, onSuccess, onError) => {
     var _res$updateCustomer, _res$updateOrder;
     if (errors && errors.length > 0) {
@@ -402,11 +410,10 @@ function StoreModalUnifiedCheckout(_ref2) {
   // set initial state depending on if checkout is already in progress
   if (!order.customer) initialEditingState = 'customer';
   const [editing, setEditing] = (0, _react.useState)(initialEditingState);
-  const handleCustomerSubmit = _ref3 => {
-    let {
-      onSuccess,
-      onError
-    } = _ref3;
+
+  // Submit customer data with optional reCAPTCHA token
+  const submitCustomer = (0, _react.useCallback)((token, callbacks) => {
+    setPendingCustomerSubmit(null);
     if (!billingIdentity.name && !billingIdentity.email) {
       setBillingIdentity({
         ...billingIdentity,
@@ -415,11 +422,46 @@ function StoreModalUnifiedCheckout(_ref2) {
       });
     }
     updateCustomer({
-      input: customer
+      input: {
+        ...customer,
+        recaptchaToken: token ?? undefined
+      }
     }, () => {
-      onSuccess();
+      var _recaptchaRef$current;
+      callbacks.onSuccess();
       setEditing(null);
-    }, onError);
+      // Reset reCAPTCHA after successful submission
+      (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+      setRecaptchaToken(null);
+    }, () => {
+      var _recaptchaRef$current2;
+      callbacks.onError();
+      // Reset reCAPTCHA on error so user can retry
+      (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.reset();
+      setRecaptchaToken(null);
+    });
+  }, [customer, billingIdentity, updateCustomer]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingCustomerSubmit) {
+      submitCustomer(token, pendingCustomerSubmit.callbacks);
+    }
+  }, [pendingCustomerSubmit, submitCustomer]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleCustomerSubmit = callbacks => {
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      var _recaptchaRef$current3;
+      setPendingCustomerSubmit({
+        callbacks
+      });
+      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      return;
+    }
+    submitCustomer(recaptchaToken, callbacks);
   };
   const handleLicenseeIsBillingIdentityChange = (0, _react.useCallback)(value => {
     updateOrder({
@@ -613,8 +655,14 @@ function StoreModalUnifiedCheckout(_ref2) {
     }, "Contact information"), /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
       value: customer,
       onChange: handleCustomerChange,
-      optInLabel: (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.newsletterOptInLabel,
+      optInLabel: (_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.newsletterOptInLabel,
       errors: customerErrorsObject
+    }), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+      ref: recaptchaRef,
+      sitekey: recaptchaSiteKey,
+      size: "invisible",
+      onChange: handleRecaptchaChange,
+      onExpired: handleRecaptchaExpired
     }))
   }), order.customer && !hasCountryMismatch ? /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
     disabled: false,
@@ -623,7 +671,7 @@ function StoreModalUnifiedCheckout(_ref2) {
   }, {
     label: /*#__PURE__*/_react.default.createElement("div", {
       dangerouslySetInnerHTML: {
-        __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalSelectLicenseeLabel) ?? ''
+        __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalSelectLicenseeLabel) ?? ''
       }
     })
   }) : null, showLicenseeSection ? /*#__PURE__*/_react.default.createElement("div", {
@@ -664,7 +712,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     "data-disabled": false
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleComplete
-  }, !zeroOrder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+  }, !zeroOrder && ((_order$stripePaymentI = order.stripePaymentIntent) === null || _order$stripePaymentI === void 0 ? void 0 : _order$stripePaymentI.clientSecret) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
     className: "store-modal__cart__checkout-section-title"
   }, "Payment information", /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__cart__checkout-section-subtitle"
@@ -702,13 +750,13 @@ function StoreModalUnifiedCheckout(_ref2) {
     htmlFor: "eula-agreement"
   }, /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.eulaAgreementLabel) ?? ''
+      __html: ((_viewer$settings5 = viewer.settings) === null || _viewer$settings5 === void 0 ? void 0 : _viewer$settings5.eulaAgreementLabel) ?? ''
     }
   }))), /*#__PURE__*/_react.default.createElement("button", {
     type: "submit",
     className: "store-modal__cart__button",
     disabled: completing || !acceptedEULA
-  }, completing ? 'Submitting...' : zeroOrder ? 'Complete order' : /*#__PURE__*/_react.default.createElement("span", null, "Pay", ' ', (_order$stripePaymentI = order.stripePaymentIntent) !== null && _order$stripePaymentI !== void 0 && _order$stripePaymentI.amount && (_order$stripePaymentI2 = order.stripePaymentIntent) !== null && _order$stripePaymentI2 !== void 0 && _order$stripePaymentI2.currency ? /*#__PURE__*/_react.default.createElement(_Price.Price, {
+  }, completing ? 'Submitting...' : zeroOrder ? 'Complete order' : /*#__PURE__*/_react.default.createElement("span", null, "Pay", ' ', (_order$stripePaymentI2 = order.stripePaymentIntent) !== null && _order$stripePaymentI2 !== void 0 && _order$stripePaymentI2.amount && (_order$stripePaymentI3 = order.stripePaymentIntent) !== null && _order$stripePaymentI3 !== void 0 && _order$stripePaymentI3.currency ? /*#__PURE__*/_react.default.createElement(_Price.Price, {
     price: {
       amount: order.stripePaymentIntent.amount,
       currency: order.stripePaymentIntent.currency

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.18.1",
+  "version": "2.18.3",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",