fontdue-js 2.16.1 → 2.17.1

package/dist/components/Cart/CustomerFields.js

@@ -13,16 +13,22 @@ var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const notEmpty = value => value != null;
 const CustomerFields = _ref => {
   let {
     title,
     value,
     onChange,
-    optInLabel
+    optInLabel,
+    errors
   } = _ref;
   const {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
+  const getErrors = field => {
+    var _errors$field;
+    return errors === null || errors === void 0 ? void 0 : (_errors$field = errors[field]) === null || _errors$field === void 0 ? void 0 : _errors$field.filter(notEmpty);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title ? /*#__PURE__*/_react.default.createElement("div", {
     className: "checkout-modal__section"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -38,7 +44,8 @@ const CustomerFields = _ref => {
     value: value.name || '',
     onChange: v => onChange({
       name: v
-    })
+    }),
+    errors: getErrors('name')
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "checkout-modal__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
@@ -49,7 +56,8 @@ const CustomerFields = _ref => {
     value: value.email || '',
     onChange: v => onChange({
       email: v
-    })
+    }),
+    errors: getErrors('email')
   })), optInLabel && /*#__PURE__*/_react.default.createElement("div", {
     className: "checkout-modal__section"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Cart/types.d.ts

@@ -8,7 +8,7 @@ export interface Identity {
     name: string;
     organization: string | null;
     email: string;
-    phone: string;
+    phone: string | null;
     country: string;
     administrativeArea: string | null;
     street: string | null;

package/dist/components/ConfigContext.d.ts

@@ -8,11 +8,15 @@ interface FormConfig {
 interface StripeConfig {
     appearance?: Appearance;
 }
+interface TrackingConfig {
+    enabled?: boolean;
+}
 export interface Config {
     form?: FormConfig;
     storeModal?: StoreModalConfig;
     typeTester?: TypeTesterConfig;
     stripe?: StripeConfig;
+    tracking?: TrackingConfig;
 }
 export declare const makeConfig: (config?: Config) => {
     typeTester: {
@@ -72,6 +76,9 @@ export declare const makeConfig: (config?: Config) => {
     stripe: {
         appearance: Appearance | null;
     };
+    tracking: {
+        enabled: boolean;
+    };
 };
 declare const _default: React.Context<{
     typeTester: {
@@ -131,5 +138,8 @@ declare const _default: React.Context<{
     stripe: {
         appearance: Appearance | null;
     };
+    tracking: {
+        enabled: boolean;
+    };
 }>;
 export default _default;

package/dist/components/ConfigContext.js

@@ -54,7 +54,7 @@ const makeTypeTesterConfig = config => {
   };
 };
 const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe;
+  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -67,6 +67,9 @@ const makeConfig = config => {
     },
     stripe: {
       appearance: (config === null || config === void 0 ? void 0 : (_config$stripe = config.stripe) === null || _config$stripe === void 0 ? void 0 : _config$stripe.appearance) ?? null
+    },
+    tracking: {
+      enabled: (config === null || config === void 0 ? void 0 : (_config$tracking = config.tracking) === null || _config$tracking === void 0 ? void 0 : _config$tracking.enabled) ?? false // Explicit opt-in required
     }
   };
 };

package/dist/components/OrderVariableSelection/OrderVariableSelectionRedux.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
 var _index = _interopRequireDefault(require("./index"));
+var _OrderVariableSelectionReduxRefetchQuery = _interopRequireDefault(require("../../__generated__/OrderVariableSelectionReduxRefetchQuery.graphql"));
+var _useRefetchOnLicenseChanges = require("../../hooks/useRefetchOnLicenseChanges");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +20,14 @@ function OrderVariableSelectionRedux(_ref) {
     disabled,
     children
   } = _ref;
-  const viewer = (0, _reactRelay.useFragment)((_OrderVariableSelectionRedux_viewer2.default.hash && _OrderVariableSelectionRedux_viewer2.default.hash !== "7d07b06f69f3c216f916b8da7c604cd5" && console.error("The definition of 'OrderVariableSelectionRedux_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelectionRedux_viewer2.default), viewerKey);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_OrderVariableSelectionRedux_viewer2.default.hash && _OrderVariableSelectionRedux_viewer2.default.hash !== "eaa5e1fdf47cb582dd3c7bdea0a5e6b2" && console.error("The definition of 'OrderVariableSelectionRedux_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelectionRedux_viewer2.default), viewerKey);
+  (0, _useRefetchOnLicenseChanges.useRefetchOnLicenseChanges)({
+    environment,
+    refetch,
+    query: _OrderVariableSelectionReduxRefetchQuery.default,
+    variables: {}
+  });
   const dispatch = (0, _reactRedux.useDispatch)();
   const selections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections);
   const handleSelectionChange = (0, _react.useCallback)(newSelections => {
@@ -27,6 +36,26 @@ function OrderVariableSelectionRedux(_ref) {
       selections: newSelections
     });
   }, [dispatch]);
+
+  // Auto-populate Redux state with detected country for country-type variables
+  (0, _react.useEffect)(() => {
+    if (!viewer.detectedCountry || !viewer.orderVariables) return;
+
+    // Find country-type variables that don't have a selection yet
+    const countryVariablesNeedingSelection = viewer.orderVariables.filter(v => v.variableType === 'country').filter(v => !selections.find(s => s.orderVariableId === v.id));
+    if (countryVariablesNeedingSelection.length === 0) return;
+
+    // Pre-populate with detected country
+    const newSelections = [...selections, ...countryVariablesNeedingSelection.map(v => ({
+      orderVariableId: v.id,
+      orderVariableOptionId: null,
+      countryCode: viewer.detectedCountry
+    }))];
+    dispatch({
+      type: 'UPDATE_ORDER_VARIABLE_SELECTIONS',
+      selections: newSelections
+    });
+  }, [viewer.detectedCountry, viewer.orderVariables, selections, dispatch]);
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     variables: viewer,
     selections: selections,

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

@@ -3,6 +3,7 @@ import { OrderVariableSelection_variables$key } from '__generated__/OrderVariabl
 export interface OrderVariableSelectionInput {
     orderVariableId: string;
     orderVariableOptionId: string | null;
+    countryCode?: string | null;
 }
 export type GhostVariable = {
     orderVariable: {
@@ -25,9 +26,10 @@ interface OrderVariableSelectionProps {
     disabled: boolean;
     ghostVariables?: GhostVariable[];
     onRemoveGhostVariable?: (orderVariableId: string) => void;
+    descriptionOverrides?: Record<string, string | null>;
     children: {
         label: React.ReactNode;
     };
 }
-export default function OrderVariableSelection({ variables: variablesKey, selections, onSelectionChange, disabled, ghostVariables, onRemoveGhostVariable, children: { label }, }: OrderVariableSelectionProps): React.JSX.Element | null;
+export default function OrderVariableSelection({ variables: variablesKey, selections, onSelectionChange, disabled, ghostVariables, onRemoveGhostVariable, descriptionOverrides, children: { label }, }: OrderVariableSelectionProps): React.JSX.Element | null;
 export {};

package/dist/components/OrderVariableSelection/index.js

@@ -24,7 +24,8 @@ function Variable(_ref) {
     selection,
     onToggle,
     ghost = false,
-    onRemoveGhost
+    onRemoveGhost,
+    countries
   } = _ref;
   const {
     form: config
@@ -39,7 +40,7 @@ function Variable(_ref) {
       // For unselected select variables, select the first option by default
       onToggle(variable.id, variable.orderVariableOptions[0].id);
     }
-    // Do nothing when clicking an already selected select variable
+    // Country variables are now static (non-editable)
   }, [variable, isSelected, onToggle]);
   const handleChangeVariableOption = (0, _react.useCallback)(e => {
     onToggle(variable.id, e.target.value);
@@ -61,6 +62,7 @@ function Variable(_ref) {
     });
   }
   const selectedOption = (_options = options) === null || _options === void 0 ? void 0 : _options.find(o => o.id === (selection === null || selection === void 0 ? void 0 : selection.orderVariableOptionId));
+  const selectedCountry = countries === null || countries === void 0 ? void 0 : countries.find(c => c.code === (selection === null || selection === void 0 ? void 0 : selection.countryCode));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__order-variable-selection__item",
     "data-variable-type": variable.variableType,
@@ -94,7 +96,9 @@ function Variable(_ref) {
       value: id,
       disabled: disabled
     }, amount, " ", disabled ? '(Deprecated)' : null);
-  }))) : null), variable.description ? /*#__PURE__*/_react.default.createElement("div", {
+  }))) : null, variable.variableType === 'country' && selectedCountry ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "store-modal__order-variable-selection__country-value"
+  }, selectedCountry.name) : null), variable.description ? /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__order-variable-selection__description",
     dangerouslySetInnerHTML: {
       __html: variable.description
@@ -114,17 +118,19 @@ function OrderVariableSelection(_ref3) {
     disabled,
     ghostVariables = [],
     onRemoveGhostVariable,
+    descriptionOverrides,
     children: {
       label
     }
   } = _ref3;
-  const variables = (0, _reactRelay.useFragment)((_OrderVariableSelection_variables2.default.hash && _OrderVariableSelection_variables2.default.hash !== "791f9f19a96e680b9fa2b1ad81e8aa2f" && console.error("The definition of 'OrderVariableSelection_variables' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelection_variables2.default), variablesKey);
-  const handleSelectionChange = (0, _react.useCallback)((variableId, optionId) => {
+  const variables = (0, _reactRelay.useFragment)((_OrderVariableSelection_variables2.default.hash && _OrderVariableSelection_variables2.default.hash !== "b73b43b61cd5edd5face7d4a5615b2f5" && console.error("The definition of 'OrderVariableSelection_variables' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelection_variables2.default), variablesKey);
+  const handleSelectionChange = (0, _react.useCallback)((variableId, optionId, countryCode) => {
     var _variables$orderVaria;
     // Update the selections with the new value
     const newSelections = selections.map(selection => ({
       orderVariableId: selection.orderVariableId,
-      orderVariableOptionId: selection.orderVariableOptionId
+      orderVariableOptionId: selection.orderVariableOptionId,
+      countryCode: selection.countryCode
     }));
     const existingIndex = newSelections.findIndex(s => s.orderVariableId === variableId);
 
@@ -137,16 +143,21 @@ function OrderVariableSelection(_ref3) {
         newSelections.splice(existingIndex, 1);
       } else {
         // Update existing selection
+        // For country variables: clear orderVariableOptionId when setting countryCode
+        // For select/boolean variables: clear countryCode when setting orderVariableOptionId
+        const isCountryVariable = (variable === null || variable === void 0 ? void 0 : variable.variableType) === 'country';
         newSelections[existingIndex] = {
           ...newSelections[existingIndex],
-          orderVariableOptionId: optionId
+          orderVariableOptionId: isCountryVariable ? null : optionId,
+          countryCode: isCountryVariable ? countryCode ?? newSelections[existingIndex].countryCode : null
         };
       }
     } else {
       // Add new selection
       newSelections.push({
         orderVariableId: variableId,
-        orderVariableOptionId: optionId
+        orderVariableOptionId: optionId,
+        countryCode: countryCode
       });
     }
     onSelectionChange(newSelections);
@@ -160,15 +171,23 @@ function OrderVariableSelection(_ref3) {
   }, /*#__PURE__*/_react.default.createElement("h3", {
     className: "store-modal__order-variable-selection__title"
   }, label), variables.orderVariables.map(variable => {
+    var _variables$countries;
     const currentSelection = selections.find(s => s.orderVariableId === variable.id);
+
+    // Use description override if provided, otherwise use the variable's description
+    const effectiveVariable = (descriptionOverrides === null || descriptionOverrides === void 0 ? void 0 : descriptionOverrides[variable.id]) !== undefined ? {
+      ...variable,
+      description: descriptionOverrides[variable.id]
+    } : variable;
     return /*#__PURE__*/_react.default.createElement(Variable, {
       key: variable.id,
-      variable: variable,
+      variable: effectiveVariable,
       selection: currentSelection,
-      onToggle: (orderVariableId, orderVariableOptionId) => handleSelectionChange(orderVariableId, orderVariableOptionId !== undefined ? orderVariableOptionId : null)
+      countries: ((_variables$countries = variables.countries) === null || _variables$countries === void 0 ? void 0 : _variables$countries.filter(c => c !== null)) ?? null,
+      onToggle: (orderVariableId, orderVariableOptionId, countryCode) => handleSelectionChange(orderVariableId, orderVariableOptionId !== undefined ? orderVariableOptionId : null, countryCode)
     });
   }), ghostVariables.map(ghost => {
-    var _ghost$orderVariableO, _ghost$orderVariableO2;
+    var _ghost$orderVariableO, _ghost$orderVariableO2, _variables$countries2;
     return /*#__PURE__*/_react.default.createElement(Variable, {
       key: ghost.orderVariable.id,
       variable: {
@@ -180,6 +199,7 @@ function OrderVariableSelection(_ref3) {
         orderVariableOptionId: ((_ghost$orderVariableO = ghost.orderVariableOption) === null || _ghost$orderVariableO === void 0 ? void 0 : _ghost$orderVariableO.id) ?? null,
         orderVariableOptionAmount: ((_ghost$orderVariableO2 = ghost.orderVariableOption) === null || _ghost$orderVariableO2 === void 0 ? void 0 : _ghost$orderVariableO2.amount) ?? null
       },
+      countries: ((_variables$countries2 = variables.countries) === null || _variables$countries2 === void 0 ? void 0 : _variables$countries2.filter(c => c !== null)) ?? null,
       ghost: true,
       onToggle: () => {} // Ghost variables don't toggle
       ,

package/dist/components/StoreModal/StoreModalCart.js

@@ -27,7 +27,7 @@ const StoreModalCart = _ref => {
   let {
     prepared
   } = _ref;
-  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCartQuery2.default.hash && _StoreModalCartQuery2.default.hash !== "01df757f83a8740dcfa4ed706347ab35" && console.error("The definition of 'StoreModalCartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCartQuery2.default), prepared.cartQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCartQuery2.default.hash && _StoreModalCartQuery2.default.hash !== "cfbbbef5d65b35eacebf30617fe2538e" && console.error("The definition of 'StoreModalCartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCartQuery2.default), prepared.cartQuery);
   const order = data.viewer.currentOrder;
   const orderHasItems = ((order === null || order === void 0 ? void 0 : (_order$orderItems = order.orderItems) === null || _order$orderItems === void 0 ? void 0 : _order$orderItems.length) ?? 0) > 0;
   const checkoutEnabled = (0, _utils.textVariablesAllHaveText)(order);
@@ -35,7 +35,7 @@ const StoreModalCart = _ref => {
     body: order && orderHasItems ? /*#__PURE__*/_react.default.createElement(_CartState.default, {
       order: order
     }, _ref2 => {
-      var _order$orderItems2, _order$total;
+      var _data$viewer, _data$viewer$currentO, _data$viewer$currentO2, _order$orderItems2, _order$total, _data$viewer2, _data$viewer2$setting;
       let {
         onUpdateOrderVariableSelections,
         onRemoveDiscount,
@@ -45,10 +45,11 @@ const StoreModalCart = _ref => {
       return /*#__PURE__*/_react.default.createElement(_StoreModalCartLayout.default, {
         checkoutEnabled: checkoutEnabled
       }, {
-        orderVariables: Boolean((order === null || order === void 0 ? void 0 : order.orderItems) && order.orderItems.length > 0) && /*#__PURE__*/_react.default.createElement(_StoreModalOrderVariableSelection.default, {
+        orderVariables: (_data$viewer = data.viewer) !== null && _data$viewer !== void 0 && (_data$viewer$currentO = _data$viewer.currentOrder) !== null && _data$viewer$currentO !== void 0 && (_data$viewer$currentO2 = _data$viewer$currentO.orderVariableSelections) !== null && _data$viewer$currentO2 !== void 0 && _data$viewer$currentO2.length ? /*#__PURE__*/_react.default.createElement(_StoreModalOrderVariableSelection.default, {
           viewer: data.viewer,
+          order: order,
           onSelectionChange: onUpdateOrderVariableSelections
-        }),
+        }) : null,
         items: order === null || order === void 0 ? void 0 : (_order$orderItems2 = order.orderItems) === null || _order$orderItems2 === void 0 ? void 0 : _order$orderItems2.map((item, i) => {
           var _errors$orderItems;
           return /*#__PURE__*/_react.default.createElement(_CartItem.default, {
@@ -65,7 +66,8 @@ const StoreModalCart = _ref => {
         totals: /*#__PURE__*/_react.default.createElement(_CartTotals.default, {
           order: order,
           onRemoveDiscount: onRemoveDiscount,
-          hideTotal: !order.billingIdentity
+          billingIdentity: order.billingIdentity,
+          taxSystem: (_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.taxSystem
         }),
         checkout: /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
           viewer: data.viewer,
@@ -73,7 +75,8 @@ const StoreModalCart = _ref => {
         }, /*#__PURE__*/_react.default.createElement(_StoreModalUnifiedCheckout.default, {
           viewer: data.viewer,
           order: order,
-          onScrollToTop: () => {}
+          onScrollToTop: () => {},
+          onUpdateOrderVariableSelections: onUpdateOrderVariableSelections
         }))
       });
     }) : /*#__PURE__*/_react.default.createElement(_EmptyCart.default, null)

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -18,14 +18,14 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StoreModalIndexItem = _ref => {
-  var _data$featureStyle$fa, _data$featureStyle$fa2;
+  var _data$featureStyle$fa, _data$featureStyle, _data$featureStyle$fa2;
   let {
     collection
   } = _ref;
   const {
     storeModal: config
   } = (0, _react.useContext)(_ConfigContext.default);
-  const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "3a41c729cade11bb541bc59a6b513d29" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection2.default), collection);
+  const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "c066b135c6b830ef95bfc0d307e46791" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection2.default), collection);
   const dispatch = (0, _reactRedux.useDispatch)();
   const handleClickProduct = productId => {
     dispatch({
@@ -57,7 +57,7 @@ const StoreModalIndexItem = _ref => {
       href: data.featureStyle.family.cssUrl
     }), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
       fontStyle: data.featureStyle
-    }, "Aa")) : null),
+    }, (0, _utils.getFeatureGlyphs)((_data$featureStyle = data.featureStyle) === null || _data$featureStyle === void 0 ? void 0 : _data$featureStyle.supportedLanguages))) : null),
     name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, ((_data$featureStyle$fa2 = data.featureStyle.family) === null || _data$featureStyle$fa2 === void 0 ? void 0 : _data$featureStyle$fa2.cssUrl) && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
       href: data.featureStyle.family.cssUrl
     }), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {

package/dist/components/StoreModal/StoreModalOrderVariableSelection.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { StoreModalOrderVariableSelection_viewer$key } from '__generated__/StoreModalOrderVariableSelection_viewer.graphql';
+import { StoreModalOrderVariableSelection_order$key } from '__generated__/StoreModalOrderVariableSelection_order.graphql';
 import { OrderVariableSelectionInput } from '../OrderVariableSelection';
 interface StoreModalOrderVariableSelectionProps {
     viewer: StoreModalOrderVariableSelection_viewer$key;
+    order: StoreModalOrderVariableSelection_order$key;
     onSelectionChange: (selections: OrderVariableSelectionInput[]) => void;
 }
-export default function StoreModalOrderVariableSelection({ viewer: viewerKey, onSelectionChange, }: StoreModalOrderVariableSelectionProps): React.JSX.Element;
+export default function StoreModalOrderVariableSelection({ viewer: viewerKey, order: orderKey, onSelectionChange, }: StoreModalOrderVariableSelectionProps): React.JSX.Element;
 export {};

package/dist/components/StoreModal/StoreModalOrderVariableSelection.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = StoreModalOrderVariableSelection;
+var _StoreModalOrderVariableSelection_order2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_order.graphql"));
 var _StoreModalOrderVariableSelection_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_viewer.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
@@ -12,26 +13,43 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function StoreModalOrderVariableSelection(_ref) {
-  var _viewer$currentOrder, _viewer$currentOrder$, _viewer$orderVariable, _viewer$currentOrder2, _viewer$currentOrder3, _viewer$settings;
+  var _order$orderVariableS, _viewer$orderVariable, _order$orderVariableS2, _order$orderVariableS3, _viewer$settings;
   let {
     viewer: viewerKey,
+    order: orderKey,
     onSelectionChange
   } = _ref;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_viewer2.default.hash && _StoreModalOrderVariableSelection_viewer2.default.hash !== "bdc0a78f68144b3270e1b8bf38f5d13f" && console.error("The definition of 'StoreModalOrderVariableSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_viewer2.default), viewerKey);
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_viewer2.default.hash && _StoreModalOrderVariableSelection_viewer2.default.hash !== "b959e46df4274deb8a53ef227787c34a" && console.error("The definition of 'StoreModalOrderVariableSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_viewer2.default), viewerKey);
+  const order = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_order2.default.hash && _StoreModalOrderVariableSelection_order2.default.hash !== "85bc6b91bb3e9b7ee708f776acf670fd" && console.error("The definition of 'StoreModalOrderVariableSelection_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_order2.default), orderKey);
 
   // Transform order variable selections for the OrderVariableSelection component
-  const selections = (_viewer$currentOrder = viewer.currentOrder) === null || _viewer$currentOrder === void 0 ? void 0 : (_viewer$currentOrder$ = _viewer$currentOrder.orderVariableSelections) === null || _viewer$currentOrder$ === void 0 ? void 0 : _viewer$currentOrder$.map(selection => {
+  const selections = (_order$orderVariableS = order.orderVariableSelections) === null || _order$orderVariableS === void 0 ? void 0 : _order$orderVariableS.map(selection => {
     var _selection$orderVaria, _selection$orderVaria2;
     return {
       orderVariableId: selection.orderVariable.id,
       orderVariableOptionId: ((_selection$orderVaria = selection.orderVariableOption) === null || _selection$orderVaria === void 0 ? void 0 : _selection$orderVaria.id) || null,
-      orderVariableOptionAmount: ((_selection$orderVaria2 = selection.orderVariableOption) === null || _selection$orderVaria2 === void 0 ? void 0 : _selection$orderVaria2.amount) || null
+      orderVariableOptionAmount: ((_selection$orderVaria2 = selection.orderVariableOption) === null || _selection$orderVaria2 === void 0 ? void 0 : _selection$orderVaria2.amount) || null,
+      countryCode: selection.countryCode || null
     };
   });
   const orderVariableIds = new Set(((_viewer$orderVariable = viewer.orderVariables) === null || _viewer$orderVariable === void 0 ? void 0 : _viewer$orderVariable.map(variable => variable.id)) || []);
 
+  // Create a map of order variable ID to orderVariableDescription for active variables
+  const descriptionOverrides = ((_order$orderVariableS2 = order.orderVariableSelections) === null || _order$orderVariableS2 === void 0 ? void 0 : _order$orderVariableS2.reduce((acc, selection) => {
+    if (orderVariableIds.has(selection.orderVariable.id)) {
+      acc[selection.orderVariable.id] = selection.orderVariableDescription;
+    }
+    return acc;
+  }, {})) ?? {};
+
   // Find ghost variables (variables that exist in the order but not in the available list)
-  const ghostVariables = ((_viewer$currentOrder2 = viewer.currentOrder) === null || _viewer$currentOrder2 === void 0 ? void 0 : (_viewer$currentOrder3 = _viewer$currentOrder2.orderVariableSelections) === null || _viewer$currentOrder3 === void 0 ? void 0 : _viewer$currentOrder3.filter(selection => !orderVariableIds.has(selection.orderVariable.id))) ?? [];
+  const ghostVariables = ((_order$orderVariableS3 = order.orderVariableSelections) === null || _order$orderVariableS3 === void 0 ? void 0 : _order$orderVariableS3.filter(selection => !orderVariableIds.has(selection.orderVariable.id)).map(selection => ({
+    orderVariable: {
+      ...selection.orderVariable,
+      description: selection.orderVariableDescription
+    },
+    orderVariableOption: selection.orderVariableOption
+  }))) ?? [];
 
   // Handle updating the order when selections change
   const handleSelectionChange = (0, _react.useCallback)(newSelections => {
@@ -67,7 +85,8 @@ function StoreModalOrderVariableSelection(_ref) {
     selections: selections ?? [],
     onSelectionChange: handleSelectionChange,
     ghostVariables: ghostVariables,
-    onRemoveGhostVariable: handleRemoveGhostVariable
+    onRemoveGhostVariable: handleRemoveGhostVariable,
+    descriptionOverrides: descriptionOverrides
   }, {
     label: /*#__PURE__*/_react.default.createElement("div", {
       dangerouslySetInnerHTML: {

package/dist/components/StoreModal/StoreModalProduct.js

@@ -30,7 +30,7 @@ const StoreModalProduct = _ref => {
   } = _ref;
   const config = (0, _react.useContext)(_ConfigContext.default);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  const initialData = (0, _reactRelay.usePreloadedQuery)((_StoreModalProductQuery2.default.hash && _StoreModalProductQuery2.default.hash !== "82a6352ac1eeaab3d25c315793f97a9c" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery2.default), prepared.productQuery);
+  const initialData = (0, _reactRelay.usePreloadedQuery)((_StoreModalProductQuery2.default.hash && _StoreModalProductQuery2.default.hash !== "b2803257576691f16a283d10e53439e3" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery2.default), prepared.productQuery);
   const [data, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductContent_collection2.default.hash && _StoreModalProductContent_collection2.default.hash !== "0684ec2633ccc5d4d0866e7780df28cc" && console.error("The definition of 'StoreModalProductContent_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductContent_collection2.default), initialData.collection);
   const collection = data;
   const {

package/dist/components/StoreModal/StoreModalStyleButton.js

@@ -17,13 +17,6 @@ var _utils = require("../../utils");
 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 THIN_SPACE = '\u2009';
-function getFeatureGlyphs(supportedLanguages) {
-  if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('en')) return 'Aa';
-  if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('ar')) return 'ت';
-  if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('gr')) return 'Αα';
-  if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('ru')) return 'Аа';
-  return null;
-}
 function StoreModalStyleButton(_ref) {
   var _fontStyle$variableIn;
   let {
@@ -48,7 +41,7 @@ function StoreModalStyleButton(_ref) {
     }, isVariableFont ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.map((instance, i) => /*#__PURE__*/_react.default.createElement("span", {
       key: instance.name,
       style: (0, _utils.variableInstanceCSS)(instance)
-    }, i !== 0 && THIN_SPACE, getFeatureGlyphs(fontStyle.supportedLanguages))) : getFeatureGlyphs(fontStyle.supportedLanguages)),
+    }, i !== 0 && THIN_SPACE, (0, _utils.getFeatureGlyphs)(fontStyle.supportedLanguages))) : (0, _utils.getFeatureGlyphs)(fontStyle.supportedLanguages)),
     // for variable fonts, only show the name of the style if there are
     // multiple styles
     name: isVariableFont ? fontStyle.sku ? fontStyle.name : undefined : fontStyle.name,

package/dist/components/StripeProvider/index.js

@@ -88,15 +88,16 @@ const StripeProvider = _ref => {
         fontWeightBold: '400',
         colorBackground: customProperties['--secondary_background_color'],
         colorText: customProperties['--primary_text_color'],
+        colorDanger: customProperties['--error_color'],
         colorBackgroundText: customProperties['--primary_text_color'],
         colorSuccessText: customProperties['--success_color'],
         colorDangerText: customProperties['--error_color'],
         colorTextPlaceholder: customProperties['--secondary_text_color'],
         focusBoxShadow: `0 0 0 1px ${customProperties['--primary_text_color']}`,
         fontSizeBase: '16px',
-        fontSmooth: 'always',
+        fontSmooth: 'auto',
         gridRowSpacing: '30px',
-        spacingUnit: '5px',
+        spacingUnit: '3px',
         accordionItemSpacing: '20px'
       },
       rules: {
@@ -153,7 +154,8 @@ const StripeProvider = _ref => {
       }
     },
     fonts: customFontSource ? [customFontSource] : undefined,
-    clientSecret
+    clientSecret,
+    syncAddressCheckbox: 'none'
   };
   if (providerType === 'checkout') {
     return /*#__PURE__*/_react.default.createElement(_reactStripeJs.EmbeddedCheckoutProvider, {

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -48,9 +48,18 @@ function TypeTesterStyleSelectData(_ref) {
     variableSettings,
     includeVariableAxesOption
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "6d485f52ae538b13da3f1f924512299c" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
-  const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "1358148ad95a34299279a025b991e467" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer2.default), viewerKey);
-  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty);
+  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "187778816a910be9ab709431d1d818b3" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
+  const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "5e5834d9202f90bdde5a0a7db49e8639" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer2.default), viewerKey);
+  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty).filter(family => {
+    var _family$featureStyle, _family$featureStyle$;
+    return (// make sure the family options' supportedLanguages intersect with the current selection's supportedLanuages.
+      // e.g. if the current font style only supports 'ar', only show families that include 'ar'
+      (_family$featureStyle = family.featureStyle) === null || _family$featureStyle === void 0 ? void 0 : (_family$featureStyle$ = _family$featureStyle.supportedLanguages) === null || _family$featureStyle$ === void 0 ? void 0 : _family$featureStyle$.some(lang => {
+        var _fontStyle$supportedL;
+        return (_fontStyle$supportedL = fontStyle.supportedLanguages) === null || _fontStyle$supportedL === void 0 ? void 0 : _fontStyle$supportedL.includes(lang);
+      })
+    );
+  });
   const handleSelectFamilyId = (0, _react.useCallback)(id => {
     const family = familyData && familyData.find(family => family.id === id);
     if (!family) return;

package/dist/components/elements/StoreModalUnifiedCheckout.d.ts

@@ -1,3 +1,61 @@
+/**
+ * StoreModalUnifiedCheckout
+ *
+ * This component handles the checkout flow for orders, collecting customer information,
+ * billing/licensee details, and processing payment through Stripe.
+ *
+ * Key implementation details:
+ *
+ * 1. Auto-save billing identity (fontdue tax system only):
+ *    - When using fontdue's tax system (not Stripe Tax), we need the billing address
+ *      to calculate taxes before showing the final amount
+ *    - The billing identity is auto-saved (with 500ms debounce) once the Stripe Address
+ *      Element reports complete (name + address fields)
+ *    - Email is a separate field (not part of Address Element), so auto-save may trigger
+ *      before email is filled, which will cause backend validation errors to display
+ *    - This ensures taxes are calculated and displayed before the user clicks Pay
+ *    - On page reload, if billing identity already exists, billingAddressComplete starts
+ *      as true to prevent re-triggering auto-save
+ *
+ * 2. Billing identity diff tracking:
+ *    - We track differences between local state and saved backend data (billingIdentityDiff)
+ *    - This determines isBillingIdentitySaved, which controls when payment can proceed
+ *    - If the user edits any field after auto-save, it triggers another save cycle
+ *    - All fields are normalized (null/undefined/empty string treated as equivalent)
+ *
+ * 3. Pay button validation:
+ *    - The Pay button is always enabled (as long as EULA is checked) even if billing
+ *      info isn't fully saved yet
+ *    - This is intentional: we need to allow the user to click Pay so we can call
+ *      elements.submit(), which triggers Stripe's validation and shows any validation
+ *      errors inline in the Stripe UI elements
+ *    - After Stripe validation passes, we check if billing identity is saved
+ *    - If not saved, we show an error message above the Pay button asking them to
+ *      complete billing information (validation errors should now be visible above)
+ *
+ * 4. Customer info pre-fill:
+ *    - When customer submits their contact info, if billing name/email are empty,
+ *      we pre-fill them from customer data as a convenience
+ *
+ * 5. Country mismatch handling (order snapshots):
+ *    - When loading a hydrated order (e.g., from quote/snapshot), the order may have
+ *      a country variable that differs from the user's detected country
+ *    - In this case, we force licenseeIsBillingIdentity to false and always collect
+ *      separate licensee information to ensure the licensee country matches the quote
+ *    - This preserves pricing/availability from the original quote
+ *
+ * 6. Licensee country syncing:
+ *    - When licensee country changes, it automatically updates any country-type order
+ *      variables to maintain consistent pricing based on the selected country
+ *
+ * 7. Zero-order/coupon flow:
+ *    - Orders with $0 total (due to coupons) bypass Stripe payment entirely
+ *    - These use the completeOrder mutation instead of confirmPayment
+ *
+ * 8. Tax system variations:
+ *    - Stripe Tax system: Uses embedded checkout, billing handled by Stripe
+ *    - Fontdue tax system: Collects billing info directly, auto-saves for tax calculation
+ */
 import React from 'react';
 import { StoreModalUnifiedCheckout_viewer$key } from '__generated__/StoreModalUnifiedCheckout_viewer.graphql';
 import { StoreModalUnifiedCheckout_order$key } from '__generated__/StoreModalUnifiedCheckout_order.graphql';
@@ -5,6 +63,7 @@ interface Props {
     order: StoreModalUnifiedCheckout_order$key;
     viewer: StoreModalUnifiedCheckout_viewer$key;
     onScrollToTop: () => void;
+    onUpdateOrderVariableSelections: (selections: any[]) => void;
 }
-export default function StoreModalUnifiedCheckout({ order: orderKey, viewer: viewerKey, onScrollToTop, }: Props): React.JSX.Element;
+export default function StoreModalUnifiedCheckout({ order: orderKey, viewer: viewerKey, onScrollToTop, onUpdateOrderVariableSelections, }: Props): React.JSX.Element;
 export {};