fontdue-js 3.5.1 → 3.7.0

package/dist/components/Root/productState.js

@@ -53,58 +53,50 @@ const allSkus = function (collection) {
   }
   return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...collectionBundleSkus, ...memberCollectionSkus, ...childrenSkus].filter(notEmpty);
 };
-const flattenSkuData = collection => {
-  let bundles = {};
-  if ('bundles' in collection && collection.bundles) {
-    bundles = collection.bundles.reduce((res, bundle) => ({
-      ...res,
-      ...flattenSkuData(bundle)
-    }), {});
-  }
-  let collectionBundles = {};
-  if ('collectionBundles' in collection && collection.collectionBundles) {
-    collectionBundles = collection.collectionBundles.reduce((res, collBundle) => ({
-      ...res,
-      ...flattenSkuData(collBundle)
-    }), {});
-  }
-  let children = {};
-  if ('children' in collection && collection.children) {
-    children = collection.children.reduce((res, child) => ({
-      ...res,
-      ...flattenSkuData(child)
-    }), {});
-  }
-  let collectionData = {};
-  if (collection.sku) {
-    var _collection$fontStyle2, _collection$children2;
-    // For collection bundles, get font style IDs from member collections
-    const fontStyleIds = 'memberCollections' in collection && collection.memberCollections ? collection.memberCollections.flatMap(member => {
-      var _member$fontStyles2;
-      return ((_member$fontStyles2 = member.fontStyles) === null || _member$fontStyles2 === void 0 ? void 0 : _member$fontStyles2.map(style => style.id)) ?? [];
-    }) : 'fontStyles' in collection ? (((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(style => style.id)) ?? []).concat('children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
-      var _child$fontStyles;
-      return ((_child$fontStyles = child.fontStyles) === null || _child$fontStyles === void 0 ? void 0 : _child$fontStyles.map(style => style.id)) ?? [];
-    })) ?? [] : []) : [];
-    collectionData = {
-      [collection.sku.id]: {
-        fontStyleIds,
-        fontStyleSkuIds: allSkus(collection, false, true).map(sku => sku.id),
-        childrenSkuIds: allSkus(collection, true, false).map(sku => sku.id).filter(skuId => {
-          var _collection$sku;
-          return skuId !== ((_collection$sku = collection.sku) === null || _collection$sku === void 0 ? void 0 : _collection$sku.id);
-        }),
-        // exclude self
-        name: collection.name
-      }
-    };
+
+// The styles each SKU grants, by SKU id: a style's SKU grants that style, a
+// bundle its styles, a family its styles, a superfamily its families' styles
+// and a collection bundle its member collections' styles. This is all the
+// selection needs to price any combination of them (see selection.ts).
+
+const styleIdsOf = collection => {
+  var _collection$fontStyle2, _collection$children2;
+  if ('memberCollections' in collection && collection.memberCollections) {
+    return collection.memberCollections.flatMap(member => member.fontStyles.map(s => s.id));
   }
-  return {
-    ...collectionData,
-    ...children,
-    ...bundles,
-    ...collectionBundles
+  const own = 'fontStyles' in collection ? ((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(s => s.id)) ?? [] : [];
+  const children = 'children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
+    var _child$fontStyles;
+    return ((_child$fontStyles = child.fontStyles) === null || _child$fontStyles === void 0 ? void 0 : _child$fontStyles.map(s => s.id)) ?? [];
+  })) ?? [] : [];
+  return [...new Set([...own, ...children])];
+};
+const flattenSkuStyleIds = collection => {
+  var _collection$sku;
+  const result = {};
+  const add = (skuId, styleIds) => {
+    // A collection that returns no styles of its own (a superfamily listed as
+    // a collection bundle member) says nothing about what it grants.
+    if (skuId && styleIds.length > 0) result[skuId] = styleIds;
   };
+  const addStyles = fontStyles => {
+    for (const style of fontStyles ?? []) {
+      var _style$sku;
+      add((_style$sku = style.sku) === null || _style$sku === void 0 ? void 0 : _style$sku.id, [style.id]);
+    }
+  };
+  add((_collection$sku = collection.sku) === null || _collection$sku === void 0 ? void 0 : _collection$sku.id, styleIdsOf(collection));
+  if ('fontStyles' in collection) addStyles(collection.fontStyles);
+  if ('memberCollections' in collection) {
+    for (const member of collection.memberCollections ?? []) {
+      var _member$sku;
+      add((_member$sku = member.sku) === null || _member$sku === void 0 ? void 0 : _member$sku.id, member.fontStyles.map(s => s.id));
+      addStyles(member.fontStyles);
+    }
+  }
+  const nested = [...('bundles' in collection ? collection.bundles ?? [] : []), ...('collectionBundles' in collection ? collection.collectionBundles ?? [] : []), ...('children' in collection ? collection.children ?? [] : [])];
+  for (const child of nested) Object.assign(result, flattenSkuStyleIds(child));
+  return result;
 };
 const flattenSkuPrices = collection => {
   return allSkus(collection).reduce((acc, sku) => {
@@ -122,14 +114,11 @@ export const populateProductStateReducer = (state, action) => {
   return {
     ...state,
     // {
-    //   [collectionSkuId]: {
-    //     childrenSkuIds: [skuId...],
-    //     fontStyleSkuIds: [skuId...],
-    //   }
+    //   [skuId]: [styleId...]
     // }
-    collectionStyleSkus: {
-      ...state.collectionStyleSkus,
-      ...flattenSkuData(data.node)
+    skuStyleIds: {
+      ...state.skuStyleIds,
+      ...flattenSkuStyleIds(data.node)
     },
     // {
     //   [skuId]: amount,

package/dist/components/SKUPrice/index.js

@@ -3,20 +3,19 @@ import _SKUPrice_sku from "../../__generated__/SKUPrice_sku.graphql.js";
 import React from 'react';
 import { graphql, useFragment } from 'react-relay';
 import Price from '../Price/index.js';
-import { collectionSkuIdWithDiscount, isSelected } from '../../reducer.js';
+import { isSelected } from '../../reducer.js';
+import { additionalCost } from '../../selection.js';
 import { useSelector } from 'react-redux';
 const getSavingsMultiplier = (state, options) => {
   if (options.showCollectionSavings === false) return 1;
   if (!options.sku) return 1;
   const baseSkuPrice = state.skuPrices[options.sku.id];
-  const [collectionWithSavings, savingsAmount] = collectionSkuIdWithDiscount(state, options.sku.id);
+  const cost = additionalCost(state, options.sku.id);
 
-  // we make it a multiplier since the `collectionSkuIdsDifference`
-  // helper doesnt take license multiplication into account
-  if (collectionWithSavings && baseSkuPrice > 0) {
-    return savingsAmount / baseSkuPrice;
-  }
-  return 1;
+  // A multiplier, since `additionalCost` works in unlicensed prices and the
+  // price shown here carries the license's multipliers
+  if (cost === null || !(baseSkuPrice > 0)) return 1;
+  return cost / baseSkuPrice;
 };
 function SKUPrice(_ref) {
   let {

package/dist/components/StoreModal/StoreModalFamily.js

@@ -38,7 +38,7 @@ export default function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "d2d429ebada7593dd5debcce7a69317d" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection), collectionKey);
+  const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "f136cd0050f0f75f561221fac75feb85" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection), collectionKey);
   const fontStyles = useMemo(() => stylesGrouped(collection), [collection]);
   if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/React.createElement(FamilyElement, null, {
@@ -47,7 +47,9 @@ export default function StoreModalFamily(_ref) {
       collection: collection,
       onSelectSku: onSelect
     }),
-    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => !bundle.hidden).map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
+    // An unlisted bundle gets no button, but its price still applies as an
+    // upgrade: the product state reads every bundle.
+    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => bundle.visibility !== 'UNLISTED').map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
       key: bundle.id,
       bundle: bundle,
       onSelectSku: onSelect

package/dist/components/StoreModal/StoreModalIndex.js

@@ -1,20 +1,61 @@
+import _StoreModalIndex_viewer from "../../__generated__/StoreModalIndex_viewer.graphql.js";
 import _StoreModalIndexQuery from "../../__generated__/StoreModalIndexQuery.graphql.js";
-import React from 'react';
-import { graphql, usePreloadedQuery } from 'react-relay';
+import React, { useCallback, useContext } from 'react';
+import { graphql, usePaginationFragment, usePreloadedQuery } from 'react-relay';
 import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+import StoreModalIndexLoadMore from '../elements/StoreModalIndexLoadMore/index.js';
+import StoreModalContainerContext from '../elements/StoreModalContainer/StoreModalContainerContext.js';
 import StoreModalIndexItem from './StoreModalIndexItem.js';
+import useInfiniteScroll from '../useInfiniteScroll.js';
+
+// How many collections arrive at a time. Enough that a typical catalogue is one
+// request, few enough that a large one doesn't make the visitor wait for every
+// collection's feature style before anything renders. The GraphQL below can't
+// interpolate, so the same number is written into the query's `$count` default
+// and the fragment's argument definitions — keep the three in step.
+const PAGE_SIZE = 25;
+
+// Start the next page while the sentinel is still this far below the modal's
+// visible area, so the pages join up without the visitor reaching a dead end.
+const LOAD_MORE_MARGIN = '0px 0px 600px 0px';
 const StoreModalIndex = _ref => {
-  var _viewer$rootCollectio;
+  var _data$rootCollections;
   let {
     prepared
   } = _ref;
-  const data = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "099c77808b41054885365ebe3eda03c8" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
-  const viewer = data.viewer;
-  const edges = (viewer === null || viewer === void 0 ? void 0 : (_viewer$rootCollectio = viewer.rootCollections) === null || _viewer$rootCollectio === void 0 ? void 0 : _viewer$rootCollectio.edges) ?? [];
+  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "125a10155b690929f0eae6e9e6c7188c" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
+
+  // The query type only carries the fragment spread, not its data type, so
+  // both sides are named explicitly for `data` to be typed.
+  const {
+    data,
+    loadNext,
+    hasNext,
+    isLoadingNext
+  } = usePaginationFragment((_StoreModalIndex_viewer.hash && _StoreModalIndex_viewer.hash !== "f4bd120deb8eea66de4257529cbb022e" && console.error("The definition of 'StoreModalIndex_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndex_viewer), queryData.viewer);
+  const {
+    scrollContainer
+  } = useContext(StoreModalContainerContext);
+  const handleLoadMore = useCallback(() => {
+    // Relay ignores this while a page is already in flight, so the observer
+    // firing repeatedly on the way down costs nothing.
+    loadNext(PAGE_SIZE);
+  }, [loadNext]);
+  const sentinelRef = useInfiniteScroll({
+    enabled: hasNext && !isLoadingNext,
+    onLoadMore: handleLoadMore,
+    rootRef: scrollContainer,
+    rootMargin: LOAD_MORE_MARGIN
+  });
+  const edges = (data === null || data === void 0 ? void 0 : (_data$rootCollections = data.rootCollections) === null || _data$rootCollections === void 0 ? void 0 : _data$rootCollections.edges) ?? [];
   return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
-    body: edges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexItem, {
+    body: /*#__PURE__*/React.createElement(React.Fragment, null, edges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexItem, {
       collection: edge.node,
       key: edge.node.id
+    })), hasNext && /*#__PURE__*/React.createElement(StoreModalIndexLoadMore, {
+      sentinelRef: sentinelRef,
+      onClick: handleLoadMore,
+      loading: isLoadingNext
     }))
   });
 };

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import { PreloadedQuery } from 'react-relay';
 import { StoreModalProductQuery } from '__generated__/StoreModalProductQuery.graphql.js';
+import { StoreModalProductSlugQuery } from '../../__generated__/StoreModalProductSlugQuery.graphql.js';
+export declare const productIdQuery: import("react-relay").GraphQLTaggedNode;
+export declare const productSlugQuery: import("react-relay").GraphQLTaggedNode;
+export type StoreModalProductPreparedQuery = PreloadedQuery<StoreModalProductQuery> | PreloadedQuery<StoreModalProductSlugQuery>;
 interface StoreModalProductProps {
     prepared: {
-        productQuery: PreloadedQuery<StoreModalProductQuery>;
+        productQuery: StoreModalProductPreparedQuery;
     };
 }
 declare const StoreModalProduct: React.FunctionComponent<StoreModalProductProps>;

package/dist/components/StoreModal/StoreModalProduct.js

@@ -1,7 +1,9 @@
 import _StoreModalProductContent_collection from "../../__generated__/StoreModalProductContent_collection.graphql.js";
+import _StoreModalProductViewer from "../../__generated__/StoreModalProductViewer.graphql.js";
+import _StoreModalProductSlugQuery from "../../__generated__/StoreModalProductSlugQuery.graphql.js";
 import _StoreModalProductQuery from "../../__generated__/StoreModalProductQuery.graphql.js";
 import React, { Fragment, useCallback, useContext, useEffect, useMemo } from 'react';
-import { graphql, useRelayEnvironment, usePreloadedQuery, useRefetchableFragment } from 'react-relay';
+import { graphql, useRelayEnvironment, useFragment, usePreloadedQuery, useRefetchableFragment } from 'react-relay';
 import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
 import StoreModalFamily from './StoreModalFamily.js';
 import StoreModalProductSummary from '../StoreModalProductSummary/index.js';
@@ -14,19 +16,30 @@ import ConfigContext from '../ConfigContext.js';
 import { useRefetchOnLicenseChanges } from '../../hooks/useRefetchOnLicenseChanges.js';
 import StoreModalLicenseeIsBillingSelection from './StoreModalLicenseeIsBillingSelection.js';
 import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
-const StoreModalProduct = _ref => {
-  var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _viewer$settings5, _viewer$settings6, _viewer$settings7, _viewer$settings8, _collection$children;
+import { trackProductViewed } from '../Cart/storefrontEvents.js';
+
+// A product is addressed by collection id or by slug — the same two
+// identifiers `BuyButton` takes. Two queries rather than one with `@skip`,
+// so each carries only the selection it needs; both hand the same collection
+// and viewer to `StoreModalProductContent` below.
+export const productIdQuery = (_StoreModalProductQuery.hash && _StoreModalProductQuery.hash !== "e3ca6ec04f2df35aa68baf439c70cf42" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery);
+
+// No `@required` on `fontCollection` here, unlike BuyButton: a slug naming
+// nothing — or naming an article rather than a collection — should land on
+// StoreModalProductContent's "Collection not found", not throw.
+export const productSlugQuery = (_StoreModalProductSlugQuery.hash && _StoreModalProductSlugQuery.hash !== "f0bb35ed9f88ad214b40fd1f3b92fed0" && console.error("The definition of 'StoreModalProductSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSlugQuery);
+const productViewerFragment = (_StoreModalProductViewer.hash && _StoreModalProductViewer.hash !== "3d2fc7da461822a44bb26e9b3f1715fb" && console.error("The definition of 'StoreModalProductViewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductViewer);
+const StoreModalProductContent = _ref => {
+  var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _viewer$settings5, _viewer$settings6, _viewer$settings7, _viewer$settings8;
   let {
-    prepared
+    collection: collectionRef,
+    viewer: viewerRef
   } = _ref;
   const config = useContext(ConfigContext);
   const environment = useRelayEnvironment();
-  const initialData = usePreloadedQuery((_StoreModalProductQuery.hash && _StoreModalProductQuery.hash !== "051d45b088e87330de54058b441ad280" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery), prepared.productQuery);
-  const [data, refetch] = useRefetchableFragment((_StoreModalProductContent_collection.hash && _StoreModalProductContent_collection.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_collection), initialData.collection);
+  const viewer = useFragment(productViewerFragment, viewerRef);
+  const [data, refetch] = useRefetchableFragment((_StoreModalProductContent_collection.hash && _StoreModalProductContent_collection.hash !== "f7a9e591b5e1596f4d518fc5d9d46e91" && 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_collection), collectionRef ?? null);
   const collection = data;
-  const {
-    viewer
-  } = initialData;
   const refetchVariables = useMemo(() => collection !== null && collection !== void 0 && collection.id ? {
     id: collection.id
   } : undefined, [collection === null || collection === void 0 ? void 0 : collection.id]);
@@ -48,6 +61,9 @@ const StoreModalProduct = _ref => {
   useEffect(() => {
     if (collection !== null && collection !== void 0 && collection.id) populateProductState(store, environment, collection.id);
   }, [collection === null || collection === void 0 ? void 0 : collection.id]);
+  useEffect(() => {
+    if (collection !== null && collection !== void 0 && collection.id) trackProductViewed(environment, collection.id);
+  }, [collection === null || collection === void 0 ? void 0 : collection.id]);
   useEffect(() => {
     return () => {
       // unselect the skus when this component unmounts,
@@ -114,6 +130,12 @@ const StoreModalProduct = _ref => {
       __html: ((_viewer$settings8 = viewer.settings) === null || _viewer$settings8 === void 0 ? void 0 : _viewer$settings8.storeModalSelectFontsLabel) ?? ''
     }
   });
+
+  // An unlisted collection gets no block – no family button, bundles or
+  // styles – but stays in the product state, so selecting its siblings can
+  // still upgrade to it (an unlisted superfamily) or to a collection bundle
+  // containing it (an unlisted variable family).
+  const selectableFamilies = [collection, ...(collection.children ?? [])].filter(family => family.visibility !== 'UNLISTED');
   return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
     body: /*#__PURE__*/React.createElement(Fragment, null, licensesPosition === 'top' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingSelection, {
       disabled: false
@@ -136,13 +158,10 @@ const StoreModalProduct = _ref => {
     })), /*#__PURE__*/React.createElement("div", {
       className: "store-modal__families",
       "data-disabled": licensesPosition === 'top' ? !anyLicenseOptionsSelected || !hasSelectionForLicenseeIsBillingIdentity || !!requiredOrderVariablesNotYetSelected : false
-    }, /*#__PURE__*/React.createElement(StoreModalFamily, {
-      title: selectFontsLabel,
-      collection: collection,
-      onSelect: handleSelectProduct
-    }), (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(child => /*#__PURE__*/React.createElement(StoreModalFamily, {
-      key: child.id,
-      collection: child,
+    }, selectableFamilies.map((family, index) => /*#__PURE__*/React.createElement(StoreModalFamily, {
+      key: family.id,
+      title: index === 0 ? selectFontsLabel : undefined,
+      collection: family,
       onSelect: handleSelectProduct
     }))), licensesPosition === 'bottom' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingSelection, {
       disabled: !anySkusSelected
@@ -171,4 +190,38 @@ const StoreModalProduct = _ref => {
     }, "connect your Stripe account"), ' ', "to enable the cart.")
   });
 };
+function StoreModalProductByIdRenderer(_ref2) {
+  let {
+    prepared
+  } = _ref2;
+  const data = usePreloadedQuery(productIdQuery, prepared.productQuery);
+  return /*#__PURE__*/React.createElement(StoreModalProductContent, {
+    collection: data.collection,
+    viewer: data.viewer
+  });
+}
+function StoreModalProductBySlugRenderer(_ref3) {
+  var _data$viewer, _data$viewer$slug;
+  let {
+    prepared
+  } = _ref3;
+  const data = usePreloadedQuery(productSlugQuery, prepared.productQuery);
+  return /*#__PURE__*/React.createElement(StoreModalProductContent, {
+    collection: (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection,
+    viewer: data.viewer
+  });
+}
+
+// Which query the route prepared decides which hook runs — a hook can't be
+// called conditionally, so each lives in its own renderer.
+const StoreModalProduct = _ref4 => {
+  let {
+    prepared
+  } = _ref4;
+  return prepared.productQuery.name === 'StoreModalProductSlugQuery' ? /*#__PURE__*/React.createElement(StoreModalProductBySlugRenderer, {
+    prepared: prepared
+  }) : /*#__PURE__*/React.createElement(StoreModalProductByIdRenderer, {
+    prepared: prepared
+  });
+};
 export default StoreModalProduct;

package/dist/components/StoreModal/index.js

@@ -1,28 +1,28 @@
 'use client';
 
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useContext, useEffect, useRef } from 'react';
 import StoreModalLoader from './StoreModalLoader.js';
 import StoreModalContainer from './StoreModalContainer.js';
 import StoreModalRouter from './StoreModalRouter.js';
 import { useDispatch } from 'react-redux';
 import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import ConfigContext from '../ConfigContext.js';
+import { storeModalUrlActions } from '../../storeModalRoutes.js';
 function StoreModalInner() {
   const dispatch = useDispatch();
+  // Read through a ref: `ConfigOverride` rebuilds the context value on every
+  // render, so depending on it would re-run the effect and re-open the modal
+  // after the visitor had closed it.
+  const configValue = useContext(ConfigContext);
+  const config = useRef(configValue);
+  config.current = configValue;
 
-  // Check for store-modal=open URL parameter and open cart automatically
+  // `?store=open`, `?store=product/<id>` and the older `?cart=open` open the
+  // modal from a link. This lives here rather than in `Root` so it works for
+  // the npm integration too, where there is no `Root`.
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get('cart') === 'open') {
-        dispatch({
-          type: 'STORE_MODAL_REPLACE',
-          route: 'cart'
-        });
-        dispatch({
-          type: 'OPEN_CART'
-        });
-      }
-    }
+    if (typeof window === 'undefined') return;
+    storeModalUrlActions(window.location.search, config.current).forEach(action => dispatch(action));
   }, [dispatch]);
   return /*#__PURE__*/React.createElement(StoreModalLoader, null, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null

package/dist/components/StoreModal/routes.js

@@ -5,6 +5,7 @@ import StoreModalCart from './StoreModalCart.js';
 import StoreModalCheckout from './StoreModalCheckout.js';
 import IndexQuery from '../../__generated__/StoreModalIndexQuery.graphql.js';
 import ProductQuery from '../../__generated__/StoreModalProductQuery.graphql.js';
+import ProductSlugQuery from '../../__generated__/StoreModalProductSlugQuery.graphql.js';
 import CartQuery from '../../__generated__/StoreModalCartQuery.graphql.js';
 import CheckoutQuery from '../../__generated__/StoreModalCheckoutQuery.graphql.js';
 const route = routeConfig => routeConfig;
@@ -15,10 +16,17 @@ const routes = {
       indexQuery: loadQuery(environment, IndexQuery, variables)
     })
   }),
+  // A product arrives addressed either way — `?store=product/<id>` or
+  // `?store=product/<slug>` — and each identifier needs its own query, since
+  // a slug resolves through `viewer.slug` rather than `node`.
   product: route({
     Component: StoreModalProduct,
     prepare: (variables, environment) => ({
-      productQuery: loadQuery(environment, ProductQuery, {
+      productQuery: variables.productSlug ? loadQuery(environment, ProductSlugQuery, {
+        ...variables,
+        licenseOptions: [],
+        orderVariables: []
+      }) : loadQuery(environment, ProductQuery, {
         ...variables,
         licenseOptions: [],
         orderVariables: []

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { StoreModalProductLicense_license$key } from '../../__generated__/StoreModalProductLicense_license.graphql.js';
 interface StoreModalProductLicenseProps {
     license: StoreModalProductLicense_license$key;
+    collectionId?: string;
 }
-export default function StoreModalProduceLicense({ license: licenseKey, }: StoreModalProductLicenseProps): React.JSX.Element;
+export default function StoreModalProduceLicense({ license: licenseKey, collectionId, }: StoreModalProductLicenseProps): React.JSX.Element;
 export {};

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.js

@@ -6,6 +6,7 @@ import LicenseElement from './LicenseElement.js';
 import LicenseVariableElement from './LicenseVariableElement.js';
 import VariableTableAmounts from '../VariableTableAmounts/index.js';
 import LicenseVariableRadioElement from './LicenseVariableRadioElement.js';
+import { useTrackProductCustomized } from '../Cart/storefrontEvents.js';
 const specFromLicense = license => {
   let licenseOptionSpec = {
     licenseId: license.id
@@ -31,7 +32,8 @@ const specFromLicense = license => {
 export default function StoreModalProduceLicense(_ref) {
   var _license$variables;
   let {
-    license: licenseKey
+    license: licenseKey,
+    collectionId
   } = _ref;
   const license = useFragment((_StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "87cd41e76dcd8952d7096940a383b9f3" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
   const licenseOptions = useSelector(state => state.licenseOptions);
@@ -43,6 +45,7 @@ export default function StoreModalProduceLicense(_ref) {
   });
   const isSelected = Boolean(selectedOptions);
   const dispatch = useDispatch();
+  const trackCustomized = useTrackProductCustomized(collectionId);
   const handleSelectLicense = useCallback(() => {
     var _license$excludedLice;
     dispatch({
@@ -52,7 +55,8 @@ export default function StoreModalProduceLicense(_ref) {
       licenseOptionSpec: specFromLicense(license),
       excludedLicenseIds: (_license$excludedLice = license.excludedLicenses) === null || _license$excludedLice === void 0 ? void 0 : _license$excludedLice.map(l => l.id)
     });
-  }, [dispatch, license, isSelected]);
+    trackCustomized();
+  }, [dispatch, license, isSelected, trackCustomized]);
   const handleLicenseOptionChange = useCallback(_ref3 => {
     let {
       variableId,
@@ -72,7 +76,8 @@ export default function StoreModalProduceLicense(_ref) {
       variableId,
       optionId
     });
-  }, [dispatch, license, isSelected]);
+    trackCustomized();
+  }, [dispatch, license, isSelected, trackCustomized]);
   useEffect(() => {
     if (license.defaultSelected) {
       var _license$excludedLice3;

package/dist/components/StoreModalProductLicenseSelection/index.js

@@ -11,7 +11,7 @@ export default function StoreModalProductLicenseSelection(_ref) {
       label
     }
   } = _ref;
-  const collection = useFragment((_StoreModalProductLicenseSelection_collection.hash && _StoreModalProductLicenseSelection_collection.hash !== "2767ff3f8ddb4354051074bc3d0312e6" && console.error("The definition of 'StoreModalProductLicenseSelection_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicenseSelection_collection), collectionKey);
+  const collection = useFragment((_StoreModalProductLicenseSelection_collection.hash && _StoreModalProductLicenseSelection_collection.hash !== "c3609e849ae8057e71542d32716f3ddc" && console.error("The definition of 'StoreModalProductLicenseSelection_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicenseSelection_collection), collectionKey);
   return /*#__PURE__*/React.createElement("div", {
     className: "store-modal__license-selection__container",
     "data-disabled": disabled
@@ -21,6 +21,7 @@ export default function StoreModalProductLicenseSelection(_ref) {
     className: "store-modal__license-selection__licenses"
   }, collection === null || collection === void 0 ? void 0 : (_collection$licenses = collection.licenses) === null || _collection$licenses === void 0 ? void 0 : _collection$licenses.map(license => license && /*#__PURE__*/React.createElement(StoreModalProductLicense, {
     key: license.id,
-    license: license
+    license: license,
+    collectionId: collection.id
   }))));
 }

package/dist/components/TestFontsForm/index.js

@@ -67,7 +67,11 @@ const TestFontsFormComponent = _ref2 => {
           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: 'TEST_FONTS'
         }
       },
       onCompleted: (res, errors) => {

package/dist/components/TypeTester/TypeTesterContent.js

@@ -19,7 +19,13 @@ const TypeTesterContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
     }
   }));
-  const style = useTypeTesterStyler({
+
+  // `truncated` is pulled out of the spread: it drives a data attribute, not
+  // a DOM style prop.
+  const {
+    truncated,
+    ...style
+  } = useTypeTesterStyler({
     ...props,
     content,
     alignment
@@ -35,7 +41,8 @@ const TypeTesterContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useEffect(() => setMounted(true), []);
   const plainText = content.getCurrentContent().getPlainText();
   return /*#__PURE__*/React.createElement("div", _extends({}, style, {
-    className: "type-tester__text__container"
+    className: "type-tester__text__container",
+    "data-truncated": truncated || undefined
   }), mounted ? /*#__PURE__*/React.createElement(Editor, {
     ref: editorRef,
     editorState: content,

package/dist/components/TypeTester/TypeTesterContext.js

@@ -2,7 +2,8 @@
 
 import "../../global-shim.js";
 import { ContentState, EditorState } from 'draft-js';
-import React, { createContext, useReducer } from 'react';
+import React, { createContext, useContext, useReducer } from 'react';
+import ConfigContext from '../ConfigContext.js';
 export const TypeTesterContext = /*#__PURE__*/createContext({});
 const updateTester = (state, id, newState, propagate) => {
   const testers = state.testers;
@@ -120,19 +121,31 @@ const groupReducer = (state, action) => {
       };
   }
 };
-const TypeTesterContextComponent = _ref => {
+const clampSize = (size, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
+  return Math.min(Math.max(size, min), max);
+};
+const TypeTesterContextComponent = _ref2 => {
   let {
     children,
     testers: initialTestersState,
     defaultMode = 'group'
-  } = _ref;
+  } = _ref2;
+  const {
+    typeTester: config
+  } = useContext(ConfigContext);
   const testers = Object.keys(initialTestersState).reduce((acc, id) => {
     const initialState = initialTestersState[id];
     const content = EditorState.createWithContent(ContentState.createFromText(initialState.content ?? ''));
     acc[id] = {
       content,
       contentEdited: false,
-      size: initialState.size ?? 72,
+      // The size slider only spans the configured range, so a stored size
+      // outside it would render with the handle off the end of its track.
+      size: clampSize(initialState.size ?? 72, config.size),
       letterSpacing: initialState.letterSpacing ?? 0,
       lineHeight: initialState.lineHeight ?? 1,
       autofit: initialState.autofit,

package/dist/components/TypeTester/TypeTesterFitter.js

@@ -6,9 +6,14 @@ const TypeTesterFitter = _ref => {
     children,
     ...props
   } = _ref;
-  const style = useTypeTesterStyler(props);
+  const {
+    truncated,
+    ...style
+  } = useTypeTesterStyler(props);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "type-tester__text__container"
-  }, style), children);
+  }, style, {
+    "data-truncated": truncated || undefined
+  }), children);
 };
 export default TypeTesterFitter;