@akinon/pz-theme 2.0.94 → 2.0.95-beta.1

package/src/__tests__/modal-login-close.test.tsx

@@ -0,0 +1,366 @@
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import NewsletterFormBlock from '../blocks/newsletter-form-block';
+import ThemeModalMount from '../overlays/theme-modal-mount';
+import { readThemeModals, ThemeModal } from '../overlays/modal-registry';
+import {
+  __resetOverlayBusForTests,
+  getOpenModalIds,
+  isModalOpen,
+  openModal,
+  registerModalHost
+} from '../overlays/overlay-bus';
+import { clearAutoOpenRecord } from '../overlays/modal-frequency';
+import { __resetModalPreviewForTests } from '../overlays/use-modal-preview';
+import { Block } from '../theme-block';
+
+/**
+ * A shopper who signs in inside the drawer is done with the drawer.
+ *
+ * It used to stay open over the page, and the reason was a default in the
+ * wrong place: the only close a form could perform was `closeAllModals()`
+ * behind an authored toggle, and that toggle is off by default — correctly,
+ * since "close every modal on the page" is not something a form on a plain
+ * page should do unasked. The live GANT drawer shows how that ends: its OTP
+ * form has the toggle on and its login and register forms do not, so signing
+ * in with an e-mail left the drawer covering the homepage.
+ *
+ * With the host's id in hand the two defaults stop fighting: a form closes THE
+ * MODAL IT IS IN, and a form that is not in one still closes nothing.
+ */
+
+const signIn = jest.fn(() => Promise.resolve({ error: null, url: '/account' }));
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...args),
+  useSession: () => ({ data: null, status: 'unauthenticated' })
+}));
+
+const push = jest.fn();
+const refresh = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push, refresh, replace: jest.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => '/'
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+const subscribe = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useEmailSubscriptionMutation: () => [subscribe, { isLoading: false }]
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const loginForm = (properties: Record<string, unknown> = {}) => (
+  <AuthFormBlock
+    block={
+      block({
+        id: 'login-1',
+        type: 'auth-form',
+        label: 'Auth Form',
+        properties
+      }) as Block
+    }
+    placeholderId="placeholder-1"
+    sectionId="section-1"
+    currentBreakpoint="desktop"
+  />
+);
+
+const mkModal = (id: string): ThemeModal =>
+  readThemeModals([{ id, name: 'Auth', presentation: 'drawer' }])[0];
+
+/** The drawer, with the login form composed inside it — the GANT shape. */
+const openDrawerWithLogin = (
+  properties: Record<string, unknown> = {},
+  modalId = 'auth-drawer'
+) => {
+  const view = render(
+    <ThemeModalMount modal={mkModal(modalId)}>
+      {loginForm(properties)}
+    </ThemeModalMount>
+  );
+
+  act(() => {
+    openModal(modalId);
+  });
+
+  return view;
+};
+
+const submit = (container: HTMLElement) => {
+  fireEvent.change(container.querySelector('input[name="email"]')!, {
+    target: { value: 'ada@example.com' }
+  });
+  fireEvent.change(container.querySelector('input[name="password"]')!, {
+    target: { value: 'hunter2' }
+  });
+  fireEvent.submit(container.querySelector('form')!);
+};
+
+beforeEach(() => {
+  signIn.mockClear();
+  push.mockClear();
+  refresh.mockClear();
+  __resetOverlayBusForTests();
+  __resetModalPreviewForTests();
+  registerModalHost();
+  clearAutoOpenRecord('auth-drawer');
+  clearAutoOpenRecord('other');
+});
+
+describe('a login inside a drawer', () => {
+  it('closes the drawer it was in, with nothing authored', async () => {
+    const { container } = openDrawerWithLogin();
+
+    expect(isModalOpen('auth-drawer')).toBe(true);
+
+    submit(container);
+
+    await waitFor(() => expect(isModalOpen('auth-drawer')).toBe(false));
+    // And the surface is gone with it, not merely marked closed.
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+
+  it('stays on the page instead of pushing the shopper to the homepage', async () => {
+    const { container } = openDrawerWithLogin();
+
+    submit(container);
+
+    await waitFor(() => expect(refresh).toHaveBeenCalled());
+    // A sign-in inside a drawer is a detour from the page the shopper is on,
+    // so `stay` is the default THERE — the refresh is the whole navigation.
+    expect(push).not.toHaveBeenCalled();
+  });
+
+  it('still obeys a composition that asked to be sent somewhere', async () => {
+    const { container } = openDrawerWithLogin({
+      afterSignIn: 'fixed',
+      callbackUrl: '/account'
+    });
+
+    submit(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/account'));
+    // Authored destination or not, the drawer it finished in still closes.
+    expect(isModalOpen('auth-drawer')).toBe(false);
+  });
+
+  it('leaves other modals alone unless asked to close everything', async () => {
+    const { container } = openDrawerWithLogin();
+
+    act(() => {
+      openModal('other');
+    });
+
+    submit(container);
+
+    await waitFor(() => expect(isModalOpen('auth-drawer')).toBe(false));
+    // Closing the surface a form finished in is never a surprise; closing an
+    // unrelated overlay would be.
+    expect(isModalOpen('other')).toBe(true);
+  });
+
+  it('closes every open modal when the composition authored that', async () => {
+    const { container } = openDrawerWithLogin({ closeModalsOnSuccess: true });
+
+    act(() => {
+      openModal('other');
+    });
+
+    submit(container);
+
+    // The wider meaning the toggle has always had, for a form nested two
+    // overlays deep.
+    await waitFor(() => expect(getOpenModalIds()).toHaveLength(0));
+  });
+});
+
+describe('a login on a plain page', () => {
+  it('closes nothing, and keeps its historical destination', async () => {
+    const { container } = render(loginForm());
+
+    act(() => {
+      openModal('other');
+    });
+
+    submit(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/'));
+    // No host to close, so a form on a page cannot reach an overlay it knows
+    // nothing about — which is why the toggle defaults to off.
+    expect(isModalOpen('other')).toBe(true);
+  });
+});
+
+/**
+ * The destination, decided on the VALUE rather than on a default.
+ *
+ * A host-aware DEFAULT would have been dead on arrival: the editor writes every
+ * select's default into the block it inserts, so `afterSignIn` arrives as
+ * `'fixed'` on every newly authored form and a host-aware default would only
+ * ever apply to compositions that predate the property. Reading the resolved
+ * PATH instead survives that, and it keeps an authored destination working.
+ */
+describe('where a drawer sign-in leaves the shopper', () => {
+  it('goes nowhere when the destination names nowhere in particular', async () => {
+    // `/` is the shipped default that every inserted form carries.
+    const { container } = openDrawerWithLogin({ callbackUrl: '/' });
+
+    submit(container);
+
+    await waitFor(() => expect(refresh).toHaveBeenCalled());
+    expect(push).not.toHaveBeenCalled();
+  });
+
+  it('still honours a destination the brand actually chose', async () => {
+    const { container } = openDrawerWithLogin({ callbackUrl: '/account' });
+
+    submit(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/account'));
+  });
+
+  it('keeps pushing on a plain page, where `/` is a real destination', async () => {
+    const { container } = render(loginForm({ callbackUrl: '/' }));
+
+    submit(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/'));
+  });
+});
+
+/**
+ * The same rule, for everything else that finishes inside a modal.
+ *
+ * "Only login/register/OTP" was the wrong scope: a newsletter popup, a
+ * quick-view's add-to-cart and a change-password form all finish inside a
+ * modal too. What differs is not the mechanism but the SUCCESS STATE — a
+ * sign-in leaves nothing to read, while "thanks for subscribing" is the point
+ * — so every one of them carries the same switch and only the auth forms
+ * default it on.
+ */
+describe('any block that finishes inside a modal', () => {
+  const newsletterInDrawer = (properties: Record<string, unknown>) => {
+    const view = render(
+      <ThemeModalMount modal={mkModal('newsletter-modal')}>
+        <NewsletterFormBlock
+          block={
+            block({
+              id: 'news-1',
+              type: 'newsletter-form',
+              label: 'Newsletter',
+              properties
+            }) as Block
+          }
+          placeholderId="placeholder-1"
+          sectionId="section-1"
+          currentBreakpoint="desktop"
+        />
+      </ThemeModalMount>
+    );
+
+    act(() => {
+      openModal('newsletter-modal');
+    });
+
+    return view;
+  };
+
+  const subscribeWith = (container: HTMLElement) => {
+    fireEvent.change(container.querySelector('input[type="email"]')!, {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.submit(container.querySelector('form')!);
+  };
+
+  beforeEach(() => {
+    subscribe.mockClear();
+    clearAutoOpenRecord('newsletter-modal');
+  });
+
+  it('keeps the popup open by default, so the thank-you can be read', async () => {
+    const { container } = newsletterInDrawer({});
+
+    subscribeWith(container);
+
+    await waitFor(() => expect(subscribe).toHaveBeenCalled());
+    expect(isModalOpen('newsletter-modal')).toBe(true);
+  });
+
+  it('closes it when the designer asked for that', async () => {
+    const { container } = newsletterInDrawer({ closeHostModalOnSuccess: true });
+
+    subscribeWith(container);
+
+    await waitFor(() => expect(isModalOpen('newsletter-modal')).toBe(false));
+  });
+});
+
+describe('the sign-in trio, with the switch turned off', () => {
+  it('leaves the drawer open — the default is a default, not a rule', async () => {
+    const { container } = openDrawerWithLogin({
+      closeHostModalOnSuccess: false
+    });
+
+    submit(container);
+
+    await waitFor(() => expect(refresh).toHaveBeenCalled());
+    expect(isModalOpen('auth-drawer')).toBe(true);
+  });
+});
+
+describe('what must NOT close the surface', () => {
+  it('a refused sign-in leaves the drawer up, with the message in it', async () => {
+    signIn.mockImplementationOnce(() =>
+      Promise.resolve({
+        error: 'CredentialsSignin',
+        code: JSON.stringify([
+          { type: 'non_field_errors', data: ['E-mail or password is wrong.'] }
+        ])
+      })
+    );
+
+    const { container } = openDrawerWithLogin();
+
+    submit(container);
+
+    await waitFor(() =>
+      expect(
+        container.textContent?.includes('E-mail or password is wrong.')
+      ).toBe(true)
+    );
+    // Closing here would take the error away with the form that has to be
+    // corrected — the one case where an auto-close is plainly wrong.
+    expect(isModalOpen('auth-drawer')).toBe(true);
+  });
+
+  it('closes the host even when a legacy composition asked for all modals', async () => {
+    const { container } = openDrawerWithLogin({ closeModalsOnSuccess: true });
+
+    submit(container);
+
+    // Both run: the wide close is a superset, so an already-published drawer
+    // is not stuck on it. (The narrow one then finds nothing to do.)
+    await waitFor(() => expect(getOpenModalIds()).toHaveLength(0));
+  });
+});

package/src/__tests__/otp-form-composed.test.tsx

@@ -33,6 +33,8 @@ jest.mock('next-auth/react', () => ({
 }));
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
 }));
 

package/src/__tests__/password-reset-step.test.tsx

@@ -34,6 +34,8 @@ jest.mock('next-auth/react', () => ({
 }));
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
 }));
 

package/src/__tests__/register-form-composed.test.tsx

@@ -1,7 +1,16 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import RegisterFormBlock from '../blocks/register-form-block';
+import ThemeModalMount from '../overlays/theme-modal-mount';
+import { readThemeModals } from '../overlays/modal-registry';
+import {
+  __resetOverlayBusForTests,
+  isModalOpen,
+  openModal,
+  registerModalHost
+} from '../overlays/overlay-bus';
+import { __resetModalPreviewForTests } from '../overlays/use-modal-preview';
 import { AUTH_CONSENT_NAMES } from '../blocks/auth-consent-block';
 import {
   __resetAuthFlowBusForTests,
@@ -36,6 +45,8 @@ const push = jest.fn();
 const refresh = jest.fn();
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push, refresh, replace: jest.fn() })
 }));
 
@@ -121,6 +132,8 @@ beforeEach(() => {
   push.mockClear();
   refresh.mockClear();
   __resetAuthFlowBusForTests();
+  __resetOverlayBusForTests();
+  __resetModalPreviewForTests();
 });
 
 describe('a composed register form', () => {
@@ -158,7 +171,10 @@ describe('a composed register form', () => {
     await waitFor(() => expect(signIn).toHaveBeenCalled());
 
     expect(submitted()).toMatchObject({
-      formType: 'registration',
+      // `register`, not `registration`: the credentials provider resolves the
+      // endpoint as `user[formType]` and that map has only `register`, so the
+      // old value POSTed to `${commerceUrl}undefined`.
+      formType: 'register',
       first_name: 'Ada',
       last_name: 'Lovelace',
       email: 'ada@example.com',
@@ -337,7 +353,7 @@ describe('the SMS handoff from a composed registration', () => {
     // the sign-up used — password included, which is why it never outlives the
     // journey (see `registerAuthFlowMount`).
     expect(pending.payload).toMatchObject({
-      formType: 'registration',
+      formType: 'register',
       email: 'ada@example.com',
       is_allowed: true
     });
@@ -621,7 +637,7 @@ describe('the body a composition posts', () => {
     fireEvent.submit(container.querySelector('form')!);
 
     await waitFor(() => expect(signIn).toHaveBeenCalled());
-    expect(submitted()).toMatchObject({ formType: 'registration' });
+    expect(submitted()).toMatchObject({ formType: 'register' });
     // False, not the string: a truthy `redirect` navigates away instead of
     // answering, and the form would never see its own errors again.
     expect(submitted().redirect).toBe(false);
@@ -737,3 +753,236 @@ describe('a field the design has taken off this breakpoint', () => {
     expect(submitted()).not.toHaveProperty('phone');
   });
 });
+
+/**
+ * The four marketing channels commerce records separately.
+ *
+ * They used to be fanned out from the single marketing tick, which turned a
+ * composition that asks per channel into a lie: a shopper who ticked e-mail and
+ * left SMS alone was recorded as refusing all four. A consent record is a legal
+ * record, so what travels is what the shopper actually answered.
+ */
+describe('per-channel marketing permissions', () => {
+  const channel = (name: string, order: number): Block =>
+    block({
+      id: `consent-${name}`,
+      type: 'auth-consent',
+      label: name,
+      properties: { consentType: 'custom', name, tickedValue: 'true' },
+      order
+    });
+
+  it('sends each channel its own answer when the composition asks per channel', async () => {
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2),
+      channel('email_allowed', 3),
+      channel('sms_allowed', 4)
+    ]);
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    tick(container, 'email_allowed');
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    const body = submitted();
+
+    expect(body.email_allowed).toBe(true);
+    // The refusal the shopper actually gave, not the one the blanket tick
+    // would have written over it.
+    expect(body.sms_allowed).toBe(false);
+    // Channels nobody asked about keep falling back to the blanket answer,
+    // which is what a fixed form and every published composition send.
+    expect(body.call_allowed).toBe(false);
+    expect(body.whatsapp_allowed).toBe(false);
+    // A flag re-expressed as a boolean must not also travel as `'true'`.
+    expect(body.email_allowed).not.toBe('true');
+  });
+
+  it('keeps the blanket tick for a composition that asks once', async () => {
+    const { container } = renderComposed(COMPOSED);
+
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      phone: '5551234567'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    tick(container, AUTH_CONSENT_NAMES.marketing);
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    expect(submitted()).toMatchObject({
+      email_allowed: true,
+      sms_allowed: true,
+      call_allowed: true,
+      whatsapp_allowed: true
+    });
+  });
+
+  it('lets a composition answer `confirm` on its own', async () => {
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2),
+      channel('confirm', 3)
+    ]);
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    // The agreement was accepted; the separate confirmation was not, and that
+    // is the answer commerce is told — rather than a copy of `is_allowed`.
+    expect(submitted()).toMatchObject({ is_allowed: true, confirm: false });
+  });
+});
+
+/**
+ * A refusal that names a field belongs under that field.
+ *
+ * "This e-mail is already registered" used to reach the shopper as the raw
+ * `[{"type":"field_errors",…}]` above the form, because the reader kept a
+ * message only when it was a string and commerce sends `string[]`.
+ */
+describe('a refusal commerce hangs on a field', () => {
+  const refuse = (entries: { name: string; value: unknown }[]) =>
+    signIn.mockImplementationOnce(() =>
+      Promise.resolve({
+        error: 'CredentialsSignin',
+        code: JSON.stringify([{ type: 'field_errors', data: entries }])
+      })
+    );
+
+  const fillValid = (container: HTMLElement) => {
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+  };
+
+  it('reads under the field, and leaves the form-level slot empty', async () => {
+    refuse([{ name: 'email', value: ['A user with this e-mail exists.'] }]);
+
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2)
+    ]);
+
+    fillValid(container);
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('A user with this e-mail exists.')
+      ).toBeInTheDocument()
+    );
+
+    const emailInput = container.querySelector(
+      'input[name="email"]'
+    ) as HTMLInputElement;
+
+    expect(emailInput.getAttribute('aria-invalid')).toBe('true');
+    // The authored fallback is for a refusal nobody could read, not for one
+    // whose every sentence already found a field.
+    expect(screen.queryByText('Registration failed.')).toBeNull();
+    // And the caret goes where the work is, as it does after client validation.
+    expect(document.activeElement).toBe(emailInput);
+  });
+
+  it('lifts a message for a field this composition never authored', async () => {
+    refuse([{ name: 'tckn', value: ['This field is required.'] }]);
+
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2)
+    ]);
+
+    fillValid(container);
+
+    // Not silently dropped into a provider nothing reads: the shopper is told,
+    // in the one slot that always exists.
+    await waitFor(() =>
+      expect(
+        screen.getByText('This field is required.')
+      ).toBeInTheDocument()
+    );
+  });
+});
+
+/**
+ * A sign-up that commerce escalates to SMS must NOT close the drawer.
+ *
+ * The parked payload is what an `otp-form` finishes the registration with, so
+ * closing the surface would strand it: the shopper never reaches the code
+ * screen and the account is never created. Safe today by one `return` before
+ * the close, which is exactly the kind of ordering that a later edit breaks
+ * silently — hence this case.
+ */
+describe('an SMS escalation inside a drawer', () => {
+  it('moves to the verification step and leaves the drawer open', async () => {
+    signIn.mockImplementationOnce(() =>
+      Promise.resolve({
+        error: 'CredentialsSignin',
+        code: JSON.stringify([{ type: 'otp' }])
+      })
+    );
+
+    const modal = readThemeModals([
+      { id: 'auth-drawer', name: 'Auth', presentation: 'drawer' }
+    ])[0];
+
+    registerModalHost();
+
+    const { container } = render(
+      <ThemeModalMount modal={modal}>
+        <RegisterFormBlock
+          block={
+            block({
+              id: 'register-1',
+              type: 'register-form',
+              label: 'Register Form',
+              properties: { otpStepTarget: 'auth:verify' },
+              blocks: COMPOSED
+            }) as Block
+          }
+          placeholderId="placeholder-1"
+          sectionId="section-1"
+          currentBreakpoint="desktop"
+        />
+      </ThemeModalMount>
+    );
+
+    act(() => {
+      openModal('auth-drawer');
+    });
+
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      phone: '5551234567'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(getAuthFlowState('auth')?.active).toBe('verify')
+    );
+
+    expect(isModalOpen('auth-drawer')).toBe(true);
+    expect(getPendingOtp()?.kind).toBe('register');
+  });
+});