fontdue-js 2.18.2 → 2.18.4

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,14 +169,14 @@ function EditableSection(_ref) {
   }, "Change")));
 }
 function StoreModalUnifiedCheckout(_ref2) {
-  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _order$stripePaymentI, _viewer$settings3, _order$stripePaymentI2, _order$stripePaymentI3;
+  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 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
@@ -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", {
@@ -702,7 +750,7 @@ 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",

package/dist/fontdue.css

@@ -448,6 +448,14 @@ div[data-component=TypeTesters] {
   flex: 0 1 250px;
   margin-right: 20px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar .type-tester__variable-axes {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 5px;
+    width: 100%;
+  }
+}
 .type-tester__toolbar {
   display: flex;
   align-items: center;
@@ -457,6 +465,14 @@ div[data-component=TypeTesters] {
   z-index: 2;
   margin-top: 10px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar {
+    flex-wrap: wrap;
+  }
+  .type-tester__toolbar .type-tester__select-button-wrapper {
+    margin-left: auto;
+  }
+}
 .type-tester__toolbar__price-text {
   margin: 0 20px;
   opacity: 0.5;
@@ -470,6 +486,13 @@ div[data-component=TypeTesters] {
 .type-tester__toolbar__tools:not(:last-child) {
   margin-right: 20px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar__tools {
+    order: 1;
+    flex: 1 0 100%;
+    margin-top: 5px;
+  }
+}
 .type-tester[data-shy=hover] .type-tester__toolbar__tools, .type-tester[data-shy=focus] .type-tester__toolbar__tools {
   opacity: 0;
   pointer-events: none;
@@ -674,9 +697,7 @@ div[data-component=TypeTesters] {
 .type-tester__variable-axes__value {
   margin-left: 10px;
   margin-right: 16px;
-  width: 3em;
   text-align: right;
-  font-feature-settings: "tnum" 1;
 }
 .type-tester__variable-axes__name {
   white-space: nowrap;
@@ -2068,11 +2089,44 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__product-summary__container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.store-modal__product-summary__row {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.store-modal__product-summary__error {
+  font-size: 14px;
+  color: var(--error_text_color, #c00);
+  line-height: 1.4;
+}
+
+.store-modal__product-summary__error-button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+  text-decoration: underline;
+}
+.store-modal__product-summary__error-button:active, .store-modal__product-summary__error-button:focus {
+  outline: none;
+}
+.store-modal__product-summary__error-button:not(:disabled) {
+  cursor: pointer;
+}
+
 .store-modal__product-summary__add-to-cart-button {
   background: none;
   color: inherit;