fontdue-js 3.7.0 → 3.9.0

package/dist/__tests__/storeModalPackButton.test.js

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+
+// The pack's row at the top of its product page: the name is shown exactly as
+// the admin entered it, the à-la-carte total is struck through with an <s>,
+// and a pack without a SKU is not clickable.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPackButton from '../components/StoreModal/StoreModalPackButton.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const pack = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    name: 'Pack of Basics',
+    sku: {
+      id: 'pack-sku',
+      price: money(15000)
+    },
+    featureStyle: null,
+    totalStyles: 3,
+    totalStylesPrice: money(30000),
+    ...overrides
+  };
+};
+const markup = packData => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+  pack: packData,
+  onSelectSku: () => {}
+}));
+const mount = async (packData, onSelectSku) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+      pack: packData,
+      onSelectSku: onSelectSku
+    }));
+  });
+  return container.querySelector('button');
+};
+describe('StoreModalPackButton', () => {
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    stateRef.current = createDefaultStore(undefined).getState();
+    document.body.innerHTML = '';
+  });
+  it("shows the pack's name as entered, without adding a suffix", () => {
+    expect(markup(pack())).toContain('>Pack of Basics<');
+    expect(markup(pack())).not.toContain('Pack of Basics Pack');
+    expect(markup(pack({
+      name: 'Essentials'
+    }))).toContain('>Essentials<');
+  });
+  it('strikes through the à-la-carte total with an <s> when the pack is cheaper', () => {
+    expect(markup(pack())).toMatch(/<s class="store-modal__family-button__styles-price">/);
+    expect(markup(pack({
+      totalStylesPrice: money(15000)
+    }))).not.toContain('store-modal__family-button__styles-price');
+  });
+  it('selects the pack SKU on click', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack(), onSelectSku);
+    expect(button.dataset.clickable).toBe('true');
+    await act(async () => button.click());
+    expect(onSelectSku).toHaveBeenCalledWith('pack-sku', true);
+  });
+  it('is not clickable without a SKU', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack({
+      sku: null,
+      totalStylesPrice: null
+    }), onSelectSku);
+    expect(button.dataset.clickable).toBe('false');
+    await act(async () => button.click());
+    expect(onSelectSku).not.toHaveBeenCalled();
+  });
+});

package/dist/__tests__/storeModalPackUnlisted.test.js

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+
+// A pack page renders a block per member. An unlisted collection has no block
+// anywhere in the Store Modal (FD-1239), so the pack page leaves it out too –
+// the pack still grants it, and the pack button still sells it.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPack from '../components/StoreModal/StoreModalPack.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const style = name => ({
+  id: `style:${name}`,
+  name: 'Regular',
+  supportedLanguages: ['en'],
+  variableInstances: [],
+  sku: {
+    id: `sku:style:${name}`,
+    price: money(4000)
+  },
+  cssFamily: name,
+  cssWeight: '400',
+  cssStretch: 'normal',
+  cssStyle: 'normal'
+});
+const family = function (name, visibility) {
+  let children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return {
+    __typename: 'FontCollection',
+    id: `collection:${name}`,
+    name,
+    visibility,
+    collectionType: 'family',
+    isVariableFont: false,
+    sku: {
+      id: `sku:${name}`,
+      price: money(20000)
+    },
+    totalStyles: 1,
+    totalStylesPrice: money(4000),
+    featureStyle: null,
+    bundles: [],
+    fontStyles: [style(name)],
+    children
+  };
+};
+const styleMember = (familyName, visibility) => ({
+  __typename: 'FontStyle',
+  ...style(familyName),
+  family: {
+    id: `collection:${familyName}`,
+    name: familyName,
+    isVariableFont: false,
+    visibility
+  }
+});
+const pack = {
+  name: 'Anniversary pack',
+  sku: {
+    id: 'sku:pack',
+    price: money(30000)
+  },
+  featureStyle: null,
+  totalStyles: 6,
+  totalStylesPrice: money(60000),
+  members: [family('Alpha', 'VISIBLE', [family('Bravo', 'VISIBLE'), family('Charlie', 'UNLISTED')]), family('Delta', 'UNLISTED'), styleMember('Echo', 'VISIBLE'), styleMember('Foxtrot', 'UNLISTED')]
+};
+describe('StoreModalPack member blocks', () => {
+  beforeEach(() => {
+    stateRef.current = createDefaultStore(undefined).getState();
+  });
+  const markup = () => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPack, {
+    pack: pack,
+    onSelect: () => {}
+  }));
+  it('renders a block for each visible member and child family', () => {
+    expect(markup()).toContain('Alpha');
+    expect(markup()).toContain('Bravo');
+    expect(markup()).toContain('Echo');
+  });
+  it('leaves out an unlisted member, an unlisted child and an unlisted style member', () => {
+    expect(markup()).not.toContain('Charlie');
+    expect(markup()).not.toContain('Delta');
+    expect(markup()).not.toContain('Foxtrot');
+  });
+  it('still sells the pack as a whole', () => {
+    expect(markup()).toContain('Anniversary pack');
+  });
+});

package/dist/__tests__/storeModalRoutes.test.js

@@ -69,6 +69,15 @@ describe('storeModalUrlActions', () => {
   it('opens the modal on its default route for ?store=open', () => {
     expect(storeModalUrlActions('?store=open', config(['unlisted']))).toEqual([OPEN]);
   });
+  it('opens the modal on the browse page for ?store=index', () => {
+    expect(storeModalUrlActions('?store=index', config(['unlisted']))).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'index',
+      variables: {
+        excludeTags: ['unlisted']
+      }
+    }, OPEN]);
+  });
   it('opens the modal on a product for ?store=product/<id>', () => {
     expect(storeModalUrlActions(`?store=product/${PRODUCT_ID}`, config())).toEqual([{
       type: 'STORE_MODAL_REPLACE',

package/dist/__tests__/testFontsFamilyChoice.test.js

@@ -0,0 +1,150 @@
+// @vitest-environment happy-dom
+
+// The test fonts form's family choice (FD-28): the archive endpoint takes
+// `collection_ids[]` to narrow the ZIP, and the form fills it from checkboxes
+// (`familySelection: 'choice'`) or from its own `collectionId`/`collectionSlug`.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  queryRef
+} = vi.hoisted(() => ({
+  queryRef: {
+    data: null,
+    variables: null
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  commitMutation: vi.fn(),
+  useRelayEnvironment: () => ({}),
+  usePreloadedQuery: () => queryRef.data,
+  useLazyLoadQuery: (_query, variables) => {
+    queryRef.variables = variables;
+    return queryRef.data;
+  }
+}));
+vi.mock('../components/FontdueContextProvider/index.js', () => ({
+  EnsureFontdueContext: _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  },
+  LazyQueryBoundary: _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+}));
+import TestFontsForm from '../components/TestFontsForm/index.js';
+import ConfigContext, { makeConfig } from '../components/ConfigContext.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const families = [{
+  id: 'RmFtaWx5OjE=',
+  name: 'Alpha'
+}, {
+  id: 'RmFtaWx5OjI=',
+  name: 'Beta'
+}];
+const viewer = function (familySelection) {
+  let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : families;
+  return {
+    viewer: {
+      settings: {
+        eulaAgreementLabel: 'I agree',
+        newsletterOptInLabel: null,
+        recaptchaEnabled: false,
+        recaptchaSiteKey: null
+      },
+      fontdueConfig: {
+        testFonts: {
+          familySelection
+        }
+      },
+      testFonts: {
+        archiveUrl: 'https://example.test/test-fonts/archive',
+        families: list
+      }
+    }
+  };
+};
+let container;
+let root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 1 ? arguments[1] : undefined;
+  return act(() => root.render( /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: makeConfig(config)
+  }, /*#__PURE__*/React.createElement(TestFontsForm, props))));
+};
+const familyCheckboxes = () => [...container.querySelectorAll('.test-fonts__family input')];
+const hiddenIds = () => [...container.querySelectorAll('input[type="hidden"]')].filter(input => input.name === 'collection_ids[]').map(input => input.value);
+describe('TestFontsForm family choice', () => {
+  it('downloads everything without checkboxes by default', () => {
+    queryRef.data = viewer('all');
+    render();
+    expect(familyCheckboxes()).toHaveLength(0);
+    expect(hiddenIds()).toEqual([]);
+    expect(queryRef.variables).toEqual({
+      collectionIds: null,
+      collectionSlugs: null
+    });
+  });
+  it('lists the families when the dashboard says choice, and sends the ticked ones', () => {
+    queryRef.data = viewer('choice');
+    render();
+    expect(familyCheckboxes().map(box => box.value)).toEqual(families.map(f => f.id));
+    expect(container.textContent).toContain('Beta');
+    expect(hiddenIds()).toEqual([]);
+    act(() => familyCheckboxes()[1].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjI=']);
+    act(() => container.querySelector('.test-fonts__families__all input').click());
+    expect(hiddenIds()).toEqual(families.map(f => f.id));
+  });
+  it('lets code config and the prop override the dashboard setting', () => {
+    queryRef.data = viewer('choice');
+    render({}, {
+      testFonts: {
+        familySelection: 'all'
+      }
+    });
+    expect(familyCheckboxes()).toHaveLength(0);
+    queryRef.data = viewer('all');
+    render({
+      familySelection: 'choice'
+    });
+    expect(familyCheckboxes()).toHaveLength(2);
+  });
+  it('downloads exactly the named collections without checkboxes', () => {
+    queryRef.data = viewer('choice', [families[0]]);
+    render({
+      collectionSlug: 'alpha, gamma'
+    });
+    expect(queryRef.variables).toEqual({
+      collectionIds: null,
+      collectionSlugs: ['alpha', 'gamma']
+    });
+    expect(familyCheckboxes()).toHaveLength(0);
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=']);
+  });
+  it('says so when the named collections have no test fonts', () => {
+    queryRef.data = viewer('all', []);
+    render({
+      collectionId: 'RmFtaWx5Ojk='
+    });
+    expect(container.querySelector('form')).toBeNull();
+    expect(container.textContent).toContain('Test fonts aren’t available for this family.');
+  });
+});

package/dist/components/AddToCartBanner/index.js

@@ -21,7 +21,7 @@ const getOrderItemName = item => {
   if ('name' in product) return product.name;
   return null;
 };
-_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "93905c08206c30255368dbb06f59ccec" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
+_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "5b6c677fd518073e74b1651f3b872e8a" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
 function AddToCartBanner(_ref) {
   var _order$orderItems, _order$orderItems2;
   let {

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

@@ -1,19 +1,35 @@
 import React from 'react';
 import { BuyButtonIDQuery } from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import { BuyButtonSlugQuery } from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import { BuyButtonPackIDQuery } from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import { BuyButtonPackSlugQuery } from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { Config } from '../ConfigContext.js';
 export interface BuyButton_props {
     collectionName?: string;
     label?: string;
 }
-export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery>;
+export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery> | SerializablePreloadedQuery<BuyButtonPackIDQuery> | SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
 export type LoadBuyButtonQueryVariables = {
     collectionId: string;
     collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug?: never;
 } | {
     collectionId?: never;
     collectionSlug: string;
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId: string;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug: string;
 };
 export declare function loadBuyButtonQuery(variables: LoadBuyButtonQueryVariables, options?: LoadQueryOptions): Promise<BuyButtonPreloadedQuery>;
 export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
@@ -22,19 +38,23 @@ export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...r
 export declare function BuyButtonPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
     preloadedQuery: SerializablePreloadedQuery<BuyButtonSlugQuery>;
 }): React.JSX.Element;
+export declare function BuyButtonPreloadedPackIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackIDQuery>;
+}): React.JSX.Element;
+export declare function BuyButtonPreloadedPackSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
+}): React.JSX.Element;
+type BuyButton_lazyProps = LoadBuyButtonQueryVariables;
 export type BuyButton_unifiedProps = BuyButton_props & {
     config?: Config;
 } & ({
     preloadedQuery: BuyButtonPreloadedQuery;
     collectionId?: never;
     collectionSlug?: never;
-} | {
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | ({
     preloadedQuery?: never;
-    collectionId: string;
-    collectionSlug?: never;
-} | {
-    preloadedQuery?: never;
-    collectionId?: never;
-    collectionSlug: string;
-});
+} & BuyButton_lazyProps));
 export default function BuyButton(props: BuyButton_unifiedProps): React.JSX.Element;
+export {};