fontdue-js 3.6.0 → 3.8.0

package/dist/components/StoreModal/StoreModalIndex.js

@@ -1,20 +1,71 @@
+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 StoreModalIndexPackItem from './StoreModalIndexPackItem.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';
+// Font packs come first: they're the curated, cross-catalog offers, and there
+// are few of them next to the families – so they arrive whole, with the first
+// page of collections, rather than paginated. Both lists honour the same
+// `indexExcludeTags`, and the backend already leaves out hidden, unlisted and
+// still-locked password-protected packs, as it does for collections.
 const StoreModalIndex = _ref => {
-  var _viewer$rootCollectio;
+  var _queryData$viewer, _queryData$viewer$fon, _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 !== "cea53722e4ce3c40a68997218f7e979f" && 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 packEdges = ((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? [];
+  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, packEdges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexPackItem, {
+      pack: edge.node,
+      key: edge.node.id
+    })), 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/StoreModalIndexEntry.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FontStyle_fontStyle$key } from '__generated__/FontStyle_fontStyle.graphql.js';
+type FeatureStyle = FontStyle_fontStyle$key & {
+    readonly supportedLanguages: readonly string[] | null | undefined;
+};
+interface StoreModalIndexEntryProps {
+    productId: string;
+    name: string;
+    featureStyle: FeatureStyle | null | undefined;
+    label: string;
+}
+declare const StoreModalIndexEntry: ({ productId, name, featureStyle, label, }: StoreModalIndexEntryProps) => React.JSX.Element;
+export default StoreModalIndexEntry;

package/dist/components/StoreModal/StoreModalIndexEntry.js

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import StoreModalIndexItemElement from '../elements/StoreModalIndexItem/index.js';
+import ConfigContext from '../ConfigContext.js';
+import FontStyle from '../FontStyle/index.js';
+import { getFeatureGlyphs } from '../../utils.js';
+// One row of the store modal's index page. Collections and packs share this
+// – the `indexLayout` config decides whether the feature style draws an "Aa"
+// beside the name or the name itself – and only differ in what they say
+// under the name.
+const StoreModalIndexEntry = _ref => {
+  let {
+    productId,
+    name,
+    featureStyle,
+    label
+  } = _ref;
+  const {
+    storeModal: config
+  } = useContext(ConfigContext);
+  const dispatch = useDispatch();
+  const handleClick = () => {
+    dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'product',
+      variables: {
+        productId
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(StoreModalIndexItemElement, {
+    onClick: handleClick
+  }, {
+    aa: config.indexLayout === 'styled-aa' && (featureStyle ? /*#__PURE__*/React.createElement(FontStyle, {
+      fontStyle: featureStyle
+    }, getFeatureGlyphs(featureStyle.supportedLanguages ?? null)) : null),
+    name: config.indexLayout === 'styled-font-names' ? featureStyle && /*#__PURE__*/React.createElement(FontStyle, {
+      fontStyle: featureStyle
+    }, name) : name,
+    label
+  });
+};
+export default StoreModalIndexEntry;

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -1,31 +1,14 @@
 import _StoreModalIndexItem_fontCollection from "../../__generated__/StoreModalIndexItem_fontCollection.graphql.js";
-import React, { useContext } from 'react';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 import { graphql, useFragment } from 'react-relay';
-import StoreModalIndexItemElement from '../elements/StoreModalIndexItem/index.js';
-import ConfigContext from '../ConfigContext.js';
-import FontStyle from '../FontStyle/index.js';
+import StoreModalIndexEntry from './StoreModalIndexEntry.js';
 import useTotalStyles from '../useTotalStyles.js';
-import { getFeatureGlyphs, pluralize } from '../../utils.js';
+import { pluralize } from '../../utils.js';
 const StoreModalIndexItem = _ref => {
-  var _data$featureStyle;
   let {
     collection
   } = _ref;
-  const {
-    storeModal: config
-  } = useContext(ConfigContext);
   const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "8a990fad8dc50c9f00b391902e9bc482" && 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_fontCollection), collection);
-  const dispatch = useDispatch();
-  const handleClickProduct = productId => {
-    dispatch({
-      type: 'STORE_MODAL_NAVIGATE',
-      route: 'product',
-      variables: {
-        productId
-      }
-    });
-  };
   const {
     totalStyles,
     variableFonts
@@ -39,16 +22,10 @@ const StoreModalIndexItem = _ref => {
   if (variableFonts > 0) {
     label.push(pluralize(variableFonts, 'variable font'));
   }
-  return /*#__PURE__*/React.createElement(StoreModalIndexItemElement, {
-    key: data.id,
-    onClick: handleClickProduct.bind(null, data.id)
-  }, {
-    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/React.createElement(FontStyle, {
-      fontStyle: data.featureStyle
-    }, 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.createElement(FontStyle, {
-      fontStyle: data.featureStyle
-    }, data.name) : data.name,
+  return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+    productId: data.id,
+    name: data.name,
+    featureStyle: data.featureStyle,
     label: label.join(', ')
   });
 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoreModalIndexPackItem_fontPack$key } from '__generated__/StoreModalIndexPackItem_fontPack.graphql.js';
+interface StoreModalIndexPackItemProps {
+    pack: StoreModalIndexPackItem_fontPack$key;
+}
+declare const StoreModalIndexPackItem: ({ pack }: StoreModalIndexPackItemProps) => React.JSX.Element;
+export default StoreModalIndexPackItem;

package/dist/components/StoreModal/StoreModalIndexPackItem.js

@@ -0,0 +1,21 @@
+import _StoreModalIndexPackItem_fontPack from "../../__generated__/StoreModalIndexPackItem_fontPack.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import StoreModalIndexEntry from './StoreModalIndexEntry.js';
+import { pluralize } from '../../utils.js';
+// A pack's name alone ("Anniversary Pack") doesn't tell a visitor it spans
+// families, so its subhead says what it is before the style count.
+const packIndexLabel = totalStyles => totalStyles ? `Font pack • ${pluralize(totalStyles, 'style')}` : 'Font pack';
+const StoreModalIndexPackItem = _ref => {
+  let {
+    pack
+  } = _ref;
+  const data = useFragment((_StoreModalIndexPackItem_fontPack.hash && _StoreModalIndexPackItem_fontPack.hash !== "47273d9e96f713344a4e62f4c5517161" && console.error("The definition of 'StoreModalIndexPackItem_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexPackItem_fontPack), pack);
+  return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+    productId: data.id,
+    name: data.name,
+    featureStyle: data.featureStyle,
+    label: packIndexLabel(data.totalStyles)
+  });
+};
+export default StoreModalIndexPackItem;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StoreModalPack_fontPack$key } from '../../__generated__/StoreModalPack_fontPack.graphql.js';
+interface StoreModalPackProps {
+    pack: StoreModalPack_fontPack$key;
+    onSelect: (skuId: string, selected: boolean) => void;
+    title?: React.ReactNode;
+}
+export default function StoreModalPack({ pack: packKey, onSelect, title }: StoreModalPackProps): React.JSX.Element;
+export {};

package/dist/components/StoreModal/StoreModalPack.js

@@ -0,0 +1,79 @@
+import _StoreModalPack_fontPack from "../../__generated__/StoreModalPack_fontPack.graphql.js";
+import React, { Fragment, useMemo } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import StoreModalFamily, { stylesGrouped } from './StoreModalFamily.js';
+import StoreModalPackButton from './StoreModalPackButton.js';
+import StyleButton from './StoreModalStyleButton.js';
+import FamilyElement from '../elements/StoreModalFamily/index.js';
+
+// A pack's members render as family blocks: a collection member is the whole
+// family (or superfamily) as it appears on its own product page; style
+// members are gathered under their family, in the order the first of them
+// appears, as a partial block of just those styles.
+
+// An unlisted collection has no block anywhere in the Store Modal – no family
+// button, bundles or styles (see StoreModalProduct). A pack still grants it,
+// and the pack button still sells it, but it isn't offered on its own here.
+const memberBlocks = members => members.reduce((blocks, member) => {
+  var _member$family, _member$family2, _member$family3, _member$family4;
+  if (member.__typename === 'FontCollection') {
+    if (member.visibility === 'UNLISTED') return blocks;
+    return blocks.concat({
+      kind: 'collection',
+      collection: member
+    });
+  }
+  if (member.__typename !== 'FontStyle') return blocks;
+  if (((_member$family = member.family) === null || _member$family === void 0 ? void 0 : _member$family.visibility) === 'UNLISTED') return blocks;
+  const familyId = ((_member$family2 = member.family) === null || _member$family2 === void 0 ? void 0 : _member$family2.id) ?? member.id;
+  const existing = blocks.find(block => block.kind === 'styles' && block.familyId === familyId);
+  if ((existing === null || existing === void 0 ? void 0 : existing.kind) === 'styles') {
+    existing.styles.push(member);
+    return blocks;
+  }
+  return blocks.concat({
+    kind: 'styles',
+    familyId,
+    familyName: ((_member$family3 = member.family) === null || _member$family3 === void 0 ? void 0 : _member$family3.name) ?? '',
+    isVariableFont: ((_member$family4 = member.family) === null || _member$family4 === void 0 ? void 0 : _member$family4.isVariableFont) ?? false,
+    styles: [member]
+  });
+}, []);
+export default function StoreModalPack(_ref) {
+  let {
+    pack: packKey,
+    onSelect,
+    title
+  } = _ref;
+  const pack = useFragment((_StoreModalPack_fontPack.hash && _StoreModalPack_fontPack.hash !== "5bbb13828a56279be2b22df22ad4aae0" && console.error("The definition of 'StoreModalPack_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalPack_fontPack), packKey);
+  const blocks = useMemo(() => memberBlocks(pack.members), [pack.members]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FamilyElement, null, {
+    title,
+    familyButton: /*#__PURE__*/React.createElement(StoreModalPackButton, {
+      pack: pack,
+      onSelectSku: onSelect
+    })
+  }), blocks.map(block => {
+    var _block$collection$chi;
+    return block.kind === 'collection' ? /*#__PURE__*/React.createElement(Fragment, {
+      key: `collection:${block.collection.id}`
+    }, /*#__PURE__*/React.createElement(StoreModalFamily, {
+      collection: block.collection,
+      onSelect: onSelect
+    }), (_block$collection$chi = block.collection.children) === null || _block$collection$chi === void 0 ? void 0 : _block$collection$chi.filter(child => child.visibility !== 'UNLISTED').map(child => /*#__PURE__*/React.createElement(StoreModalFamily, {
+      key: child.id,
+      collection: child,
+      onSelect: onSelect
+    }))) : /*#__PURE__*/React.createElement(FamilyElement, {
+      key: `styles:${block.familyId}`
+    }, {
+      title: block.familyName,
+      styleGroups: stylesGrouped(block.styles).map(group => group.map(fontStyle => /*#__PURE__*/React.createElement(StyleButton, {
+        key: fontStyle.id,
+        fontStyle: fontStyle,
+        onSelectSku: onSelect,
+        isVariableFont: block.isVariableFont
+      })))
+    });
+  }));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StoreModalPackButton_fontPack$key } from '../../__generated__/StoreModalPackButton_fontPack.graphql.js';
+interface PackButtonProps {
+    pack: StoreModalPackButton_fontPack$key;
+    onSelectSku: (skuId: string, selected: boolean) => void;
+}
+export default function StoreModalPackButton({ pack: packKey, onSelectSku, ...rest }: PackButtonProps): React.JSX.Element;
+export {};

package/dist/components/StoreModal/StoreModalPackButton.js

@@ -0,0 +1,53 @@
+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); }
+import _StoreModalPackButton_fontPack from "../../__generated__/StoreModalPackButton_fontPack.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import { useSelector } from 'react-redux';
+import SKUPrice from '../SKUPrice/index.js';
+import RelayPrice, { PriceFormat } from '../Price/index.js';
+import { isSelected } from '../../reducer.js';
+import StoreModalFamilyButtonElement from '../elements/StoreModalFamilyButton/index.js';
+import FontStyle from '../FontStyle/index.js';
+import { pluralize } from '../../utils.js';
+// The pack's own row at the top of the product page — the family button's
+// markup, buying the whole pack at its one fixed price, under the pack's name
+// exactly as the admin entered it (the index, cart and BuyButton show the
+// same). Beside the price it strikes through what the styles would cost one
+// by one.
+export default function StoreModalPackButton(_ref) {
+  var _pack$featureStyle, _pack$featureStyle$su, _pack$sku;
+  let {
+    pack: packKey,
+    onSelectSku,
+    ...rest
+  } = _ref;
+  const pack = useFragment((_StoreModalPackButton_fontPack.hash && _StoreModalPackButton_fontPack.hash !== "9075ef7d1f8c2ce1fa8beba0884713cb" && console.error("The definition of 'StoreModalPackButton_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalPackButton_fontPack), packKey);
+  const selector = pack.sku ? isSelected(pack.sku.id) : () => false;
+  const selected = useSelector(selector);
+  const handleClick = () => {
+    if (!pack.sku) return;
+    onSelectSku(pack.sku.id, !selected);
+  };
+  const supportsEnglish = (_pack$featureStyle = pack.featureStyle) === null || _pack$featureStyle === void 0 ? void 0 : (_pack$featureStyle$su = _pack$featureStyle.supportedLanguages) === null || _pack$featureStyle$su === void 0 ? void 0 : _pack$featureStyle$su.includes('en');
+  const showsSaving = ((_pack$sku = pack.sku) === null || _pack$sku === void 0 ? void 0 : _pack$sku.price) && pack.totalStylesPrice && pack.totalStylesPrice.amount > pack.sku.price.amount;
+  return /*#__PURE__*/React.createElement(StoreModalFamilyButtonElement, _extends({
+    selected: selected,
+    onClick: pack.sku ? handleClick : undefined,
+    supportsEnglish: supportsEnglish ?? true
+  }, rest), {
+    name: pack.featureStyle && supportsEnglish ? /*#__PURE__*/React.createElement(FontStyle, {
+      Component: "span",
+      fontStyle: pack.featureStyle
+    }, pack.name) : /*#__PURE__*/React.createElement("span", null, pack.name),
+    label: pack.totalStyles ? pluralize(pack.totalStyles, 'style') : '',
+    price: pack.sku && /*#__PURE__*/React.createElement(React.Fragment, null, showsSaving && /*#__PURE__*/React.createElement("s", {
+      className: "store-modal__family-button__styles-price"
+    }, /*#__PURE__*/React.createElement(RelayPrice, {
+      price: pack.totalStylesPrice,
+      format: PriceFormat.Truncated
+    })), /*#__PURE__*/React.createElement(SKUPrice, {
+      sku: pack.sku,
+      format: PriceFormat.Truncated
+    }))
+  });
+}

package/dist/components/StoreModal/StoreModalProduct.js

@@ -6,6 +6,7 @@ import React, { Fragment, useCallback, useContext, useEffect, useMemo } from 're
 import { graphql, useRelayEnvironment, useFragment, usePreloadedQuery, useRefetchableFragment } from 'react-relay';
 import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
 import StoreModalFamily from './StoreModalFamily.js';
+import StoreModalPack from './StoreModalPack.js';
 import StoreModalProductSummary from '../StoreModalProductSummary/index.js';
 import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
 import StoreModalProductLicenseSelection from '../StoreModalProductLicenseSelection/index.js';
@@ -16,20 +17,21 @@ import ConfigContext from '../ConfigContext.js';
 import { useRefetchOnLicenseChanges } from '../../hooks/useRefetchOnLicenseChanges.js';
 import StoreModalLicenseeIsBillingSelection from './StoreModalLicenseeIsBillingSelection.js';
 import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
+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`,
+// A product – a collection or a font pack – is addressed by 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);
+// No `@required` on `fontCollection` / `fontPack` here, unlike BuyButton: a
+// slug naming nothing — or naming an article rather than a product — should
+// land on StoreModalProductContent's "Product not found", not throw.
+export const productSlugQuery = (_StoreModalProductSlugQuery.hash && _StoreModalProductSlugQuery.hash !== "bd2c1bf7b7b154501ea47213af58725e" && 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, _collection$children;
+  var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _viewer$settings5, _viewer$settings6, _viewer$settings7, _viewer$settings8;
   let {
     collection: collectionRef,
     viewer: viewerRef
@@ -37,8 +39,11 @@ const StoreModalProductContent = _ref => {
   const config = useContext(ConfigContext);
   const environment = useRelayEnvironment();
   const viewer = useFragment(productViewerFragment, viewerRef);
-  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), collectionRef ?? null);
-  const collection = data;
+  const [data, refetch] = useRefetchableFragment((_StoreModalProductContent_collection.hash && _StoreModalProductContent_collection.hash !== "c8ce87bca2032637d922f535fc168f56" && 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);
+
+  // The product page sells a collection or a font pack; anything else the id
+  // resolves to is not a product.
+  const collection = (data === null || data === void 0 ? void 0 : data.__typename) === 'FontCollection' || (data === null || data === void 0 ? void 0 : data.__typename) === 'FontPack' ? data : null;
   const refetchVariables = useMemo(() => collection !== null && collection !== void 0 && collection.id ? {
     id: collection.id
   } : undefined, [collection === null || collection === void 0 ? void 0 : collection.id]);
@@ -60,6 +65,24 @@ const StoreModalProductContent = _ref => {
   useEffect(() => {
     if (collection !== null && collection !== void 0 && collection.id) populateProductState(store, environment, collection.id);
   }, [collection === null || collection === void 0 ? void 0 : collection.id]);
+
+  // The page reports the product it shows, whether the route named it by id or
+  // by slug, so a selection made on it stays within what it shows
+  // (selection.ts).
+  useEffect(() => {
+    if (!(collection !== null && collection !== void 0 && collection.id)) return;
+    dispatch({
+      type: 'STORE_MODAL_VIEW_PRODUCT',
+      productId: collection.id
+    });
+    return () => dispatch({
+      type: 'STORE_MODAL_VIEW_PRODUCT',
+      productId: null
+    });
+  }, [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,
@@ -83,7 +106,7 @@ const StoreModalProductContent = _ref => {
   const requiredOrderVariablesNotYetSelected = (_viewer$orderVariable = viewer.orderVariables) === null || _viewer$orderVariable === void 0 ? void 0 : _viewer$orderVariable.filter(variable => variable.variableType === 'select').find(variable => !orderVariableSelections.find(selection => selection.orderVariableId === variable.id));
   if (!collection) {
     return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
-      body: 'Collection not found'
+      body: 'Product not found'
     });
   }
   const selectLicenseeLabel = /*#__PURE__*/React.createElement("div", {
@@ -126,6 +149,12 @@ const StoreModalProductContent = _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.__typename === 'FontCollection' ? [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
@@ -141,20 +170,21 @@ const StoreModalProductContent = _ref => {
     }, {
       label: selectOrderVariablesLabel
     }), /*#__PURE__*/React.createElement(StoreModalProductLicenseSelection, {
-      collection: collection,
+      licenseable: collection,
       disabled: !hasSelectionForLicenseeIsBillingIdentity || Boolean(requiredOrderVariablesNotYetSelected)
     }, {
       label: selectLicensesLabel
     })), /*#__PURE__*/React.createElement("div", {
       className: "store-modal__families",
       "data-disabled": licensesPosition === 'top' ? !anyLicenseOptionsSelected || !hasSelectionForLicenseeIsBillingIdentity || !!requiredOrderVariablesNotYetSelected : false
-    }, /*#__PURE__*/React.createElement(StoreModalFamily, {
+    }, collection.__typename === 'FontPack' ? /*#__PURE__*/React.createElement(StoreModalPack, {
       title: selectFontsLabel,
-      collection: collection,
+      pack: 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
@@ -170,7 +200,7 @@ const StoreModalProductContent = _ref => {
     }, {
       label: selectOrderVariablesLabel
     }), /*#__PURE__*/React.createElement(StoreModalProductLicenseSelection, {
-      collection: collection,
+      licenseable: collection,
       disabled: !anySkusSelected || !hasSelectionForLicenseeIsBillingIdentity || Boolean(requiredOrderVariablesNotYetSelected)
     }, {
       label: selectLicensesLabel
@@ -194,13 +224,13 @@ function StoreModalProductByIdRenderer(_ref2) {
   });
 }
 function StoreModalProductBySlugRenderer(_ref3) {
-  var _data$viewer, _data$viewer$slug;
+  var _data$viewer, _data$viewer$slug, _data$viewer2, _data$viewer2$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,
+    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) ?? ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.pack),
     viewer: data.viewer
   });
 }

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.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { StoreModalProductLicenseSelection_collection$key } from '__generated__/StoreModalProductLicenseSelection_collection.graphql.js';
+import { StoreModalProductLicenseSelection_licenseable$key } from '__generated__/StoreModalProductLicenseSelection_licenseable.graphql.js';
 interface StoreModalProductLicenseSelectionProps {
-    collection: StoreModalProductLicenseSelection_collection$key;
+    licenseable: StoreModalProductLicenseSelection_licenseable$key;
     disabled: boolean;
     children: {
         label: React.ReactNode;
     };
 }
-export default function StoreModalProductLicenseSelection({ collection: collectionKey, disabled, children: { label }, }: StoreModalProductLicenseSelectionProps): React.JSX.Element;
+export default function StoreModalProductLicenseSelection({ licenseable: licenseableKey, disabled, children: { label }, }: StoreModalProductLicenseSelectionProps): React.JSX.Element;
 export {};