fontdue-js 3.6.0 → 3.7.0

package/dist/__tests__/infiniteScroll.test.js

@@ -0,0 +1,180 @@
+// @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 useInfiniteScroll from '../components/useInfiniteScroll.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+class FakeIntersectionObserver {
+  static instances = [];
+  observed = [];
+  disconnected = false;
+  constructor(callback, options) {
+    this.callback = callback;
+    this.options = options;
+    FakeIntersectionObserver.instances.push(this);
+  }
+  observe(element) {
+    this.observed.push(element);
+  }
+  unobserve() {}
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  // Report every observed element as having come into view.
+  enter() {
+    this.callback(this.observed.map(target => ({
+      target,
+      isIntersecting: true
+    })), this);
+  }
+}
+const observers = () => FakeIntersectionObserver.instances;
+const live = () => observers().filter(observer => !observer.disconnected);
+
+// The shape the store modal index renders: the sentinel stays mounted while a
+// page is in flight (`enabled` false) and only goes away once the list is
+// exhausted, and the scroller is an ancestor whose ref is still null while the
+// sentinel renders.
+function Harness(_ref) {
+  let {
+    enabled,
+    hasMore = true,
+    onLoadMore
+  } = _ref;
+  const scrollContainer = useRef(null);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: scrollContainer,
+    "data-testid": "scroller"
+  }, /*#__PURE__*/React.createElement(Sentinel, {
+    enabled: enabled,
+    hasMore: hasMore,
+    onLoadMore: onLoadMore,
+    rootRef: scrollContainer
+  }));
+}
+function Sentinel(_ref2) {
+  let {
+    enabled,
+    hasMore,
+    onLoadMore,
+    rootRef
+  } = _ref2;
+  const sentinelRef = useInfiniteScroll({
+    enabled,
+    onLoadMore,
+    rootRef,
+    rootMargin: '0px 0px 600px 0px'
+  });
+  return hasMore ? /*#__PURE__*/React.createElement("div", {
+    ref: sentinelRef,
+    "data-testid": "sentinel"
+  }) : null;
+}
+let container;
+let root;
+const render = element => {
+  act(() => {
+    root.render(element);
+  });
+};
+beforeEach(() => {
+  FakeIntersectionObserver.instances = [];
+  vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+describe('useInfiniteScroll', () => {
+  it('loads more when the sentinel comes into view', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+  it('watches the scrolling ancestor, whose ref is only attached after render', () => {
+    var _options, _options2;
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = live();
+    expect((_options = observer.options) === null || _options === void 0 ? void 0 : _options.root).toBe(container.querySelector('[data-testid="scroller"]'));
+    expect((_options2 = observer.options) === null || _options2 === void 0 ? void 0 : _options2.rootMargin).toBe('0px 0px 600px 0px');
+    expect(observer.observed).toEqual([container.querySelector('[data-testid="sentinel"]')]);
+  });
+  it('stops watching while a page is in flight, and picks it up again after', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    // The sentinel is still on screen, but `loadNext` is running: nothing
+    // should be watching it, so the load isn't asked for again on every frame.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(0);
+
+    // Page arrived, more to come: back to watching, and still in view.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(2);
+  });
+  it('never observes when there is nothing left to load', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observers()).toHaveLength(0);
+  });
+  it('disconnects when the sentinel is removed', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = observers();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observer.disconnected).toBe(true);
+  });
+  it('keeps watching when only the callback identity changes', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: () => {}
+    }));
+    const [observer] = observers();
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+
+    // Same observer, and it calls the callback the latest render passed.
+    expect(observers()).toHaveLength(1);
+    expect(observer.disconnected).toBe(false);
+    act(() => observer.enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/__tests__/licenseExclusions.test.js

@@ -10,8 +10,9 @@ function makeState() {
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},
+    requestedSkuIds: [],
     licenseOptions: [],
-    collectionStyleSkus: {},
+    skuStyleIds: {},
     collectionSkus: {},
     skuPrices: {},
     fetchedCollectionIds: [],

package/dist/__tests__/storefrontEvents.test.js

@@ -0,0 +1,167 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options { "url": "https://store.example.com/fonts/archivo" }
+
+// The browser-only storefront moments reach the server through
+// `trackStorefrontEvent`. A buyer clicks through licences in bursts and React
+// re-runs effects, so what matters here is what *doesn't* get reported: the
+// steps before a configuration settles, a configuration already reported, and
+// a second look at the same collection that is really one mount.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const commitMutation = vi.fn();
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  commitMutation: function () {
+    return commitMutation(...arguments);
+  },
+  useRelayEnvironment: vi.fn()
+}));
+import { licenseSelectionsFromOptions, trackPaymentInfoEntered, trackProductCustomized, trackProductViewed } from '../components/Cart/storefrontEvents.js';
+const environment = {};
+function reportedInputs() {
+  return commitMutation.mock.calls.map(_ref => {
+    let [, config] = _ref;
+    return config.variables.input;
+  });
+}
+beforeEach(() => {
+  commitMutation.mockReset();
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+describe('licenseSelectionsFromOptions', () => {
+  it('takes the licence choices in the shape createOrderItems takes them, sorted', () => {
+    const options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }, {
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five',
+        seats: 'one'
+      }
+    }];
+    expect(licenseSelectionsFromOptions(options)).toEqual([{
+      licenseId: 'desktop',
+      licenseVariableId: 'seats',
+      licenseOptionId: 'one'
+    }, {
+      licenseId: 'desktop',
+      licenseVariableId: 'users',
+      licenseOptionId: 'five'
+    }, {
+      licenseId: 'web'
+    }]);
+  });
+});
+describe('trackProductCustomized', () => {
+  it('reports the configuration a burst of clicks settles on, once', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'one'
+      }
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'ten'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    expect(commitMutation).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PRODUCT_CUSTOMIZED',
+      collectionId: 'collection-burst',
+      licenseSelections: [{
+        licenseId: 'desktop',
+        licenseVariableId: 'users',
+        licenseOptionId: 'ten'
+      }],
+      tracking: expect.objectContaining({
+        url: 'https://store.example.com/fonts/archivo'
+      })
+    })]);
+  });
+  it('skips a configuration already reported for that collection', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Over to web and back again: the buyer ends where they were.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Then a real change.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs().map(input => input.licenseSelections)).toEqual([[{
+      licenseId: 'desktop'
+    }], [{
+      licenseId: 'web'
+    }]]);
+  });
+  it('reports nothing when every licence is unticked', () => {
+    trackProductCustomized(environment, 'collection-empty', () => []);
+    vi.advanceTimersByTime(1500);
+    expect(commitMutation).not.toHaveBeenCalled();
+  });
+});
+describe('trackProductViewed', () => {
+  it('counts an effect run twice for one mount as one view', () => {
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-other');
+
+    // Coming back to the first collection later is a new look.
+    vi.advanceTimersByTime(2000);
+    trackProductViewed(environment, 'collection-view');
+    expect(reportedInputs().map(_ref2 => {
+      let {
+        event,
+        collectionId
+      } = _ref2;
+      return [event, collectionId];
+    })).toEqual([['PRODUCT_VIEWED', 'collection-view'], ['PRODUCT_VIEWED', 'collection-other'], ['PRODUCT_VIEWED', 'collection-view']]);
+  });
+});
+describe('trackPaymentInfoEntered', () => {
+  it('reports with the buyer’s tracking context', () => {
+    trackPaymentInfoEntered(environment);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PAYMENT_INFO_ENTERED',
+      tracking: expect.objectContaining({
+        analyticsConsent: false
+      })
+    })]);
+  });
+});

package/dist/__tests__/typeTesterAutofitFeatures.test.js

@@ -0,0 +1,138 @@
+import "../global-shim.js";
+// @vitest-environment happy-dom
+import React, { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ContentState, EditorState } from 'draft-js';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import TypeTesterFitter from '../components/TypeTester/TypeTesterFitter.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no text layout, so the two measuring primitives are stubbed
+// with a toy font: every glyph is 0.5em wide, and the `ss01` alternates are
+// 0.6em. Canvas only ever sees the default glyphs – that is true of real
+// browsers too (`ctx.font` has no feature settings), and is why autofit sized
+// a tester for the default glyphs and then rendered it with the alternates.
+const DEFAULT_ADVANCE = 0.5;
+const SS01_ADVANCE = 0.6;
+const TEXT = 'UNICASED CIRCUMSTANCES';
+const CONTAINER_WIDTH = 1010;
+// useTypeTesterStyler keeps 10px of slack when autofit is on.
+const AVAILABLE_WIDTH = CONTAINER_WIDTH - 10;
+const renderedWidth = (size, features) => TEXT.length * size * (features.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE);
+let domMeasure;
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', class {
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe() {
+      this.callback([{
+        contentRect: {
+          width: CONTAINER_WIDTH
+        }
+      }], this);
+    }
+    disconnect() {}
+  });
+  Object.defineProperty(document, 'fonts', {
+    configurable: true,
+    value: {
+      load: () => Promise.resolve([])
+    }
+  });
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    font: '',
+    letterSpacing: '',
+    measureText: text => ({
+      width: text.length * 100 * DEFAULT_ADVANCE
+    })
+  });
+  domMeasure = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    const {
+      fontSize,
+      fontFeatureSettings
+    } = this.style;
+    const advance = fontFeatureSettings.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE;
+    return {
+      width: (this.textContent ?? '').length * parseFloat(fontSize) * advance
+    };
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+let currentSize = 0;
+function Tester(_ref) {
+  let {
+    features
+  } = _ref;
+  const [size, setSize] = useState(72);
+  const [content] = useState(() => EditorState.createWithContent(ContentState.createFromText(TEXT)));
+  currentSize = size;
+  return /*#__PURE__*/React.createElement(TypeTesterFitter, {
+    autofit: true,
+    autofitOnChange: false,
+    min: 10,
+    max: 200,
+    size: size,
+    setSize: setSize,
+    lineHeight: 1.2,
+    letterSpacing: 0,
+    features: features,
+    focused: false,
+    truncate: false,
+    fontStyles: {
+      fontFamily: 'Toy Sans',
+      fontWeight: 200,
+      fontStyle: 'italic'
+    },
+    content: content,
+    contentEdited: false,
+    alignment: "left",
+    variableSettings: null,
+    columns: false
+  }, TEXT);
+}
+describe('type tester autofit with OpenType features', () => {
+  let root;
+  let container;
+  const render = features => act(async () => {
+    root.render( /*#__PURE__*/React.createElement(Tester, {
+      features: features
+    }));
+  });
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+  it('fits text on one line when an enabled feature widens it', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    expect(renderedWidth(plainSize, [])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await render(['ss01']);
+    expect(currentSize).toBeLessThan(plainSize);
+    expect(renderedWidth(currentSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+  });
+  it('refits when a feature is toggled', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    await render(['ss01']);
+    const featureSize = currentSize;
+    expect(featureSize).toBeLessThan(plainSize);
+    expect(renderedWidth(featureSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await render([]);
+    expect(currentSize).toBe(plainSize);
+  });
+  it('keeps the canvas fast path when no feature is on', async () => {
+    await render([]);
+    expect(domMeasure).not.toHaveBeenCalled();
+  });
+});

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 {};