fontdue-js 3.11.0 → 3.12.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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`.
+- Fixed a `TypeTester` with `shy` leaving its OpenType features panel open after the toolbar hides. The panel and the dropdown now close shortly after the toolbar does.
+
 ## 3.11.0
 
 - `TestFontsForm` can group its family checkboxes by superfamily. With *Family list* set to *Grouped by superfamily* under *Settings → Test fonts* – or `testFonts: { familyGrouping: "superfamily" }` in the config, or the `familyGrouping` prop (`family-grouping` on `<fontdue-test-fonts-form>`) – each superfamily gets a checkbox that ticks all of its families, listed beneath it in `.test-fonts__family-group__families`.

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,6 +8,7 @@ export type LoginInput = {
     email?: string | null;
     name?: string | null;
     newsletterOptIn?: boolean | null;
+    recaptchaToken?: string | null;
     target?: string | null;
 };
 export type CustomerLoginFormLoginMutation$variables = {

package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */

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

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type CustomerLoginFormRecaptchaQuery$variables = Record<PropertyKey, never>;
+export type CustomerLoginFormRecaptchaQuery$data = {
+    readonly viewer: {
+        readonly settings: {
+            readonly recaptchaEnabled: boolean;
+            readonly recaptchaSiteKey: string | null;
+        } | null;
+    };
+};
+export type CustomerLoginFormRecaptchaQuery = {
+    response: CustomerLoginFormRecaptchaQuery$data;
+    variables: CustomerLoginFormRecaptchaQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CustomerLoginFormRecaptchaQuery.graphql.js

@@ -0,0 +1,86 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "Settings",
+    "kind": "LinkedField",
+    "name": "settings",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaEnabled",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaSiteKey",
+      "storageKey": null
+    }],
+    "storageKey": null
+  };
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "a65b8ea63db01df3cbdf602ac7721787",
+      "id": null,
+      "metadata": {},
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "operationKind": "query",
+      "text": "query CustomerLoginFormRecaptchaQuery {\n  viewer {\n    settings {\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "fe7289e19bcc08dbad62e72d67c48c97";
+export default node;

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

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+
+// The customer sign-in form solves the store's invisible reCAPTCHA before it
+// asks for a sign-in link, when the store has reCAPTCHA on: the form emails
+// whatever address is typed, which made it a tool for email-bombing strangers.
+
+import React, { act, forwardRef, useImperativeHandle, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    settings: null,
+    commits: []
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useRelayEnvironment: () => ({}),
+  useLazyLoadQuery: () => ({
+    viewer: {
+      settings: relay.settings
+    }
+  }),
+  commitMutation: (_env, config) => {
+    relay.commits.push(config.variables);
+  }
+}));
+
+// Google's widget: `execute()` hands back a token a moment later, the way the
+// real callback arrives after the form has re-rendered – and, like
+// react-google-recaptcha, it calls whichever `onChange` it holds by then.
+vi.mock('../components/Recaptcha.js', () => ({
+  ReCAPTCHA: /*#__PURE__*/forwardRef(function FakeRecaptcha(props, ref) {
+    const latest = useRef(props);
+    latest.current = props;
+    useImperativeHandle(ref, () => ({
+      execute: () => setTimeout(() => latest.current.onChange('solved-token'), 0),
+      reset: () => {}
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "recaptcha"
+    });
+  })
+}));
+import CustomerLoginForm from '../components/CustomerLoginForm/index.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+  relay.commits = [];
+  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(CustomerLoginForm, null)));
+};
+const submit = async email => {
+  const input = container.querySelector('input[type="email"]');
+  await act(async () => {
+    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+    setValue.call(input, email);
+    input.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+  });
+  await act(async () => {
+    container.querySelector('form').dispatchEvent(new Event('submit', {
+      bubbles: true,
+      cancelable: true
+    }));
+  });
+  // Let the widget's token callback land.
+  await act(async () => new Promise(resolve => setTimeout(resolve, 5)));
+};
+describe('CustomerLoginForm reCAPTCHA', () => {
+  it('asks for a link straight away on a store without reCAPTCHA', async () => {
+    relay.settings = {
+      recaptchaEnabled: false,
+      recaptchaSiteKey: null
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: undefined
+      }
+    }]);
+  });
+  it('solves the widget first, and sends its token with the request', async () => {
+    relay.settings = {
+      recaptchaEnabled: true,
+      recaptchaSiteKey: 'site-key'
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).not.toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: 'solved-token'
+      }
+    }]);
+  });
+});

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');
+  });
+});