fontdue-js 2.16.1 → 2.17.1

package/dist/fontdue.css

@@ -1148,7 +1148,6 @@ body[data-fontdue-store-modal=open] {
 @media (min-width: 900px) {
   .store-modal__cart__review {
     padding-right: var(--StoreModalPageContainer-side-padding);
-    border-right: 1px solid var(--horizontal_rule_color);
     flex: 1;
   }
 }
@@ -1159,6 +1158,9 @@ body[data-fontdue-store-modal=open] {
     grid-auto-rows: min-content;
     grid-gap: 20px;
     align-items: baseline;
+    position: sticky;
+    top: 20px;
+    align-self: start;
   }
 }
 
@@ -1205,6 +1207,7 @@ body[data-fontdue-store-modal=open] {
   .store-modal__cart__checkout {
     flex: 1;
     padding-left: var(--StoreModalPageContainer-side-padding);
+    border-left: 1px solid var(--horizontal_rule_color);
   }
 }
 
@@ -1938,6 +1941,9 @@ body[data-fontdue-store-modal=open] {
 .store-modal__order-variable-selection__button[data-selected=true]:not(:disabled) .store-modal__order-variable-selection__label {
   border-color: var(--button_selected_border_color);
 }
+[data-variable-type=country] .store-modal__order-variable-selection__button {
+  cursor: default;
+}
 .store-modal__order-variable-selection__button .icon {
   font-size: 18px;
   margin-right: 8px;
@@ -1949,7 +1955,7 @@ body[data-fontdue-store-modal=open] {
   align-items: flex-start;
   display: flex;
 }
-[data-variable-type=select] .store-modal__order-variable-selection__label {
+[data-variable-type=select] .store-modal__order-variable-selection__label, [data-variable-type=country] .store-modal__order-variable-selection__label {
   border-right: 1px solid var(--button_border_color);
 }
 
@@ -2025,6 +2031,13 @@ body[data-fontdue-store-modal=open] {
   color: var(--secondary_text_color);
 }
 
+.store-modal__order-variable-selection__country-value {
+  flex: 3 0 60%;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+}
+
 .store-modal__page__container {
   flex: 1;
   display: flex;
@@ -2267,13 +2280,12 @@ body[data-fontdue-store-modal=open] {
   padding-left: var(--StoreModalPageContainer-padding);
   padding-right: var(--StoreModalPageContainer-padding);
   padding-bottom: 40px;
-  border-bottom: 1px solid var(--horizontal_rule_color);
-  margin-bottom: 40px;
   line-height: 20px;
   --gutter: 20px;
 }
-.cart-item:first-child {
+.cart-item + .cart-item {
   border-top: 1px solid var(--horizontal_rule_color);
+  padding-top: 40px;
 }
 @media (min-width: 900px) {
   .cart-item {
@@ -2311,6 +2323,9 @@ body[data-fontdue-store-modal=open] {
   display: flex;
   justify-content: space-between;
 }
+.cart-item:first-child .cart-item__name {
+  margin-top: 0;
+}
 .cart-item__licenses {
   margin: 0;
   padding: 0;
@@ -2323,6 +2338,9 @@ body[data-fontdue-store-modal=open] {
   padding-top: 20px;
   padding-bottom: 20px;
 }
+.cart-item:first-child .cart-item__license:first-child {
+  padding-top: 0;
+}
 @media (pointer: fine) {
   .cart-item__license[data-close-button-hovered=true] {
     color: var(--link_hover_color);
@@ -2463,12 +2481,18 @@ body[data-fontdue-store-modal=open] {
   margin-top: 20px;
   font-variant-numeric: tabular-nums;
 }
+.cart-item:first-child .cart-item__price {
+  margin-top: 0;
+}
 @media (min-width: 900px) {
   .cart-item__price {
     display: initial;
     margin-top: 30px;
     text-align: right;
   }
+  .cart-item:first-child .cart-item__price {
+    margin-top: 0;
+  }
 }
 .cart-item__additional-licenses {
   padding-top: 16px;
@@ -2523,6 +2547,9 @@ body[data-fontdue-store-modal=open] {
   margin-top: -20px;
   text-align: right;
 }
+.cart__price-block__placeholder {
+  color: var(--secondary_text_color);
+}
 .cart__remove-discount-button {
   background: none;
   color: inherit;
@@ -2621,7 +2648,7 @@ body[data-fontdue-store-modal=open] {
   text-align: center;
   background: var(--button_background_color);
   border: 1px solid var(--button_border_color);
-  color: 1px solid var(--button_text_color);
+  color: var(--button_text_color);
   padding: 10px 20px;
 }
 .cart__share__button:active, .cart__share__button:focus {
@@ -2880,9 +2907,6 @@ textarea.text-field__input {
   resize: none;
 }
 
-.text-field__label[data-has-error] {
-  color: var(--error_color);
-}
 .text-field__label-wrapper {
   color: var(--secondary_text_color);
 }
@@ -2906,7 +2930,7 @@ textarea.text-field__input {
   text-transform: inherit;
   flex: 1;
   color: currentcolor;
-  padding: 10px 15px;
+  padding: 12px;
   background: var(--secondary_background_color);
 }
 .text-field__input:active, .text-field__input:focus {
@@ -2923,6 +2947,8 @@ textarea.text-field__input {
 }
 .text-field__error {
   color: var(--error_color);
+  margin-top: 3px;
+  font-size: 15px;
 }
 
 .variable-table-amounts {

package/dist/reducer.d.ts

@@ -14,6 +14,7 @@ interface LicenseOptionSpec {
 export interface OrderVariableSelectionState {
     orderVariableId: string;
     orderVariableOptionId: string | null;
+    countryCode?: string | null;
 }
 export interface FontdueState {
     stylesheets: string[];

package/dist/utils/interpolateOrderVariableDescription.d.ts

@@ -0,0 +1,36 @@
+interface OrderVariable {
+    variableType: string;
+    multiplier: string;
+    orderVariableOptions?: ReadonlyArray<{
+        readonly id: string;
+        readonly amount: string | null;
+        readonly multiplier: string | null;
+    }> | null;
+}
+interface Selection {
+    orderVariableOptionId?: string | null;
+    countryCode?: string | null;
+}
+interface Country {
+    readonly code: string;
+    readonly name: string;
+}
+interface InterpolateOptions {
+    variable: OrderVariable;
+    selection?: Selection;
+    countries?: ReadonlyArray<Country> | null;
+}
+/**
+ * Interpolates placeholders in an order variable description template.
+ *
+ * Supported placeholders:
+ * - {selection} - the selected option amount (for select) or country name (for country)
+ * - {percentage} - formatted multiplier as percentage (e.g., "+15.4%", "-25%")
+ * - {multiplier} - raw multiplier value (e.g., "1.154", "0.75")
+ *
+ * @param template - The description template with placeholders
+ * @param options - Variable, selection, and countries data
+ * @returns Interpolated description string, or null if selection data is incomplete
+ */
+export declare function interpolateOrderVariableDescription(template: string, options: InterpolateOptions): string | null;
+export {};

package/dist/utils/interpolateOrderVariableDescription.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -27,4 +27,5 @@ export declare const parseCustomProperties: (props: readonly string[] | null | u
     [key: string]: string;
 };
 export declare const inspect: (value: any) => any;
+export declare function getFeatureGlyphs(supportedLanguages: readonly string[] | null): "Aa" | "ت" | "Αα" | "Аа" | null;
 export {};

package/dist/utils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelected = exports.inspect = exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collContainsSkuId = void 0;
+exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collContainsSkuId = void 0;
+exports.getFeatureGlyphs = getFeatureGlyphs;
+exports.isSelected = exports.inspect = void 0;
 exports.kebabToCamel = kebabToCamel;
 exports.notEmpty = notEmpty;
 exports.variableSettingsCSS = exports.variableInstanceSettings = exports.variableInstanceCSS = exports.pluralize = exports.parseCustomProperties = void 0;
@@ -88,4 +90,11 @@ const inspect = value => {
   console.log(value);
   return value;
 };
-exports.inspect = inspect;
+exports.inspect = inspect;
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.16.1",
+  "version": "2.17.1",
   "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",
@@ -21,6 +21,7 @@
     "@emotion/react": "^11.14.0",
     "@react-hook/resize-observer": "^2",
     "@react-hook/window-size": "^3.0.7",
+    "@sentry/react": "^10.17.0",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",
     "classnames": "^2.2.5",