fontdue-js 3.6.0 → 3.8.0

package/dist/components/NodePasswordForm/NodePasswordFormElement.js

@@ -1,6 +1,7 @@
 'use client';
 
 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 _NodePasswordFormElementPackSlugQuery from "../../__generated__/NodePasswordFormElementPackSlugQuery.graphql.js";
 import _NodePasswordFormElementSlugQuery from "../../__generated__/NodePasswordFormElementSlugQuery.graphql.js";
 import _NodePasswordFormElementIDQuery from "../../__generated__/NodePasswordFormElementIDQuery.graphql.js";
 import React from 'react';
@@ -8,25 +9,25 @@ import { graphql, useLazyLoadQuery } from 'react-relay';
 import NodePasswordForm from './index.js';
 // Auto-detecting wrapper behind the <fontdue-node-password-form> custom element.
 // Unlike the presentational React component (the default export of ./index, used
-// when the server has already detected the lock), this queries the collection
-// itself and renders the form only when access is denied — so it works dropped
-// onto any page, hiding itself for a visitor who already has access.
+// when the server has already detected the lock), this queries the product itself
+// – a collection or a font pack – and renders the form only when access is
+// denied, so it works dropped onto any page, hiding itself for a visitor who
+// already has access.
 
-const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "213a61ae079e4f57b7b197b0d2f5256a" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
+// `node(id:)` resolves a collection and a pack alike, so one query serves both.
+const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "fa35f237c6ea919a7afbe22c86ca19b5" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
 function NodePasswordFormIDQueryRenderer(_ref) {
   let {
-    collectionId,
-    ...rest
+    nodeId,
+    ...props
   } = _ref;
   const data = useLazyLoadQuery(idQuery, {
-    collectionId
+    nodeId
   });
   // The @catch directive surfaces the password-protection error as ok:false; the
   // node is only locked then, so only then do we render the form (we don't want
   // to show it to a visitor who already has access).
-  if (data.collection.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
-    collectionId: collectionId
-  }));
+  if (data.node.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, props);
   return null;
 }
 const slugQuery = (_NodePasswordFormElementSlugQuery.hash && _NodePasswordFormElementSlugQuery.hash !== "200a33ca6a1f9e4e7e95b7100bbdd261" && console.error("The definition of 'NodePasswordFormElementSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementSlugQuery);
@@ -34,32 +35,55 @@ function NodePasswordFormSlugQueryRenderer(_ref2) {
   var _data$viewer$slug;
   let {
     collectionSlug,
-    ...rest
+    ...props
   } = _ref2;
   const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
   // see note in NodePasswordFormIDQueryRenderer
-  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
+  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
     collectionSlug: collectionSlug
   }));
   return null;
 }
-export default function NodePasswordFormElement(_ref3) {
+const packSlugQuery = (_NodePasswordFormElementPackSlugQuery.hash && _NodePasswordFormElementPackSlugQuery.hash !== "3186720cb9ad751d233e995a102efcd1" && console.error("The definition of 'NodePasswordFormElementPackSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementPackSlugQuery);
+function NodePasswordFormPackSlugQueryRenderer(_ref3) {
+  var _data$viewer$slug2;
   let {
+    fontPackSlug,
+    ...props
+  } = _ref3;
+  const data = useLazyLoadQuery(packSlugQuery, {
+    fontPackSlug
+  });
+  // see note in NodePasswordFormIDQueryRenderer
+  if (((_data$viewer$slug2 = data.viewer.slug) === null || _data$viewer$slug2 === void 0 ? void 0 : _data$viewer$slug2.pack.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
+    fontPackSlug: fontPackSlug
+  }));
+  return null;
+}
+export default function NodePasswordFormElement(props) {
+  const {
     collectionId,
     collectionSlug,
-    ...rest
-  } = _ref3;
-  if (collectionId) {
+    fontPackId,
+    fontPackSlug
+  } = props;
+  const nodeId = collectionId || fontPackId;
+  if (nodeId) {
     return /*#__PURE__*/React.createElement(NodePasswordFormIDQueryRenderer, _extends({
-      collectionId: collectionId
-    }, rest));
+      nodeId: nodeId
+    }, props));
   }
   if (collectionSlug) {
-    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({
+    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({}, props, {
       collectionSlug: collectionSlug
-    }, rest));
+    }));
+  }
+  if (fontPackSlug) {
+    return /*#__PURE__*/React.createElement(NodePasswordFormPackSlugQueryRenderer, _extends({}, props, {
+      fontPackSlug: fontPackSlug
+    }));
   }
-  throw new Error('NodePasswordForm expected either a collectionId or collectionSlug prop');
+  throw new Error('NodePasswordForm expected a collectionId, collectionSlug, fontPackId or fontPackSlug prop');
 }

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

@@ -2,6 +2,9 @@ import React from 'react';
 export interface NodePasswordForm_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    /** A font pack's identifiers, in place of the collection ones. */
+    fontPackId?: string | null;
+    fontPackSlug?: string | null;
     /**
      * Path of the storefront's unlock route (see fontdue-js/next/unlock), e.g.
      * "/api/unlock". On a successful unlock the form POSTs `{ token }` there
@@ -15,10 +18,10 @@ export interface NodePasswordForm_props {
     unlockEndpoint?: string | null;
 }
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders

package/dist/components/NodePasswordForm/index.js

@@ -8,10 +8,10 @@ import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 import { rememberNodeAccessToken } from '../../nodeAccess.js';
 const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePasswordFormAccessNodeMutation.hash !== "eb0d3828d65a52c727ef60caa67709a1" && console.error("The definition of 'NodePasswordFormAccessNodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormAccessNodeMutation);
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders
@@ -65,8 +65,8 @@ function NodePasswordFormFields(props) {
       variables: {
         input: {
           password,
-          id: props.collectionId,
-          slug: props.collectionSlug
+          id: props.collectionId || props.fontPackId || undefined,
+          slug: props.collectionSlug || props.fontPackSlug || undefined
         }
       },
       onCompleted: res => {

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

@@ -1,4 +1,5 @@
 import _productState_Query from "../../__generated__/productState_Query.graphql.js";
+import _productState_fontPack from "../../__generated__/productState_fontPack.graphql.js";
 import _productState_node from "../../__generated__/productState_node.graphql.js";
 import _productState_collectionBundle from "../../__generated__/productState_collectionBundle.graphql.js";
 import _productState_bundle from "../../__generated__/productState_bundle.graphql.js";
@@ -11,7 +12,13 @@ _productState_collection.hash && _productState_collection.hash !== "90e56933f956
 _productState_bundle.hash && _productState_bundle.hash !== "fa38bbc9f2062a727da4f5062b362054" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle;
 _productState_collectionBundle.hash && _productState_collectionBundle.hash !== "6744aa8f57d14b0111a0c49f488d7b03" && console.error("The definition of 'productState_collectionBundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collectionBundle;
 _productState_node.hash && _productState_node.hash !== "a1e172db45ca550a254819d877497d12" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node;
-const query = (_productState_Query.hash && _productState_Query.hash !== "ac3292bae9a274139d5a525fd0162711" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query);
+
+// A pack is one SKU that grants every style in `fontStyles`. Its collection
+// members (a family or a superfamily with its families) are fetched in the
+// same shape as a collection product so they register as ordinary
+// collections, with the pack sitting above them.
+_productState_fontPack.hash && _productState_fontPack.hash !== "43a236a4ddb4436a51d765a07e2b0eac" && console.error("The definition of 'productState_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_fontPack;
+const query = (_productState_Query.hash && _productState_Query.hash !== "65de750413d1564c4f3e1ec44ec7e2a2" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query);
 export const populateProductState = (store, environment, id) => {
   const existingState = store.getState().fetchedCollectionIds;
   if (existingState && existingState.indexOf(id) >= 0) return;
@@ -24,6 +31,7 @@ export const populateProductState = (store, environment, id) => {
     })
   });
 };
+const packMemberCollections = pack => pack.members.filter(member => member.__typename === 'FontCollection');
 const allSkus = function (collection) {
   var _collection$fontStyle;
   let includeCollections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -53,58 +61,67 @@ 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)
-    }), {});
+
+// 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));
   }
-  let collectionBundles = {};
-  if ('collectionBundles' in collection && collection.collectionBundles) {
-    collectionBundles = collection.collectionBundles.reduce((res, collBundle) => ({
-      ...res,
-      ...flattenSkuData(collBundle)
-    }), {});
+  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);
+    }
   }
-  let children = {};
-  if ('children' in collection && collection.children) {
-    children = collection.children.reduce((res, child) => ({
-      ...res,
-      ...flattenSkuData(child)
-    }), {});
+  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;
+};
+
+// The pack's SKU grants every style the pack lists, its style members' SKUs
+// their one style each, and its collection members (a family, or a superfamily
+// with its families) register like the collections they are – so the pack sits
+// over them the way a superfamily sits over its families.
+const flattenPackSkuStyleIds = pack => {
+  const result = {};
+  for (const member of packMemberCollections(pack)) {
+    Object.assign(result, flattenSkuStyleIds(member));
   }
-  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
-      }
-    };
+  for (const style of pack.fontStyles) {
+    if (style.sku) result[style.sku.id] = [style.id];
   }
-  return {
-    ...collectionData,
-    ...children,
-    ...bundles,
-    ...collectionBundles
-  };
+  const styleIds = pack.fontStyles.map(style => style.id);
+  if (pack.sku && styleIds.length > 0) result[pack.sku.id] = styleIds;
+  return result;
 };
 const flattenSkuPrices = collection => {
   return allSkus(collection).reduce((acc, sku) => {
@@ -112,39 +129,61 @@ const flattenSkuPrices = collection => {
     return acc;
   }, {});
 };
+const flattenPackSkuPrices = pack => {
+  const skus = [pack.sku, ...pack.fontStyles.map(style => style.sku), ...packMemberCollections(pack).flatMap(member => allSkus(member))].filter(notEmpty);
+  return skus.reduce((acc, sku) => {
+    acc[sku.id] = sku.price.amount;
+    return acc;
+  }, {});
+};
 export const populateProductStateReducer = (state, action) => {
-  var _data$node, _data$node$sku;
+  var _node$sku;
   if (action.type !== 'POPULATE_PRODUCT_STATE') return state;
   const {
     data
   } = action;
-  if (((_data$node = data.node) === null || _data$node === void 0 ? void 0 : _data$node.__typename) !== 'FontCollection') return state;
+  const node = data.node;
+  let skuStyleIds;
+  let skuPrices;
+  if ((node === null || node === void 0 ? void 0 : node.__typename) === 'FontCollection') {
+    skuStyleIds = flattenSkuStyleIds(node);
+    skuPrices = flattenSkuPrices(node);
+  } else if ((node === null || node === void 0 ? void 0 : node.__typename) === 'FontPack') {
+    skuStyleIds = flattenPackSkuStyleIds(node);
+    skuPrices = flattenPackSkuPrices(node);
+  } else {
+    return state;
+  }
   return {
     ...state,
     // {
-    //   [collectionSkuId]: {
-    //     childrenSkuIds: [skuId...],
-    //     fontStyleSkuIds: [skuId...],
-    //   }
+    //   [skuId]: [styleId...]
     // }
-    collectionStyleSkus: {
-      ...state.collectionStyleSkus,
-      ...flattenSkuData(data.node)
+    skuStyleIds: {
+      ...state.skuStyleIds,
+      ...skuStyleIds
     },
     // {
     //   [skuId]: amount,
     // }
     skuPrices: {
       ...state.skuPrices,
-      ...flattenSkuPrices(data.node)
+      ...skuPrices
     },
     // {
     //   [collectionId]: [skuId]
     // }
     collectionSkus: {
       ...state.collectionSkus,
-      [`${data.node.id}`]: ((_data$node$sku = data.node.sku) === null || _data$node$sku === void 0 ? void 0 : _data$node$sku.id) ?? null
+      [`${node.id}`]: ((_node$sku = node.sku) === null || _node$sku === void 0 ? void 0 : _node$sku.id) ?? null
+    },
+    // {
+    //   [productId]: [skuId...]
+    // }
+    productSkuIds: {
+      ...state.productSkuIds,
+      [`${node.id}`]: Object.keys(skuPrices)
     },
-    fetchedCollectionIds: state.fetchedCollectionIds.concat(data.node.id)
+    fetchedCollectionIds: state.fetchedCollectionIds.concat(node.id)
   };
 };

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

@@ -5,5 +5,12 @@ interface StoreModalFamilyProps {
     onSelect: (skuId: string, selected: boolean) => void;
     title?: React.ReactNode;
 }
+interface GroupableStyle {
+    cssFamily: string | null;
+    cssWeight: string | null;
+    cssStretch: string | null;
+    cssStyle: string | null;
+}
+export declare function stylesGrouped<T extends GroupableStyle>(fontStyles: ReadonlyArray<T> | null | undefined): ReadonlyArray<ReadonlyArray<T>>;
 export default function StoreModalFamily({ collection: collectionKey, onSelect, title, }: StoreModalFamilyProps): React.JSX.Element | null;
 export {};

package/dist/components/StoreModal/StoreModalFamily.js

@@ -17,9 +17,11 @@ function chunkConsecutiveBy(collection, compare) {
   }, []);
 }
 const isSlanted = cssStyle => cssStyle === 'italic' || cssStyle === 'oblique';
-const stylesGrouped = collection => {
-  if (!collection.fontStyles) return [];
-  const chunks = chunkConsecutiveBy(collection.fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch && isSlanted(left.cssStyle) !== isSlanted(right.cssStyle));
+// Pairs each upright style with its italic/oblique so the two render side by
+// side. Shared with the font pack view, which groups a pack's style members.
+export function stylesGrouped(fontStyles) {
+  if (!fontStyles) return [];
+  const chunks = chunkConsecutiveBy(fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch && isSlanted(left.cssStyle) !== isSlanted(right.cssStyle));
 
   // Only keep a chunk paired when it's exactly one upright + one slanted
   // (italic or oblique) style. Anything else (3+ consecutive matches, or
@@ -30,7 +32,7 @@ const stylesGrouped = collection => {
     const slantedCount = chunk.filter(s => isSlanted(s.cssStyle)).length;
     return slantedCount === 1 ? [chunk] : chunk.map(style => [style]);
   });
-};
+}
 export default function StoreModalFamily(_ref) {
   var _collection$bundles;
   let {
@@ -38,8 +40,8 @@ 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 fontStyles = useMemo(() => stylesGrouped(collection), [collection]);
+  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.fontStyles), [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, {
     title,
@@ -47,7 +49,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