fontdue-js 2.10.0 → 2.11.0

package/dist/hooks/useLicenseAndOrderVariables.d.ts

@@ -0,0 +1,5 @@
+import { LicenseOptionsSpec } from '../__generated__/StoreModalProductRefetchQuery.graphql';
+export declare function useLicenseAndOrderVariables(): {
+    licenseOptionsSpecs: readonly (LicenseOptionsSpec | null)[];
+    orderVariableSelections: import("../reducer").OrderVariableSelectionState[];
+};

package/dist/hooks/useLicenseAndOrderVariables.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLicenseAndOrderVariables = useLicenseAndOrderVariables;
+var _react = require("react");
+var _reactRedux = require("react-redux");
+function useLicenseAndOrderVariables() {
+  // Select raw data from Redux with shallow equality check
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions, _reactRedux.shallowEqual);
+
+  // Select order variables from Redux
+  const orderVariableSelections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections, _reactRedux.shallowEqual);
+
+  // Memoize the transformed license options data
+  const licenseOptionsSpecs = (0, _react.useMemo)(() => licenseOptions.length > 0 ? licenseOptions.map(spec => ({
+    licenseId: spec.licenseId,
+    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+  })) : [], [licenseOptions]);
+  return {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  };
+}

package/dist/hooks/useOrderVariables.d.ts

@@ -0,0 +1,5 @@
+import type { useOrderVariables_order$key } from '../__generated__/useOrderVariables_order.graphql';
+export declare function useOrderVariables(order: useOrderVariables_order$key | null): {
+    orderVariableId: string;
+    orderVariableOptionId: string | undefined;
+}[];

package/dist/hooks/useRefetchOnLicenseChanges.d.ts

@@ -0,0 +1,22 @@
+import { Environment, GraphQLTaggedNode } from 'relay-runtime';
+import { LicenseOptionsSpec, OrderVariableSelectionInput } from '../__generated__/StoreModalProductRefetchQuery.graphql';
+type RefetchFn = (variables: {
+    licenseOptions: ReadonlyArray<LicenseOptionsSpec | null>;
+    orderVariables: ReadonlyArray<OrderVariableSelectionInput>;
+}, options?: {
+    fetchPolicy?: 'store-only';
+}) => void;
+interface UseRefetchOnLicenseChangesOptions {
+    environment: Environment;
+    refetch: RefetchFn;
+    query: GraphQLTaggedNode;
+    variables?: Record<string, any>;
+}
+/**
+ * Custom hook to handle refetching data when license options or order variables change.
+ * Uses a two-step process to prevent UI flickering:
+ * 1. Fetches new data into the store
+ * 2. Updates the component with a store-only policy
+ */
+export declare function useRefetchOnLicenseChanges({ environment, refetch, query, variables, }: UseRefetchOnLicenseChangesOptions): void;
+export {};

package/dist/hooks/useRefetchOnLicenseChanges.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRefetchOnLicenseChanges = useRefetchOnLicenseChanges;
+var _react = require("react");
+var _relayRuntime = require("relay-runtime");
+var _useLicenseAndOrderVariables = require("./useLicenseAndOrderVariables");
+/**
+ * Custom hook to handle refetching data when license options or order variables change.
+ * Uses a two-step process to prevent UI flickering:
+ * 1. Fetches new data into the store
+ * 2. Updates the component with a store-only policy
+ */
+function useRefetchOnLicenseChanges(_ref) {
+  let {
+    environment,
+    refetch,
+    query,
+    variables = {}
+  } = _ref;
+  const {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+
+    // First fetch the data into the store
+    const subscription = (0, _relayRuntime.fetchQuery)(environment, query, {
+      ...variables,
+      licenseOptions: licenseOptionsSpecs,
+      orderVariables: orderVariableSelections
+    }).subscribe({
+      complete: () => {
+        // Only update if component is still mounted
+        if (mounted) {
+          // Then update from store only to prevent flickering
+          refetch({
+            ...variables,
+            licenseOptions: licenseOptionsSpecs,
+            orderVariables: orderVariableSelections
+          }, {
+            fetchPolicy: 'store-only'
+          });
+        }
+      },
+      error: error => {
+        if (mounted) {
+          console.error('Failed to refetch data:', error);
+        }
+      }
+    });
+    return () => {
+      mounted = false;
+      // Cancel the fetch operation if it's still pending
+      subscription.unsubscribe();
+    };
+  }, [licenseOptionsSpecs, orderVariableSelections, environment, query, variables]);
+}

package/dist/react-ranger.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRanger = useRanger;
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getBoundingClientRect = element => {
   const rect = element.getBoundingClientRect();
   return {

package/dist/reducer.d.ts

@@ -11,6 +11,10 @@ interface LicenseOptionSpec {
         [variableId: string]: string;
     };
 }
+export interface OrderVariableSelectionState {
+    orderVariableId: string;
+    orderVariableOptionId: string | null;
+}
 export interface FontdueState {
     stylesheets: string[];
     cartOpen: boolean;
@@ -35,6 +39,8 @@ export interface FontdueState {
         name: keyof RouteConfig;
         variables?: object;
     }[];
+    orderVariableSelections: OrderVariableSelectionState[];
+    licenseeIsBillingIdentity: boolean | null;
 }
 export type FontdueAction = {
     type: 'CLOSE_CART';
@@ -82,6 +88,12 @@ export type FontdueAction = {
     variables?: object;
 } | {
     type: 'STORE_MODAL_BACK';
+} | {
+    type: 'UPDATE_ORDER_VARIABLE_SELECTIONS';
+    selections: OrderVariableSelectionState[];
+} | {
+    type: 'UPDATE_LICENSEE_IS_BILLING_IDENTITY';
+    value: boolean;
 };
 export declare const collectionSkuIdWithDiscount: (state: FontdueState, skuId: string) => [string, number] | [null, null];
 declare const reducer: Reducer<FontdueState, FontdueAction>;

package/dist/reducer.js

@@ -178,6 +178,13 @@ const storeModalBack = state => {
     storeModalHistory: history.slice(0, history.length - 1)
   };
 };
+const updateOrderVariableSelections = (state, action) => {
+  if (action.type !== 'UPDATE_ORDER_VARIABLE_SELECTIONS') return state;
+  return {
+    ...state,
+    orderVariableSelections: action.selections
+  };
+};
 const reducer = (state, action) => {
   if (!state) throw 'Reducer called without state';
   switch (action.type) {
@@ -231,6 +238,13 @@ const reducer = (state, action) => {
       return storeModalReplace(state, action);
     case 'STORE_MODAL_BACK':
       return storeModalBack(state);
+    case 'UPDATE_ORDER_VARIABLE_SELECTIONS':
+      return updateOrderVariableSelections(state, action);
+    case 'UPDATE_LICENSEE_IS_BILLING_IDENTITY':
+      return {
+        ...state,
+        licenseeIsBillingIdentity: action.value
+      };
     default:
       return state;
   }
@@ -254,7 +268,9 @@ function createDefaultStore(config) {
         excludeTags: configValue.storeModal.indexExcludeTags
       }
     },
-    storeModalHistory: []
+    storeModalHistory: [],
+    orderVariableSelections: [],
+    licenseeIsBillingIdentity: null
   });
 }
 var _default = reducer;

package/dist/relay/environment.d.ts

@@ -3,7 +3,7 @@ export declare const networkFetch: (request: RequestParameters, variables: Varia
 export declare const responseCache: QueryResponseCache | null;
 interface CreateRelayEnvironmentOptions {
     url?: string;
-    stripeIntegration?: 'payment-element' | 'card-element';
+    stripeIntegration?: 'card-element' | 'dynamic';
 }
 export declare function createEnvironment(options: CreateRelayEnvironmentOptions): Environment;
 export declare function useCurrentEnvironment(options: CreateRelayEnvironmentOptions): Environment;

package/dist/relay/environment.js

@@ -8,13 +8,6 @@ exports.responseCache = exports.networkFetch = void 0;
 exports.useCurrentEnvironment = useCurrentEnvironment;
 var _react = require("react");
 var _relayRuntime = require("relay-runtime");
-class GraphQLError extends Error {
-  constructor(error) {
-    super(error.message);
-    this.message = error.message;
-    this.code = error.code;
-  }
-}
 const IS_SERVER = typeof window === typeof undefined;
 const FONTDUE_URL = typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined;
 if (IS_SERVER && (FONTDUE_URL == null || FONTDUE_URL === '')) {
@@ -32,7 +25,7 @@ function createNetworkFetch(options) {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
-        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'payment-element')
+        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic')
       },
       body: JSON.stringify({
         query: request.text,
@@ -47,7 +40,11 @@ function createNetworkFetch(options) {
     if (Array.isArray(json.errors)) {
       var _json$errors;
       const error = (_json$errors = json.errors) === null || _json$errors === void 0 ? void 0 : _json$errors[0];
-      console.error(new GraphQLError(error));
+      console.error('GraphQL Error:', {
+        message: error.message,
+        code: error.code,
+        path: error.path
+      });
     }
     return json;
   };

package/dist/vanilla/FontStyle.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _fontfaceobserver = _interopRequireDefault(require("fontfaceobserver"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FALLBACK_FAMILY = 'Fallback';
 const setStyle = ($el, _ref) => {
   let {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "fontdue-js",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "scripts": {
-    "build": "npm run relay && run-p build-js build-css build-ts-declarations",
+    "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
-    "build-ts-declarations": "tsc",
+    "build-ts": "tsc",
     "build-css": "sass --load-path=node_modules --no-source-map src/index.scss dist/fontdue.css",
     "relay": "relay-compiler",
     "update-unicode-data": "node src/scripts/updateUnicodeData.js",
@@ -20,8 +20,8 @@
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.5",
     "@react-hook/window-size": "^3.0.7",
-    "@stripe/react-stripe-js": "^1.10.0",
-    "@stripe/stripe-js": "^1.36.0",
+    "@stripe/react-stripe-js": "^3.6.0",
+    "@stripe/stripe-js": "^7.0.0",
     "classnames": "^2.2.5",
     "draft-js": "^0.11.7",
     "fast-deep-equal": "^2.0.1",