fontdue-js 3.12.0 → 3.13.0

package/dist/__generated__/productState_fontPack.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c00a5a25369b3afa2e42b1f47d1fa26a>>
+ * @generated SignedSource<<225503323456f9f96cbe77f3b83dd674>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -60,13 +60,17 @@ const node = function () {
     },
     v4 = {
       "alias": null,
-      "args": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "acrossFamilies",
+        "value": true
+      }],
       "concreteType": "Bundle",
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
       "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/],
-      "storageKey": null
+      "storageKey": "bundles(acrossFamilies:true)"
     };
   return {
     "argumentDefinitions": [],

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<89ccca0787788a2ceb37d58b6ab5340a>>
+ * @generated SignedSource<<7112b01c24002ecc9175f687500a7e12>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -63,34 +63,6 @@ export type productState_node$data = {
             };
         } | null;
     }> | null;
-    readonly collectionBundles: ReadonlyArray<{
-        readonly id: string;
-        readonly memberCollections: ReadonlyArray<{
-            readonly fontStyles: ReadonlyArray<{
-                readonly id: string;
-                readonly sku: {
-                    readonly id: string;
-                    readonly price: {
-                        readonly amount: number;
-                    };
-                } | null;
-            }>;
-            readonly id: string;
-            readonly sku: {
-                readonly id: string;
-                readonly price: {
-                    readonly amount: number;
-                };
-            } | null;
-        }> | null;
-        readonly name: string;
-        readonly sku: {
-            readonly id: string;
-            readonly price: {
-                readonly amount: number;
-            };
-        } | null;
-    }> | null;
     readonly fontStyles: ReadonlyArray<{
         readonly id: string;
         readonly sku: {

package/dist/__generated__/productState_node.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<89ccca0787788a2ceb37d58b6ab5340a>>
+ * @generated SignedSource<<7112b01c24002ecc9175f687500a7e12>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -60,13 +60,17 @@ const node = function () {
     },
     v4 = {
       "alias": null,
-      "args": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "acrossFamilies",
+        "value": true
+      }],
       "concreteType": "Bundle",
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
       "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/],
-      "storageKey": null
+      "storageKey": "bundles(acrossFamilies:true)"
     };
   return {
     "argumentDefinitions": [],
@@ -76,24 +80,6 @@ const node = function () {
     },
     "name": "productState_node",
     "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "concreteType": "CollectionBundle",
-      "kind": "LinkedField",
-      "name": "collectionBundles",
-      "plural": true,
-      "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "FontCollection",
-        "kind": "LinkedField",
-        "name": "memberCollections",
-        "plural": true,
-        "selections": [v0 /*: any*/, v2 /*: any*/, v3 /*: any*/],
-        "storageKey": null
-      }],
-      "storageKey": null
-    }, {
       "alias": null,
       "args": [{
         "kind": "Literal",
@@ -111,5 +97,5 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "a1e172db45ca550a254819d877497d12";
+node.hash = "aab1ef07e0192a0d22a4c300084d9d05";
 export default node;

package/dist/__tests__/bundleSelectionOrder.test.js

@@ -42,7 +42,6 @@ const catalog = {
         fontStyles: styles.map(style)
       };
     }),
-    collectionBundles: [],
     children: []
   }
 };

package/dist/__tests__/collectionBundleSelection.test.js

@@ -506,6 +506,16 @@ describe('POPULATE_PRODUCT_STATE', () => {
     fontStyles: [style('vf1', null)],
     bundles: []
   };
+  const display = {
+    id: 'display',
+    name: 'Display',
+    sku: sku('display-sku', 500),
+    fontStyles: [style('d1', 'sd1')],
+    bundles: []
+  };
+  // The superfamily's own bundles, read with `bundles(acrossFamilies: true)`:
+  // whole families (what collection bundles were), and styles from two
+  // families. The server expands a family member into its styles.
   const superfamily = {
     node: {
       __typename: 'FontCollection',
@@ -513,14 +523,18 @@ describe('POPULATE_PRODUCT_STATE', () => {
       name: 'Thunder',
       sku: sku('super-sku', 750),
       fontStyles: [],
-      bundles: [],
-      collectionBundles: [{
+      bundles: [{
         id: 'text-bundle',
         name: 'Text + Variable',
         sku: sku('text-bundle-sku', 500),
-        memberCollections: [textFamily, textVariable]
+        fontStyles: [...textFamily.fontStyles, ...textVariable.fontStyles]
+      }, {
+        id: 'regulars',
+        name: 'Regulars',
+        sku: sku('regulars-sku', 60),
+        fontStyles: [style('f1', 's1'), style('d1', 'sd1')]
       }],
-      children: [textFamily, textVariable]
+      children: [textFamily, textVariable, display]
     }
   };
   it('records the styles every SKU grants', () => {
@@ -529,14 +543,25 @@ describe('POPULATE_PRODUCT_STATE', () => {
       data: superfamily
     });
     expect(state.skuStyleIds).toEqual({
-      'super-sku': ['f1', 'f2', 'vf1'],
+      'super-sku': ['f1', 'f2', 'vf1', 'd1'],
       'text-bundle-sku': ['f1', 'f2', 'vf1'],
+      'regulars-sku': ['f1', 'd1'],
       'text-sku': ['f1', 'f2'],
       'text-var-sku': ['vf1'],
+      'display-sku': ['d1'],
       'upright-sku': ['f1'],
       s1: ['f1'],
-      s2: ['f2']
+      s2: ['f2'],
+      sd1: ['d1']
+    });
+  });
+  it('rolls styles from two families up to a superfamily bundle', () => {
+    const loaded = reducer(makeState(), {
+      type: 'POPULATE_PRODUCT_STATE',
+      data: superfamily
     });
+    const state = select(select(loaded, 's1'), 'sd1');
+    expect(selected(state)).toEqual(['regulars-sku']);
   });
   it('prices a SKU picked before its product loaded once it has', () => {
     const picked = select(makeState(), 'text-sku');

package/dist/__tests__/customerSignInElement.test.js

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+
+// `<fontdue-customer-sign-in>`: a script-tag page has no React of its own, so
+// the element shows who is signed in and tells the page about sign-in and
+// sign-out with window events.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    currentCustomer: null,
+    lookups: 0
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useLazyLoadQuery: () => {
+    relay.lookups += 1;
+    return {
+      viewer: {
+        currentCustomer: relay.currentCustomer
+      }
+    };
+  }
+}));
+
+// The form itself is CustomerSignIn's business; stand in a button that signs
+// in the way it does – tokens stored first, then `onSignedIn`.
+vi.mock('../components/CustomerSignIn/index.js', async () => {
+  const {
+    setTokens
+  } = await import('../auth/tokenStore.js');
+  return {
+    default: _ref => {
+      let {
+        onSignedIn
+      } = _ref;
+      return /*#__PURE__*/React.createElement("button", {
+        "data-testid": "form",
+        onClick: () => {
+          setTokens({
+            accessToken: 'fresh',
+            refreshToken: 'r'
+          });
+          onSignedIn({
+            id: 'C2',
+            name: 'Nina',
+            email: 'nina@example.com'
+          });
+        }
+      });
+    }
+  };
+});
+import CustomerSignInElement from '../components/CustomerSignIn/CustomerSignInElement.js';
+import { getTokens, resetTokenStore, setTokens } from '../auth/tokenStore.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+let events;
+const record = event => events.push({
+  type: event.type,
+  detail: event.detail
+});
+beforeEach(() => {
+  window.localStorage.clear();
+  resetTokenStore();
+  relay.currentCustomer = null;
+  relay.lookups = 0;
+  events = [];
+  window.addEventListener('fontdue:customer-signed-in', record);
+  window.addEventListener('fontdue:customer-signed-out', record);
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  window.removeEventListener('fontdue:customer-signed-in', record);
+  window.removeEventListener('fontdue:customer-signed-out', record);
+});
+const render = async () => {
+  await act(async () => root.render( /*#__PURE__*/React.createElement(CustomerSignInElement, null)));
+};
+const click = async selector => {
+  await act(async () => container.querySelector(selector).click());
+};
+describe('<fontdue-customer-sign-in>', () => {
+  it('shows the form to a visitor with no session, without a lookup', async () => {
+    await render();
+    expect(container.querySelector('[data-testid="form"]')).not.toBeNull();
+    expect(relay.lookups).toBe(0);
+  });
+  it('shows a returning customer who is signed in, not the form', async () => {
+    setTokens({
+      accessToken: 'stored',
+      refreshToken: 'r'
+    });
+    relay.currentCustomer = {
+      id: 'C1',
+      name: 'Ada',
+      email: 'ada@example.com'
+    };
+    await render();
+    expect(container.querySelector('[data-testid="form"]')).toBeNull();
+    expect(container.textContent).toContain('Signed in as ada@example.com.');
+  });
+  it('offers the form when the session names nobody', async () => {
+    setTokens({
+      accessToken: 'stored',
+      refreshToken: 'r'
+    });
+    await render();
+    expect(container.querySelector('[data-testid="form"]')).not.toBeNull();
+  });
+  it('shows the customer it just signed in at once and tells the page', async () => {
+    await render();
+    await click('[data-testid="form"]');
+    expect(container.textContent).toContain('Signed in as nina@example.com.');
+    expect(relay.lookups).toBe(0);
+    expect(events).toEqual([{
+      type: 'fontdue:customer-signed-in',
+      detail: {
+        customer: {
+          id: 'C2',
+          name: 'Nina',
+          email: 'nina@example.com'
+        }
+      }
+    }]);
+  });
+  it('signs out: forgets the session, shows the form again and tells the page', async () => {
+    setTokens({
+      accessToken: 'stored',
+      refreshToken: 'r'
+    });
+    relay.currentCustomer = {
+      id: 'C1',
+      name: 'Ada',
+      email: 'ada@example.com'
+    };
+    await render();
+    await click('[data-step="signed-in"] button');
+    expect(getTokens()).toBeNull();
+    expect(container.querySelector('[data-testid="form"]')).not.toBeNull();
+    expect(events).toEqual([{
+      type: 'fontdue:customer-signed-out',
+      detail: null
+    }]);
+  });
+});

package/dist/__tests__/customerSignInRequest.test.js

@@ -0,0 +1,85 @@
+// @vitest-environment happy-dom
+
+// Asking for a sign-in code: the only unsuccessful *answer* is the rate limit,
+// but a request can also fail outright, and that must not be reported as one.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    respond: null
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useMutation: () => [config => {
+    var _relay$respond;
+    return (_relay$respond = relay.respond) === null || _relay$respond === void 0 ? void 0 : _relay$respond.call(relay, config.onCompleted);
+  }, false]
+}));
+vi.mock('../components/FontdueContextProvider/index.js', () => ({
+  EnsureFontdueContext: _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+}));
+import CustomerSignIn from '../components/CustomerSignIn/index.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const requestCode = async () => {
+  await act(async () => root.render( /*#__PURE__*/React.createElement(CustomerSignIn, {
+    email: "reader@example.com"
+  })));
+  await act(async () => {
+    container.querySelector('form').dispatchEvent(new Event('submit', {
+      bubbles: true,
+      cancelable: true
+    }));
+  });
+};
+describe('CustomerSignIn asking for a code', () => {
+  it('moves to the code step when the code is on its way', async () => {
+    relay.respond = done => done({
+      requestLoginCode: {
+        success: true
+      }
+    });
+    await requestCode();
+    expect(container.querySelector('[data-step="code"]')).not.toBeNull();
+  });
+  it('reports the rate limit', async () => {
+    relay.respond = done => done({
+      requestLoginCode: {
+        success: false
+      }
+    });
+    await requestCode();
+    expect(container.textContent).toContain('Too many codes requested');
+  });
+  it('reports a failed request as itself, not as the rate limit', async () => {
+    relay.respond = done => done({
+      requestLoginCode: null
+    }, [{
+      message: 'Something went wrong'
+    }]);
+    await requestCode();
+    expect(container.querySelector('[data-step="email"]')).not.toBeNull();
+    expect(container.textContent).toContain('Something went wrong');
+    expect(container.textContent).not.toContain('Too many codes requested');
+  });
+});

package/dist/__tests__/stripeCheckoutError.test.js

@@ -0,0 +1,110 @@
+// @vitest-environment happy-dom
+
+// When Stripe refuses to create the Checkout Session (a total under its $0.50
+// minimum, say), the embedded checkout only says “Something went wrong”. The
+// store modal shows Stripe's reason in its place instead.
+
+import React, { act, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    response: null,
+    errors: undefined,
+    networkError: null
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useRelayEnvironment: () => ({}),
+  useFragment: () => ({
+    stripeAccountId: 'acct_test',
+    stripePublishableKey: 'pk_test'
+  }),
+  commitMutation: (_env, config) => {
+    if (relay.networkError) config.onError(relay.networkError);else config.onCompleted(relay.response, relay.errors);
+  }
+}));
+vi.mock('@stripe/stripe-js', () => ({
+  loadStripe: () => Promise.resolve({})
+}));
+
+// react-stripe-js asks for the client secret as soon as Stripe.js has loaded.
+vi.mock('@stripe/react-stripe-js', () => ({
+  Elements: _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  },
+  EmbeddedCheckoutProvider: _ref2 => {
+    let {
+      options,
+      children
+    } = _ref2;
+    useEffect(() => {
+      options.fetchClientSecret().catch(() => {});
+    }, []);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+}));
+import StripeProvider from '../components/StripeProvider/index.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+  relay.response = {
+    createOrderCheckoutSession: null
+  };
+  relay.errors = undefined;
+  relay.networkError = null;
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const render = async () => {
+  await act(async () => root.render( /*#__PURE__*/React.createElement(StripeProvider, {
+    viewer: {},
+    providerType: "checkout"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "embedded-checkout"
+  }))));
+};
+describe('StripeProvider embedded checkout errors', () => {
+  it('shows Stripe’s reason when the Checkout Session is refused', async () => {
+    var _container$querySelec;
+    const message = "The Checkout Session's total amount due must add up to at least $0.50 usd";
+    relay.errors = [{
+      message
+    }];
+    await render();
+    expect((_container$querySelec = container.querySelector('[role="alert"]')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.textContent).toBe(message);
+    expect(container.querySelector('[data-testid="embedded-checkout"]')).toBeNull();
+  });
+  it('falls back to a generic message when the request itself fails', async () => {
+    var _container$querySelec2;
+    relay.networkError = new Error('fontdue-js: request failed with HTTP 502');
+    await render();
+    expect((_container$querySelec2 = container.querySelector('[role="alert"]')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.textContent).toBe('We couldn’t start the checkout – please try again');
+  });
+  it('mounts the embedded checkout when the session is created', async () => {
+    relay.response = {
+      createOrderCheckoutSession: {
+        order: {
+          stripeCheckoutSession: {
+            clientSecret: 'cs_test_secret'
+          }
+        }
+      }
+    };
+    await render();
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.querySelector('[data-testid="embedded-checkout"]')).not.toBeNull();
+  });
+});

package/dist/__tests__/typeTesterPrefetchStyles.test.js

@@ -0,0 +1,108 @@
+// @vitest-environment happy-dom
+import React, { act, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import usePrefetchWhenNear from '../components/TypeTester/usePrefetchWhenNear.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// A controllable IntersectionObserver: tests decide when the element is near.
+let observers = [];
+class FakeIntersectionObserver {
+  constructor(cb) {
+    this.entry = {
+      cb,
+      disconnected: false
+    };
+    observers.push(this.entry);
+  }
+  observe() {}
+  disconnect() {
+    this.entry.disconnected = true;
+  }
+}
+const intersect = isIntersecting => act(() => {
+  observers.filter(o => !o.disconnected).forEach(o => o.cb([{
+    isIntersecting
+  }], {}));
+});
+function Select(_ref) {
+  let {
+    prefetch
+  } = _ref;
+  const ref = useRef(null);
+  usePrefetchWhenNear(ref, prefetch);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
+}
+
+// Native <select> menus snapshot their options on open (Safari never updates
+// an open menu), so the type tester's style list has to be fetched before the
+// first click, without competing with the initial render.
+describe('type tester style list prefetch', () => {
+  let root;
+  let container;
+  let prefetch;
+  beforeEach(() => {
+    vi.useFakeTimers();
+    observers = [];
+    vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
+    // Safari: no requestIdleCallback, so the timeout fallback is exercised.
+    vi.stubGlobal('requestIdleCallback', undefined);
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    prefetch = vi.fn();
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+  const render = () => act(() => root.render( /*#__PURE__*/React.createElement(Select, {
+    prefetch: prefetch
+  })));
+  it('waits until the tester is near the viewport', async () => {
+    await render();
+    await act(() => vi.advanceTimersByTime(5000));
+    expect(prefetch).not.toHaveBeenCalled();
+    await intersect(false);
+    await act(() => vi.advanceTimersByTime(5000));
+    expect(prefetch).not.toHaveBeenCalled();
+  });
+  it('prefetches at idle once near, not during render', async () => {
+    await render();
+    await intersect(true);
+    expect(prefetch).not.toHaveBeenCalled();
+    await act(() => vi.advanceTimersByTime(1000));
+    expect(prefetch).toHaveBeenCalledTimes(1);
+  });
+  it('prefetches only once', async () => {
+    await render();
+    await intersect(true);
+    await act(() => vi.advanceTimersByTime(1000));
+    await intersect(true);
+    await act(() => vi.advanceTimersByTime(1000));
+    expect(prefetch).toHaveBeenCalledTimes(1);
+  });
+  it('cancels a pending prefetch on unmount', async () => {
+    await render();
+    await intersect(true);
+    act(() => root.render( /*#__PURE__*/React.createElement(React.Fragment, null)));
+    await act(() => vi.advanceTimersByTime(1000));
+    expect(prefetch).not.toHaveBeenCalled();
+  });
+  it('uses requestIdleCallback where the browser has it', async () => {
+    const idle = vi.fn(cb => setTimeout(cb, 10));
+    vi.stubGlobal('requestIdleCallback', idle);
+    vi.stubGlobal('cancelIdleCallback', vi.fn());
+    await render();
+    await intersect(true);
+    expect(idle).toHaveBeenCalledWith(expect.any(Function), {
+      timeout: 2000
+    });
+    await act(() => vi.advanceTimersByTime(10));
+    expect(prefetch).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/components/CustomerSignIn/CustomerSignInElement.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CustomerSignIn_props } from './index.js';
+/** Dispatched on `window` once the customer is signed in; `detail.customer`. */
+export declare const SIGNED_IN_EVENT = "fontdue:customer-signed-in";
+/** Dispatched on `window` when the customer clicks the element's sign-out button. */
+export declare const SIGNED_OUT_EVENT = "fontdue:customer-signed-out";
+interface CustomerSignInElement_props extends Omit<CustomerSignIn_props, 'onSignedIn'> {
+    /** Label on the button that signs the customer out. */
+    signOutLabel?: string;
+}
+/**
+ * `<fontdue-customer-sign-in>`: the script-tag wrapper around `CustomerSignIn`.
+ *
+ * A page has no React of its own to read `useCurrentCustomer()` with, so the
+ * element shows the signed-in state itself – who is signed in and a way out –
+ * and tells the page about both changes with window events, as `setConsent`
+ * does with `fontdue:consent`.
+ *
+ * Not in the npm package's `exports`: sign-in is script-tag only for now.
+ */
+export default function CustomerSignInElement({ signOutLabel, ...props }: CustomerSignInElement_props): React.JSX.Element;
+export {};