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

package/src/__tests__/registry-parity.test.ts

@@ -39,9 +39,17 @@ const EXPECTED_BLOCK_TYPES = [
   'auth-form',
   'auth-step',
   'auth-step-title',
+  // The confirmation as a placeable block, the success twin of 'auth-error':
+  // the two forms that have a success state publish their message and this
+  // draws it where the design put it. See `auth/form-success-context.tsx`.
+  'auth-success',
   'basket-items',
   'basket-summary',
   'button',
+  // The security check commerce escalates to, placed inside an auth form.
+  'captcha',
+  // The screen the password-reset mail lands on.
+  'reset-password',
   'change-password-form',
   'checkout-flow-outlet',
   'checkout-steps',
@@ -60,6 +68,10 @@ const EXPECTED_BLOCK_TYPES = [
   'favorite-button',
   'favourites-grid',
   'forgot-password',
+  // One screen of a composed form — the confirmation, the refusal, the busy
+  // moment — as a container the form draws when it is on that screen. See
+  // `auth/form-state-context.tsx`.
+  'form-state',
   'group',
   'hamburger-menu',
   'hotspot',

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

@@ -0,0 +1,385 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import ResetPasswordBlock from '../blocks/reset-password-block';
+import { __resetAuthFlowBusForTests, getAuthFlowState } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * The screen the password-reset MAIL lands on.
+ *
+ * `forgot-password` composes the request and then handed the shopper to a page
+ * every brand hand-wrote — the same two inputs and the same four states,
+ * drifting from the drawer the journey started in, and invisible to the editor.
+ * These cases pin the four states, the one rule the form checks itself (the two
+ * passwords matching), and the attribution of a commerce refusal that arrives
+ * under the names commerce uses rather than the ones on screen.
+ */
+
+const passwordReset = jest.fn();
+const unwrap = jest.fn();
+let resetState = { isLoading: false, isSuccess: false };
+let validation: {
+  data?: { validlink: boolean };
+  isLoading: boolean;
+  isError: boolean;
+} = { data: { validlink: true }, isLoading: false, isError: false };
+
+jest.mock('@akinon/next/data/client/account', () => ({
+  usePasswordResetMutation: () => [
+    (...args: unknown[]) => {
+      passwordReset(...args);
+
+      return { unwrap };
+    },
+    resetState
+  ],
+  useGetValidatePasswordResetTokenQuery: () => validation
+}));
+
+let params: Record<string, string | string[]> = { id: ['tok', 'abc123'] };
+let search = new URLSearchParams();
+
+jest.mock('next/navigation', () => ({
+  useParams: () => params,
+  useSearchParams: () => search,
+  usePathname: () => '/users/reset/tok/abc123'
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const authField = (
+  order: number,
+  properties: Record<string, unknown>
+): Block =>
+  block({
+    id: `field-${order}`,
+    type: 'auth-field',
+    label: 'Field',
+    properties,
+    order
+  });
+
+/** The two boxes as a designer composes them: a preset one and a custom one. */
+const COMPOSED = [
+  authField(0, { fieldType: 'password', label: 'New password' }),
+  authField(1, {
+    fieldType: 'custom',
+    name: 'repeatPassword',
+    inputType: 'password',
+    label: 'New password again',
+    required: true
+  })
+];
+
+const renderBlock = (properties = {}, children?: Block[]) =>
+  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"
+    />
+  );
+
+const fill = (container: HTMLElement, first: string, second: string) => {
+  fireEvent.change(container.querySelector('input[name="password"]')!, {
+    target: { value: first }
+  });
+  fireEvent.change(container.querySelector('input[name="repeatPassword"]')!, {
+    target: { value: second }
+  });
+};
+
+beforeEach(() => {
+  passwordReset.mockClear();
+  unwrap.mockReset();
+  unwrap.mockResolvedValue(undefined);
+  resetState = { isLoading: false, isSuccess: false };
+  validation = { data: { validlink: true }, isLoading: false, isError: false };
+  params = { id: ['tok', 'abc123'] };
+  search = new URLSearchParams();
+  __resetAuthFlowBusForTests();
+});
+
+describe('the link the mail carries', () => {
+  it('is read back out of the catch-all route segment, slashes and all', async () => {
+    const { container } = renderBlock();
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
+    // The token contains slashes, so the segments have to be put back together
+    // — a single segment would be a different token.
+    expect(passwordReset).toHaveBeenCalledWith({
+      password: 'hunter2A!',
+      repeatPassword: 'hunter2A!',
+      slug: 'tok/abc123'
+    });
+  });
+
+  it('can be read from the query instead, for a brand whose route differs', async () => {
+    params = {};
+    search = new URLSearchParams('code=xyz789');
+
+    const { container } = renderBlock({
+      tokenSource: 'query',
+      tokenQueryKey: 'code'
+    });
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
+    expect(passwordReset.mock.calls[0][0].slug).toBe('xyz789');
+  });
+
+  it('answers a spent link with the expired state, not with a form', () => {
+    validation = { data: { validlink: false }, isLoading: false, isError: false };
+
+    renderBlock({ expiredLabel: 'Bu bağlantının süresi doldu.' });
+
+    expect(screen.getByText('Bu bağlantının süresi doldu.')).toBeInTheDocument();
+    expect(document.querySelector('form')).toBeNull();
+  });
+
+  it('treats no link at all as the same dead end', () => {
+    params = {};
+
+    renderBlock({ expiredLabel: 'Bu bağlantının süresi doldu.' });
+
+    expect(screen.getByText('Bu bağlantının süresi doldu.')).toBeInTheDocument();
+  });
+
+  it('sends an expired link back to the step that can issue a new one', () => {
+    validation = { data: { validlink: false }, isLoading: false, isError: false };
+
+    renderBlock({
+      expiredStepTarget: 'auth:forgot',
+      backLabel: 'Yeni bağlantı iste'
+    });
+
+    fireEvent.click(screen.getByText('Yeni bağlantı iste'));
+
+    // A fresh mail is the only way forward, and the flow is what knows where
+    // that lives.
+    expect(getAuthFlowState('auth')?.active).toBe('forgot');
+  });
+
+  it('says nothing while the link is being checked, unless asked to', () => {
+    validation = { isLoading: true, isError: false };
+
+    const { container, unmount } = renderBlock();
+    // A sentence that appears and vanishes within a fraction of a second is
+    // worse than nothing.
+    expect(container.innerHTML).toBe('');
+
+    unmount();
+    renderBlock({ checkingLabel: 'Bağlantınız kontrol ediliyor…' });
+
+    expect(
+      screen.getByText('Bağlantınız kontrol ediliyor…')
+    ).toBeInTheDocument();
+  });
+});
+
+describe('the two boxes', () => {
+  it('refuses a mismatch before the request leaves', async () => {
+    const { container } = renderBlock({
+      mismatchMessage: 'İki şifre aynı değil.'
+    });
+
+    fill(container, 'hunter2A!', 'hunter3B!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    expect(screen.getByText('İki şifre aynı değil.')).toBeInTheDocument();
+    expect(passwordReset).not.toHaveBeenCalled();
+    // Under the second box, which is the one that has to change.
+    expect(
+      container.querySelector('input[name="repeatPassword"]')
+    ).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('tells a password manager this is a NEW password', () => {
+    const { container } = renderBlock();
+
+    // Both boxes: a manager offers to generate and save only for
+    // `new-password`, and this screen is exactly where it should.
+    expect(
+      container.querySelector('input[name="password"]')
+    ).toHaveAttribute('autocomplete', 'new-password');
+    expect(
+      container.querySelector('input[name="repeatPassword"]')
+    ).toHaveAttribute('autocomplete', 'new-password');
+  });
+
+  it('draws the children instead of its own rows once composed', () => {
+    const { container } = renderBlock({}, COMPOSED);
+
+    expect(
+      container.querySelector('[data-reset-password-composed]')
+    ).not.toBeNull();
+    expect(container.querySelectorAll('[data-reset-password-field]')).toHaveLength(
+      0
+    );
+    // One of each, not two: the fixed rows are what a composition replaces.
+    expect(container.querySelectorAll('input[name="password"]')).toHaveLength(1);
+    expect(
+      container.querySelectorAll('input[name="repeatPassword"]')
+    ).toHaveLength(1);
+  });
+
+  it('submits what a composed form collected', async () => {
+    const { container } = renderBlock({}, COMPOSED);
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
+    expect(passwordReset.mock.calls[0][0]).toMatchObject({
+      password: 'hunter2A!',
+      repeatPassword: 'hunter2A!'
+    });
+  });
+});
+
+describe('what commerce refuses', () => {
+  it('lands under the box it is about, despite the name it arrives under', async () => {
+    // The mutation posts `new_password1` / `new_password2`, so that is what a
+    // refusal names — and nothing on screen submits under those.
+    unwrap.mockRejectedValue({
+      data: { new_password1: ['This password is too common.'] }
+    });
+
+    const { container } = renderBlock();
+
+    fill(container, 'password', 'password');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('This password is too common.')
+      ).toBeInTheDocument()
+    );
+
+    expect(container.querySelector('input[name="password"]')).toHaveAttribute(
+      'aria-invalid',
+      'true'
+    );
+  });
+
+  it('keeps a form-level refusal above the form', async () => {
+    unwrap.mockRejectedValue({
+      data: { non_field_errors: ['This link has already been used.'] }
+    });
+
+    const { container } = renderBlock();
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('This link has already been used.')
+      ).toBeInTheDocument()
+    );
+  });
+
+  it('falls back to the authored sentence when nothing legible came back', async () => {
+    unwrap.mockRejectedValue({ status: 500 });
+
+    const { container } = renderBlock({ errorLabel: 'Bir şeyler ters gitti.' });
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(screen.getByText('Bir şeyler ters gitti.')).toBeInTheDocument()
+    );
+  });
+});
+
+describe('once the password is changed', () => {
+  it('replaces the form, because the token is spent', () => {
+    resetState = { isLoading: false, isSuccess: true };
+
+    renderBlock({ successLabel: 'Şifreniz değiştirildi.' });
+
+    expect(screen.getByText('Şifreniz değiştirildi.')).toBeInTheDocument();
+    expect(document.querySelector('form')).toBeNull();
+  });
+
+  it('hands the journey to a step when the designer named one', async () => {
+    const { container } = renderBlock({ successStepTarget: 'auth:done' });
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(getAuthFlowState('auth')?.active).toBe('done'));
+  });
+});
+
+describe('in the canvas', () => {
+  const renderDesigner = (properties = {}) =>
+    render(
+      <ResetPasswordBlock
+        block={
+          block({
+            id: 'reset-1',
+            type: 'reset-password',
+            label: 'Reset Password',
+            properties
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+  it('shows the state the designer asked to style', () => {
+    renderDesigner({ previewState: 'expired', expiredLabel: 'Süresi doldu.' });
+
+    expect(screen.getByText('Süresi doldu.')).toBeInTheDocument();
+  });
+
+  it('shows the form by default, whatever a real token would have said', () => {
+    validation = { data: { validlink: false }, isLoading: false, isError: false };
+
+    const { container } = renderDesigner();
+
+    // The designer has no token, so asking commerce about one would answer
+    // "expired" for every composition.
+    expect(container.querySelector('form')).not.toBeNull();
+  });
+
+  it('never spends a token', () => {
+    const { container } = renderDesigner();
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    expect(passwordReset).not.toHaveBeenCalled();
+  });
+});

package/src/auth/auth-captcha.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import React from 'react';
+import { useCaptcha } from '@akinon/next/hooks';
+
+/**
+ * The security check commerce escalates to after too many attempts.
+ *
+ * Nothing in the composable auth set could answer it before: the provider
+ * reports the escalation as `{ type: 'captcha' }`, the forms sent no
+ * `captchaValidated`, and the challenge reached the shopper as the literal
+ * `[{"type":"captcha"}]` in the error slot. A brand whose commerce is
+ * abuse-protected therefore could not use composed login or sign-up at all —
+ * every submit after the threshold was a dead end.
+ *
+ * What this adds is the SEAM, not a second captcha implementation: the widget,
+ * the site key and the validation round trip all stay in `useCaptcha` from
+ * `@akinon/next`, which is the same hook the brands' own hand-written views
+ * use. What lives here is where the widget is DRAWN — a composition places a
+ * Captcha block, a childless form draws it above its submit — and how a form
+ * reaches the two things it needs at submit time.
+ *
+ * Mounted only when the form's `showCaptcha` is on, and that is deliberate:
+ * `useCaptcha` fetches the site key on mount, and a storefront whose commerce
+ * never escalates should not pay a request per auth form for a challenge it
+ * will never be shown.
+ */
+
+export interface AuthCaptchaApi {
+  /** The widget itself; renders nothing until the challenge is revealed. */
+  View: React.ComponentType<{ className?: string }>;
+  /** Whether the challenge is on screen. */
+  isVisible: boolean;
+  /** Whether the shopper has solved it. */
+  validated: boolean;
+  /**
+   * Reveal the challenge, or validate a solved one. Resolves true only when
+   * commerce accepted the answer — which is the moment a submit may be retried.
+   */
+  validate: () => Promise<boolean>;
+}
+
+const AuthCaptchaContext = React.createContext<AuthCaptchaApi | null>(null);
+
+/** The api for a Captcha block, or null when no form is offering one. */
+export const useAuthCaptcha = (): AuthCaptchaApi | null =>
+  React.useContext(AuthCaptchaContext);
+
+interface AuthCaptchaHostProps {
+  /**
+   * Called whenever the api changes, so the form can read `validated` and
+   * `validate` at submit time without re-rendering itself on every captcha
+   * state change.
+   */
+  onApi: (api: AuthCaptchaApi) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps a form's contents while `showCaptcha` is on: hands the api down to any
+ * Captcha block inside, and up to the form through `onApi`.
+ */
+export const AuthCaptchaHost = ({ onApi, children }: AuthCaptchaHostProps) => {
+  const { CaptchaView, validated, isVisible, validate } = useCaptcha();
+
+  const api = React.useMemo<AuthCaptchaApi>(
+    () => ({ View: CaptchaView, validated, isVisible, validate }),
+    // `validate` is re-created every render by the hook, so it is deliberately
+    // NOT a dependency: including it would rebuild the api — and re-run the
+    // effect below — on every keystroke in the form.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [CaptchaView, validated, isVisible]
+  );
+
+  const apiRef = React.useRef(api);
+  apiRef.current = { ...api, validate };
+
+  React.useEffect(() => {
+    onApi(apiRef.current);
+  }, [api, onApi]);
+
+  return (
+    <AuthCaptchaContext.Provider value={api}>
+      {children}
+    </AuthCaptchaContext.Provider>
+  );
+};
+
+/**
+ * The widget, drawn by the FORM rather than by a block.
+ *
+ * The fallback for a composition that has not placed a Captcha block, and the
+ * only way a childless form can show one at all — the same relationship the
+ * built-in error line has with a Form Error block. Renders nothing until
+ * commerce escalates.
+ */
+export const AuthCaptchaSlot = () => {
+  const captcha = useAuthCaptcha();
+
+  if (!captcha) return null;
+
+  return (
+    <div data-auth-captcha="">
+      <captcha.View />
+    </div>
+  );
+};
+
+/**
+ * Whether the composition placed a Captcha block itself.
+ *
+ * Same question, and the same shape of answer, as `containsAuthErrorBlock`: a
+ * form that finds one draws nothing of its own, so the challenge appears where
+ * the designer put it rather than twice.
+ */
+export const containsCaptchaBlock = (
+  blocks: { type?: string; blocks?: unknown[] }[] | undefined
+): boolean =>
+  (blocks || []).some(
+    (block) =>
+      block?.type === 'captcha' ||
+      containsCaptchaBlock(
+        block?.blocks as { type?: string; blocks?: unknown[] }[] | undefined
+      )
+  );