fontdue-js 3.11.0 → 3.12.1

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__/typeTesterHeightAnimation.test.js

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useHeightAnimation from '../components/TypeTester/useHeightAnimation.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no layout and no Web Animations, so both are stubbed: the
+// panel's content is CONTENT_HEIGHT tall, an explicit px height measures as
+// itself, and `midAnimation` stands in for the frame a running animation is on.
+const CONTENT_HEIGHT = 120;
+let midAnimation = null;
+let runs = [];
+function Panel(_ref) {
+  let {
+    open
+  } = _ref;
+  const {
+    ref,
+    style
+  } = useHeightAnimation(open, 300);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "panel",
+    ref: ref,
+    style: style
+  });
+}
+describe('useHeightAnimation', () => {
+  let root;
+  let container;
+  const panel = () => container.querySelector('.panel');
+  const render = open => act(() => root.render( /*#__PURE__*/React.createElement(Panel, {
+    open: open
+  })));
+  const heights = run => run.keyframes.map(k => k.height);
+  beforeEach(() => {
+    runs = [];
+    midAnimation = null;
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const {
+        height
+      } = this.style;
+      const value = midAnimation ?? (height === 'auto' || height === '' ? CONTENT_HEIGHT : parseFloat(height));
+      return {
+        height: value
+      };
+    });
+    Element.prototype.animate = function (keyframes) {
+      const run = {
+        keyframes,
+        cancel: vi.fn(),
+        onfinish: null
+      };
+      runs.push(run);
+      return run;
+    };
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    delete Element.prototype.animate;
+  });
+  it('starts closed without animating', async () => {
+    await render(false);
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+    expect(runs).toHaveLength(0);
+  });
+  it('opens from 0 to the content height, then settles to auto and visible', async () => {
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(1);
+    expect(heights(runs[0])).toEqual(['0px', `${CONTENT_HEIGHT}px`]);
+    expect(panel().style.overflow).toBe('hidden');
+    act(() => {
+      var _runs$0$onfinish, _runs$;
+      return (_runs$0$onfinish = (_runs$ = runs[0]).onfinish) === null || _runs$0$onfinish === void 0 ? void 0 : _runs$0$onfinish.call(_runs$);
+    });
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+  });
+  it('closes from the open height to 0, and stays clipped', async () => {
+    await render(true);
+    await render(false);
+    expect(heights(runs[0])).toEqual([`${CONTENT_HEIGHT}px`, '0px']);
+    act(() => {
+      var _runs$0$onfinish2, _runs$2;
+      return (_runs$0$onfinish2 = (_runs$2 = runs[0]).onfinish) === null || _runs$0$onfinish2 === void 0 ? void 0 : _runs$0$onfinish2.call(_runs$2);
+    });
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('reverses an interrupted open from the height on screen', async () => {
+    await render(false);
+    await render(true);
+    const opening = runs[0];
+    midAnimation = 60;
+    await render(false);
+    expect(opening.cancel).toHaveBeenCalled();
+    expect(heights(runs[1])).toEqual(['60px', '0px']);
+
+    // A late finish from the cancelled open must not unclip the closed panel.
+    act(() => {
+      var _opening$onfinish;
+      return (_opening$onfinish = opening.onfinish) === null || _opening$onfinish === void 0 ? void 0 : _opening$onfinish.call(opening);
+    });
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('skips the animation for reduced motion', async () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true
+    }));
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(0);
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+    vi.unstubAllGlobals();
+  });
+});

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/__tests__/typeTesterShyFeaturesClose.test.js

@@ -0,0 +1,133 @@
+// @vitest-environment happy-dom
+import React, { act, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useCloseWhenToolbarHides, { CLOSE_DELAY } from '../components/TypeTester/useCloseWhenToolbarHides.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let open = false;
+
+// The tester's markup reduced to what the hook reads: the `.type-tester` root,
+// something focusable inside it (the editable text) and the surface's element.
+function Tester(_ref) {
+  let {
+    shy
+  } = _ref;
+  const [featuresOpen, setFeaturesOpen] = useState(true);
+  open = featuresOpen;
+  const ref = useRef(null);
+  useCloseWhenToolbarHides(ref, {
+    open: featuresOpen,
+    setOpen: setFeaturesOpen,
+    shy
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "type-tester"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "text"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__features-container",
+    ref: ref
+  }));
+}
+describe('features surface under a shy toolbar', () => {
+  let root;
+  let container;
+  let outside;
+  const tester = () => container.querySelector('.type-tester');
+  const text = () => container.querySelector('.text');
+  const pointer = function (target, type) {
+    let pointerType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return act(() => {
+      target.dispatchEvent(new PointerEvent(type, {
+        pointerType,
+        bubbles: true
+      }));
+    });
+  };
+  const wait = ms => act(() => vi.advanceTimersByTime(ms));
+  const render = shy => act(() => root.render( /*#__PURE__*/React.createElement(Tester, {
+    shy: shy
+  })));
+  beforeEach(() => {
+    vi.useFakeTimers();
+    container = document.createElement('div');
+    outside = document.createElement('button');
+    document.body.append(container, outside);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    outside.remove();
+    vi.useRealTimers();
+  });
+  describe("shy: 'hover'", () => {
+    beforeEach(async () => {
+      await render('hover');
+      await pointer(tester(), 'pointerenter');
+    });
+    it('closes once the pointer has been gone for the delay', async () => {
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY - 1);
+      expect(open).toBe(true);
+      await wait(1);
+      expect(open).toBe(false);
+    });
+    it('stays open when the pointer comes back within the delay', async () => {
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY - 50);
+      await pointer(tester(), 'pointerenter');
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+    });
+    it('stays open while the tester holds focus, then closes when focus leaves', async () => {
+      act(() => text().focus());
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+      act(() => outside.focus());
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(false);
+    });
+    it('stays open when focus leaves while the pointer is still over it', async () => {
+      act(() => text().focus());
+      act(() => outside.focus());
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+    });
+  });
+  it('on a touch device (no hover), closes on a touch outside the tester', async () => {
+    await render('hover');
+    await pointer(tester(), 'pointerleave', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+    await pointer(text(), 'pointerdown', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+    await pointer(outside, 'pointerdown', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it('treats shy: true as hover', async () => {
+    await render(true);
+    await pointer(tester(), 'pointerenter');
+    await pointer(tester(), 'pointerleave');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it("closes under shy: 'focus' when focus leaves, even while hovered", async () => {
+    await render('focus');
+    await pointer(tester(), 'pointerenter');
+    act(() => text().focus());
+    act(() => outside.focus());
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it('leaves the surface alone without shy, where its toggle stays visible', async () => {
+    await render(false);
+    await pointer(tester(), 'pointerenter');
+    await pointer(tester(), 'pointerleave');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+  });
+});

package/dist/components/CustomerLoginForm/index.js

@@ -1,13 +1,19 @@
 'use client';
 
+import _CustomerLoginFormRecaptchaQuery from "../../__generated__/CustomerLoginFormRecaptchaQuery.graphql.js";
 import _CustomerLoginFormQuery from "../../__generated__/CustomerLoginFormQuery.graphql.js";
 import _CustomerLoginFormLoginMutation from "../../__generated__/CustomerLoginFormLoginMutation.graphql.js";
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { commitMutation, graphql, useLazyLoadQuery, useRelayEnvironment } from 'react-relay';
+// The script-injecting reCAPTCHA wrapper (loads Google's api.js); see
+// ../Recaptcha for why it isn't the package's named export.
+import { ReCAPTCHA } from '../Recaptcha.js';
 import TextField from '../TextField/index.js';
+import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const loginMutation = (_CustomerLoginFormLoginMutation.hash && _CustomerLoginFormLoginMutation.hash !== "975b639fac1e0d88e0f0c9c55acd8b9c" && console.error("The definition of 'CustomerLoginFormLoginMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormLoginMutation);
 const query = (_CustomerLoginFormQuery.hash && _CustomerLoginFormQuery.hash !== "f32c7b0b485a2b2a02ddf2cbc5b87a3c" && console.error("The definition of 'CustomerLoginFormQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormQuery);
-const DEFAULT_SUBMITTED_LABEL = '<p>Submitted!</p><p>Please check your email inbox for a link to log in.</p><p>If you don\u2019t receive an email, please contact us to retrieve your order information.</p>';
+const recaptchaQuery = (_CustomerLoginFormRecaptchaQuery.hash && _CustomerLoginFormRecaptchaQuery.hash !== "fe7289e19bcc08dbad62e72d67c48c97" && console.error("The definition of 'CustomerLoginFormRecaptchaQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormRecaptchaQuery);
+const DEFAULT_SUBMITTED_LABEL = '<p>Submitted!</p><p>Please check your email inbox for a link to log in.</p><p>If you don’t receive an email, please contact us to retrieve your order information.</p>';
 const CustomerLoginForm = _ref => {
   let {
     submitLabel = 'Submit'
@@ -16,24 +22,40 @@ const CustomerLoginForm = _ref => {
   const [error, setError] = useState(null);
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
+  // The store's reCAPTCHA site key once known: null when it doesn't use
+  // reCAPTCHA. Undefined until the settings arrive, which is only after mount.
+  const [siteKey, setSiteKey] = useState(undefined);
+  const [recaptchaToken, setRecaptchaToken] = useState(null);
+  const [pendingSubmit, setPendingSubmit] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const recaptchaRef = useRef(null);
+  const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
-  const handleSubmit = e => {
-    e.preventDefault();
+  useEffect(() => setMounted(true), []);
+  const resetRecaptcha = useCallback(() => {
+    var _recaptchaRef$current;
+    (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+    setRecaptchaToken(null);
+  }, []);
+  const submitForm = useCallback(token => {
+    recaptchaTimeout.clear();
+    setPendingSubmit(false);
     setSubmitting(true);
     commitMutation(environment, {
       mutation: loginMutation,
       variables: {
         input: {
-          email
+          email,
+          recaptchaToken: token ?? undefined
         }
       },
       onCompleted: (_res, errors) => {
+        setSubmitting(false);
         if (errors && errors.length > 0) {
           setError(errors[0].message);
-          setSubmitting(false);
+          resetRecaptcha();
         } else {
           setSubmitted(true);
-          setSubmitting(false);
           setError(null);
         }
       },
@@ -43,8 +65,46 @@ const CustomerLoginForm = _ref => {
         } = _ref2;
         setError(message);
         setSubmitting(false);
+        resetRecaptcha();
       }
     });
+  }, [environment, email, recaptchaTimeout, resetRecaptcha]);
+  const handleRecaptchaChange = useCallback(token => {
+    setRecaptchaToken(token);
+    if (token && pendingSubmit) submitForm(token);
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = useCallback(() => setRecaptchaToken(null), []);
+
+  // Recover when the widget can't produce a token, so the button doesn't sit
+  // on “Submitting…” forever if Google's script fails to load.
+  const abortRecaptcha = useCallback(() => {
+    recaptchaTimeout.clear();
+    setPendingSubmit(false);
+    resetRecaptcha();
+    setError(RECAPTCHA_UNAVAILABLE_MESSAGE);
+  }, [recaptchaTimeout, resetRecaptcha]);
+  const handleRecaptchaErrored = useCallback(() => {
+    if (pendingSubmit) abortRecaptcha();
+  }, [pendingSubmit, abortRecaptcha]);
+  const handleSubmit = e => {
+    e.preventDefault();
+    setError(null);
+    if (siteKey && !recaptchaToken) {
+      var _recaptchaRef$current2;
+      setPendingSubmit(true);
+      // Give up if no token arrives and the script never loaded; a visitor
+      // mid-challenge keeps `grecaptcha` defined and isn't cut off.
+      recaptchaTimeout.start(() => {
+        if (isRecaptchaScriptLoaded()) return;
+        abortRecaptcha();
+      });
+      (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.execute();
+      return;
+    }
+
+    // Settings not in yet (a submit within moments of the page loading) goes
+    // without a token; the server says so if the store needs one.
+    submitForm(recaptchaToken);
   };
   const disabled = !email;
   return /*#__PURE__*/React.createElement("div", {
@@ -69,23 +129,58 @@ const CustomerLoginForm = _ref => {
     onChange: value => setEmail(value),
     autocomplete: "email",
     placeholder: "Your email"
+  })), mounted && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(LoginRecaptcha, {
+    widgetRef: recaptchaRef,
+    onSiteKey: setSiteKey,
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired,
+    onErrored: handleRecaptchaErrored
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     type: "submit",
-    disabled: submitting || disabled
-  }, submitting ? 'Submitting...' : submitLabel, /*#__PURE__*/React.createElement("span", {
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : submitLabel, /*#__PURE__*/React.createElement("span", {
     className: "submit-button__arrow"
   }, " \u2192")))));
 };
 
+// The store's reCAPTCHA settings and, when it uses reCAPTCHA, the invisible
+// widget. Rendered only after mount, so the lazy query stays out of the SSR
+// pass for the same reason as SubmittedMessage below.
+function LoginRecaptcha(_ref3) {
+  var _data$viewer;
+  let {
+    widgetRef,
+    onSiteKey,
+    onChange,
+    onExpired,
+    onErrored
+  } = _ref3;
+  const data = useLazyLoadQuery(recaptchaQuery, {});
+  const settings = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.settings;
+  const siteKey = settings !== null && settings !== void 0 && settings.recaptchaEnabled ? settings.recaptchaSiteKey ?? null : null;
+  useEffect(() => onSiteKey(siteKey), [siteKey, onSiteKey]);
+  if (!siteKey) return null;
+  return /*#__PURE__*/React.createElement(ReCAPTCHA, {
+    ref: widgetRef,
+    sitekey: siteKey,
+    size: "invisible",
+    onChange: onChange,
+    onExpired: onExpired,
+    onErrored: onErrored
+  });
+}
+
 // The settings label is only shown after a submit, which can only happen in
 // the browser — fetching it here (not in the form component) keeps the lazy
 // query out of the SSR pass, where it has no session and, in multi-tenant
 // setups, possibly no resolvable GraphQL URL.
 function SubmittedMessage() {
-  var _data$viewer, _data$viewer$settings;
+  var _data$viewer2, _data$viewer2$setting;
   const data = useLazyLoadQuery(query, {});
-  const submittedLabel = ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.customerLoginSubmittedLabel) || DEFAULT_SUBMITTED_LABEL;
+  const submittedLabel = ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.customerLoginSubmittedLabel) || DEFAULT_SUBMITTED_LABEL;
   return /*#__PURE__*/React.createElement("div", {
     className: "login-form__submitted",
     dangerouslySetInnerHTML: {

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