fontdue-js 2.17.2 → 2.18.2

package/dist/components/NewsletterSignup/index.js

@@ -10,6 +10,7 @@ var _NewsletterSignupQuery2 = _interopRequireDefault(require("../../__generated_
 var _NewsletterSignupUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Check = _interopRequireDefault(require("../Icons/Check"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
@@ -18,9 +19,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 = (_NewsletterSignupUpdateCustomerMutation2.default.hash && _NewsletterSignupUpdateCustomerMutation2.default.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation2.default);
-const query = (_NewsletterSignupQuery2.default.hash && _NewsletterSignupQuery2.default.hash !== "16f0b6d7ed420ec5857c972b77805e4c" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery2.default);
+const query = (_NewsletterSignupQuery2.default.hash && _NewsletterSignupQuery2.default.hash !== "24b303198a6038318723fc0124548862" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery2.default);
 function NewsletterSignupComponent(_ref) {
-  var _data$viewer, _data$viewer$settings, _data$viewer2, _data$viewer2$setting;
+  var _data$viewer, _data$viewer$settings, _data$viewer2, _data$viewer2$setting, _data$viewer3, _data$viewer3$setting, _data$viewer4, _data$viewer4$setting;
   let {
     optInLabel: optInLabelProp,
     successLabel: successLabelProp,
@@ -36,17 +37,34 @@ function NewsletterSignupComponent(_ref) {
   const [error, setError] = (0, _react.useState)(null);
   const [submitting, setSubmitting] = (0, _react.useState)(false);
   const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingSubmit, setPendingSubmit] = (0, _react.useState)(false);
+  const recaptchaRef = (0, _react.useRef)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  const submitMutation = (mutation, input) => {
+  const recaptchaEnabled = ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
+  const recaptchaSiteKey = (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.recaptchaSiteKey;
+  const submitForm = (0, _react.useCallback)(token => {
+    setSubmitting(true);
+    setPendingSubmit(false);
+    setError(null);
     (0, _reactRelay.commitMutation)(environment, {
-      mutation,
+      mutation: updateCustomerMutation,
       variables: {
-        input
+        input: {
+          name,
+          email,
+          newsletterOptIn,
+          recaptchaToken: token ?? undefined
+        }
       },
       onCompleted: (_res, errors) => {
         if (errors && errors.length > 0) {
+          var _recaptchaRef$current;
           setError(errors[0].message);
           setSubmitting(false);
+          // Reset reCAPTCHA on error so user can retry
+          (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+          setRecaptchaToken(null);
         } else {
           setSubmitted(true);
           setSubmitting(false);
@@ -54,27 +72,46 @@ function NewsletterSignupComponent(_ref) {
         }
       },
       onError: _ref2 => {
+        var _recaptchaRef$current2;
         let {
           message
         } = _ref2;
         setError(message);
         setSubmitting(false);
+        // Reset reCAPTCHA on error so user can retry
+        (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.reset();
+        setRecaptchaToken(null);
       }
     });
-  };
+  }, [environment, name, email, newsletterOptIn]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingSubmit) {
+      submitForm(token);
+    }
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
   const handleSubmit = e => {
     e.preventDefault();
-    setSubmitting(true);
-    setError(null);
-    submitMutation(updateCustomerMutation, {
-      name,
-      email,
-      newsletterOptIn
-    });
+
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      var _recaptchaRef$current3;
+      setPendingSubmit(true);
+      setError(null);
+      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      return;
+    }
+    submitForm(recaptchaToken);
   };
-  const disabled = submitting || !newsletterOptIn || !email || !name;
-  const optInLabel = optInLabelProp || ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.newsletterOptInLabel);
-  const successLabel = (successLabelProp || ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.newsletterSuccessLabel)) ?? 'Success!';
+
+  // Button is disabled only while actively submitting or waiting for reCAPTCHA
+  const disabled = !newsletterOptIn || !email || !name;
+  const optInLabel = optInLabelProp || ((_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.newsletterOptInLabel);
+  const successLabel = (successLabelProp || ((_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : (_data$viewer4$setting = _data$viewer4.settings) === null || _data$viewer4$setting === void 0 ? void 0 : _data$viewer4$setting.newsletterSuccessLabel)) ?? 'Success!';
   if (submitted) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "newsletter-signup"
@@ -128,12 +165,18 @@ function NewsletterSignupComponent(_ref) {
     dangerouslySetInnerHTML: {
       __html: optInLabel ?? ''
     }
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+    ref: recaptchaRef,
+    sitekey: recaptchaSiteKey,
+    size: "invisible",
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "newsletter-signup__section"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
-    disabled: disabled
-  }, submitting ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/_react.default.createElement("span", {
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
 }

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/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 !== "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);
+  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,
@@ -124,14 +124,26 @@ const StoreModalProductSummary = _ref => {
   const anySkusSelected = Object.keys(selectedSkuIds).filter(skuId => selectedSkuIds[skuId]).length > 0;
   const stylesPrice = countStylesPrice(viewer);
   let taxLabel = null;
-  if (viewer.taxCollections.some(_ref3 => {
-    let {
-      taxName,
-      inclusive
-    } = _ref3;
-    return taxName === 'VAT' && !inclusive;
-  })) {
-    taxLabel = ' excl. VAT';
+  const {
+    taxSystem,
+    stripeTaxSettings
+  } = viewer.settings ?? {};
+  if (taxSystem === 'stripe') {
+    // For Stripe Tax, use the explicit tax behavior setting
+    if ((stripeTaxSettings === null || stripeTaxSettings === void 0 ? void 0 : stripeTaxSettings.taxBehavior) === 'exclusive') {
+      taxLabel = ' excl. Tax';
+    }
+    // No label for 'inclusive' or 'inferred_by_currency'
+  } else {
+    // Legacy fontdue tax system - show label if any tax is not inclusive
+    if (viewer.taxCollections.some(_ref3 => {
+      let {
+        inclusive
+      } = _ref3;
+      return !inclusive;
+    })) {
+      taxLabel = ' excl. Tax';
+    }
   }
   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));

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/TestFontsForm/index.js

@@ -10,6 +10,7 @@ var _TestFontsForm_Query2 = _interopRequireDefault(require("../../__generated__/
 var _TestFontsFormUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/TestFontsFormUpdateCustomerMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Icons = require("../Icons");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
@@ -32,7 +33,7 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$testFont;
+  var _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont;
   let {
     data,
     agreementLabel,
@@ -47,28 +48,36 @@ const TestFontsFormComponent = _ref2 => {
   const [eulaFail, setEulaFail] = (0, _react.useState)(false);
   const [submitting, setSubmitting] = (0, _react.useState)(false);
   const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingSubmit, setPendingSubmit] = (0, _react.useState)(false);
   const downloadForm = (0, _react.useRef)(null);
+  const recaptchaRef = (0, _react.useRef)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
   if (!data.viewer) return null;
-  const handleSubmit = e => {
-    e.preventDefault();
-    if (!eulaAgreed) {
-      setEulaFail(true);
-      return;
-    }
+  const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
+  const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
+  const submitForm = (0, _react.useCallback)(token => {
+    setSubmitting(true);
+    setPendingSubmit(false);
+    setError(null);
     (0, _reactRelay.commitMutation)(environment, {
       mutation: updateCustomerMutation,
       variables: {
         input: {
           name,
           email,
-          newsletterOptIn
+          newsletterOptIn,
+          recaptchaToken: token ?? undefined
         }
       },
       onCompleted: (res, errors) => {
         if (errors && errors.length > 0) {
+          var _recaptchaRef$current;
           setError(errors[0].message);
           setSubmitting(false);
+          // Reset reCAPTCHA on error so user can retry
+          (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+          setRecaptchaToken(null);
         } else {
           var _downloadForm$current;
           (_downloadForm$current = downloadForm.current) === null || _downloadForm$current === void 0 ? void 0 : _downloadForm$current.submit();
@@ -78,14 +87,47 @@ const TestFontsFormComponent = _ref2 => {
         }
       },
       onError: _ref3 => {
+        var _recaptchaRef$current2;
         let {
           message
         } = _ref3;
         setError(message);
         setSubmitting(false);
+        // Reset reCAPTCHA on error so user can retry
+        (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.reset();
+        setRecaptchaToken(null);
       }
     });
+  }, [environment, name, email, newsletterOptIn]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingSubmit) {
+      submitForm(token);
+    }
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (!eulaAgreed) {
+      setEulaFail(true);
+      return;
+    }
+
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      var _recaptchaRef$current3;
+      setPendingSubmit(true);
+      setError(null);
+      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      return;
+    }
+    submitForm(recaptchaToken);
   };
+
+  // Button is disabled only while actively submitting or waiting for reCAPTCHA
   const disabled = !eulaAgreed || !email || !name;
   const settings = data.viewer.settings;
   const newsletterOptInLabel = settings === null || settings === void 0 ? void 0 : settings.newsletterOptInLabel;
@@ -140,18 +182,24 @@ const TestFontsFormComponent = _ref2 => {
     dangerouslySetInnerHTML: {
       __html: newsletterOptInLabel
     }
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+    ref: recaptchaRef,
+    sitekey: recaptchaSiteKey,
+    size: "invisible",
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
     type: "submit",
-    disabled: submitting || disabled
-  }, downloadLabel, /*#__PURE__*/_react.default.createElement("span", {
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : downloadLabel, /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, " \u2192")))), /*#__PURE__*/_react.default.createElement("form", {
     action: archiveUrl ?? undefined,
     ref: downloadForm
   }));
 };
-const query = (_TestFontsForm_Query2.default.hash && _TestFontsForm_Query2.default.hash !== "b8838ac445fa9addb19af5a2d653e979" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query2.default);
+const query = (_TestFontsForm_Query2.default.hash && _TestFontsForm_Query2.default.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query2.default);
 function TestFontsFormPreloadedQueryRenderer(_ref4) {
   let {
     preloadedQuery,

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -168,7 +168,7 @@ 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, _order$stripePaymentI, _viewer$settings3, _order$stripePaymentI2, _order$stripePaymentI3;
   let {
     order: orderKey,
     viewer: viewerKey,
@@ -176,7 +176,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     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 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
@@ -664,7 +664,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"
@@ -708,7 +708,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     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/dist/relay/environment.js

@@ -8,6 +8,9 @@ exports.responseCache = exports.networkFetch = void 0;
 exports.useCurrentEnvironment = useCurrentEnvironment;
 var _react = require("react");
 var _relayRuntime = require("relay-runtime");
+var _package = require("../../package.json");
+// @ts-ignore - JSON import
+
 const IS_SERVER = typeof window === typeof undefined;
 const FONTDUE_URL = typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined;
 if (IS_SERVER && (FONTDUE_URL == null || FONTDUE_URL === '')) {
@@ -25,7 +28,8 @@ function createNetworkFetch(options) {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
-        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic')
+        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic'),
+        'fontdue-client-version': _package.version
       },
       body: JSON.stringify({
         query: request.text,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.17.2",
+  "version": "2.18.2",
   "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",
@@ -30,6 +30,7 @@
     "fontfaceobserver": "^2.0.13",
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.1.2",
+    "react-google-recaptcha": "^3.1.0",
     "react-redux": "^9",
     "react-relay": "^20.0.0",
     "redux": "^5.0.0",
@@ -48,6 +49,7 @@
     "@types/node": "^24.1.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
+    "@types/react-google-recaptcha": "^2.1.8",
     "@types/react-relay": "^18.0.0",
     "@types/relay-runtime": "^19.0.0",
     "@types/uuid": "^8.3.3",