fontdue-js 3.5.1 → 3.7.0

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

@@ -0,0 +1,34 @@
+import { Environment } from 'relay-runtime';
+import type { FontdueState } from '../../reducer.js';
+import type { LicenseSelectionInput } from '__generated__/storefrontEventsTrackStorefrontEventMutation.graphql.js';
+/** Reports the store modal opening on a collection. */
+export declare function trackProductViewed(environment: Environment, collectionId: string): void;
+type LicenseOptions = FontdueState['licenseOptions'];
+/**
+ * The licence choices in the store's state, in the shape `createOrderItems`
+ * takes them – one selection per licence variable, or one bare selection for a
+ * licence without variables. Sorted, so the same configuration reached in a
+ * different order reads the same.
+ */
+export declare function licenseSelectionsFromOptions(licenseOptions: LicenseOptions): LicenseSelectionInput[];
+/**
+ * Reports the buyer changing their licence choices for a collection, once the
+ * choices settle. Call it from the handler of the buyer's own click, never from
+ * an effect: licences a foundry marks as selected by default are applied on
+ * mount, and that isn't the buyer customizing anything.
+ *
+ * `currentLicenseOptions` is read when the report fires, so it sees the
+ * configuration the buyer settled on.
+ */
+export declare function trackProductCustomized(environment: Environment, collectionId: string, currentLicenseOptions: () => LicenseOptions): void;
+/**
+ * `trackProductCustomized` bound to the store and Relay environment in
+ * context, for a licence control's click handlers.
+ */
+export declare function useTrackProductCustomized(collectionId: string | null | undefined): () => void;
+/**
+ * Reports the checkout's payment details as complete. The server records it
+ * once per order, however often this is called.
+ */
+export declare function trackPaymentInfoEntered(environment: Environment): void;
+export {};

package/dist/components/Cart/storefrontEvents.js

@@ -0,0 +1,138 @@
+import _storefrontEventsTrackStorefrontEventMutation from "../../__generated__/storefrontEventsTrackStorefrontEventMutation.graphql.js";
+import { useCallback } from 'react';
+import { commitMutation, graphql, useRelayEnvironment } from 'react-relay';
+import { useStore } from 'react-redux';
+import { orderTrackingInput } from './orderTracking.js';
+/**
+ * The storefront moments that happen entirely in the browser – a collection
+ * opened in the store modal, its licences changed, the payment details
+ * completed. Nothing reaches the server at those moments on its own, so they
+ * are reported through `trackStorefrontEvent`, which records them as "Product
+ * Viewed", "Product Customized" and "Payment Info Entered" with the same
+ * consent and identifiers as the order events around them (Meta reads them as
+ * ViewContent, CustomizeProduct and AddPaymentInfo).
+ *
+ * Every call is fire-and-forget: tracking must never break the store.
+ */
+function track(environment, input) {
+  const tracking = orderTrackingInput();
+  // Outside a browser there is no moment to report.
+  if (!tracking) return;
+  try {
+    commitMutation(environment, {
+      mutation: (_storefrontEventsTrackStorefrontEventMutation.hash && _storefrontEventsTrackStorefrontEventMutation.hash !== "340cc13477a15b926e2307d36c644053" && console.error("The definition of 'storefrontEventsTrackStorefrontEventMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _storefrontEventsTrackStorefrontEventMutation),
+      variables: {
+        input: {
+          ...input,
+          tracking
+        }
+      },
+      onCompleted: () => undefined,
+      onError: () => undefined
+    });
+  } catch {
+    // Ignore — see above.
+  }
+}
+
+// React can run an effect twice for one mount – StrictMode in development, a
+// Suspense retry – and each run would count as a second look.
+const VIEW_REPEAT_MS = 2000;
+let lastView = null;
+
+/** Reports the store modal opening on a collection. */
+export function trackProductViewed(environment, collectionId) {
+  var _lastView;
+  const now = Date.now();
+  if (((_lastView = lastView) === null || _lastView === void 0 ? void 0 : _lastView.collectionId) === collectionId && now - lastView.at < VIEW_REPEAT_MS) return;
+  lastView = {
+    collectionId,
+    at: now
+  };
+  track(environment, {
+    event: 'PRODUCT_VIEWED',
+    collectionId
+  });
+}
+/**
+ * The licence choices in the store's state, in the shape `createOrderItems`
+ * takes them – one selection per licence variable, or one bare selection for a
+ * licence without variables. Sorted, so the same configuration reached in a
+ * different order reads the same.
+ */
+export function licenseSelectionsFromOptions(licenseOptions) {
+  const selections = licenseOptions.flatMap(_ref => {
+    let {
+      licenseId,
+      licenseOptions: options
+    } = _ref;
+    const variableIds = Object.keys(options ?? {});
+    if (variableIds.length === 0) return [{
+      licenseId
+    }];
+    return variableIds.map(licenseVariableId => ({
+      licenseId,
+      licenseVariableId,
+      licenseOptionId: options[licenseVariableId]
+    }));
+  });
+  const key = s => `${s.licenseId}:${s.licenseVariableId ?? ''}`;
+  return selections.sort((a, b) => key(a).localeCompare(key(b)));
+}
+
+// A buyer clicks through a few licences and sizes before settling. Report the
+// configuration they settle on rather than every step on the way, and only
+// when it differs from the last one reported for that collection.
+const CUSTOMIZE_SETTLE_MS = 1500;
+const pendingCustomizations = new Map();
+const reportedConfigurations = new Map();
+
+/**
+ * Reports the buyer changing their licence choices for a collection, once the
+ * choices settle. Call it from the handler of the buyer's own click, never from
+ * an effect: licences a foundry marks as selected by default are applied on
+ * mount, and that isn't the buyer customizing anything.
+ *
+ * `currentLicenseOptions` is read when the report fires, so it sees the
+ * configuration the buyer settled on.
+ */
+export function trackProductCustomized(environment, collectionId, currentLicenseOptions) {
+  clearTimeout(pendingCustomizations.get(collectionId));
+  pendingCustomizations.set(collectionId, setTimeout(() => {
+    pendingCustomizations.delete(collectionId);
+    const licenseSelections = licenseSelectionsFromOptions(currentLicenseOptions());
+    // Unticking everything configures nothing.
+    if (licenseSelections.length === 0) return;
+    const configuration = JSON.stringify(licenseSelections);
+    if (reportedConfigurations.get(collectionId) === configuration) return;
+    reportedConfigurations.set(collectionId, configuration);
+    track(environment, {
+      event: 'PRODUCT_CUSTOMIZED',
+      collectionId,
+      licenseSelections
+    });
+  }, CUSTOMIZE_SETTLE_MS));
+}
+
+/**
+ * `trackProductCustomized` bound to the store and Relay environment in
+ * context, for a licence control's click handlers.
+ */
+export function useTrackProductCustomized(collectionId) {
+  const environment = useRelayEnvironment();
+  const store = useStore();
+  return useCallback(() => {
+    if (!collectionId) return;
+    trackProductCustomized(environment, collectionId, () => store.getState().licenseOptions);
+  }, [environment, store, collectionId]);
+}
+
+/**
+ * Reports the checkout's payment details as complete. The server records it
+ * once per order, however often this is called.
+ */
+export function trackPaymentInfoEntered(environment) {
+  track(environment, {
+    event: 'PAYMENT_INFO_ENTERED'
+  });
+}

package/dist/components/ConfigContext.d.ts

@@ -42,7 +42,7 @@ export declare const mergeConfig: (base?: Config, override?: Config) => Config;
 export declare const makeConfig: (config?: Config) => {
     typeTester: {
         autofitOnChange: boolean;
-        truncate: number | boolean;
+        truncate: import("./TypeTester/truncate.js").TruncateOption;
         priceText: boolean;
         selectButtonStyle: "inline" | "outlined";
         selectButtonLabel: string;
@@ -120,7 +120,7 @@ export declare const makeConfig: (config?: Config) => {
 declare const _default: React.Context<{
     typeTester: {
         autofitOnChange: boolean;
-        truncate: number | boolean;
+        truncate: import("./TypeTester/truncate.js").TruncateOption;
         priceText: boolean;
         selectButtonStyle: "inline" | "outlined";
         selectButtonLabel: string;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+/** The customer as `verifyLoginCode` returns them. */
+export interface SignedInCustomer {
+    id: string;
+    name: string | null;
+    email: string | null;
+}
+export interface CustomerSignIn_props {
+    /** Prefills the email field – e.g. the address already typed at checkout. */
+    email?: string;
+    /** Called once the customer is signed in and their tokens are stored. */
+    onSignedIn?: (customer: SignedInCustomer | null) => void;
+    /** Label on the button that asks for a code. */
+    requestLabel?: string;
+    /** Label on the button that submits the code. */
+    verifyLabel?: string;
+}
+/**
+ * Sign a returning customer in with a one-time code.
+ *
+ * Two steps: an email address, then the six-digit code Fontdue emails them. On
+ * success the session is stored in this browser and every Fontdue component on
+ * the page sees it – `useCurrentCustomer()` updates, and GraphQL requests carry
+ * the customer's token from then on.
+ *
+ * The code step is shown whether or not the address belongs to a customer.
+ * Fontdue never says which, because saying so would tell anyone who asked
+ * whether a given person has bought from this foundry.
+ *
+ * Self-wraps in `EnsureFontdueContext`, so it works as a standalone island and
+ * no-ops inside an outer `<FontdueProvider>`.
+ */
+export default function CustomerSignIn(props: CustomerSignIn_props): React.JSX.Element;

package/dist/components/CustomerSignIn/index.js

@@ -0,0 +1,170 @@
+'use client';
+
+import _CustomerSignInVerifyLoginCodeMutation from "../../__generated__/CustomerSignInVerifyLoginCodeMutation.graphql.js";
+import _CustomerSignInRequestLoginCodeMutation from "../../__generated__/CustomerSignInRequestLoginCodeMutation.graphql.js";
+import React, { useState } from 'react';
+import { graphql, useMutation } from 'react-relay';
+import TextField from '../TextField/index.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { setTokens } from '../../auth/tokenStore.js';
+import { useFontdueUrl } from '../UrlContext.js';
+const requestLoginCodeMutation = (_CustomerSignInRequestLoginCodeMutation.hash && _CustomerSignInRequestLoginCodeMutation.hash !== "36fccde5eb4502dcd8d3269bb5713547" && console.error("The definition of 'CustomerSignInRequestLoginCodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerSignInRequestLoginCodeMutation);
+const verifyLoginCodeMutation = (_CustomerSignInVerifyLoginCodeMutation.hash && _CustomerSignInVerifyLoginCodeMutation.hash !== "0342b61905975bf0b0112270e8706435" && console.error("The definition of 'CustomerSignInVerifyLoginCodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerSignInVerifyLoginCodeMutation);
+
+/** The customer as `verifyLoginCode` returns them. */
+
+/**
+ * Sign a returning customer in with a one-time code.
+ *
+ * Two steps: an email address, then the six-digit code Fontdue emails them. On
+ * success the session is stored in this browser and every Fontdue component on
+ * the page sees it – `useCurrentCustomer()` updates, and GraphQL requests carry
+ * the customer's token from then on.
+ *
+ * The code step is shown whether or not the address belongs to a customer.
+ * Fontdue never says which, because saying so would tell anyone who asked
+ * whether a given person has bought from this foundry.
+ *
+ * Self-wraps in `EnsureFontdueContext`, so it works as a standalone island and
+ * no-ops inside an outer `<FontdueProvider>`.
+ */
+export default function CustomerSignIn(props) {
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(CustomerSignInFields, props));
+}
+function CustomerSignInFields(_ref) {
+  let {
+    email: initialEmail = '',
+    onSignedIn,
+    requestLabel = 'Email me a code',
+    verifyLabel = 'Sign in'
+  } = _ref;
+  const url = useFontdueUrl();
+  const [email, setEmail] = useState(initialEmail);
+  const [code, setCode] = useState('');
+  const [step, setStep] = useState('email');
+  const [error, setError] = useState(null);
+  const [requestCode, requesting] = useMutation(requestLoginCodeMutation);
+  const [verifyCode, verifying] = useMutation(verifyLoginCodeMutation);
+  const handleRequest = e => {
+    e.preventDefault();
+    setError(null);
+    requestCode({
+      variables: {
+        input: {
+          email
+        }
+      },
+      onCompleted: res => {
+        var _res$requestLoginCode;
+        if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
+          setStep('code');
+        } else {
+          // The only unsuccessful answer is the rate limit, and it is about the
+          // address, not about whether it has an account.
+          setError('Too many codes requested. Please wait a few minutes and try again.');
+        }
+      },
+      onError: mutationError => setError(mutationError.message)
+    });
+  };
+  const handleVerify = e => {
+    e.preventDefault();
+    setError(null);
+    verifyCode({
+      variables: {
+        input: {
+          email,
+          code
+        }
+      },
+      onCompleted: (res, errors) => {
+        const payload = res.verifyLoginCode;
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+          return;
+        }
+        if ((payload === null || payload === void 0 ? void 0 : payload.accessToken) == null || (payload === null || payload === void 0 ? void 0 : payload.refreshToken) == null) {
+          setError('That code isn’t right, or it has expired. Ask for a new one.');
+          return;
+        }
+
+        // Stored before the callback runs, so anything `onSignedIn` triggers
+        // already sends the customer's token.
+        setTokens({
+          accessToken: payload.accessToken,
+          refreshToken: payload.refreshToken
+        }, url);
+        onSignedIn === null || onSignedIn === void 0 ? void 0 : onSignedIn(payload.customer ?? null);
+      },
+      onError: mutationError => setError(mutationError.message)
+    });
+  };
+  const handleStartOver = () => {
+    setStep('email');
+    setCode('');
+    setError(null);
+  };
+  if (step === 'code') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "customer-sign-in",
+      "data-step": "code"
+    }, error && /*#__PURE__*/React.createElement("div", {
+      className: "customer-sign-in__errors"
+    }, error), /*#__PURE__*/React.createElement("form", {
+      className: "customer-sign-in__form",
+      onSubmit: handleVerify
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "customer-sign-in__intro"
+    }, "If ", email, " has an account, a six-digit code is on its way. It works once, and for ten minutes."), /*#__PURE__*/React.createElement("div", {
+      className: "customer-sign-in__section"
+    }, /*#__PURE__*/React.createElement(TextField, {
+      label: "Code *"
+      // `one-time-code` is what lets a phone offer the code straight
+      // from the notification rather than making people switch apps.
+      ,
+      autocomplete: "one-time-code",
+      inputMode: "numeric",
+      value: code,
+      onChange: value => setCode(value),
+      placeholder: "000000"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "customer-sign-in__actions"
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "submit-button",
+      type: "submit",
+      disabled: verifying || !code
+    }, verifying ? 'Signing in...' : verifyLabel, /*#__PURE__*/React.createElement("span", {
+      className: "submit-button__arrow"
+    }, " \u2192")), /*#__PURE__*/React.createElement("button", {
+      className: "customer-sign-in__back",
+      type: "button",
+      onClick: handleStartOver
+    }, "Use a different email"))));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in",
+    "data-step": "email"
+  }, error && /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__errors"
+  }, error), /*#__PURE__*/React.createElement("form", {
+    className: "customer-sign-in__form",
+    onSubmit: handleRequest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__section"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    label: "Email *",
+    type: "email",
+    value: email,
+    onChange: value => setEmail(value),
+    autocomplete: "email",
+    placeholder: "Your email"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "submit-button",
+    type: "submit",
+    disabled: requesting || !email
+  }, requesting ? 'Sending...' : requestLabel, /*#__PURE__*/React.createElement("span", {
+    className: "submit-button__arrow"
+  }, " \u2192")))));
+}

package/dist/components/FontFamilies/index.js

@@ -24,20 +24,21 @@ function FontFamilies(_ref) {
   } = useLicenseAndOrderVariables();
   const {
     node
-  } = useLazyLoadQuery((_FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "18eba6b750d3f714b964af66ecfcfa3b" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
+  } = useLazyLoadQuery((_FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "1ccff8f69fae99e65e6007bf25e4f8a3" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
     collectionId,
     licenseOptions: licenseOptionsSpecs,
     orderVariables: orderVariableSelections
   });
   if (!node) return null;
+  // Unlisted collections are only sold through an upgrade – see StoreModalProduct.
   return /*#__PURE__*/React.createElement("div", {
     className: "font-families"
   }, /*#__PURE__*/React.createElement("div", {
     className: "font-families__items"
-  }, /*#__PURE__*/React.createElement(Family, {
+  }, node.visibility !== 'UNLISTED' && /*#__PURE__*/React.createElement(Family, {
     node: node,
     size: "wide"
-  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => /*#__PURE__*/React.createElement(Family, {
+  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.filter(family => family.visibility !== 'UNLISTED').map((family, index) => /*#__PURE__*/React.createElement(Family, {
     key: index,
     node: family
   }))));

package/dist/components/NewsletterSignup/index.js

@@ -57,7 +57,11 @@ function NewsletterSignupComponent(_ref) {
           name,
           email,
           newsletterOptIn,
-          recaptchaToken: token ?? undefined
+          recaptchaToken: token ?? undefined,
+          // Tells the server which form this was, so it can emit the
+          // matching analytics event: updateCustomer is shared with the
+          // checkout contact step and is otherwise indistinguishable.
+          form: 'NEWSLETTER'
         }
       },
       onCompleted: (_res, errors) => {

package/dist/components/Precart/index.js

@@ -13,6 +13,7 @@ import { Price } from '../Price/index.js';
 import { pluralize } from '../../utils.js';
 import ComponentsContext from '../ComponentsContext.js';
 import { orderTrackingInput } from '../Cart/orderTracking.js';
+import { useTrackProductCustomized } from '../Cart/storefrontEvents.js';
 function skuName(sku) {
   if (sku.product && 'name' in sku.product) return sku.product.name;
   return null;
@@ -79,6 +80,7 @@ function Precart(_ref3) {
   let {
     viewer: viewerKey,
     collection: collectionKey,
+    collectionId,
     isLoading
   } = _ref3;
   const viewer = useFragment((_Precart_viewer.hash && _Precart_viewer.hash !== "fe66a5cdbee38cae7bfb11922f945fd5" && console.error("The definition of 'Precart_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_viewer), viewerKey);
@@ -111,6 +113,7 @@ function Precart(_ref3) {
       }
     });
   }, [environment]);
+  const trackCustomized = useTrackProductCustomized(collectionId);
   const onSelectLicense = (id, checked) => {
     var _collection$licenses, _license$excludedLice;
     const license = collection === null || collection === void 0 ? void 0 : (_collection$licenses = collection.licenses) === null || _collection$licenses === void 0 ? void 0 : _collection$licenses.find(node => node.id === id);
@@ -123,6 +126,7 @@ function Precart(_ref3) {
       licenseOptionSpec,
       excludedLicenseIds: (_license$excludedLice = license.excludedLicenses) === null || _license$excludedLice === void 0 ? void 0 : _license$excludedLice.map(l => l.id)
     });
+    trackCustomized();
   };
   const onSelectLicenseOption = (licenseId, variableId, optionId) => {
     dispatch({
@@ -131,6 +135,7 @@ function Precart(_ref3) {
       variableId,
       optionId
     });
+    trackCustomized();
   };
   const selectedItemsArray = () => Object.keys(selectedSkuIds).filter(id => selectedSkuIds[id] === true);
   const licenseSelectionsArray = () => licenseOptions.reduce((res, _ref4) => {
@@ -340,6 +345,7 @@ function PrecartQueryRenderer(_ref6) {
     collectionId
   });
   return /*#__PURE__*/React.createElement(Precart, _extends({}, data, rest, {
+    collectionId: collectionId,
     isLoading: licenseOptionsSpecs !== deferredLicenseOptionsSpecs || selectedSkuIds !== deferredSelectedSkuIds
   }));
 }

package/dist/components/PriceBar/index.js

@@ -6,7 +6,7 @@ function PriceBar(_ref) {
   let {
     node: nodeKey
   } = _ref;
-  const node = useFragment((_PriceBar_node.hash && _PriceBar_node.hash !== "60c5de3c786db43860478f1b0e00f3df" && console.error("The definition of 'PriceBar_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBar_node), nodeKey);
+  const node = useFragment((_PriceBar_node.hash && _PriceBar_node.hash !== "ccde4ddfe0fb771462c7a0eccf4db454" && console.error("The definition of 'PriceBar_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBar_node), nodeKey);
   const [visible, setVisible] = useState(false);
   const $pricebar = useRef(null);
   useEffect(() => {
@@ -25,15 +25,17 @@ function PriceBar(_ref) {
     };
   }, [setVisible, $pricebar]);
   if (!node) return null;
+
+  // Unlisted collections are only sold through an upgrade – see StoreModalProduct.
   return /*#__PURE__*/React.createElement("div", {
     className: "price-bar",
     ref: $pricebar,
     "data-visible": visible
   }, /*#__PURE__*/React.createElement("div", {
     className: "price-bar__wrapper"
-  }, node.parent && /*#__PURE__*/React.createElement(PriceBarSection, {
+  }, node.parent && node.parent.visibility !== 'UNLISTED' && /*#__PURE__*/React.createElement(PriceBarSection, {
     node: node.parent
-  }), /*#__PURE__*/React.createElement(PriceBarSection, {
+  }), node.visibility !== 'UNLISTED' && /*#__PURE__*/React.createElement(PriceBarSection, {
     node: node
   })));
 }

package/dist/components/Root/index.js

@@ -7,6 +7,8 @@ import { createDefaultStore } from '../../reducer.js';
 import retryImport from '../../retryImport.js';
 import { kebabToCamel, notEmpty } from '../../utils.js';
 import FontdueProvider from '../FontdueProvider/index.js';
+import { makeConfig } from '../ConfigContext.js';
+import { storeModalRouteAction } from '../../storeModalRoutes.js';
 const customElementMap = {
   // @ts-ignore
   'fontdue-add-to-cart-banner': /*#__PURE__*/lazy(() => retryImport(() => import('../AddToCartBanner/index.js'))),
@@ -133,40 +135,8 @@ const Root = props => {
       childList: true
     });
     function handleRoute(url) {
-      const routes = {
-        '^index$': handleIndex,
-        '^cart/?$': handleCart,
-        '^product/([a-zA-Z0-9+/=]+)/?$': handleProduct
-      };
-      for (const [path, handler] of Object.entries(routes)) {
-        const match = url.match(new RegExp(path));
-        if (match) {
-          const params = match.slice(1);
-          handler(...params);
-          return;
-        }
-      }
-    }
-    function handleIndex() {
-      store.current.dispatch({
-        type: 'STORE_MODAL_REPLACE',
-        route: 'index'
-      });
-    }
-    function handleCart() {
-      if (store.current.getState().storeModalHistory) store.current.dispatch({
-        type: 'STORE_MODAL_REPLACE',
-        route: 'cart'
-      });
-    }
-    function handleProduct(productId) {
-      store.current.dispatch({
-        type: 'STORE_MODAL_REPLACE',
-        route: 'product',
-        variables: {
-          productId
-        }
-      });
+      const action = storeModalRouteAction(url, makeConfig(config));
+      if (action) store.current.dispatch(action);
     }
     function fontdueClickHandler(target, _event) {
       if (target.getAttribute('fontdue-click') === 'open-store-modal') {

package/dist/components/Root/productState.d.ts

@@ -2,13 +2,7 @@ import { Environment } from 'react-relay';
 import { Store } from 'redux';
 import { FontdueState, FontdueAction } from '../../reducer.js';
 export declare const populateProductState: (store: Store<FontdueState, FontdueAction>, environment: Environment, id: string) => import("relay-runtime").Subscription | undefined;
-export interface CollectionStyleSkus {
-    fontStyleSkuIds: string[];
-    fontStyleIds: string[];
-    childrenSkuIds: string[];
-    name: string;
-}
-export interface CollectionStyleSkusMap {
-    [collectionSkuId: string]: CollectionStyleSkus | undefined;
+export interface SkuStyleIds {
+    [skuId: string]: string[];
 }
 export declare const populateProductStateReducer: (state: FontdueState, action: FontdueAction) => FontdueState;