fontdue-js 3.7.0 → 3.8.0

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';
@@ -18,16 +19,16 @@ import StoreModalLicenseeIsBillingSelection from './StoreModalLicenseeIsBillingS
 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;
@@ -38,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 !== "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 [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]);
@@ -61,6 +65,21 @@ 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]);
@@ -87,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", {
@@ -135,7 +154,7 @@ const StoreModalProductContent = _ref => {
   // 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');
+  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
@@ -151,14 +170,18 @@ 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
-    }, selectableFamilies.map((family, index) => /*#__PURE__*/React.createElement(StoreModalFamily, {
+    }, collection.__typename === 'FontPack' ? /*#__PURE__*/React.createElement(StoreModalPack, {
+      title: selectFontsLabel,
+      pack: collection,
+      onSelect: handleSelectProduct
+    }) : selectableFamilies.map((family, index) => /*#__PURE__*/React.createElement(StoreModalFamily, {
       key: family.id,
       title: index === 0 ? selectFontsLabel : undefined,
       collection: family,
@@ -177,7 +200,7 @@ const StoreModalProductContent = _ref => {
     }, {
       label: selectOrderVariablesLabel
     }), /*#__PURE__*/React.createElement(StoreModalProductLicenseSelection, {
-      collection: collection,
+      licenseable: collection,
       disabled: !anySkusSelected || !hasSelectionForLicenseeIsBillingIdentity || Boolean(requiredOrderVariablesNotYetSelected)
     }, {
       label: selectLicensesLabel
@@ -201,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/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 {};

package/dist/components/StoreModalProductLicenseSelection/index.js

@@ -1,17 +1,17 @@
-import _StoreModalProductLicenseSelection_collection from "../../__generated__/StoreModalProductLicenseSelection_collection.graphql.js";
+import _StoreModalProductLicenseSelection_licenseable from "../../__generated__/StoreModalProductLicenseSelection_licenseable.graphql.js";
 import React from 'react';
 import { graphql, useFragment } from 'react-relay';
 import StoreModalProductLicense from './StoreModalProductLicense.js';
 export default function StoreModalProductLicenseSelection(_ref) {
-  var _collection$licenses;
+  var _licenseable$licenses;
   let {
-    collection: collectionKey,
+    licenseable: licenseableKey,
     disabled,
     children: {
       label
     }
   } = _ref;
-  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);
+  const licenseable = useFragment((_StoreModalProductLicenseSelection_licenseable.hash && _StoreModalProductLicenseSelection_licenseable.hash !== "4016af73fd5c8c03fa7bcdfba6ce0b9b" && console.error("The definition of 'StoreModalProductLicenseSelection_licenseable' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicenseSelection_licenseable), licenseableKey);
   return /*#__PURE__*/React.createElement("div", {
     className: "store-modal__license-selection__container",
     "data-disabled": disabled
@@ -19,9 +19,9 @@ export default function StoreModalProductLicenseSelection(_ref) {
     className: "store-modal__license-selection__title"
   }, label), /*#__PURE__*/React.createElement("div", {
     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, {
+  }, licenseable === null || licenseable === void 0 ? void 0 : (_licenseable$licenses = licenseable.licenses) === null || _licenseable$licenses === void 0 ? void 0 : _licenseable$licenses.map(license => license && /*#__PURE__*/React.createElement(StoreModalProductLicense, {
     key: license.id,
     license: license,
-    collectionId: collection.id
+    collectionId: licenseable.id
   }))));
 }

package/dist/components/StoreModalProductSummary/index.js

@@ -57,7 +57,7 @@ const StoreModalProductSummary = _ref => {
   const refetchVariables = useMemo(() => ({
     selectedSkuIds: selectedSkuIdsArray
   }), [selectedSkuIdsArray]);
-  const [viewer, refetch] = useRefetchableFragment((_StoreModalProductSummary_viewer.hash && _StoreModalProductSummary_viewer.hash !== "81a5f120d76cbb84753d158a7ff38c19" && console.error("The definition of 'StoreModalProductSummary_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummary_viewer), viewerKey);
+  const [viewer, refetch] = useRefetchableFragment((_StoreModalProductSummary_viewer.hash && _StoreModalProductSummary_viewer.hash !== "afd13ac5f41519eea722d5138b244b25" && console.error("The definition of 'StoreModalProductSummary_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummary_viewer), viewerKey);
   useRefetchOnLicenseChanges({
     environment,
     refetch,

package/dist/components/elements/StoreModalFamily/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface StoreModalFamilyProps {
     children: {
         title: React.ReactNode;
-        familyButton: React.ReactElement<any>;
+        familyButton?: React.ReactElement<any> | null;
         bundles?: React.ReactElement<any>[] | null;
         styleGroups?: React.ReactElement<any>[][] | null;
     };

package/dist/components/elements/StoreModalFamily/index.js

@@ -12,7 +12,7 @@ const StoreModalFamily = _ref => {
     className: "store-modal__family__container"
   }, title && /*#__PURE__*/React.createElement("h3", {
     className: "store-modal__family__title"
-  }, title), /*#__PURE__*/React.cloneElement(familyButton, {
+  }, title), familyButton && /*#__PURE__*/React.cloneElement(familyButton, {
     className: 'store-modal__family__family-button'
   }), bundles === null || bundles === void 0 ? void 0 : bundles.map(bundle => /*#__PURE__*/React.cloneElement(bundle, {
     className: 'store-modal__family__bundle-button'

package/dist/fontdue.css

@@ -2017,6 +2017,12 @@ input:checked + .checkbox__icon {
   display: none;
 }
 
+.store-modal__family-button__styles-price {
+  color: var(--secondary_text_color);
+  text-decoration: line-through;
+  margin-right: 0.5em;
+}
+
 .store-modal__family-button__name {
   font-size: 32px;
   line-height: normal;

package/dist/reducer.d.ts

@@ -28,6 +28,10 @@ export interface FontdueState {
     collectionSkus: {
         [collectionSkuId: string]: string | null;
     };
+    productSkuIds: {
+        [productId: string]: string[];
+    };
+    viewedProductId: string | null;
     skuPrices: {
         [collectionSkuId: string]: number;
     };
@@ -88,6 +92,9 @@ export type FontdueAction = {
     variables?: object;
 } | {
     type: 'STORE_MODAL_BACK';
+} | {
+    type: 'STORE_MODAL_VIEW_PRODUCT';
+    productId: string | null;
 } | {
     type: 'UPDATE_ORDER_VARIABLE_SELECTIONS';
     selections: OrderVariableSelectionState[];

package/dist/reducer.js

@@ -157,6 +157,13 @@ const reducer = (state, action) => {
       return storeModalReplace(state, action);
     case 'STORE_MODAL_BACK':
       return storeModalBack(state);
+    // The product page being viewed bounds what a pick on it may sit inside
+    // (selection.ts), so a change of page re-prices the selection.
+    case 'STORE_MODAL_VIEW_PRODUCT':
+      return state.viewedProductId === action.productId ? state : repriceSelection({
+        ...state,
+        viewedProductId: action.productId
+      });
     case 'UPDATE_ORDER_VARIABLE_SELECTIONS':
       return updateOrderVariableSelections(state, action);
     case 'UPDATE_LICENSEE_IS_BILLING_IDENTITY':
@@ -188,6 +195,8 @@ export function createDefaultStore(config) {
     skuStyleIds: {},
     skuPrices: {},
     collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
     fetchedCollectionIds: [],
     storeModalRoute: initialRoute,
     storeModalHistory: [],

package/dist/selection.d.ts

@@ -1,5 +1,9 @@
 import type { FontdueState } from './reducer.js';
 type Catalog = Pick<FontdueState, 'skuStyleIds' | 'skuPrices'>;
+interface ViewedProduct {
+    id: string;
+    skuIds: ReadonlySet<string>;
+}
 /**
  * The cheapest set of SKUs in which each of `picks` sits inside one SKU
  * granting all of its styles, sorted. Picks whose styles or price aren't known
@@ -9,7 +13,7 @@ type Catalog = Pick<FontdueState, 'skuStyleIds' | 'skuPrices'>;
  *   cheapestSkuIds(['sku:bold', 'sku:regular', 'sku:light'], catalog)
  *   // => ['sku:light+regular+bold'] rather than a pair plus a single
  */
-export declare const cheapestSkuIds: (picks: readonly string[], catalog: Catalog) => string[];
+export declare const cheapestSkuIds: (picks: readonly string[], catalog: Catalog, viewed?: ViewedProduct | null) => string[];
 /**
  * Re-derives `selectedSkuIds` from the picks. A pick whose styles or price
  * aren't known yet – selected from the host page before its product data

package/dist/selection.js

@@ -19,8 +19,14 @@
  * wins, then the one with the fewest SKUs – so a variable font comes along with
  * a collection bundle priced like its static family, and a family beats its two
  * halves at the same price.
+ *
+ * On a product page, a pick the page shows only sits inside SKUs the page shows
+ * (see `viewedProduct`).
  */
 
+// The product page being viewed and every SKU its fetch returned – what the
+// page renders.
+
 // Nodes the exact search may visit per part of the catalog before it settles
 // for the best combination found so far. Real catalogs finish far below it; it
 // only bounds pathological ones.
@@ -159,6 +165,23 @@ const containersOf = (index, pick) => {
   return containers;
 };
 
+// The containers a pick may sit inside. Every product the buyer has seen – or
+// has a BuyButton for on the host page – stays in the catalog, so on a product
+// page a pick the page shows only sits inside SKUs the page shows. Otherwise a
+// font pack seen earlier would take a member family's styles on the family's
+// own page, with a SKU that page doesn't show (even a family sold only by the
+// style), and a family seen earlier would take the pack page's partial block
+// of its styles (FD-79). A SKU granting exactly the pick's styles at its price
+// is the pick as far as the index goes – only one of two such twins is
+// offered – so it always stays.
+const holdersOf = (index, pick, viewed) => {
+  const containers = containersOf(index, pick);
+  if (!(viewed !== null && viewed !== void 0 && viewed.skuIds.has(pick))) return containers;
+  const size = index.granted.get(pick).size;
+  const price = index.catalog.skuPrices[pick];
+  return containers.filter(skuId => viewed.skuIds.has(skuId) || index.granted.get(skuId).size === size && index.catalog.skuPrices[skuId] === price);
+};
+
 // The parts a pick's styles belong to.
 const partsOf = (index, pick) => {
   const cached = index.parts.get(pick);
@@ -199,27 +222,30 @@ const notNull = value => value !== null;
  *   cheapestSkuIds(['sku:bold', 'sku:regular', 'sku:light'], catalog)
  *   // => ['sku:light+regular+bold'] rather than a pair plus a single
  */
-export const cheapestSkuIds = (picks, catalog) => cheapestCombination(picks, catalog).skuIds;
-const selectionCost = (picks, catalog) => cheapestCombination(picks, catalog).cost;
-const cheapestCombination = (picks, catalog) => {
+export const cheapestSkuIds = function (picks, catalog) {
+  let viewed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return cheapestCombination(picks, catalog, viewed).skuIds;
+};
+const selectionCost = (picks, catalog, viewed) => cheapestCombination(picks, catalog, viewed).cost;
+const cheapestCombination = (picks, catalog, viewed) => {
   const index = indexFor(catalog);
   const priceable = [...new Set(picks)].filter(pick => index.granted.has(pick)).sort();
-  return cover(priceable, new Set(), index) ?? EMPTY_COVER;
+  return cover(priceable, new Set(), index, viewed) ?? EMPTY_COVER;
 };
 
 // The cheapest cover of `picks` (sorted) without the `excluded` bridges, or
 // null when some pick has nowhere to sit without them.
-const cover = (picks, excluded, index) => {
+const cover = (picks, excluded, index, viewed) => {
   if (picks.length === 0) return EMPTY_COVER;
-  const key = `${picks.join(',')}#${[...excluded].sort().join(',')}`;
+  const key = `${picks.join(',')}#${[...excluded].sort().join(',')}@${(viewed === null || viewed === void 0 ? void 0 : viewed.id) ?? ''}`;
   if (index.covers.has(key)) return index.covers.get(key);
-  const result = coverUncached(picks, excluded, index);
+  const result = coverUncached(picks, excluded, index, viewed);
   if (index.covers.size >= MEMO_LIMIT) index.covers.clear();
   index.covers.set(key, result);
   return result;
 };
-const coverUncached = (picks, excluded, index) => {
-  const available = new Map(picks.map(pick => [pick, containersOf(index, pick).filter(id => !excluded.has(id))]));
+const coverUncached = (picks, excluded, index, viewed) => {
+  const available = new Map(picks.map(pick => [pick, holdersOf(index, pick, viewed).filter(id => !excluded.has(id))]));
   if (picks.some(pick => available.get(pick).length === 0)) return null;
   const parts = [...new Set(picks.flatMap(pick => [...partsOf(index, pick)]))];
   if (parts.length === 1) return branchAndBound(picks, available, index);
@@ -248,7 +274,7 @@ const coverUncached = (picks, excluded, index) => {
       const [part] = partsOf(index, pick);
       picksByGroup[groupOfPart.get(part)].push(pick);
     }
-    const covers = picksByGroup.map(group => cover(group, excluded, index));
+    const covers = picksByGroup.map(group => cover(group, excluded, index, viewed));
     return covers.every(notNull) ? combine(covers) : null;
   }
 
@@ -258,13 +284,13 @@ const coverUncached = (picks, excluded, index) => {
     bridge
   } = joining[0];
   const withoutBridge = new Set([...excluded, bridge]);
-  const rest = cover(picks.filter(pick => !available.get(pick).includes(bridge)), withoutBridge, index);
+  const rest = cover(picks.filter(pick => !available.get(pick).includes(bridge)), withoutBridge, index, viewed);
   const including = rest && combine([{
     skuIds: [bridge],
     cost: index.catalog.skuPrices[bridge],
     granted: index.granted.get(bridge)
   }, rest]);
-  const excluding = cover(picks, withoutBridge, index);
+  const excluding = cover(picks, withoutBridge, index, viewed);
   if (!including || !excluding) return including ?? excluding;
   return isBetter(including, excluding) ? including : excluding;
 };
@@ -393,6 +419,23 @@ const greedyCover = (options, all) => {
 // Selection state
 // ---------------------------------------------------------------------------
 
+const viewedSkuIdsCache = new WeakMap();
+
+// The product page the Store Modal is on – as the page reports it, so one
+// opened by slug counts the same as one opened by id – or null off a product
+// page and while the product's fetch is still in flight. productState records
+// every SKU a product's fetch returned, which is what its page renders.
+const viewedProduct = state => {
+  const productId = state.viewedProductId;
+  const skuIds = productId ? state.productSkuIds[productId] : undefined;
+  if (!productId || !skuIds) return null;
+  if (!viewedSkuIdsCache.has(skuIds)) viewedSkuIdsCache.set(skuIds, new Set(skuIds));
+  return {
+    id: productId,
+    skuIds: viewedSkuIdsCache.get(skuIds)
+  };
+};
+
 /**
  * Re-derives `selectedSkuIds` from the picks. A pick whose styles or price
  * aren't known yet – selected from the host page before its product data
@@ -400,7 +443,7 @@ const greedyCover = (options, all) => {
  */
 export const repriceSelection = state => {
   const unpriceable = state.requestedSkuIds.filter(skuId => !isPriceable(state, skuId));
-  const skuIds = union(cheapestSkuIds(state.requestedSkuIds, state), unpriceable);
+  const skuIds = union(cheapestSkuIds(state.requestedSkuIds, state, viewedProduct(state)), unpriceable);
   const unchanged = selectedSkuIdList(state).length === skuIds.length && skuIds.every(skuId => state.selectedSkuIds[skuId]);
   return unchanged ? state : {
     ...state,
@@ -476,18 +519,20 @@ const costCache = new WeakMap();
  */
 export const additionalCost = (state, skuId) => {
   if (!isPriceable(state, skuId)) return null;
+  const viewed = viewedProduct(state);
   let cache = costCache.get(state.requestedSkuIds);
-  if (!cache || cache.skuStyleIds !== state.skuStyleIds || cache.skuPrices !== state.skuPrices) {
+  if (!cache || cache.skuStyleIds !== state.skuStyleIds || cache.skuPrices !== state.skuPrices || cache.viewedId !== ((viewed === null || viewed === void 0 ? void 0 : viewed.id) ?? null)) {
     cache = {
       skuStyleIds: state.skuStyleIds,
       skuPrices: state.skuPrices,
-      base: selectionCost(state.requestedSkuIds, state),
+      viewedId: (viewed === null || viewed === void 0 ? void 0 : viewed.id) ?? null,
+      base: selectionCost(state.requestedSkuIds, state, viewed),
       costs: new Map()
     };
     costCache.set(state.requestedSkuIds, cache);
   }
   if (!cache.costs.has(skuId)) {
-    const withSku = selectionCost(union(state.requestedSkuIds, [skuId]), state);
+    const withSku = selectionCost(union(state.requestedSkuIds, [skuId]), state, viewed);
     cache.costs.set(skuId, withSku - cache.base);
   }
   return cache.costs.get(skuId);

package/dist/storeModalRoutes.js

@@ -28,10 +28,11 @@ function isGlobalId(value) {
  * `index` has to carry the configured `indexExcludeTags` — a route dispatched
  * without them lists collections the store front deliberately leaves out.
  *
- * A product is addressed by either its collection id or its slug, the same two
- * identifiers `BuyButton` takes. The route passes whichever it was given
- * through to the product query; a slug that names nothing (or names an article
- * rather than a collection) lands on the modal's "Collection not found".
+ * A product (a collection or a font pack) is addressed by either its id or its
+ * slug, the same two identifiers `BuyButton` takes. The route passes whichever
+ * it was given through to the product query; a slug that names nothing (or
+ * names an article rather than a product) lands on the modal's "Product not
+ * found".
  */
 const routes = {
   '^index$': config => ({

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.7.0";
+export const version = "3.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",

package/dist/__generated__/BuyButton_collection.graphql.d.ts

@@ -1,25 +0,0 @@
-/**
- * @generated SignedSource<<2e0d1867d52ad59c939fc952ee3f136a>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ReaderFragment } from 'relay-runtime';
-import { FragmentRefs } from "relay-runtime";
-export type BuyButton_collection$data = {
-    readonly fontStyles: ReadonlyArray<{
-        readonly sku: {
-            readonly id: string;
-        } | null;
-    }>;
-    readonly id: string;
-    readonly sku: {
-        readonly id: string;
-    } | null;
-    readonly " $fragmentType": "BuyButton_collection";
-};
-export type BuyButton_collection$key = {
-    readonly " $data"?: BuyButton_collection$data;
-    readonly " $fragmentSpreads": FragmentRefs<"BuyButton_collection">;
-};
-declare const node: ReaderFragment;
-export default node;

package/dist/__generated__/BuyButton_collection.graphql.js

@@ -1,49 +0,0 @@
-/**
- * @generated SignedSource<<2e0d1867d52ad59c939fc952ee3f136a>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-const node = function () {
-  var v0 = {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "id",
-      "storageKey": null
-    },
-    v1 = {
-      "alias": null,
-      "args": null,
-      "concreteType": "Sku",
-      "kind": "LinkedField",
-      "name": "sku",
-      "plural": false,
-      "selections": [v0 /*: any*/],
-      "storageKey": null
-    };
-  return {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "BuyButton_collection",
-    "selections": [v0 /*: any*/, v1 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "concreteType": "FontStyle",
-      "kind": "LinkedField",
-      "name": "fontStyles",
-      "plural": true,
-      "selections": [v1 /*: any*/],
-      "storageKey": null
-    }],
-    "type": "FontCollection",
-    "abstractKey": null
-  };
-}();
-node.hash = "9c47030d7450494449d4aa5bda16e27e";
-export default node;