fontdue-js 3.5.1 → 3.7.0

package/dist/__tests__/typeTesterTruncate.test.js

@@ -0,0 +1,218 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { normalizeTruncate, parseTruncateAttribute, shouldTruncate } from "../components/TypeTester/truncate.js";
+import { mergeConfig } from "../components/ConfigContext.js";
+describe('normalizeTruncate', () => {
+  it('is off when unset or false', () => {
+    expect(normalizeTruncate()).toEqual({
+      lines: 0,
+      expandOnFocus: false
+    });
+    expect(normalizeTruncate(false)).toEqual({
+      lines: 0,
+      expandOnFocus: false
+    });
+  });
+  it('treats `true` as the legacy one-line preview that opens on focus', () => {
+    expect(normalizeTruncate(true)).toEqual({
+      lines: 1,
+      expandOnFocus: true
+    });
+  });
+  it('holds a numeric cap while the tester is focused', () => {
+    expect(normalizeTruncate(15)).toEqual({
+      lines: 15,
+      expandOnFocus: false
+    });
+  });
+  it('distinguishes `truncate: 1` from `truncate: true`', () => {
+    expect(normalizeTruncate(1).expandOnFocus).toBe(false);
+    expect(normalizeTruncate(true).expandOnFocus).toBe(true);
+  });
+  it('floors and clamps line counts', () => {
+    expect(normalizeTruncate(15.9).lines).toBe(15);
+    expect(normalizeTruncate(-3).lines).toBe(0);
+    expect(normalizeTruncate(NaN).lines).toBe(0);
+    expect(normalizeTruncate(Infinity).lines).toBe(0);
+  });
+  it('accepts the explicit object form', () => {
+    expect(normalizeTruncate({
+      lines: 20,
+      expandOnFocus: true
+    })).toEqual({
+      lines: 20,
+      expandOnFocus: true
+    });
+    expect(normalizeTruncate({
+      lines: 1
+    })).toEqual({
+      lines: 1,
+      expandOnFocus: false
+    });
+    expect(normalizeTruncate({
+      expandOnFocus: false
+    })).toEqual({
+      lines: 0,
+      expandOnFocus: false
+    });
+  });
+});
+
+// The one behaviour FD-191 changes. Everything else about truncation is
+// geometry that only a browser can check.
+describe('shouldTruncate', () => {
+  it('keeps a line count capped through focus', () => {
+    const resolved = normalizeTruncate(15);
+    expect(shouldTruncate(resolved, false)).toBe(true);
+    expect(shouldTruncate(resolved, true)).toBe(true);
+  });
+  it('still lifts the legacy one-line preview on focus', () => {
+    const resolved = normalizeTruncate(true);
+    expect(shouldTruncate(resolved, false)).toBe(true);
+    expect(shouldTruncate(resolved, true)).toBe(false);
+  });
+  it('lets the object form ask for the old jump-open behaviour', () => {
+    const resolved = normalizeTruncate({
+      lines: 20,
+      expandOnFocus: true
+    });
+    expect(shouldTruncate(resolved, false)).toBe(true);
+    expect(shouldTruncate(resolved, true)).toBe(false);
+  });
+  it('is off in both states when truncation is off', () => {
+    const resolved = normalizeTruncate(false);
+    expect(shouldTruncate(resolved, false)).toBe(false);
+    expect(shouldTruncate(resolved, true)).toBe(false);
+  });
+});
+describe('parseTruncateAttribute', () => {
+  afterEach(() => vi.restoreAllMocks());
+  it('inherits the site config when the attribute is absent', () => {
+    expect(parseTruncateAttribute(undefined, 'fontdue-type-tester')).toBeUndefined();
+  });
+  it('parses the written forms', () => {
+    expect(parseTruncateAttribute('15', 'fontdue-type-tester')).toBe(15);
+    expect(parseTruncateAttribute('true', 'fontdue-type-tester')).toBe(true);
+    expect(parseTruncateAttribute('false', 'fontdue-type-tester')).toBe(false);
+    expect(parseTruncateAttribute('0', 'fontdue-type-tester')).toBe(0);
+  });
+  it('warns and inherits on garbage rather than silently reading as off', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    expect(parseTruncateAttribute('fifteen', 'fontdue-type-tester')).toBeUndefined();
+    expect(parseTruncateAttribute('15.5', 'fontdue-type-tester')).toBeUndefined();
+    expect(parseTruncateAttribute('-2', 'fontdue-type-tester')).toBeUndefined();
+    expect(warn).toHaveBeenCalledTimes(3);
+  });
+
+  // Root turns a valueless `truncate` into '', which is an authoring mistake
+  // rather than a request to inherit, so it has to be audible.
+  it('warns on a valueless attribute', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    expect(parseTruncateAttribute('', 'fontdue-type-tester')).toBeUndefined();
+    expect(warn).toHaveBeenCalledTimes(1);
+  });
+  it('names the element it failed on', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    parseTruncateAttribute('nope', 'fontdue-type-testers');
+    expect(warn.mock.calls[0][0]).toContain('fontdue-type-testers');
+  });
+
+  // The second word is the only way an attribute can reach `expandOnFocus`,
+  // which is the one combination the scalar forms cannot express: a line count
+  // that still opens on click.
+  it('reads a second word as expandOnFocus', () => {
+    expect(parseTruncateAttribute('15 expandable', 'fontdue-type-tester')).toEqual({
+      lines: 15,
+      expandOnFocus: true
+    });
+    expect(parseTruncateAttribute('15 fixed', 'fontdue-type-tester')).toEqual({
+      lines: 15,
+      expandOnFocus: false
+    });
+  });
+  it('fills the gap the scalar forms leave', () => {
+    const resolved = normalizeTruncate(parseTruncateAttribute('15 expandable', 'fontdue-type-tester'));
+    expect(resolved).toEqual({
+      lines: 15,
+      expandOnFocus: true
+    });
+    expect(shouldTruncate(resolved, false)).toBe(true);
+    expect(shouldTruncate(resolved, true)).toBe(false);
+  });
+  it('takes a second word after true and false too', () => {
+    // `true fixed` is the one-line preview that stays put, which was previously
+    // only reachable as the bare count "1".
+    expect(parseTruncateAttribute('true fixed', 'fontdue-type-tester')).toEqual({
+      lines: 1,
+      expandOnFocus: false
+    });
+    expect(parseTruncateAttribute('true expandable', 'fontdue-type-tester')).toEqual({
+      lines: 1,
+      expandOnFocus: true
+    });
+  });
+  it('tolerates the whitespace a hand-written attribute picks up', () => {
+    expect(parseTruncateAttribute('  15   expandable ', 'fontdue-type-tester')).toEqual({
+      lines: 15,
+      expandOnFocus: true
+    });
+  });
+  it('warns on an unknown or extra word rather than ignoring it', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    expect(parseTruncateAttribute('15 open', 'fontdue-type-tester')).toBeUndefined();
+    expect(parseTruncateAttribute('15 Expandable', 'fontdue-type-tester')).toBeUndefined();
+    expect(parseTruncateAttribute('15 expandable now', 'fontdue-type-tester')).toBeUndefined();
+    expect(parseTruncateAttribute('expandable', 'fontdue-type-tester')).toBeUndefined();
+    expect(warn).toHaveBeenCalledTimes(4);
+  });
+
+  // A word that is an Object member must be a typo like any other, not a
+  // truthy hit off the prototype chain.
+  it('does not treat inherited Object members as words', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    expect(parseTruncateAttribute('15 constructor', 'fontdue-type-tester')).toBeUndefined();
+    expect(warn).toHaveBeenCalledTimes(1);
+  });
+  it('tells the author which forms it accepts', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    parseTruncateAttribute('15 open', 'fontdue-type-tester');
+    expect(warn.mock.calls[0][0]).toContain('15 expandable');
+  });
+});
+describe('mergeConfig with the object truncate form', () => {
+  it('deep-merges a per-component line count onto a global expandOnFocus', () => {
+    var _merged$typeTester;
+    const merged = mergeConfig({
+      typeTester: {
+        truncate: {
+          expandOnFocus: true
+        }
+      }
+    }, {
+      typeTester: {
+        truncate: {
+          lines: 15
+        }
+      }
+    });
+    expect((_merged$typeTester = merged.typeTester) === null || _merged$typeTester === void 0 ? void 0 : _merged$typeTester.truncate).toEqual({
+      expandOnFocus: true,
+      lines: 15
+    });
+  });
+  it('lets a scalar override replace an object base outright', () => {
+    var _merged$typeTester2;
+    const merged = mergeConfig({
+      typeTester: {
+        truncate: {
+          lines: 10,
+          expandOnFocus: true
+        }
+      }
+    }, {
+      typeTester: {
+        truncate: 20
+      }
+    });
+    expect((_merged$typeTester2 = merged.typeTester) === null || _merged$typeTester2 === void 0 ? void 0 : _merged$typeTester2.truncate).toBe(20);
+  });
+});

package/dist/auth/session.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The customer session, as the network layer sees it: putting the access token
+ * on a request, and renewing it when the server says it has expired.
+ *
+ * The access token lasts 24 hours and the refresh token 30 days, so a customer
+ * who signs in once and comes back the next week arrives with an expired access
+ * token and a good refresh token. That is the ordinary case, not an error —
+ * `token:expired` is renewed and the request retried, and the visitor never
+ * sees it. Only `token:invalid` (a forged, tampered or too-old credential, or
+ * one naming a customer who no longer exists) ends the session.
+ */
+import { AuthTokens } from './tokenStore.js';
+/** Codes `FontageWeb.UserAuthPlugs` and the RequireCustomer middleware return. */
+export type CustomerAuthErrorCode = 'token:expired' | 'token:invalid' | 'token:missing' | 'customer:required';
+/**
+ * The customer-auth error code in a GraphQL response, if it carries one.
+ *
+ * These arrive as ordinary field errors rather than a failed request — a
+ * storefront query asks for public content and `viewer.currentCustomer` in one
+ * go, and the public half still resolves.
+ */
+export declare function customerAuthErrorCode(json: unknown): CustomerAuthErrorCode | undefined;
+/**
+ * Puts the stored access token on `headers`, and reports whether it did.
+ *
+ * Returns false when the visitor is signed out, so the caller knows an auth
+ * error in the response is about somebody else's credential (an admin preview
+ * token, say) and none of its business.
+ */
+export declare function applyCustomerAuthHeader(headers: Record<string, string>, scope: string | undefined): boolean;
+/**
+ * Trades the stored refresh token for a new pair.
+ *
+ * Deliberately a plain `fetch` rather than a Relay mutation: this runs from
+ * inside the Relay network layer, and going back through it would recurse.
+ *
+ * Returns the new tokens, or `null` — in which case the session has been
+ * cleared and the caller should let the original auth error stand.
+ */
+export declare function refreshCustomerSession(url: string, scope: string | undefined, extraHeaders?: Record<string, string>): Promise<AuthTokens | null>;
+/** Test seam: forgets any refresh that is still in flight. */
+export declare function resetRefreshState(): void;

package/dist/auth/session.js

@@ -0,0 +1,139 @@
+/**
+ * The customer session, as the network layer sees it: putting the access token
+ * on a request, and renewing it when the server says it has expired.
+ *
+ * The access token lasts 24 hours and the refresh token 30 days, so a customer
+ * who signs in once and comes back the next week arrives with an expired access
+ * token and a good refresh token. That is the ordinary case, not an error —
+ * `token:expired` is renewed and the request retried, and the visitor never
+ * sees it. Only `token:invalid` (a forged, tampered or too-old credential, or
+ * one naming a customer who no longer exists) ends the session.
+ */
+
+import { clearTokens, getTokens, setTokens } from './tokenStore.js';
+
+/** Codes `FontageWeb.UserAuthPlugs` and the RequireCustomer middleware return. */
+
+const AUTH_ERROR_CODES = ['token:expired', 'token:invalid', 'token:missing', 'customer:required'];
+/**
+ * The customer-auth error code in a GraphQL response, if it carries one.
+ *
+ * These arrive as ordinary field errors rather than a failed request — a
+ * storefront query asks for public content and `viewer.currentCustomer` in one
+ * go, and the public half still resolves.
+ */
+export function customerAuthErrorCode(json) {
+  const errors = json === null || json === void 0 ? void 0 : json.errors;
+  if (!Array.isArray(errors)) return undefined;
+  for (const error of errors) {
+    var _error$extensions;
+    const code = error === null || error === void 0 ? void 0 : (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code;
+    if (typeof code === 'string' && AUTH_ERROR_CODES.includes(code)) {
+      return code;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Puts the stored access token on `headers`, and reports whether it did.
+ *
+ * Returns false when the visitor is signed out, so the caller knows an auth
+ * error in the response is about somebody else's credential (an admin preview
+ * token, say) and none of its business.
+ */
+export function applyCustomerAuthHeader(headers, scope) {
+  const tokens = getTokens(scope);
+  if (tokens == null) return false;
+  headers.Authorization = `Bearer ${tokens.accessToken}`;
+  return true;
+}
+
+// Renewal is idempotent but not free, and a page load fires several queries at
+// once — all of which would come back `token:expired` together. One refresh per
+// scope is shared between them.
+const inFlight = new Map();
+const REFRESH_MUTATION = `mutation FontdueRefreshAccessToken($refreshToken: String!) {
+  refreshAccessToken(input: { refreshToken: $refreshToken }) {
+    accessToken
+    refreshToken
+  }
+}`;
+
+/**
+ * Trades the stored refresh token for a new pair.
+ *
+ * Deliberately a plain `fetch` rather than a Relay mutation: this runs from
+ * inside the Relay network layer, and going back through it would recurse.
+ *
+ * Returns the new tokens, or `null` — in which case the session has been
+ * cleared and the caller should let the original auth error stand.
+ */
+export function refreshCustomerSession(url, scope) {
+  let extraHeaders = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const key = scope ?? 'default';
+  const existing = inFlight.get(key);
+  if (existing) return existing;
+  const pending = doRefresh(url, scope, extraHeaders).finally(() => {
+    inFlight.delete(key);
+  });
+  inFlight.set(key, pending);
+  return pending;
+}
+async function doRefresh(url, scope, extraHeaders) {
+  const tokens = getTokens(scope);
+  if (tokens == null) return null;
+
+  // The caller's headers carry the tenant-routing and telemetry headers this
+  // request wants too — but not its `Authorization`, which by now holds the
+  // very access token the server has just refused. The refresh token travels in
+  // the mutation's variables instead.
+  const {
+    Authorization: _access,
+    authorization: _lower,
+    ...forwarded
+  } = extraHeaders;
+  try {
+    var _json$data;
+    const response = await fetch(`${url}?queryName=FontdueRefreshAccessToken`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        ...forwarded,
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: REFRESH_MUTATION,
+        variables: {
+          refreshToken: tokens.refreshToken
+        }
+      })
+    });
+    if (!response.ok) return null;
+    const json = await response.json();
+    const renewed = json === null || json === void 0 ? void 0 : (_json$data = json.data) === null || _json$data === void 0 ? void 0 : _json$data.refreshAccessToken;
+    if (typeof (renewed === null || renewed === void 0 ? void 0 : renewed.accessToken) === 'string' && typeof (renewed === null || renewed === void 0 ? void 0 : renewed.refreshToken) === 'string') {
+      const next = {
+        accessToken: renewed.accessToken,
+        refreshToken: renewed.refreshToken
+      };
+      setTokens(next, scope);
+      return next;
+    }
+
+    // The server answered, and it will not renew this credential: the refresh
+    // token is expired or invalid too. Sign out rather than retrying forever.
+    clearTokens(scope);
+    return null;
+  } catch {
+    // A network failure says nothing about the credential. Keep the tokens and
+    // let the original error surface — the next request will try again.
+    return null;
+  }
+}
+
+/** Test seam: forgets any refresh that is still in flight. */
+export function resetRefreshState() {
+  inFlight.clear();
+}

package/dist/auth/tokenStore.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Where a signed-in customer's tokens live in the browser.
+ *
+ * Sign-in returns an access token (24 hours) and a refresh token (30 days).
+ * Both are bearer credentials the network layer has to put on an
+ * `Authorization` header, so they have to be readable by JavaScript — an
+ * httpOnly cookie, safer for a session the server reads, cannot be read back to
+ * build that header. `localStorage` is therefore no weaker here than a
+ * JS-readable cookie, and it does not ride along on every request to the
+ * foundry's own site.
+ *
+ * ## Why a module singleton, and why on globalThis
+ *
+ * Astro (and Vike, and Qwik) mount one React tree per island, each with its own
+ * reconciler and its own copy of every context — so a token held in React state
+ * would have the sign-in island signed in and the cart island signed out. Next's
+ * server build can also bundle one file into several chunks, whose module-level
+ * `let`s are separate variables. Anchoring the singleton on `globalThis` covers
+ * both: every island and every duplicated copy of this module reads one store.
+ * Same reasoning as `relay/serverConfig.ts` and the Relay environment.
+ *
+ * ## Scope
+ *
+ * Keyed by the Fontdue URL the tokens came from, so a page wired to two
+ * foundries — or a developer switching a local site between them — never sends
+ * one foundry's token to the other.
+ *
+ * ## SSR
+ *
+ * Every entry point returns as if signed out on the server. There is no browser
+ * storage to read there, and reading a *shared* store on the server would leak
+ * one visitor's session into another's render. The first client render
+ * therefore matches the server HTML, and the tokens appear on the render after
+ * hydration, driven by `subscribeToTokens`.
+ */
+export interface AuthTokens {
+    accessToken: string;
+    refreshToken: string;
+}
+/**
+ * The `localStorage` key for a given Fontdue URL.
+ *
+ * Exported so a host app can clear it, and so the tests can assert on the exact
+ * key rather than on whatever the implementation happens to write.
+ */
+export declare function tokenStorageKey(url?: string): string;
+/** The tokens held for `url`, or `null` when signed out (always on the server). */
+export declare function getTokens(url?: string): AuthTokens | null;
+/** Replaces the tokens held for `url`, or clears them when given `null`. */
+export declare function setTokens(tokens: AuthTokens | null, url?: string): void;
+/** Signs out of `url`: forgets the tokens here and in storage. */
+export declare function clearTokens(url?: string): void;
+/**
+ * Calls `listener` whenever the tokens change, and returns an unsubscribe.
+ *
+ * This is how a sign-in in one island reaches a `useCurrentCustomer()` in
+ * another — nothing else connects two React trees on the same page.
+ */
+export declare function subscribeToTokens(listener: () => void): () => void;
+/** Test seam: drops every cached token and listener. */
+export declare function resetTokenStore(): void;

package/dist/auth/tokenStore.js

@@ -0,0 +1,162 @@
+/**
+ * Where a signed-in customer's tokens live in the browser.
+ *
+ * Sign-in returns an access token (24 hours) and a refresh token (30 days).
+ * Both are bearer credentials the network layer has to put on an
+ * `Authorization` header, so they have to be readable by JavaScript — an
+ * httpOnly cookie, safer for a session the server reads, cannot be read back to
+ * build that header. `localStorage` is therefore no weaker here than a
+ * JS-readable cookie, and it does not ride along on every request to the
+ * foundry's own site.
+ *
+ * ## Why a module singleton, and why on globalThis
+ *
+ * Astro (and Vike, and Qwik) mount one React tree per island, each with its own
+ * reconciler and its own copy of every context — so a token held in React state
+ * would have the sign-in island signed in and the cart island signed out. Next's
+ * server build can also bundle one file into several chunks, whose module-level
+ * `let`s are separate variables. Anchoring the singleton on `globalThis` covers
+ * both: every island and every duplicated copy of this module reads one store.
+ * Same reasoning as `relay/serverConfig.ts` and the Relay environment.
+ *
+ * ## Scope
+ *
+ * Keyed by the Fontdue URL the tokens came from, so a page wired to two
+ * foundries — or a developer switching a local site between them — never sends
+ * one foundry's token to the other.
+ *
+ * ## SSR
+ *
+ * Every entry point returns as if signed out on the server. There is no browser
+ * storage to read there, and reading a *shared* store on the server would leak
+ * one visitor's session into another's render. The first client render
+ * therefore matches the server HTML, and the tokens appear on the render after
+ * hydration, driven by `subscribeToTokens`.
+ */
+
+const IS_SERVER = typeof window === 'undefined';
+const STORE_KEY = '__fontdueAuthTokenStore__';
+const STORAGE_PREFIX = 'fontdue:auth:';
+function store() {
+  const g = globalThis;
+  let s = g[STORE_KEY];
+  if (!s) {
+    s = {
+      cache: new Map(),
+      listeners: new Set()
+    };
+    g[STORE_KEY] = s;
+  }
+  return s;
+}
+
+/**
+ * The `localStorage` key for a given Fontdue URL.
+ *
+ * Exported so a host app can clear it, and so the tests can assert on the exact
+ * key rather than on whatever the implementation happens to write.
+ */
+export function tokenStorageKey(url) {
+  return STORAGE_PREFIX + scope(url);
+}
+
+// A trailing slash and a case difference are the same origin as far as the API
+// is concerned, so they must not be two different sessions.
+function scope(url) {
+  if (url == null || url === '') return 'default';
+  return url.trim().replace(/\/+$/, '').toLowerCase();
+}
+
+// Storage throws rather than returning null in more situations than people
+// expect: Safari's private mode historically, a browser set to block site data,
+// and any cross-origin iframe with third-party storage partitioned off. None of
+// those should take the page down — a visitor who can't persist a session
+// simply signs in again.
+function readStorage(key) {
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof (parsed === null || parsed === void 0 ? void 0 : parsed.accessToken) !== 'string' || typeof (parsed === null || parsed === void 0 ? void 0 : parsed.refreshToken) !== 'string') {
+      return null;
+    }
+    return {
+      accessToken: parsed.accessToken,
+      refreshToken: parsed.refreshToken
+    };
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, tokens) {
+  try {
+    if (tokens == null) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, JSON.stringify(tokens));
+    }
+  } catch {
+    // Kept in memory only. The session lasts the tab rather than the month.
+  }
+}
+
+/** The tokens held for `url`, or `null` when signed out (always on the server). */
+export function getTokens(url) {
+  if (IS_SERVER) return null;
+  const {
+    cache
+  } = store();
+  const key = scope(url);
+  if (!cache.has(key)) {
+    cache.set(key, readStorage(tokenStorageKey(url)));
+  }
+  return cache.get(key) ?? null;
+}
+
+/** Replaces the tokens held for `url`, or clears them when given `null`. */
+export function setTokens(tokens, url) {
+  if (IS_SERVER) return;
+  const s = store();
+  s.cache.set(scope(url), tokens);
+  writeStorage(tokenStorageKey(url), tokens);
+  notify(s);
+}
+
+/** Signs out of `url`: forgets the tokens here and in storage. */
+export function clearTokens(url) {
+  setTokens(null, url);
+}
+
+/**
+ * Calls `listener` whenever the tokens change, and returns an unsubscribe.
+ *
+ * This is how a sign-in in one island reaches a `useCurrentCustomer()` in
+ * another — nothing else connects two React trees on the same page.
+ */
+export function subscribeToTokens(listener) {
+  if (IS_SERVER) return () => {};
+  const {
+    listeners
+  } = store();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function notify(s) {
+  // A copy, so a listener that unsubscribes itself while being called doesn't
+  // change the set mid-iteration.
+  for (const listener of Array.from(s.listeners)) {
+    try {
+      listener();
+    } catch {
+      // One broken subscriber must not stop the others hearing about a sign-out.
+    }
+  }
+}
+
+/** Test seam: drops every cached token and listener. */
+export function resetTokenStore() {
+  const g = globalThis;
+  delete g[STORE_KEY];
+}

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';
@@ -14,6 +15,7 @@ import CheckoutSteps from './CheckoutSteps.js';
 import { useElements, useStripe } from '@stripe/react-stripe-js';
 import ConfigContext from '../ConfigContext.js';
 import { parseCustomProperties } from '../../utils.js';
+import { validateAddressElements } from '../../stripeElements.js';
 const MOBILE = 'mobile';
 const DESKTOP = 'desktop';
 
@@ -98,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) => {
@@ -153,14 +156,13 @@ const Checkout = _ref => {
     elements = useElements();
   }
   const handleSubmit = async () => {
-    // Validate Stripe elements first (for Billing and Licensee steps)
-    if ((checkoutStep === CheckoutSteps.Billing || checkoutStep === CheckoutSteps.Licensee && !licenseeIsBillingIdentity) && elements) {
-      const result = await elements.submit();
-      if (result.error) {
-        // Stripe will show validation errors in the UI
-        onScrollToTop();
-        return;
-      }
+    // Validate the Stripe address first (for Billing and Licensee steps). Not
+    // `elements.submit()`: the order may not have a PaymentIntent yet, and
+    // without one Stripe.js throws.
+    if ((checkoutStep === CheckoutSteps.Billing || checkoutStep === CheckoutSteps.Licensee && !licenseeIsBillingIdentity) && !(await validateAddressElements(elements))) {
+      // Stripe shows the validation errors in the UI
+      onScrollToTop();
+      return;
     }
     setSubmitting(true);
     setError(null);
@@ -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]));