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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-theme
 
+## 2.0.95-beta.1
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.95-beta.1
+  - @akinon/theme-contract@2.0.95-beta.1
+
 ## 2.0.95-beta.0
 
 ### Patch Changes

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.95-beta.0",
+  "version": "2.0.95-beta.1",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.95-beta.0",
+    "@akinon/next": "2.0.95-beta.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.95-beta.0",
+    "@akinon/theme-contract": "2.0.95-beta.1",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.95-beta.0",
+    "@akinon/next": "2.0.95-beta.1",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/auth-captcha.test.tsx

@@ -0,0 +1,261 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import CaptchaBlock from '../blocks/captcha-block';
+import { Block } from '../theme-block';
+
+/**
+ * The security check commerce escalates to after too many attempts.
+ *
+ * Before this, the composable auth set could not answer it at all: the forms
+ * sent no `captchaValidated`, nothing rendered a widget, and the challenge
+ * reached the shopper as the literal `[{"type":"captcha"}]` in the error slot.
+ * A brand whose commerce is abuse-protected therefore had to keep its
+ * hand-written login.
+ *
+ * The widget itself stays in the core `useCaptcha` hook — the same one the
+ * brands' own views use — so what is pinned here is the SEAM: the flag on the
+ * body, where the widget is drawn, and the one retry a solved challenge earns.
+ */
+
+const signIn = jest.fn();
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...args),
+  useSession: () => ({ data: null, status: 'unauthenticated' })
+}));
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn() })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+const validate = jest.fn();
+let captchaValidated = false;
+
+jest.mock('@akinon/next/hooks', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' }),
+  useCaptcha: () => ({
+    // The real hook renders reCAPTCHA; a marker is enough to prove the form
+    // put the widget where the composition asked for it.
+    CaptchaView: () => <div data-testid="captcha-widget" />,
+    validated: captchaValidated,
+    isVisible: true,
+    validate
+  })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const field = (fieldType: string, order: number): Block =>
+  block({
+    id: `field-${fieldType}`,
+    type: 'auth-field',
+    label: fieldType,
+    properties: { fieldType },
+    order
+  });
+
+const renderForm = (properties: Record<string, unknown>, children?: Block[]) =>
+  render(
+    <AuthFormBlock
+      block={
+        block({
+          id: 'login-1',
+          type: 'auth-form',
+          label: 'Auth Form',
+          properties,
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const fill = (container: HTMLElement) => {
+  ['email', 'password'].forEach((name) => {
+    const input = container.querySelector(
+      `input[name="${name}"]`
+    ) as HTMLInputElement;
+    fireEvent.change(input, {
+      target: { value: name === 'email' ? 'ada@example.com' : 'hunter2' }
+    });
+  });
+};
+
+const captchaRefusal = {
+  error: 'CredentialsSignin',
+  code: JSON.stringify([{ type: 'captcha' }])
+};
+
+const bodyOf = (call: number) =>
+  signIn.mock.calls[call][1] as Record<string, unknown>;
+
+beforeEach(() => {
+  signIn.mockReset();
+  validate.mockReset();
+  captchaValidated = false;
+});
+
+describe('a form that does not offer the check', () => {
+  it('sends no captcha flag and draws no widget', async () => {
+    signIn.mockResolvedValue({ error: null, url: '/account' });
+
+    const { container } = renderForm({});
+    fill(container);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    // Every published composition posts exactly the body it posts today.
+    expect(bodyOf(0)).not.toHaveProperty('captchaValidated');
+    expect(screen.queryByTestId('captcha-widget')).toBeNull();
+  });
+
+  it('still names the escalation instead of printing its JSON', async () => {
+    signIn.mockResolvedValue(captchaRefusal);
+
+    const { container } = renderForm({
+      captchaLabel: 'Security check needed.'
+    });
+    fill(container);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(screen.getByText('Security check needed.')).toBeInTheDocument()
+    );
+    // Nothing to answer it with, so no retry is attempted.
+    expect(signIn).toHaveBeenCalledTimes(1);
+    expect(validate).not.toHaveBeenCalled();
+  });
+});
+
+describe('a form that offers the check', () => {
+  it('sends the flag and draws the widget above its submit', async () => {
+    signIn.mockResolvedValue({ error: null, url: '/account' });
+
+    const { container } = renderForm({ showCaptcha: true });
+    fill(container);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    expect(bodyOf(0).captchaValidated).toBe(false);
+    expect(screen.getByTestId('captcha-widget')).toBeInTheDocument();
+  });
+
+  it('retries once when the shopper solves the challenge', async () => {
+    signIn
+      .mockResolvedValueOnce(captchaRefusal)
+      .mockResolvedValueOnce({ error: null, url: '/account' });
+    // What `validate` resolves is the whole decision: true means commerce
+    // accepted the answer, and only then is there any point in retrying.
+    validate.mockImplementation(async () => {
+      captchaValidated = true;
+
+      return true;
+    });
+
+    const { container } = renderForm({ showCaptcha: true });
+    fill(container);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(2));
+    expect(validate).toHaveBeenCalledTimes(1);
+    // The same body, now vouched for — the shopper does not retype anything.
+    expect(bodyOf(1).email).toBe('ada@example.com');
+    expect(bodyOf(1).captchaValidated).toBe(true);
+  });
+
+  it('does not retry while the challenge is unsolved', async () => {
+    signIn.mockResolvedValue(captchaRefusal);
+    // The first `validate` only REVEALS the widget, and answers false.
+    validate.mockResolvedValue(false);
+
+    const { container } = renderForm({
+      showCaptcha: true,
+      captchaLabel: 'Security check needed.'
+    });
+    fill(container);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(validate).toHaveBeenCalled());
+
+    expect(signIn).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('Security check needed.')).toBeInTheDocument();
+    // And the widget is on screen, so the next submit can succeed.
+    expect(screen.getByTestId('captcha-widget')).toBeInTheDocument();
+  });
+
+  it('draws the widget where the composition placed it, and only there', async () => {
+    signIn.mockResolvedValue({ error: null, url: '/account' });
+
+    const { container } = renderForm({ showCaptcha: true }, [
+      field('email', 0),
+      field('password', 1),
+      block({ id: 'captcha-1', type: 'captcha', label: 'Security Check', order: 2 })
+    ]);
+
+    // One widget, not two: the form's own fallback stands down as soon as the
+    // composition owns the placement.
+    expect(screen.getAllByTestId('captcha-widget')).toHaveLength(1);
+    expect(
+      container.querySelector('[data-auth-captcha]')?.parentElement
+    ).not.toBeNull();
+  });
+});
+
+describe('the block on its own', () => {
+  it('renders nothing outside a form that offers a challenge', () => {
+    const { container } = render(
+      <CaptchaBlock
+        block={block({ id: 'captcha-1', type: 'captcha', label: 'Security Check' })}
+        placeholderId="p"
+        sectionId="s"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('is a visible marker in the canvas, where the real widget cannot load', () => {
+    render(
+      <CaptchaBlock
+        block={
+          block({
+            id: 'captcha-1',
+            type: 'captcha',
+            label: 'Security Check',
+            properties: { label: 'Güvenlik doğrulaması' }
+          }) as Block
+        }
+        placeholderId="p"
+        sectionId="s"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+    expect(screen.getByText('Güvenlik doğrulaması')).toBeInTheDocument();
+  });
+});

package/src/__tests__/auth-commerce-events.test.tsx

@@ -32,7 +32,11 @@ jest.mock('next/navigation', () => ({
     refresh: jest.fn(),
     replace: jest.fn()
   }),
-  usePathname: () => '/account/orders'
+  usePathname: () => '/account/orders',
+  // The login form reads the query too, since where a sign-in leaves the
+  // shopper can come from `?callbackUrl`/`?next` — a double without this
+  // throws before a single event can be measured.
+  useSearchParams: () => new URLSearchParams()
 }));
 
 jest.mock('@akinon/next/data/client/user', () => ({

package/src/__tests__/auth-destination.test.tsx

@@ -0,0 +1,348 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import AuthFlowBlock from '../blocks/auth-flow-block';
+import {
+  isSafeInternalPath,
+  readReturnPath,
+  resolveAuthDestination,
+  resolveSignedInDestination,
+  withReturnPath
+} from '../auth/auth-destination';
+import { __resetAuthFlowBusForTests } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * Where a shopper goes after signing in, and what one who is ALREADY signed in
+ * sees on a login screen.
+ *
+ * Both used to have one compiled-in answer. The destination was `/`: a shopper
+ * sent to sign in from the basket, or one who opened the header's drawer two
+ * clicks into a product page, was taken to the homepage — and the storefront's
+ * own `?callbackUrl` / `?next` were ignored, which is what the brands' own
+ * views read. The signed-in case had no answer at all: a back button after
+ * login, a bookmarked /auth or a second tab showed a member a login form, and
+ * submitting it re-authenticated a live session.
+ */
+
+const signIn = jest.fn(() => Promise.resolve({ error: null, url: '/account' }));
+let status = 'unauthenticated';
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...args),
+  useSession: () => ({ data: null, status })
+}));
+
+const push = jest.fn();
+const replace = jest.fn();
+const refresh = jest.fn();
+let search = new URLSearchParams();
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push, replace, refresh }),
+  useSearchParams: () => search,
+  usePathname: () => '/orders/checkout'
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const renderLogin = (properties: Record<string, unknown> = {}) =>
+  render(
+    <AuthFormBlock
+      block={
+        block({
+          id: 'login-1',
+          type: 'auth-form',
+          label: 'Auth Form',
+          properties
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const submitLogin = (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();
+  replace.mockClear();
+  refresh.mockClear();
+  status = 'unauthenticated';
+  search = new URLSearchParams();
+  __resetAuthFlowBusForTests();
+});
+
+describe('a destination read out of the url', () => {
+  it('refuses anything that is not a path on this origin', () => {
+    expect(isSafeInternalPath('/basket')).toBe(true);
+    expect(isSafeInternalPath('/orders/checkout?step=2')).toBe(true);
+
+    // The whole point of reading a destination out of the url is that anyone
+    // can write one — a mail, an ad, a link on another site.
+    expect(isSafeInternalPath('https://evil.example/login')).toBe(false);
+    // Protocol-relative: starts with a slash, means a different host.
+    expect(isSafeInternalPath('//evil.example')).toBe(false);
+    expect(isSafeInternalPath('/\\evil.example')).toBe(false);
+    expect(isSafeInternalPath('javascript:alert(1)')).toBe(false);
+    expect(isSafeInternalPath('')).toBe(false);
+    expect(isSafeInternalPath(null)).toBe(false);
+  });
+
+  it('reads both keys a pz storefront uses, first one winning', () => {
+    expect(
+      readReturnPath(new URLSearchParams('callbackUrl=/basket&next=/account'))
+    ).toBe('/basket');
+    // `next` is what the OAuth middleware writes when it hands a shopper back.
+    expect(readReturnPath(new URLSearchParams('next=/account'))).toBe(
+      '/account'
+    );
+    expect(
+      readReturnPath(new URLSearchParams('callbackUrl=https://evil.example'))
+    ).toBeNull();
+    expect(readReturnPath(null)).toBeNull();
+  });
+
+  it('answers each mode the way its placement needs', () => {
+    const search = new URLSearchParams('callbackUrl=/basket');
+
+    expect(
+      resolveAuthDestination({ mode: 'return', authored: '/', search })
+    ).toBe('/basket');
+    // Nothing to navigate to: the shopper is already where they want to be.
+    expect(
+      resolveAuthDestination({ mode: 'stay', authored: '/x', search })
+    ).toBeNull();
+    // The historical answer, and still the default.
+    expect(
+      resolveAuthDestination({ mode: 'fixed', authored: '/account', search })
+    ).toBe('/account');
+    // A junk authored value cannot become a navigation either.
+    expect(
+      resolveAuthDestination({ mode: 'fixed', authored: 'https://evil', search })
+    ).toBe('/');
+  });
+
+  it('sends a signed-in shopper where they were going, else to the account', () => {
+    expect(
+      resolveSignedInDestination('/account', new URLSearchParams('next=/basket'))
+    ).toBe('/basket');
+    expect(resolveSignedInDestination('/account', null)).toBe('/account');
+  });
+
+  it('records the origin on a login link, once and never over an author', () => {
+    expect(withReturnPath('/auth', '/orders/checkout')).toBe(
+      '/auth?callbackUrl=%2Forders%2Fcheckout'
+    );
+    // Not twice, and not over an answer the author wrote themselves.
+    expect(withReturnPath('/auth?callbackUrl=/basket', '/x')).toBe(
+      '/auth?callbackUrl=/basket'
+    );
+    // Nothing to record, or nowhere safe to record it on.
+    expect(withReturnPath('/auth', undefined)).toBe('/auth');
+    expect(withReturnPath('https://brand.example/auth', '/x')).toBe(
+      'https://brand.example/auth'
+    );
+  });
+});
+
+describe('what a finished sign-in does', () => {
+  it('goes where the url asked, in return mode', async () => {
+    search = new URLSearchParams('callbackUrl=/basket');
+
+    const { container } = renderLogin({ afterSignIn: 'return' });
+    submitLogin(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/basket'));
+    expect(refresh).toHaveBeenCalled();
+  });
+
+  it('stays put in a drawer, and still refreshes the page', async () => {
+    const { container } = renderLogin({ afterSignIn: 'stay' });
+    submitLogin(container);
+
+    await waitFor(() => expect(refresh).toHaveBeenCalled());
+    // The refresh IS the navigation: the session has to reach the page the
+    // shopper is standing on, and nothing else should move.
+    expect(push).not.toHaveBeenCalled();
+  });
+
+  it('keeps the historical destination when nothing was authored', async () => {
+    const { container } = renderLogin({});
+    submitLogin(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/'));
+  });
+
+  it('never navigates to a destination the url smuggled in', async () => {
+    search = new URLSearchParams('callbackUrl=https://evil.example');
+
+    const { container } = renderLogin({
+      afterSignIn: 'return',
+      callbackUrl: '/account'
+    });
+    submitLogin(container);
+
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/account'));
+  });
+});
+
+describe('a shopper who is already signed in', () => {
+  it('is told, instead of being shown a form they cannot use', () => {
+    status = 'authenticated';
+
+    renderLogin({ whenSignedIn: 'message', signedInLabel: 'Zaten girişliniz.' });
+
+    expect(screen.getByText('Zaten girişliniz.')).toBeInTheDocument();
+    expect(document.querySelector('form')).toBeNull();
+  });
+
+  it('is taken where they were going, with replace so Back does not loop', () => {
+    status = 'authenticated';
+    search = new URLSearchParams('callbackUrl=/basket');
+
+    renderLogin({ whenSignedIn: 'redirect' });
+
+    expect(replace).toHaveBeenCalledWith('/basket');
+  });
+
+  it('falls back to the authored account page', () => {
+    status = 'authenticated';
+
+    renderLogin({ whenSignedIn: 'redirect', signedInHref: '/account/orders' });
+
+    expect(replace).toHaveBeenCalledWith('/account/orders');
+  });
+
+  it('cannot re-authenticate a live session, whatever the policy says', async () => {
+    status = 'authenticated';
+
+    // Left on the historical `form` policy: the form is still on screen, so
+    // the guard is what stops the password going back on the wire.
+    const { container } = renderLogin({
+      signedInLabel: 'Zaten girişliniz.'
+    });
+    submitLogin(container);
+
+    await waitFor(() =>
+      expect(screen.getByText('Zaten girişliniz.')).toBeInTheDocument()
+    );
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('still sees the form in the canvas, so it can be styled', () => {
+    status = 'authenticated';
+
+    const { container } = render(
+      <AuthFormBlock
+        block={
+          block({
+            id: 'login-1',
+            type: 'auth-form',
+            label: 'Auth Form',
+            properties: { whenSignedIn: 'message' }
+          }) as Block
+        }
+        placeholderId="p"
+        sectionId="s"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+    expect(container.querySelector('form')).not.toBeNull();
+    expect(replace).not.toHaveBeenCalled();
+  });
+});
+
+describe('a journey that knows the shopper', () => {
+  const step = (stepKey: string, text: string): Block =>
+    block({
+      id: `step-${stepKey}`,
+      type: 'auth-step',
+      label: stepKey,
+      properties: { stepKey },
+      blocks: [
+        block({
+          id: `text-${stepKey}`,
+          type: 'text',
+          label: 'Copy',
+          value: text
+        })
+      ]
+    });
+
+  const renderFlow = (properties: Record<string, unknown>) =>
+    render(
+      <AuthFlowBlock
+        block={
+          block({
+            id: 'flow-1',
+            type: 'auth-flow',
+            label: 'Auth Flow',
+            properties: { flowId: 'auth', ...properties },
+            blocks: [step('login', 'Log in'), step('member', 'Welcome back')]
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+  it('opens on the member step for a signed-in shopper', () => {
+    status = 'authenticated';
+
+    renderFlow({ initialStep: 'login', signedInStep: 'member' });
+
+    expect(screen.getByText('Welcome back')).toBeInTheDocument();
+    expect(screen.queryByText('Log in')).toBeNull();
+  });
+
+  it('opens on the initial step for a guest, and while the session loads', () => {
+    renderFlow({ initialStep: 'login', signedInStep: 'member' });
+
+    expect(screen.getByText('Log in')).toBeInTheDocument();
+
+    // `loading` is not treated as signed in: the flow would open on the member
+    // step for a guest and then swap under them.
+    status = 'loading';
+    renderFlow({ initialStep: 'login', signedInStep: 'member' });
+
+    expect(screen.getAllByText('Log in').length).toBeGreaterThan(0);
+  });
+
+  it('leaves a flow that named no member step exactly as it was', () => {
+    status = 'authenticated';
+
+    renderFlow({ initialStep: 'login' });
+
+    expect(screen.getByText('Log in')).toBeInTheDocument();
+  });
+});