fontdue-js 3.7.0 → 3.9.0

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/TestFontsForm/TestFontsFormElement.d.ts

@@ -3,6 +3,9 @@ interface TestFontsFormElement_props {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: string;
+    collectionId?: string;
+    collectionSlug?: string;
+    familySelection?: string;
 }
-declare const TestFontsFormElement: (props: TestFontsFormElement_props) => React.JSX.Element;
+declare const TestFontsFormElement: ({ familySelection, ...props }: TestFontsFormElement_props) => React.JSX.Element;
 export default TestFontsFormElement;

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -1,7 +1,15 @@
 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 React from 'react';
 import TestFontsFormFetcher from './index.js';
-const TestFontsFormElement = props => /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
-  newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
-}));
+const FAMILY_SELECTIONS = ['all', 'choice'];
+const TestFontsFormElement = _ref => {
+  let {
+    familySelection,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
+    familySelection: familySelection && FAMILY_SELECTIONS.includes(familySelection) ? familySelection : undefined,
+    newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
+  }));
+};
 export default TestFontsFormElement;

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config } from '../ConfigContext.js';
-export interface TestFontsForm_props {
+import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { TestFontsFormCollectionProps } from './variables.js';
+export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
+    familySelection?: TestFontsFamilySelection;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
-export declare function loadTestFontsFormQuery(options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
+export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;
+export declare function loadTestFontsFormQuery(variables?: LoadTestFontsFormQueryVariables | LoadQueryOptions, options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
 export declare function TestFontsFormPreloadedQueryRenderer({ preloadedQuery, ...rest }: TestFontsForm_props & {
     preloadedQuery: TestFontsFormPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TestFontsForm/index.js

@@ -3,7 +3,7 @@
 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 _TestFontsForm_Query from "../../__generated__/TestFontsForm_Query.graphql.js";
 import _TestFontsFormUpdateCustomerMutation from "../../__generated__/TestFontsFormUpdateCustomerMutation.graphql.js";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useContext, useId } from 'react';
 import { commitMutation, graphql, useRelayEnvironment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 // The script-injecting reCAPTCHA wrapper (loads Google's api.js). Importing the
 // package's barebone named export instead was the FD-917 root cause; see
@@ -16,8 +16,18 @@ import Checkbox from '../Checkbox/index.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
+import ConfigContext from '../ConfigContext.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
+// The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
+// those families; none means every family.
+const COLLECTION_IDS_PARAM = 'collection_ids[]';
+const withCollectionIds = (archiveUrl, collectionIds) => {
+  if (collectionIds.length === 0) return archiveUrl;
+  const query = new URLSearchParams(collectionIds.map(id => [COLLECTION_IDS_PARAM, id]));
+  return `${archiveUrl}${archiveUrl.includes('?') ? '&' : '?'}${query}`;
+};
 const TestFontsDownloading = _ref => {
   let {
     archiveUrl
@@ -31,12 +41,15 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
     downloadLabel = 'Download test fonts',
-    newsletterCheckboxChecked = false
+    newsletterCheckboxChecked = false,
+    collectionId,
+    collectionSlug,
+    familySelection: familySelectionProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -52,7 +65,28 @@ const TestFontsFormComponent = _ref2 => {
   const recaptchaRef = useRef(null);
   const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
+  const config = useContext(ConfigContext);
+  const idPrefix = useId();
+  const [chosenIds, setChosenIds] = useState([]);
   if (!data.viewer) return null;
+  const families = ((_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.families) ?? [];
+  const {
+    collectionIds,
+    collectionSlugs
+  } = testFontsFormQueryVariables({
+    collectionId,
+    collectionSlug
+  });
+  // A form for particular collections downloads exactly those families.
+  const limited = collectionIds != null || collectionSlugs != null;
+  // This form's prop, then code config (which, on the script-tag path, already
+  // has the dashboard setting merged beneath it), then the dashboard setting.
+  const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // One family leaves nothing to choose.
+  const choosing = !limited && familySelection === 'choice' && families.length > 1;
+  const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
+  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
+  const allChosen = families.every(family => chosenIds.includes(family.id));
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -151,23 +185,48 @@ const TestFontsFormComponent = _ref2 => {
     }
     submitForm(recaptchaToken);
   };
-
-  // Button is disabled only while actively submitting or waiting for reCAPTCHA
-  const disabled = !eulaAgreed || !email || !name;
+  const disabled = !eulaAgreed || !email || !name || choosing && downloadIds.length === 0;
   const settings = data.viewer.settings;
   const newsletterOptInLabel = settings === null || settings === void 0 ? void 0 : settings.newsletterOptInLabel;
   const eulaAgreementLabel = settings === null || settings === void 0 ? void 0 : settings.eulaAgreementLabel;
-  const archiveUrl = (_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.archiveUrl;
+  const archiveUrl = (_data$viewer$testFont2 = data.viewer.testFonts) === null || _data$viewer$testFont2 === void 0 ? void 0 : _data$viewer$testFont2.archiveUrl;
+  if (limited && families.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts test-fonts--unavailable"
+    }, /*#__PURE__*/React.createElement("p", null, "Test fonts aren\u2019t available for this family."));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "test-fonts"
   }, error && /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__errors"
   }, error), submitted ? /*#__PURE__*/React.createElement(TestFontsDownloading, {
-    archiveUrl: archiveUrl
+    archiveUrl: withCollectionIds(archiveUrl, downloadIds)
   }) : /*#__PURE__*/React.createElement("form", {
     className: "test-fonts__form",
     onSubmit: handleSubmit
+  }, choosing && /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__section test-fonts__families",
+    role: "group",
+    "aria-label": "Families"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__families__all"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-families-all`,
+    checked: allChosen,
+    onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-families-all`
+  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__family",
+    key: family.id
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-family-${index}`,
+    value: family.id,
+    checked: chosenIds.includes(family.id),
+    onChange: event => toggleFamily(family.id, event.target.checked)
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-family-${index}`
+  }, family.name)))), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -223,11 +282,21 @@ const TestFontsFormComponent = _ref2 => {
   }, " \u2192")))), /*#__PURE__*/React.createElement("form", {
     action: archiveUrl ?? undefined,
     ref: downloadForm
-  }));
+  }, downloadIds.map(id => /*#__PURE__*/React.createElement("input", {
+    key: id,
+    type: "hidden",
+    name: COLLECTION_IDS_PARAM,
+    value: id
+  }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
-export async function loadTestFontsFormQuery(options) {
-  return loadSerializableQuery(TestFontsFormQueryNode, {}, options);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+// Pass the same `collectionId` / `collectionSlug` as the form's props.
+export async function loadTestFontsFormQuery(variables, options) {
+  // Before the collection variables existed this took `options` alone.
+  if (variables && ('url' in variables || 'headers' in variables)) {
+    return loadTestFontsFormQuery({}, variables);
+  }
+  return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
 export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   let {
@@ -244,7 +313,7 @@ export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   }, rest));
 }
 function TestFontsFormLazyQueryRenderer(props) {
-  const data = useLazyLoadQuery(query, {});
+  const data = useLazyLoadQuery(query, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormComponent, _extends({
     data: data
   }, props));

package/dist/components/TestFontsForm/index.server.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import { TestFontsFormPreloadedQueryRenderer } from './index.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import TestFontsFormQueryNode from '../../__generated__/TestFontsForm_Query.graphql.js';
 // Stub for the RSC export condition. See FontdueProvider/index.server.tsx
 // for the rationale.
@@ -14,7 +15,7 @@ export function loadTestFontsFormQuery() {
 // `<TestFontsForm />` in an RSC without manually invoking
 // `loadTestFontsFormQuery` + threading `preloadedQuery` through props.
 export default async function TestFontsForm(props) {
-  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, {});
+  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({
     preloadedQuery: preloadedQuery
   }, props));

package/dist/components/TestFontsForm/variables.d.ts

@@ -0,0 +1,8 @@
+export interface TestFontsFormCollectionProps {
+    collectionId?: string | readonly string[];
+    collectionSlug?: string | readonly string[];
+}
+export declare const testFontsFormQueryVariables: ({ collectionId, collectionSlug, }: TestFontsFormCollectionProps) => {
+    collectionIds: string[] | null;
+    collectionSlugs: string[] | null;
+};

package/dist/components/TestFontsForm/variables.js

@@ -0,0 +1,22 @@
+// Shared by the client component and the RSC entry (index.server.tsx), so it
+// lives outside the 'use client' module: a server component can't call a
+// function imported from one.
+
+const toList = value => {
+  if (value == null) return null;
+  const list = (typeof value === 'string' ? value.split(',') : [...value]).map(item => item.trim()).filter(Boolean);
+  return list.length > 0 ? list : null;
+};
+
+// The query's variables for a form's collection props: null (no narrowing)
+// unless the form is limited to particular collections.
+export const testFontsFormQueryVariables = _ref => {
+  let {
+    collectionId,
+    collectionSlug
+  } = _ref;
+  return {
+    collectionIds: toList(collectionId),
+    collectionSlugs: toList(collectionSlug)
+  };
+};

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

@@ -182,6 +182,13 @@
 .test-fonts__checkbox-field label p {
   margin: 0;
 }
+.test-fonts__families {
+  --checkbox-size: 20px;
+  --checkbox-margin: 10px;
+}
+.test-fonts__families .test-fonts__checkbox-field {
+  margin-bottom: 10px;
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }
@@ -2017,6 +2024,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