fontdue-js 3.12.0 → 3.12.1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.12.1
+
+- Fixed a `TypeTester`’s style menu showing only the current style on the first click, most visibly in Safari. The style list now loads as the type tester nears the viewport.
+- Fixed the `StoreModal` checkout showing Stripe’s generic error when Stripe refuses to start a checkout, such as for a total under its minimum charge. It now shows Stripe’s reason.
+
 ## 3.12.0
 
 - `CustomerLoginForm` runs an invisible reCAPTCHA check when *Enable reCAPTCHA* is on under *Settings → Integration*, giving the sign-in form the same bot protection as `NewsletterSignup` and `TestFontsForm`.

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

@@ -0,0 +1,22 @@
+/**
+ * @generated SignedSource<<115e004f4831c3eb09ea98ab9cd0934a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type CustomerSignInElementQuery$variables = Record<PropertyKey, never>;
+export type CustomerSignInElementQuery$data = {
+    readonly viewer: {
+        readonly currentCustomer: {
+            readonly email: string | null;
+            readonly id: string;
+            readonly name: string | null;
+        } | null;
+    };
+};
+export type CustomerSignInElementQuery = {
+    response: CustomerSignInElementQuery$data;
+    variables: CustomerSignInElementQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CustomerSignInElementQuery.graphql.js

@@ -0,0 +1,87 @@
+/**
+ * @generated SignedSource<<115e004f4831c3eb09ea98ab9cd0934a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v1 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "Customer",
+      "kind": "LinkedField",
+      "name": "currentCustomer",
+      "plural": false,
+      "selections": [v0 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "name",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "email",
+        "storageKey": null
+      }],
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CustomerSignInElementQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v1 /*: any*/],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "CustomerSignInElementQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v1 /*: any*/, v0 /*: any*/],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "3f3148c6d2bf1f2b90edfb3f217f6e50",
+      "id": null,
+      "metadata": {},
+      "name": "CustomerSignInElementQuery",
+      "operationKind": "query",
+      "text": "query CustomerSignInElementQuery {\n  viewer {\n    currentCustomer {\n      id\n      name\n      email\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "e7d4a8fb8d19581d6bc36f29090230af";
+export default node;

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

package/dist/components/CustomerSignIn/CustomerSignInElement.js

@@ -0,0 +1,132 @@
+'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 _CustomerSignInElementQuery from "../../__generated__/CustomerSignInElementQuery.graphql.js";
+import React, { Suspense, useCallback, useState, useSyncExternalStore } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+import CustomerSignIn from './index.js';
+import { clearTokens, getTokens, subscribeToTokens } from '../../auth/tokenStore.js';
+import { useFontdueUrl } from '../UrlContext.js';
+const query = (_CustomerSignInElementQuery.hash && _CustomerSignInElementQuery.hash !== "e7d4a8fb8d19581d6bc36f29090230af" && console.error("The definition of 'CustomerSignInElementQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerSignInElementQuery);
+
+/** Dispatched on `window` once the customer is signed in; `detail.customer`. */
+export const SIGNED_IN_EVENT = 'fontdue:customer-signed-in';
+/** Dispatched on `window` when the customer clicks the element's sign-out button. */
+export const SIGNED_OUT_EVENT = 'fontdue:customer-signed-out';
+/**
+ * `<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(_ref) {
+  let {
+    signOutLabel = 'Sign out',
+    ...props
+  } = _ref;
+  const url = useFontdueUrl();
+  // The script tag never renders on a server, so reading the store during
+  // render can't cause a hydration mismatch – and it means a returning
+  // customer never sees the form flash before their session is read.
+  const accessToken = useSyncExternalStore(subscribeToTokens, () => {
+    var _getTokens;
+    return ((_getTokens = getTokens(url)) === null || _getTokens === void 0 ? void 0 : _getTokens.accessToken) ?? null;
+  }, () => null);
+  // The customer `verifyLoginCode` just returned, tied to the token it came
+  // with, so the signed-in state shows at once instead of after a lookup. Any
+  // other session – a page load, a sign-in in another element, a renewed
+  // token – is looked up.
+  const [justSignedIn, setJustSignedIn] = useState(null);
+  const handleSignedIn = useCallback(customer => {
+    if (customer) {
+      var _getTokens2;
+      setJustSignedIn({
+        accessToken: (_getTokens2 = getTokens(url)) === null || _getTokens2 === void 0 ? void 0 : _getTokens2.accessToken,
+        customer
+      });
+    }
+    window.dispatchEvent(new CustomEvent(SIGNED_IN_EVENT, {
+      detail: {
+        customer
+      }
+    }));
+  }, [url]);
+  const signOut = useCallback(() => {
+    clearTokens(url);
+    setJustSignedIn(null);
+    window.dispatchEvent(new CustomEvent(SIGNED_OUT_EVENT));
+  }, [url]);
+  const form = /*#__PURE__*/React.createElement(CustomerSignIn, _extends({}, props, {
+    onSignedIn: handleSignedIn
+  }));
+  if (accessToken == null) return form;
+  if (justSignedIn && justSignedIn.accessToken === accessToken) {
+    return /*#__PURE__*/React.createElement(SignedIn, {
+      customer: justSignedIn.customer,
+      signOut: signOut,
+      signOutLabel: signOutLabel
+    });
+  }
+
+  // A lookup that fails leaves the visitor able to sign in again rather than
+  // facing an empty element.
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: form,
+    resetKeys: [accessToken]
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(SignedInLookup, {
+    key: accessToken,
+    form: form,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  })));
+}
+function SignedInLookup(_ref2) {
+  var _data$viewer;
+  let {
+    form,
+    signOut,
+    signOutLabel
+  } = _ref2;
+  // network-only: who is signed in *now*, never a store hit left over from the
+  // previous customer.
+  const data = useLazyLoadQuery(query, {}, {
+    fetchPolicy: 'network-only'
+  });
+  const customer = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentCustomer;
+
+  // A token the server no longer honours is cleared by the network layer,
+  // which re-renders the element signed out. A null here without that is a
+  // session that names nobody; offer the form.
+  if (!customer) return form;
+  return /*#__PURE__*/React.createElement(SignedIn, {
+    customer: customer,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  });
+}
+function SignedIn(_ref3) {
+  let {
+    customer,
+    signOut,
+    signOutLabel
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in",
+    "data-step": "signed-in"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "customer-sign-in__intro"
+  }, "Signed in as ", customer.email ?? customer.name, "."), /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "customer-sign-in__back",
+    type: "button",
+    onClick: signOut
+  }, signOutLabel)));
+}

package/dist/components/CustomerSignIn/index.js

@@ -54,9 +54,11 @@ function CustomerSignInFields(_ref) {
           email
         }
       },
-      onCompleted: res => {
+      onCompleted: (res, errors) => {
         var _res$requestLoginCode;
-        if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+        } else if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
           setStep('code');
         } else {
           // The only unsuccessful answer is the rate limit, and it is about the

package/dist/components/Root/index.js

@@ -25,6 +25,8 @@ const customElementMap = {
   'fontdue-cookie-notification': /*#__PURE__*/lazy(() => retryImport(() => import('../CookieNotification/index.js'))),
   'fontdue-font-families': /*#__PURE__*/lazy(() => retryImport(() => import('../FontFamilies/index.js'))),
   'fontdue-customer-login-form': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerLoginForm/index.js'))),
+  // Script tag only: CustomerSignIn isn't in the npm package's `exports` yet.
+  'fontdue-customer-sign-in': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerSignIn/CustomerSignInElement.js'))),
   'fontdue-newsletter-signup': /*#__PURE__*/lazy(() => retryImport(() => import('../NewsletterSignup/NewsletterSignupElement.js'))),
   'fontdue-node-password-form': /*#__PURE__*/lazy(() => retryImport(() => import('../NodePasswordForm/NodePasswordFormElement.js'))),
   // @ts-ignore

package/dist/components/StripeProvider/index.js

@@ -1,11 +1,13 @@
 import _StripeProviderCreateCheckoutSessionMutation from "../../__generated__/StripeProviderCreateCheckoutSessionMutation.graphql.js";
 import _StripeProvider_viewer from "../../__generated__/StripeProvider_viewer.graphql.js";
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import { Elements, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { parseCustomProperties } from '../../utils.js';
 import ConfigContext from '../ConfigContext.js';
+import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+const CHECKOUT_ERROR = 'We couldn’t start the checkout – please try again';
 const StripeProvider = _ref => {
   var _data$currentOrder, _data$settings, _data$settings$uiFont, _data$settings$uiFont2, _data$settings$uiFont3, _data$settings2, _data$currentOrder2, _data$currentOrder2$s, _data$themeConfig;
   let {
@@ -26,6 +28,7 @@ const StripeProvider = _ref => {
   const {
     stripe: config
   } = useContext(ConfigContext);
+  const [checkoutError, setCheckoutError] = useState(null);
   let customFontSource;
   const woffSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : (_data$settings$uiFont = _data$settings.uiFontStyle) === null || _data$settings$uiFont === void 0 ? void 0 : (_data$settings$uiFont2 = _data$settings$uiFont.webfontSources) === null || _data$settings$uiFont2 === void 0 ? void 0 : (_data$settings$uiFont3 = _data$settings$uiFont2.find(source => (source === null || source === void 0 ? void 0 : source.format) === 'woff2')) === null || _data$settings$uiFont3 === void 0 ? void 0 : _data$settings$uiFont3.url;
   let fontFamily = (_data$settings2 = data.settings) !== null && _data$settings2 !== void 0 && _data$settings2.uiFontStyle ? `${data.settings.uiFontStyle.cssFamily} ${data.settings.uiFontStyle.name}` : undefined;
@@ -50,16 +53,22 @@ const StripeProvider = _ref => {
       commitMutation(environment, {
         mutation: (_StripeProviderCreateCheckoutSessionMutation.hash && _StripeProviderCreateCheckoutSessionMutation.hash !== "2ca9a7fcfed1292117e3cd6d0d95cca6" && console.error("The definition of 'StripeProviderCreateCheckoutSessionMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProviderCreateCheckoutSessionMutation),
         variables: {},
-        onCompleted: response => {
+        onCompleted: (response, errors) => {
           var _response$createOrder, _response$createOrder2, _response$createOrder3;
           const clientSecret = (_response$createOrder = response.createOrderCheckoutSession) === null || _response$createOrder === void 0 ? void 0 : (_response$createOrder2 = _response$createOrder.order) === null || _response$createOrder2 === void 0 ? void 0 : (_response$createOrder3 = _response$createOrder2.stripeCheckoutSession) === null || _response$createOrder3 === void 0 ? void 0 : _response$createOrder3.clientSecret;
           if (clientSecret) {
             resolve(clientSecret);
           } else {
+            var _errors$;
+            // Stripe refused the session (e.g. a total under its minimum
+            // charge): show its reason, which the embedded checkout would
+            // otherwise swallow into a generic error.
+            setCheckoutError((errors === null || errors === void 0 ? void 0 : (_errors$ = errors[0]) === null || _errors$ === void 0 ? void 0 : _errors$.message) ?? CHECKOUT_ERROR);
             reject("Didn't find client secret");
           }
         },
         onError: error => {
+          setCheckoutError(CHECKOUT_ERROR);
           reject(`Error creating checkout session: ${error.message}`);
         }
       });
@@ -147,6 +156,14 @@ const StripeProvider = _ref => {
     syncAddressCheckbox: 'none'
   };
   if (providerType === 'checkout') {
+    if (checkoutError) {
+      return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
+        body: /*#__PURE__*/React.createElement("div", {
+          className: "store-modal__cart__error",
+          role: "alert"
+        }, checkoutError)
+      });
+    }
     return /*#__PURE__*/React.createElement(EmbeddedCheckoutProvider, {
       stripe: stripePromiseRef.current,
       options: {

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { compareVariableSettings, variableInstanceSettings } from '../../utils.js';
 import Select from '../Select/index.js';
+import usePrefetchWhenNear from './usePrefetchWhenNear.js';
 const VARIABLE_AXES = 'VARIABLE_AXES';
 const LOADING = '__loading__';
 const TypeTesterStyleSelect = _ref => {
@@ -19,6 +20,8 @@ const TypeTesterStyleSelect = _ref => {
     onSelectFamilyId,
     includeVariableAxesOption
   } = _ref;
+  const containerRef = useRef(null);
+  usePrefetchWhenNear(containerRef, onOpen);
   const handleSelectFontStyle = selection => {
     if (selection === VARIABLE_AXES) {
       onSelectVariableAxes();
@@ -90,7 +93,9 @@ const TypeTesterStyleSelect = _ref => {
     cb(e.target.value);
   };
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: "type-tester-select",
+    onPointerEnter: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     "data-loading": loading || undefined,
     "aria-busy": loading || undefined,
     style: {

package/dist/components/TypeTester/usePrefetchWhenNear.d.ts

@@ -0,0 +1,14 @@
+export declare const PREFETCH_ROOT_MARGIN = "300px";
+export declare const PREFETCH_IDLE_TIMEOUT = 2000;
+/**
+ * Calls `prefetch` once, at idle time, after the element first comes near the
+ * viewport. Native `<select>` menus snapshot their options when they open (in
+ * Safari the open menu never updates), so data a dropdown needs has to be
+ * there before the first click – fetching on mousedown is too late. Waiting
+ * for idle keeps the request off the initial render, and waiting for the
+ * viewport keeps a long page of testers from fetching for every one at once.
+ *
+ *     const ref = useRef<HTMLDivElement>(null);
+ *     usePrefetchWhenNear(ref, loadOptions);
+ */
+export default function usePrefetchWhenNear(ref: React.RefObject<Element | null>, prefetch: (() => void) | undefined): void;

package/dist/components/TypeTester/usePrefetchWhenNear.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react';
+
+// How far outside the viewport a tester counts as "near".
+export const PREFETCH_ROOT_MARGIN = '300px';
+// Upper bound on waiting for the browser to go idle.
+export const PREFETCH_IDLE_TIMEOUT = 2000;
+function onIdle(cb) {
+  if (typeof window.requestIdleCallback === 'function') {
+    const id = window.requestIdleCallback(cb, {
+      timeout: PREFETCH_IDLE_TIMEOUT
+    });
+    return {
+      cancel: () => window.cancelIdleCallback(id)
+    };
+  }
+  // Safari has no requestIdleCallback.
+  const id = window.setTimeout(cb, 200);
+  return {
+    cancel: () => window.clearTimeout(id)
+  };
+}
+
+/**
+ * Calls `prefetch` once, at idle time, after the element first comes near the
+ * viewport. Native `<select>` menus snapshot their options when they open (in
+ * Safari the open menu never updates), so data a dropdown needs has to be
+ * there before the first click – fetching on mousedown is too late. Waiting
+ * for idle keeps the request off the initial render, and waiting for the
+ * viewport keeps a long page of testers from fetching for every one at once.
+ *
+ *     const ref = useRef<HTMLDivElement>(null);
+ *     usePrefetchWhenNear(ref, loadOptions);
+ */
+export default function usePrefetchWhenNear(ref, prefetch) {
+  const prefetchRef = useRef(prefetch);
+  prefetchRef.current = prefetch;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let idle = null;
+    const schedule = () => {
+      idle ??= onIdle(() => {
+        var _prefetchRef$current;
+        return (_prefetchRef$current = prefetchRef.current) === null || _prefetchRef$current === void 0 ? void 0 : _prefetchRef$current.call(prefetchRef);
+      });
+    };
+    if (typeof IntersectionObserver !== 'function') {
+      schedule();
+      return () => {
+        var _idle;
+        return (_idle = idle) === null || _idle === void 0 ? void 0 : _idle.cancel();
+      };
+    }
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) {
+        observer.disconnect();
+        schedule();
+      }
+    }, {
+      rootMargin: PREFETCH_ROOT_MARGIN
+    });
+    observer.observe(el);
+    return () => {
+      var _idle2;
+      observer.disconnect();
+      (_idle2 = idle) === null || _idle2 === void 0 ? void 0 : _idle2.cancel();
+    };
+  }, [ref]);
+}

package/dist/fontdue.css

@@ -4007,6 +4007,7 @@ input:disabled + .fontdue-admin-toolbar__switch {
 
 fontdue-test-fonts-form,
 fontdue-newsletter-signup,
-fontdue-customer-login-form {
+fontdue-customer-login-form,
+fontdue-customer-sign-in {
   font-size: 1rem;
 }

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.12.0";
+export const version = "3.12.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",