fontdue-js 3.6.0 → 3.8.0

package/dist/components/BuyButton/index.js

@@ -1,9 +1,11 @@
 '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 _BuyButtonPackSlugQuery from "../../__generated__/BuyButtonPackSlugQuery.graphql.js";
+import _BuyButtonPackIDQuery from "../../__generated__/BuyButtonPackIDQuery.graphql.js";
 import _BuyButtonSlugQuery from "../../__generated__/BuyButtonSlugQuery.graphql.js";
 import _BuyButtonIDQuery from "../../__generated__/BuyButtonIDQuery.graphql.js";
-import _BuyButton_collection from "../../__generated__/BuyButton_collection.graphql.js";
+import _BuyButton_product from "../../__generated__/BuyButton_product.graphql.js";
 import React, { useCallback, useContext, useEffect } from 'react';
 import { graphql, useRelayEnvironment, useLazyLoadQuery, useFragment, usePreloadedQuery } from 'react-relay';
 import { useDispatch, useStore } from 'react-redux';
@@ -11,37 +13,41 @@ import ComponentsContext from '../ComponentsContext.js';
 import { populateProductState } from '../Root/productState.js';
 import BuyButtonIDQueryNode from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import BuyButtonSlugQueryNode from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import BuyButtonPackIDQueryNode from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import BuyButtonPackSlugQueryNode from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 function BuyButtonComponent(_ref) {
   let {
-    collection: collectionKey,
+    product: productKey,
     label,
     collectionName
   } = _ref;
-  const collection = useFragment((_BuyButton_collection.hash && _BuyButton_collection.hash !== "9c47030d7450494449d4aa5bda16e27e" && console.error("The definition of 'BuyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButton_collection), collectionKey);
+  // A collection or a font pack — both open the store modal's product page,
+  // which renders whichever it is given.
+  const product = useFragment((_BuyButton_product.hash && _BuyButton_product.hash !== "007b16f72407229f0f743958a541c39a" && console.error("The definition of 'BuyButton_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButton_product), productKey);
   const store = useStore();
   const components = useContext(ComponentsContext);
   const dispatch = useDispatch();
   const environment = useRelayEnvironment();
   const handleClick = useCallback(() => {
-    if (!collection) return;
+    if (!product) return;
     dispatch({
       type: 'STORE_MODAL_NAVIGATE',
       route: 'product',
       variables: {
-        productId: collection.id
+        productId: product.id
       }
     });
     dispatch({
       type: 'OPEN_CART'
     });
-  }, [dispatch, collection]);
+  }, [dispatch, product]);
   useEffect(() => {
-    if (!collection) return;
-    populateProductState(store, environment, collection.id);
-  }, [collection === null || collection === void 0 ? void 0 : collection.id]);
+    if (!product) return;
+    populateProductState(store, environment, product.id);
+  }, [product === null || product === void 0 ? void 0 : product.id]);
   if (components.BuyButton) {
     return /*#__PURE__*/React.createElement(components.BuyButton, {
       innerProps: {
@@ -49,14 +55,21 @@ function BuyButtonComponent(_ref) {
       }
     });
   }
+
+  // Collections keep their historical label (the fragment never fetched the
+  // collection's name, so `collectionName` fills it in); a pack's name comes
+  // from the query.
+  const productName = collectionName ?? ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack' ? product.name : '');
   return /*#__PURE__*/React.createElement("button", {
     className: "buy-button",
     onClick: handleClick,
     type: "button"
-  }, label ? label : `Buy ${collectionName ?? ''}`);
+  }, label ? label : `Buy ${productName}`);
 }
-const idQuery = (_BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "4fbf1dbf9e6c530a5d38c697b174d8b0" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
-const slugQuery = (_BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "6e750adea09698f7cb61f435cd88fd26" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
+const idQuery = (_BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "602547ee927b734b5fa2d6d1f2c93765" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
+const slugQuery = (_BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "14c9d7a1ef98d03b73b22374983b5fb4" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
+const packIdQuery = (_BuyButtonPackIDQuery.hash && _BuyButtonPackIDQuery.hash !== "7c9a7e75de7c428c5a3aec1235d0516e" && console.error("The definition of 'BuyButtonPackIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonPackIDQuery);
+const packSlugQuery = (_BuyButtonPackSlugQuery.hash && _BuyButtonPackSlugQuery.hash !== "7d9d7c6c7343fe13ccb1e79b6696e416" && console.error("The definition of 'BuyButtonPackSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonPackSlugQuery);
 export async function loadBuyButtonQuery(variables, options) {
   if (variables.collectionId) {
     return loadSerializableQuery(BuyButtonIDQueryNode, {
@@ -68,7 +81,17 @@ export async function loadBuyButtonQuery(variables, options) {
       collectionSlug: variables.collectionSlug
     }, options);
   }
-  throw new Error('loadBuyButtonQuery expected either a collectionId or collectionSlug');
+  if (variables.fontPackId) {
+    return loadSerializableQuery(BuyButtonPackIDQueryNode, {
+      fontPackId: variables.fontPackId
+    }, options);
+  }
+  if (variables.fontPackSlug) {
+    return loadSerializableQuery(BuyButtonPackSlugQueryNode, {
+      fontPackSlug: variables.fontPackSlug
+    }, options);
+  }
+  throw new Error('loadBuyButtonQuery expected one of collectionId, collectionSlug, fontPackId or fontPackSlug');
 }
 function BuyButtonIDQueryRenderer(_ref2) {
   let {
@@ -102,7 +125,7 @@ function BuyButtonSlugQueryRenderer(_ref4) {
     collectionSlug
   });
   return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
-    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) ?? null
+    product: ((_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.product) ?? null
   }));
 }
 export function BuyButtonPreloadedSlugQueryRenderer(_ref5) {
@@ -117,25 +140,83 @@ export function BuyButtonPreloadedSlugQueryRenderer(_ref5) {
   const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', slugQuery);
   const data = usePreloadedQuery(slugQuery, queryRef);
   return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
-    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.collection) ?? null
+    product: ((_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.product) ?? null
   }));
 }
-function BuyButtonPreloadedRenderer(_ref6) {
+function BuyButtonPackIDQueryRenderer(_ref6) {
   let {
-    preloadedQuery,
+    fontPackId,
     ...rest
   } = _ref6;
-  if (preloadedQuery.params.name === 'BuyButtonIDQuery') {
-    return /*#__PURE__*/React.createElement(BuyButtonPreloadedIDQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery
-    }, rest));
+  const data = useLazyLoadQuery(packIdQuery, {
+    fontPackId
+  });
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+export function BuyButtonPreloadedPackIDQueryRenderer(_ref7) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref7;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', packIdQuery);
+  const data = usePreloadedQuery(packIdQuery, queryRef);
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+function BuyButtonPackSlugQueryRenderer(_ref8) {
+  var _data$viewer3, _data$viewer3$slug;
+  let {
+    fontPackSlug,
+    ...rest
+  } = _ref8;
+  const data = useLazyLoadQuery(packSlugQuery, {
+    fontPackSlug
+  });
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
+    product: ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$slug = _data$viewer3.slug) === null || _data$viewer3$slug === void 0 ? void 0 : _data$viewer3$slug.product) ?? null
+  }));
+}
+export function BuyButtonPreloadedPackSlugQueryRenderer(_ref9) {
+  var _data$viewer4, _data$viewer4$slug;
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref9;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', packSlugQuery);
+  const data = usePreloadedQuery(packSlugQuery, queryRef);
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
+    product: ((_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : (_data$viewer4$slug = _data$viewer4.slug) === null || _data$viewer4$slug === void 0 ? void 0 : _data$viewer4$slug.product) ?? null
+  }));
+}
+function BuyButtonPreloadedRenderer(_ref10) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref10;
+  switch (preloadedQuery.params.name) {
+    case 'BuyButtonIDQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedIDQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    case 'BuyButtonPackIDQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackIDQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    case 'BuyButtonPackSlugQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackSlugQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    default:
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedSlugQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
   }
-  return /*#__PURE__*/React.createElement(BuyButtonPreloadedSlugQueryRenderer, _extends({
-    preloadedQuery: preloadedQuery
-  }, rest));
 }
+
+// A lazy button identifies its product the same way `loadBuyButtonQuery` does.
+
 // Unified BuyButton entry. Accepts a preloaded query (server-side preload
-// path) or `{collectionId}`/`{collectionSlug}` for lazy fetch.
+// path) or one of `{collectionId}`/`{collectionSlug}`/`{fontPackId}`/
+// `{fontPackSlug}` for lazy fetch.
 // `EnsureFontdueContext` only self-wraps with `FontdueContextProvider` when
 // no parent Fontdue context is present, seeding it with `config`.
 export default function BuyButton(props) {
@@ -164,8 +245,24 @@ export default function BuyButton(props) {
     inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
     }, rest)));
+  } else if ('fontPackId' in props && props.fontPackId) {
+    const {
+      fontPackId,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonPackIDQueryRenderer, _extends({
+      fontPackId: fontPackId
+    }, rest)));
+  } else if ('fontPackSlug' in props && props.fontPackSlug) {
+    const {
+      fontPackSlug,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonPackSlugQueryRenderer, _extends({
+      fontPackSlug: fontPackSlug
+    }, rest)));
   } else {
-    throw new Error('BuyButton expected one of preloadedQuery, collectionId, or collectionSlug');
+    throw new Error('BuyButton expected one of preloadedQuery, collectionId, collectionSlug, fontPackId, or fontPackSlug');
   }
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: props.config

package/dist/components/BuyButton/index.server.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { BuyButton_props } from './index.js';
 import { Config } from '../ConfigContext.js';
-export type { BuyButtonPreloadedQuery } from './index.js';
+export type { BuyButtonPreloadedQuery, LoadBuyButtonQueryVariables } from './index.js';
 export declare function loadBuyButtonQuery(): never;
-export default function BuyButton({ collectionId, collectionSlug, ...rest }: BuyButton_props & {
+export default function BuyButton({ collectionId, collectionSlug, fontPackId, fontPackSlug, ...rest }: BuyButton_props & {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    fontPackId?: string | null;
+    fontPackSlug?: string | null;
     config?: Config;
 }): Promise<React.JSX.Element | null>;

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

@@ -1,9 +1,11 @@
 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 loadSerializableQuery from '../../relay/loadSerializableQuery.js';
-import { BuyButtonPreloadedIDQueryRenderer, BuyButtonPreloadedSlugQueryRenderer } from './index.js';
+import { BuyButtonPreloadedIDQueryRenderer, BuyButtonPreloadedSlugQueryRenderer, BuyButtonPreloadedPackIDQueryRenderer, BuyButtonPreloadedPackSlugQueryRenderer } from './index.js';
 import BuyButtonIDQueryNode from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import BuyButtonSlugQueryNode from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import BuyButtonPackIDQueryNode from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import BuyButtonPackSlugQueryNode from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 // Stub for the RSC export condition. See FontdueProvider/index.server.tsx
 // for the rationale.
 export function loadBuyButtonQuery() {
@@ -12,12 +14,15 @@ export function loadBuyButtonQuery() {
 
 // Next RSC variant: awaits the query on the server and hands the response to
 // the client `*PreloadedQueryRenderer`. Lets pages just write
-// `<BuyButton collectionId={id} />` in an RSC without manually invoking
-// `loadBuyButtonQuery` + threading `preloadedQuery` through props.
+// `<BuyButton collectionId={id} />` (or `fontPackId`) in an RSC without
+// manually invoking `loadBuyButtonQuery` + threading `preloadedQuery` through
+// props.
 export default async function BuyButton(_ref) {
   let {
     collectionId,
     collectionSlug,
+    fontPackId,
+    fontPackSlug,
     ...rest
   } = _ref;
   if (collectionId) {
@@ -36,5 +41,21 @@ export default async function BuyButton(_ref) {
       preloadedQuery: preloadedQuery
     }, rest));
   }
+  if (fontPackId) {
+    const preloadedQuery = await loadSerializableQuery(BuyButtonPackIDQueryNode, {
+      fontPackId
+    });
+    return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (fontPackSlug) {
+    const preloadedQuery = await loadSerializableQuery(BuyButtonPackSlugQueryNode, {
+      fontPackSlug
+    });
+    return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
   return null;
 }

package/dist/components/Cart/CartItem/CartItemProduct.js

@@ -9,13 +9,13 @@ export default function CartItemProduct(_ref) {
   let {
     product: productKey
   } = _ref;
-  const product = useFragment((_CartItemProduct_product.hash && _CartItemProduct_product.hash !== "a3931102e3ec08c57abd262038b5d74a" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product), productKey);
+  const product = useFragment((_CartItemProduct_product.hash && _CartItemProduct_product.hash !== "15b269b9bb33a3bfa7b10486e99da183" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product), productKey);
   let productName = (product === null || product === void 0 ? void 0 : product.name) ?? '??';
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle' && product.family) productName = `${product.family.name} ${product.name}`;
   if (((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && product.fontCollection && !((_product$name = product.name) !== null && _product$name !== void 0 && _product$name.startsWith(product.fontCollection.name))) productName = `${product.fontCollection.name} ${product.name}`;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "cart-item__aa"
-  }, product ? /*#__PURE__*/React.createElement(React.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/React.createElement(CollectionAa, {
+  }, product ? /*#__PURE__*/React.createElement(React.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle', 'FontPack'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/React.createElement(CollectionAa, {
     product: product
   }) : /*#__PURE__*/React.createElement(FontStyle, {
     fontStyle: product
@@ -25,7 +25,7 @@ export default function CartItemProduct(_ref) {
     className: "cart-item__name"
   }, productName), product !== null && product !== void 0 && product.isVariableFont || product !== null && product !== void 0 && (_product$variableInst = product.variableInstances) !== null && _product$variableInst !== void 0 && _product$variableInst.length ? /*#__PURE__*/React.createElement("div", {
     className: "cart-item__label"
-  }, "Variable font") : ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && /*#__PURE__*/React.createElement("div", {
+  }, "Variable font") : ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack') && /*#__PURE__*/React.createElement("div", {
     className: "cart-item__label"
   }, "(", pluralize(product.totalStyles ?? 0, 'style'), ")")));
 }

package/dist/components/Cart/Checkout.js

@@ -4,9 +4,10 @@ import _CheckoutUpdateOrderMutation from "../../__generated__/CheckoutUpdateOrde
 import _Checkout_UpdateOrderErrors from "../../__generated__/Checkout_UpdateOrderErrors.graphql.js";
 import _CheckoutUpdateCustomerMutation from "../../__generated__/CheckoutUpdateCustomerMutation.graphql.js";
 import _Checkout_identity from "../../__generated__/Checkout_identity.graphql.js";
-import React, { Fragment, useContext, useEffect, useState } from 'react';
+import React, { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import { CardElement } from '@stripe/react-stripe-js';
+import { trackPaymentInfoEntered } from './storefrontEvents.js';
 import { CreditCard, User, Check, License, Receipt, X } from '../Icons/index.js';
 import AddressFields from './AddressFields.js';
 import CustomerFields from './CustomerFields.js';
@@ -99,6 +100,7 @@ const Checkout = _ref => {
     onScrollToTop();
   }, [checkoutStep]);
   const environment = useRelayEnvironment();
+  const paymentInfoTracked = useRef(false);
   const [errorsObject, setErrorsObject] = useState(null);
   const [customerErrorsObject, setCustomerErrorsObject] = useState(null);
   const onCompleted = (res, errors, onSuccess) => {
@@ -454,6 +456,14 @@ const Checkout = _ref => {
           style: inputStyles,
           hidePostalCode: true
         }
+        // The first time the card details are complete. The server
+        // keeps it to one per order; the ref only saves requests.
+        ,
+        onChange: event => {
+          if (!event.complete || paymentInfoTracked.current) return;
+          paymentInfoTracked.current = true;
+          trackPaymentInfoEntered(environment);
+        }
       })), errorsObject && errorsObject.stripePaymentMethodId && errorsObject.stripePaymentMethodId.length > 0 && /*#__PURE__*/React.createElement("p", {
         className: "checkout-modal__section__errors"
       }, errorsObject.stripePaymentMethodId[0]));

package/dist/components/Cart/storefrontEvents.d.ts

@@ -0,0 +1,34 @@
+import { Environment } from 'relay-runtime';
+import type { FontdueState } from '../../reducer.js';
+import type { LicenseSelectionInput } from '__generated__/storefrontEventsTrackStorefrontEventMutation.graphql.js';
+/** Reports the store modal opening on a collection. */
+export declare function trackProductViewed(environment: Environment, collectionId: string): void;
+type LicenseOptions = FontdueState['licenseOptions'];
+/**
+ * The licence choices in the store's state, in the shape `createOrderItems`
+ * takes them – one selection per licence variable, or one bare selection for a
+ * licence without variables. Sorted, so the same configuration reached in a
+ * different order reads the same.
+ */
+export declare function licenseSelectionsFromOptions(licenseOptions: LicenseOptions): LicenseSelectionInput[];
+/**
+ * Reports the buyer changing their licence choices for a collection, once the
+ * choices settle. Call it from the handler of the buyer's own click, never from
+ * an effect: licences a foundry marks as selected by default are applied on
+ * mount, and that isn't the buyer customizing anything.
+ *
+ * `currentLicenseOptions` is read when the report fires, so it sees the
+ * configuration the buyer settled on.
+ */
+export declare function trackProductCustomized(environment: Environment, collectionId: string, currentLicenseOptions: () => LicenseOptions): void;
+/**
+ * `trackProductCustomized` bound to the store and Relay environment in
+ * context, for a licence control's click handlers.
+ */
+export declare function useTrackProductCustomized(collectionId: string | null | undefined): () => void;
+/**
+ * Reports the checkout's payment details as complete. The server records it
+ * once per order, however often this is called.
+ */
+export declare function trackPaymentInfoEntered(environment: Environment): void;
+export {};

package/dist/components/Cart/storefrontEvents.js

@@ -0,0 +1,138 @@
+import _storefrontEventsTrackStorefrontEventMutation from "../../__generated__/storefrontEventsTrackStorefrontEventMutation.graphql.js";
+import { useCallback } from 'react';
+import { commitMutation, graphql, useRelayEnvironment } from 'react-relay';
+import { useStore } from 'react-redux';
+import { orderTrackingInput } from './orderTracking.js';
+/**
+ * The storefront moments that happen entirely in the browser – a collection
+ * opened in the store modal, its licences changed, the payment details
+ * completed. Nothing reaches the server at those moments on its own, so they
+ * are reported through `trackStorefrontEvent`, which records them as "Product
+ * Viewed", "Product Customized" and "Payment Info Entered" with the same
+ * consent and identifiers as the order events around them (Meta reads them as
+ * ViewContent, CustomizeProduct and AddPaymentInfo).
+ *
+ * Every call is fire-and-forget: tracking must never break the store.
+ */
+function track(environment, input) {
+  const tracking = orderTrackingInput();
+  // Outside a browser there is no moment to report.
+  if (!tracking) return;
+  try {
+    commitMutation(environment, {
+      mutation: (_storefrontEventsTrackStorefrontEventMutation.hash && _storefrontEventsTrackStorefrontEventMutation.hash !== "340cc13477a15b926e2307d36c644053" && console.error("The definition of 'storefrontEventsTrackStorefrontEventMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _storefrontEventsTrackStorefrontEventMutation),
+      variables: {
+        input: {
+          ...input,
+          tracking
+        }
+      },
+      onCompleted: () => undefined,
+      onError: () => undefined
+    });
+  } catch {
+    // Ignore — see above.
+  }
+}
+
+// React can run an effect twice for one mount – StrictMode in development, a
+// Suspense retry – and each run would count as a second look.
+const VIEW_REPEAT_MS = 2000;
+let lastView = null;
+
+/** Reports the store modal opening on a collection. */
+export function trackProductViewed(environment, collectionId) {
+  var _lastView;
+  const now = Date.now();
+  if (((_lastView = lastView) === null || _lastView === void 0 ? void 0 : _lastView.collectionId) === collectionId && now - lastView.at < VIEW_REPEAT_MS) return;
+  lastView = {
+    collectionId,
+    at: now
+  };
+  track(environment, {
+    event: 'PRODUCT_VIEWED',
+    collectionId
+  });
+}
+/**
+ * The licence choices in the store's state, in the shape `createOrderItems`
+ * takes them – one selection per licence variable, or one bare selection for a
+ * licence without variables. Sorted, so the same configuration reached in a
+ * different order reads the same.
+ */
+export function licenseSelectionsFromOptions(licenseOptions) {
+  const selections = licenseOptions.flatMap(_ref => {
+    let {
+      licenseId,
+      licenseOptions: options
+    } = _ref;
+    const variableIds = Object.keys(options ?? {});
+    if (variableIds.length === 0) return [{
+      licenseId
+    }];
+    return variableIds.map(licenseVariableId => ({
+      licenseId,
+      licenseVariableId,
+      licenseOptionId: options[licenseVariableId]
+    }));
+  });
+  const key = s => `${s.licenseId}:${s.licenseVariableId ?? ''}`;
+  return selections.sort((a, b) => key(a).localeCompare(key(b)));
+}
+
+// A buyer clicks through a few licences and sizes before settling. Report the
+// configuration they settle on rather than every step on the way, and only
+// when it differs from the last one reported for that collection.
+const CUSTOMIZE_SETTLE_MS = 1500;
+const pendingCustomizations = new Map();
+const reportedConfigurations = new Map();
+
+/**
+ * Reports the buyer changing their licence choices for a collection, once the
+ * choices settle. Call it from the handler of the buyer's own click, never from
+ * an effect: licences a foundry marks as selected by default are applied on
+ * mount, and that isn't the buyer customizing anything.
+ *
+ * `currentLicenseOptions` is read when the report fires, so it sees the
+ * configuration the buyer settled on.
+ */
+export function trackProductCustomized(environment, collectionId, currentLicenseOptions) {
+  clearTimeout(pendingCustomizations.get(collectionId));
+  pendingCustomizations.set(collectionId, setTimeout(() => {
+    pendingCustomizations.delete(collectionId);
+    const licenseSelections = licenseSelectionsFromOptions(currentLicenseOptions());
+    // Unticking everything configures nothing.
+    if (licenseSelections.length === 0) return;
+    const configuration = JSON.stringify(licenseSelections);
+    if (reportedConfigurations.get(collectionId) === configuration) return;
+    reportedConfigurations.set(collectionId, configuration);
+    track(environment, {
+      event: 'PRODUCT_CUSTOMIZED',
+      collectionId,
+      licenseSelections
+    });
+  }, CUSTOMIZE_SETTLE_MS));
+}
+
+/**
+ * `trackProductCustomized` bound to the store and Relay environment in
+ * context, for a licence control's click handlers.
+ */
+export function useTrackProductCustomized(collectionId) {
+  const environment = useRelayEnvironment();
+  const store = useStore();
+  return useCallback(() => {
+    if (!collectionId) return;
+    trackProductCustomized(environment, collectionId, () => store.getState().licenseOptions);
+  }, [environment, store, collectionId]);
+}
+
+/**
+ * Reports the checkout's payment details as complete. The server records it
+ * once per order, however often this is called.
+ */
+export function trackPaymentInfoEntered(environment) {
+  track(environment, {
+    event: 'PAYMENT_INFO_ENTERED'
+  });
+}

package/dist/components/CollectionAa/index.js

@@ -7,12 +7,12 @@ export const CollectionAa = _ref => {
   let {
     product: productKey
   } = _ref;
-  const product = useFragment((_CollectionAa_product.hash && _CollectionAa_product.hash !== "c6b0113fe8474166dab3649c41880d84" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
+  const product = useFragment((_CollectionAa_product.hash && _CollectionAa_product.hash !== "a3ee4dc4f6eb38b9c24a21cdc2cb6bc0" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
   let fontStyle;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle') {
     var _product$fontStyles;
     fontStyle = (_product$fontStyles = product.fontStyles) === null || _product$fontStyles === void 0 ? void 0 : _product$fontStyles[0];
-  } else if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') {
+  } else if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack') {
     fontStyle = product.featureStyle;
   }
   if (!fontStyle) return null;

package/dist/components/FontFamilies/index.js

@@ -24,20 +24,21 @@ function FontFamilies(_ref) {
   } = useLicenseAndOrderVariables();
   const {
     node
-  } = useLazyLoadQuery((_FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "18eba6b750d3f714b964af66ecfcfa3b" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
+  } = useLazyLoadQuery((_FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "1ccff8f69fae99e65e6007bf25e4f8a3" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
     collectionId,
     licenseOptions: licenseOptionsSpecs,
     orderVariables: orderVariableSelections
   });
   if (!node) return null;
+  // Unlisted collections are only sold through an upgrade – see StoreModalProduct.
   return /*#__PURE__*/React.createElement("div", {
     className: "font-families"
   }, /*#__PURE__*/React.createElement("div", {
     className: "font-families__items"
-  }, /*#__PURE__*/React.createElement(Family, {
+  }, node.visibility !== 'UNLISTED' && /*#__PURE__*/React.createElement(Family, {
     node: node,
     size: "wide"
-  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => /*#__PURE__*/React.createElement(Family, {
+  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.filter(family => family.visibility !== 'UNLISTED').map((family, index) => /*#__PURE__*/React.createElement(Family, {
     key: index,
     node: family
   }))));

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { NodePasswordForm_props } from './index.js';
-export default function NodePasswordFormElement({ collectionId, collectionSlug, ...rest }: NodePasswordForm_props): React.JSX.Element;
+export default function NodePasswordFormElement(props: NodePasswordForm_props): React.JSX.Element;