@akinon/pz-theme 2.0.95-rc.0 → 2.0.95-rc.1

package/src/__tests__/auth-form-success-block.test.tsx

@@ -0,0 +1,429 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import ForgotPasswordBlock from '../blocks/forgot-password-block';
+import ResetPasswordBlock from '../blocks/reset-password-block';
+import { containsAuthSuccessBlock } from '../auth/form-success-context';
+import { __resetAuthFlowBusForTests } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * Where the CONFIRMATION lands.
+ *
+ * The error half of this was solved a while ago: the form publishes its message
+ * and a Form Error block draws it where the design says. The success half was
+ * still a node the form drew itself — and in these two blocks that node
+ * REPLACES the whole form, so a brand could recolour "a reset link is on its
+ * way" through a style part and nothing else: no icon beside it, no heading
+ * above it, no second line, no way to move it.
+ *
+ * These cases hold the three halves of the contract that fixes it: the block
+ * draws the message, the built-in copy stands down, and — the part that has no
+ * counterpart on the error side — the composition STAYS on screen, because a
+ * block inside a form that has been swapped out is unmounted and would draw
+ * nothing at all.
+ */
+
+let forgotState = { isLoading: false, isSuccess: false };
+const forgotPassword = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+const passwordReset = jest.fn();
+const unwrap = jest.fn();
+let resetState = { isLoading: false, isSuccess: false };
+
+/**
+ * ONE mock for both forms, because `jest.config`'s moduleNameMapper collapses
+ * every `@akinon/next/data/client/*` onto the same file: a second `jest.mock`
+ * for `account` would replace this one rather than sit beside it, and whichever
+ * form lost would call an undefined hook.
+ */
+jest.mock('@akinon/next/data/client/user', () => {
+  const handler = {
+    get(_target: unknown, prop: string) {
+      if (prop === '__esModule') return true;
+      if (typeof prop !== 'string') return undefined;
+      if (prop === 'useForgotPasswordMutation') {
+        return () => [forgotPassword, forgotState];
+      }
+      if (prop === 'usePasswordResetMutation') {
+        return () => [
+          (...args: unknown[]) => {
+            passwordReset(...args);
+
+            return { unwrap };
+          },
+          resetState
+        ];
+      }
+      if (prop === 'useGetValidatePasswordResetTokenQuery') {
+        return () => ({
+          data: { validlink: true },
+          isLoading: false,
+          isError: false
+        });
+      }
+      if (prop.endsWith('Mutation')) {
+        return () => [
+          jest.fn(() => ({ unwrap: () => Promise.resolve({}) })),
+          { isLoading: false, isSuccess: false, isError: false }
+        ];
+      }
+      if (prop.endsWith('Query')) {
+        return () => ({
+          data: undefined,
+          isLoading: false,
+          isSuccess: true,
+          refetch: jest.fn()
+        });
+      }
+      return () => undefined;
+    }
+  };
+
+  return new Proxy({}, handler);
+});
+
+jest.mock('next/navigation', () => ({
+  useParams: () => ({ id: ['tok', 'abc123'] }),
+  usePathname: () => '/users/reset/tok/abc123',
+  useSearchParams: () => new URLSearchParams(),
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const successBlock = (
+  properties: Record<string, unknown> = {},
+  overrides: Partial<Block> = {}
+) =>
+  block({
+    id: 'success-row',
+    type: 'auth-success',
+    label: 'Form Success',
+    properties,
+    order: 1,
+    ...overrides
+  });
+
+const emailField = block({
+  id: 'field-email',
+  type: 'auth-field',
+  label: 'E-mail Field',
+  properties: { fieldType: 'email', label: 'E-mail' },
+  order: 0
+});
+
+const cta = block({
+  id: 'cta',
+  type: 'button',
+  label: 'Submit Button',
+  properties: { text: 'Send reset link', tag: 'button', type: 'submit' },
+  order: 2
+});
+
+const renderForgot = (
+  children: Block[],
+  properties: Record<string, unknown> = {},
+  isDesigner = false
+) =>
+  render(
+    <ForgotPasswordBlock
+      block={
+        block({
+          id: 'forgot-1',
+          type: 'forgot-password',
+          label: 'Forgot Password',
+          properties: { showSubmit: false, ...properties },
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+      isDesigner={isDesigner}
+    />
+  );
+
+const passwordFields = [
+  block({
+    id: 'field-password',
+    type: 'auth-field',
+    label: 'Password',
+    properties: { fieldType: 'password', label: 'New password' },
+    order: 0
+  }),
+  block({
+    id: 'field-repeat',
+    type: 'auth-field',
+    label: 'Repeat',
+    properties: {
+      fieldType: 'custom',
+      name: 'repeatPassword',
+      inputType: 'password',
+      label: 'New password again'
+    },
+    order: 1
+  })
+];
+
+const renderReset = (
+  children: Block[],
+  properties: Record<string, unknown> = {}
+) =>
+  render(
+    <ResetPasswordBlock
+      block={
+        block({
+          id: 'reset-1',
+          type: 'reset-password',
+          label: 'Reset Password',
+          properties,
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+  forgotState = { isLoading: false, isSuccess: false };
+  resetState = { isLoading: false, isSuccess: false };
+  forgotPassword.mockClear();
+  passwordReset.mockClear();
+  unwrap.mockReset();
+  unwrap.mockResolvedValue(undefined);
+});
+
+describe('finding the block that draws the confirmation', () => {
+  it('finds one placed directly in the form', () => {
+    expect(containsAuthSuccessBlock([emailField, successBlock()])).toBe(true);
+  });
+
+  it('finds one tucked inside a group, however deep', () => {
+    expect(
+      containsAuthSuccessBlock([
+        block({
+          id: 'group',
+          type: 'group',
+          blocks: [block({ id: 'inner', type: 'group', blocks: [successBlock()] })]
+        })
+      ])
+    ).toBe(true);
+  });
+
+  it('ignores a hidden one, which draws nothing wherever it sits', () => {
+    expect(
+      containsAuthSuccessBlock([successBlock({}, { hidden: true })])
+    ).toBe(false);
+  });
+
+  it('says no for a composition with none, and for none at all', () => {
+    expect(containsAuthSuccessBlock([emailField])).toBe(false);
+    expect(containsAuthSuccessBlock(undefined)).toBe(false);
+  });
+});
+
+describe('a password-reset request that draws its own confirmation', () => {
+  it('shows the message in the block, and keeps the form it was placed in', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot(
+      [emailField, successBlock(), cta],
+      { successLabel: 'Bir bağlantı yolda.' }
+    );
+
+    expect(screen.getByText('Bir bağlantı yolda.')).toBeInTheDocument();
+    // Inside the block the design placed — not in a node appended by the form.
+    expect(
+      container.querySelector('[data-auth-success]')?.textContent
+    ).toContain('Bir bağlantı yolda.');
+    // And the composition is still standing, which is what makes the block
+    // reachable at all: replaced, it would have been unmounted.
+    expect(container.querySelector('form')).not.toBeNull();
+    expect(container.querySelector('input[name="email"]')).not.toBeNull();
+  });
+
+  it('draws the message where the design put it, above the CTA', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot([emailField, successBlock(), cta], {
+      successLabel: 'Bir bağlantı yolda.'
+    });
+
+    const message = container.querySelector('[data-auth-success]')!;
+    const button = screen.getByText('Send reset link');
+
+    expect(
+      message.compareDocumentPosition(button) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
+  it('marks the form as finished so the state can be dressed', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot([emailField, successBlock(), cta]);
+
+    expect(
+      container
+        .querySelector('[data-forgot-password-composed]')
+        ?.getAttribute('data-forgot-password-state')
+    ).toBe('success');
+  });
+
+  it('keeps its send button, because pressing it again is a resend', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot([emailField, successBlock()], {
+      showSubmit: true
+    });
+
+    // Unlike the reset form below: the address is still valid, so a second
+    // submit is the "didn't arrive?" affordance rather than a guaranteed error.
+    expect(
+      container.querySelector('[data-forgot-password-submit]')
+    ).not.toBeNull();
+  });
+
+  it('draws nothing at all before the mail is away', () => {
+    const { container } = renderForgot([emailField, successBlock(), cta], {
+      successLabel: 'Bir bağlantı yolda.'
+    });
+
+    expect(container.querySelector('[data-auth-success]')).toBeNull();
+    expect(screen.queryByText('Bir bağlantı yolda.')).toBeNull();
+  });
+
+  it('still requests the reset the way it always did', async () => {
+    const { container } = renderForgot([emailField, successBlock(), cta]);
+
+    fireEvent.change(container.querySelector('input[name="email"]')!, {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(forgotPassword).toHaveBeenCalled());
+    expect(forgotPassword).toHaveBeenCalledWith({ email: 'ada@example.com' });
+  });
+});
+
+describe('a composition that placed no such block', () => {
+  it('is replaced by the built-in copy, exactly as before', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot([emailField, cta], {
+      successLabel: 'Bir bağlantı yolda.'
+    });
+
+    expect(screen.getByText('Bir bağlantı yolda.')).toBeInTheDocument();
+    // The fence: nothing about this change may alter a published composition.
+    expect(container.querySelector('form')).toBeNull();
+  });
+
+  it('counts a HIDDEN block as none, so the shopper is still told', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot(
+      [emailField, successBlock({}, { hidden: true }), cta],
+      { successLabel: 'Bir bağlantı yolda.' }
+    );
+
+    expect(screen.getByText('Bir bağlantı yolda.')).toBeInTheDocument();
+    expect(container.querySelector('form')).toBeNull();
+  });
+});
+
+describe('the canvas', () => {
+  it('shows the real copy through the block on the preview toggle', () => {
+    const { container } = renderForgot(
+      [emailField, successBlock(), cta],
+      { successLabel: 'Bir bağlantı yolda.', previewSuccess: true },
+      true
+    );
+
+    // The state a designer is dressing, in the place they put it, with the
+    // form still around it — which is what they are dressing it against.
+    expect(
+      container.querySelector('[data-auth-success]')?.textContent
+    ).toContain('Bir bağlantı yolda.');
+    expect(container.querySelector('form')).not.toBeNull();
+  });
+
+  it('shows the block preview copy while the form is in its normal state', () => {
+    renderForgot(
+      [emailField, successBlock({ previewMessage: 'Kutunuzu kontrol edin.' }), cta],
+      {},
+      true
+    );
+
+    // Selectable and dressable without reaching the state for real, and
+    // announced to nobody: the confirmation has not happened.
+    const message = document.querySelector('[data-auth-success]')!;
+
+    expect(message.textContent).toContain('Kutunuzu kontrol edin.');
+    expect(message.getAttribute('role')).toBeNull();
+    expect(message.getAttribute('data-auth-success-state')).toBe('preview');
+  });
+});
+
+describe('the screen the mail lands on', () => {
+  it('keeps its composition and shows the message in the block', () => {
+    resetState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderReset([...passwordFields, successBlock()], {
+      successLabel: 'Şifreniz değiştirildi.'
+    });
+
+    expect(
+      container.querySelector('[data-auth-success]')?.textContent
+    ).toContain('Şifreniz değiştirildi.');
+    expect(container.querySelector('form')).not.toBeNull();
+  });
+
+  it('drops the submit, because the token is spent', () => {
+    resetState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderReset([...passwordFields, successBlock()]);
+
+    expect(container.querySelector('[data-reset-password-submit]')).toBeNull();
+  });
+
+  it('refuses a second submit, which is all a detached CTA could reach', () => {
+    resetState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderReset([...passwordFields, successBlock()], {
+      formHtmlId: 'reset-form'
+    });
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    // A Button carrying the form's id sits outside this subtree, so dropping
+    // the built-in button cannot stop it — the handler has to.
+    expect(passwordReset).not.toHaveBeenCalled();
+  });
+
+  it('is still replaced outright where no block was placed', () => {
+    resetState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderReset(passwordFields, {
+      successLabel: 'Şifreniz değiştirildi.'
+    });
+
+    expect(screen.getByText('Şifreniz değiştirildi.')).toBeInTheDocument();
+    expect(container.querySelector('form')).toBeNull();
+  });
+});

package/src/__tests__/auth-form-validation.test.tsx

@@ -22,6 +22,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__/auth-slot-coverage.test.ts

@@ -23,7 +23,12 @@ const APP_DIR = path.resolve(
 /** Placeholder key -> the file (relative to `[pz]`) mounting it. */
 const EXPECTED_MOUNTS: Record<string, string> = {
   auth: 'auth/(login)/layout.tsx',
-  forgotPassword: 'users/password/reset/layout.tsx'
+  forgotPassword: 'users/password/reset/layout.tsx',
+  // The screen the reset MAIL lands on, which is a different page from the one
+  // that asks for the mail. It was the last auth slug the editor offered and
+  // nothing mounted: a designer could compose the screen, publish it, and the
+  // shopper coming out of their inbox still met the hand-written page.
+  resetPassword: 'users/reset/[[...id]]/layout.tsx'
 };
 
 /**
@@ -52,6 +57,9 @@ const AUTH_PICKER_PATHS = [
   '/register',
   '/auth/forgot-password',
   '/users/password/reset',
+  // The mail's own link, token and all — a catch-all route, so the path has
+  // segments the rule has to see past.
+  '/users/reset/tok/abc123',
   '/auth/guest',
   '/users/auth/guest'
 ];

package/src/__tests__/auth-step-title.test.tsx

@@ -18,6 +18,8 @@ import { Block } from '../theme-block';
  */
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn() })
 }));
 

package/src/__tests__/block-action-audience.test.ts

@@ -0,0 +1,154 @@
+import {
+  BLOCK_ACTION_AUDIENCES,
+  applyVisibilityRulesToSections
+} from '../utils/visibility-rules';
+import { Block } from '../theme-block';
+import { Section } from '../theme-section';
+
+/**
+ * Who a block's ACTION is for.
+ *
+ * The bug this exists for: the account button renders its own link — to the
+ * account for a member, to the login page for a guest — while the designer
+ * wires "open the login drawer" onto the block itself. Both fired on one
+ * click, so a signed-in shopper landed on their own account page with the
+ * login drawer open over it.
+ *
+ * Resolved in the pass that already knows who the shopper is, so an action the
+ * shopper is not the audience for is REMOVED rather than ignored at click
+ * time — the wrapper then never claims to be a dialog trigger either.
+ */
+
+const context = (authState: 'authenticated' | 'guest' | 'loading') => ({
+  authState,
+  breakpoint: 'desktop',
+  locale: 'tr',
+  currency: 'TRY',
+  pathname: '/account',
+  searchParams: null
+});
+
+const sectionWith = (block: Block): Section =>
+  ({
+    id: 'section-1',
+    type: 'custom',
+    label: 'Header',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [block]
+  }) as unknown as Section;
+
+const blockOf = (
+  type: string,
+  properties: Record<string, unknown>
+): Block =>
+  ({
+    id: 'block-1',
+    type,
+    label: type,
+    value: '',
+    order: 0,
+    hidden: false,
+    properties,
+    styles: {}
+  }) as unknown as Block;
+
+const actionTypeAfter = (
+  block: Block,
+  authState: 'authenticated' | 'guest' | 'loading'
+): unknown =>
+  applyVisibilityRulesToSections([sectionWith(block)], context(authState))[0]
+    .blocks[0].properties?.actionType;
+
+describe('an account button that opens a modal', () => {
+  const accountButton = blockOf('account-button', {
+    actionType: 'open-modal',
+    actionTarget: 'm-login'
+  });
+
+  it('keeps the drawer for a guest', () => {
+    expect(actionTypeAfter(accountButton, 'guest')).toBe('open-modal');
+  });
+
+  it('drops it for a member, who is already being taken to their account', () => {
+    expect(actionTypeAfter(accountButton, 'authenticated')).toBe('none');
+  });
+
+  it('keeps it while the session is unknown', () => {
+    // Withholding the drawer through the first client render would break the
+    // common case to fix the rare one.
+    expect(actionTypeAfter(accountButton, 'loading')).toBe('open-modal');
+  });
+
+  it('obeys a brand that really wants it for everyone', () => {
+    const authored = blockOf('account-button', {
+      actionType: 'open-modal',
+      actionTarget: 'm-login',
+      actionAudience: 'all'
+    });
+
+    expect(actionTypeAfter(authored, 'authenticated')).toBe('open-modal');
+  });
+
+  it('leaves its navigation alone — only the wired action is scoped', () => {
+    const navigating = blockOf('account-button', { actionType: 'none' });
+
+    expect(actionTypeAfter(navigating, 'authenticated')).toBe('none');
+  });
+});
+
+describe('any other block', () => {
+  it('is unscoped unless the designer says otherwise', () => {
+    const button = blockOf('button', {
+      actionType: 'open-modal',
+      actionTarget: 'm-newsletter'
+    });
+
+    expect(actionTypeAfter(button, 'authenticated')).toBe('open-modal');
+    expect(actionTypeAfter(button, 'guest')).toBe('open-modal');
+  });
+
+  it('can be scoped to guests — a "sign in" CTA in a campaign band', () => {
+    const cta = blockOf('button', {
+      actionType: 'open-modal',
+      actionTarget: 'm-login',
+      actionAudience: 'guest'
+    });
+
+    expect(actionTypeAfter(cta, 'guest')).toBe('open-modal');
+    expect(actionTypeAfter(cta, 'authenticated')).toBe('none');
+  });
+
+  it('can be scoped to members — a "my coupons" drawer', () => {
+    const memberOnly = blockOf('button', {
+      actionType: 'open-modal',
+      actionTarget: 'm-coupons',
+      actionAudience: 'authenticated'
+    });
+
+    expect(actionTypeAfter(memberOnly, 'authenticated')).toBe('open-modal');
+    expect(actionTypeAfter(memberOnly, 'guest')).toBe('none');
+    // Unknown is not a member, so the action stays off until it is known.
+    expect(actionTypeAfter(memberOnly, 'loading')).toBe('none');
+  });
+
+  it('reads the answer for the breakpoint being rendered', () => {
+    const perBreakpoint = blockOf('button', {
+      actionType: { desktop: 'open-modal' },
+      actionTarget: { desktop: 'm-login' },
+      actionAudience: { desktop: 'authenticated' }
+    });
+
+    expect(actionTypeAfter(perBreakpoint, 'guest')).toBe('none');
+  });
+
+  it('offers exactly three audiences', () => {
+    expect([...BLOCK_ACTION_AUDIENCES]).toEqual([
+      'all',
+      'guest',
+      'authenticated'
+    ]);
+  });
+});