fontdue-js 3.6.0 → 3.7.0

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/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/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/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;

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.js

@@ -16,6 +16,7 @@ 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`,
@@ -29,7 +30,7 @@ export const productIdQuery = (_StoreModalProductQuery.hash && _StoreModalProduc
 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, _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,7 +38,7 @@ 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 [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 refetchVariables = useMemo(() => collection !== null && collection !== void 0 && collection.id ? {
     id: collection.id
@@ -60,6 +61,9 @@ 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]);
+  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,
@@ -126,6 +130,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, ...(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
@@ -148,13 +158,10 @@ const StoreModalProductContent = _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

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
   }))));
 }