fontdue-js 2.17.1 → 2.18.1

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7183fbedeafbebe5a87197cb023bfc40>>
+ * @generated SignedSource<<77143b56d76cde92647b41b80c14a88a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -38,6 +38,12 @@ export type StoreModalProductSummary_viewer$data = {
             readonly " $fragmentSpreads": FragmentRefs<"Price_price">;
         } | null;
     } | null;
+    readonly settings: {
+        readonly stripeTaxSettings: {
+            readonly taxBehavior: string | null;
+        } | null;
+        readonly taxSystem: string;
+    } | null;
     readonly taxCollections: ReadonlyArray<{
         readonly inclusive: boolean;
         readonly taxName: string;

package/dist/__generated__/StoreModalProductSummary_viewer.graphql.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _StoreModalProductSummaryRefetchQuery = _interopRequireDefault(require("./StoreModalProductSummaryRefetchQuery.graphql"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * @generated SignedSource<<7183fbedeafbebe5a87197cb023bfc40>>
+ * @generated SignedSource<<77143b56d76cde92647b41b80c14a88a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -76,6 +76,36 @@ const node = function () {
     },
     "name": "StoreModalProductSummary_viewer",
     "selections": [{
+      "alias": null,
+      "args": null,
+      "concreteType": "Settings",
+      "kind": "LinkedField",
+      "name": "settings",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "taxSystem",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "StripeTaxSettings",
+        "kind": "LinkedField",
+        "name": "stripeTaxSettings",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "taxBehavior",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    }, {
       "alias": null,
       "args": null,
       "concreteType": "TaxCollection",
@@ -203,6 +233,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "e21762fcdb76ac693bcdf7b98effc40b";
+node.hash = "d95602902697c0bb7ca4be2089649198";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d68089e8bc657b1cc594c4cbc03a25bc>>
+ * @generated SignedSource<<d997fbe505c7bf6f8ab6e05db335721b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,6 +9,7 @@ export type UpdateCustomerInput = {
     email?: string | null;
     name?: string | null;
     newsletterOptIn?: boolean | null;
+    recaptchaToken?: string | null;
 };
 export type StoreModalUnifiedCheckoutUpdateCustomerMutation$variables = {
     input: UpdateCustomerInput;

package/dist/__generated__/StoreModalUnifiedCheckoutUpdateCustomerMutation.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<d68089e8bc657b1cc594c4cbc03a25bc>>
+ * @generated SignedSource<<d997fbe505c7bf6f8ab6e05db335721b>>
  * @lightSyntaxTransform
  * @nogrep
  */

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<955383975fd3e6c3d1aead410f172705>>
+ * @generated SignedSource<<410f5861dc700f9d280fe855abbc8c0a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,6 +9,7 @@ export type UpdateCustomerInput = {
     email?: string | null;
     name?: string | null;
     newsletterOptIn?: boolean | null;
+    recaptchaToken?: string | null;
 };
 export type TestFontsFormUpdateCustomerMutation$variables = {
     input: UpdateCustomerInput;

package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<955383975fd3e6c3d1aead410f172705>>
+ * @generated SignedSource<<410f5861dc700f9d280fe855abbc8c0a>>
  * @lightSyntaxTransform
  * @nogrep
  */

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2b508e476eab7361bd3e3adc71e33eec>>
+ * @generated SignedSource<<ee5a584fb3013fee58346747b616f67d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,8 @@ export type TestFontsForm_Query$data = {
         readonly settings: {
             readonly eulaAgreementLabel: string | null;
             readonly newsletterOptInLabel: string | null;
+            readonly recaptchaEnabled: boolean;
+            readonly recaptchaSiteKey: string | null;
         } | null;
         readonly testFonts: {
             readonly archiveUrl: string | null;

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<2b508e476eab7361bd3e3adc71e33eec>>
+ * @generated SignedSource<<ee5a584fb3013fee58346747b616f67d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -39,6 +39,18 @@ const node = function () {
         "kind": "ScalarField",
         "name": "newsletterOptInLabel",
         "storageKey": "newsletterOptInLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "recaptchaEnabled",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "recaptchaSiteKey",
+        "storageKey": null
       }],
       "storageKey": null
     },
@@ -100,15 +112,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "d7935ae01719384130b5923be45bb47a",
+      "cacheID": "328cab794a68cbe666374e901da4d26b",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n    }\n    testFonts {\n      archiveUrl\n    }\n    id\n  }\n}\n"
+      "text": "query TestFontsForm_Query {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    testFonts {\n      archiveUrl\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "b8838ac445fa9addb19af5a2d653e979";
+node.hash = "cd43f0cacc4dcf01cf94fb1ff97197ca";
 var _default = node;
 exports.default = _default;

package/dist/components/CharacterViewer/index.js

@@ -159,6 +159,14 @@ function areCombiningChars(input) {
   }
   return true;
 }
+
+// Arabic positional features that don't render correctly in Safari
+// These require text shaping that Safari doesn't properly support with ZWJ
+const UNSUPPORTED_POSITIONAL_FEATURES = ['init', 'medi', 'fina'];
+function hasUnsupportedPositionalFeatures(features) {
+  if (!features) return false;
+  return features.some(f => UNSUPPORTED_POSITIONAL_FEATURES.includes(f));
+}
 function CharacterViewerComponent(_ref3) {
   let {
     collection: collectionKey
@@ -277,15 +285,27 @@ function CharacterViewerComponent(_ref3) {
   const groups = (0, _react.useMemo)(() => {
     var _collection$glyphGrou;
     return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref5 => {
+      var _characterSets$filter;
       let {
         name,
         characterSets
       } = _ref5;
       return {
         name,
-        characterSets: characterSets === null || characterSets === void 0 ? void 0 : characterSets.map(charSet => flattenCharacterList(charSet, fontStyle.glyphNames)).filter(_utils.notEmpty)
+        characterSets: characterSets
+        // Filter out character sets with Arabic positional features (init, medi, fina)
+        // These don't render correctly in Safari due to text shaping limitations
+        === null || characterSets
+        // Filter out character sets with Arabic positional features (init, medi, fina)
+        // These don't render correctly in Safari due to text shaping limitations
+        === void 0 ? void 0 : (_characterSets$filter = characterSets
+        // Filter out character sets with Arabic positional features (init, medi, fina)
+        // These don't render correctly in Safari due to text shaping limitations
+        .filter(charSet => !hasUnsupportedPositionalFeatures(charSet.features))) === null || _characterSets$filter === void 0 ? void 0 : _characterSets$filter.map(charSet => flattenCharacterList(charSet, fontStyle.glyphNames)).filter(_utils.notEmpty)
       };
-    });
+    })
+    // Filter out groups that have no character sets left after filtering
+    .filter(group => group.characterSets && group.characterSets.length > 0);
   }, [collection, fontStyle]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer",

package/dist/components/ConfigContext.d.ts

@@ -8,8 +8,13 @@ interface FormConfig {
 interface StripeConfig {
     appearance?: Appearance;
 }
+interface SegmentConfig {
+    writeKey?: string;
+    integrations?: Record<string, boolean>;
+}
 interface TrackingConfig {
     enabled?: boolean;
+    segment?: SegmentConfig;
 }
 export interface Config {
     form?: FormConfig;
@@ -38,10 +43,10 @@ export declare const makeConfig: (config?: Config) => {
             buttonLabel: string;
             interactionStyle: "select" | "panel";
             columns: {
-                features: (string | {
+                features: ({
                     code: string;
                     name: string;
-                })[];
+                } | string)[];
                 range: number;
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";
@@ -100,10 +105,10 @@ declare const _default: React.Context<{
             buttonLabel: string;
             interactionStyle: "select" | "panel";
             columns: {
-                features: (string | {
+                features: ({
                     code: string;
                     name: string;
-                })[];
+                } | string)[];
                 range: number;
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";

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/Select/index.d.ts

@@ -8,5 +8,5 @@ interface Select_props {
     }[];
 }
 type SelectHTMLProps = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-declare const Select: ({ options, value, nullText, ...rest }: Select_props & Omit<SelectHTMLProps, 'value'>) => React.JSX.Element;
+declare const Select: ({ options, value, nullText, ...rest }: Select_props & Omit<SelectHTMLProps, "value">) => React.JSX.Element;
 export default Select;

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;
+      var _data$viewer, _data$viewer$currentO, _data$viewer$currentO2, _order$orderItems2, _order$total, _data$viewer2, _data$viewer2$setting, _data$viewer3, _data$viewer3$setting;
       let {
         onUpdateOrderVariableSelections,
         onRemoveDiscount,
@@ -71,7 +71,8 @@ const StoreModalCart = _ref => {
         }),
         checkout: /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
           viewer: data.viewer,
-          providerType: "elements"
+          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'
         }, /*#__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 !== "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 !== "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);
   (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/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/TypeTester/useFeaturesData.d.ts

@@ -7,11 +7,11 @@ declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
         [feature: string]: string;
     };
     fontFeatures: {
-        readonly stylisticSetNames: readonly {
+        readonly stylisticSetNames: ReadonlyArray<{
             readonly featureName: string;
             readonly humanName: string;
-        }[];
-        readonly supportedFeatures: readonly string[];
+        }>;
+        readonly supportedFeatures: ReadonlyArray<string>;
     };
     " $fragmentType": "useFeaturesData_fontStyle";
 };

package/dist/components/TypeTester/useTypeTesterStyler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorState } from 'draft-js';
 import { Alignment } from './types';
 import { VariableSettings } from '../../utils';