@akinon/pz-theme 2.0.87-rc.0 → 2.0.88-beta.0

package/CHANGELOG.md

@@ -1,38 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.87-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.87-rc.0
-  - @akinon/theme-contract@2.0.87-rc.0
+## 2.0.88-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.88-beta.0
+  - @akinon/theme-contract@2.0.88-beta.0
+
+## 2.0.87
+
+### Patch Changes
+
+- 2fd90e5d: ZERO-4902: Implement auth commerce event tracking for login and registration flows
+  - @akinon/next@2.0.87
+  - @akinon/theme-contract@2.0.87
 
 ## 2.0.86
 

package/package.json

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

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

@@ -0,0 +1,206 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import AccountMenuBlock from '../blocks/account-menu-block';
+import { COMMERCE_EVENT_NAME, CommerceEventDetail } from '../utils/analytics';
+import { Block } from '../theme-block';
+
+/**
+ * The auth moments a brand measures its membership funnel with (ZERO-4902):
+ * a successful login, a registration that succeeded or was REJECTED, and the
+ * logout click. The blocks report them as neutral `pz:commerce` signals — the
+ * sign_up one carrying its outcome on `status` — and stay silent for the
+ * moments the storefronts do not report: a failed login, and the captcha/OTP
+ * hand-off, which is a pending step rather than a verdict.
+ */
+
+const signIn = jest.fn();
+const signOut = jest.fn();
+const logoutUnwrap = jest.fn(() => Promise.resolve({}));
+const logoutMutation = jest.fn(() => ({ unwrap: logoutUnwrap }));
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...args),
+  signOut: (...args: unknown[]) => signOut(...args),
+  useSession: () => ({ data: null, status: 'unauthenticated' })
+}));
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    refresh: jest.fn(),
+    replace: jest.fn()
+  }),
+  usePathname: () => '/account/orders'
+}));
+
+jest.mock('@akinon/next/data/client/user', () => ({
+  useLogoutMutation: () => [logoutMutation, { isLoading: false }]
+}));
+
+const authField = (id: string, fieldType: string, order: number): Block => ({
+  id,
+  type: 'auth-field',
+  label: id,
+  properties: { fieldType },
+  styles: {},
+  order,
+  hidden: false
+});
+
+const formBlock = (properties: Record<string, unknown>): Block => ({
+  id: 'auth-form-1',
+  type: 'auth-form',
+  label: 'Auth Form',
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [
+    authField('field-email', 'email', 0),
+    authField('field-password', 'password', 1)
+  ]
+});
+
+const renderForm = (properties: Record<string, unknown> = {}) =>
+  render(
+    <AuthFormBlock
+      block={formBlock(properties)}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const fillAndSubmit = () => {
+  fireEvent.change(document.querySelector('input[name="email"]') as Element, {
+    target: { value: 'shopper@example.com' }
+  });
+  fireEvent.change(
+    document.querySelector('input[name="password"]') as Element,
+    { target: { value: 'Secret123!' } }
+  );
+  fireEvent.submit(document.querySelector('form') as HTMLFormElement);
+};
+
+const capturedEvents: CommerceEventDetail[] = [];
+const captureCommerce = (event: Event) => {
+  capturedEvents.push((event as CustomEvent<CommerceEventDetail>).detail);
+};
+
+// next-auth v5 keeps `error` at the enum name and serialises the AuthError[]
+// onto `code` — the same shape the brands' own views parse.
+const rejectedSignIn = (errors: Array<Record<string, unknown>>) => ({
+  error: 'CredentialsSignin',
+  code: JSON.stringify(errors)
+});
+
+describe('auth commerce signals', () => {
+  beforeEach(() => {
+    capturedEvents.length = 0;
+    signIn.mockReset();
+    signOut.mockClear();
+    logoutMutation.mockClear();
+    logoutUnwrap.mockClear();
+    window.addEventListener(COMMERCE_EVENT_NAME, captureCommerce);
+  });
+
+  afterEach(() => {
+    window.removeEventListener(COMMERCE_EVENT_NAME, captureCommerce);
+  });
+
+  it('reports a successful registration as sign_up with the success outcome', async () => {
+    signIn.mockResolvedValue({ error: null, url: '/' });
+
+    renderForm({ mode: 'register' });
+    fillAndSubmit();
+
+    await waitFor(() => expect(capturedEvents).toHaveLength(1));
+    expect(capturedEvents[0]).toMatchObject({
+      action: 'sign_up',
+      status: 'success'
+    });
+  });
+
+  it('reports a REJECTED registration as sign_up with the error outcome', async () => {
+    signIn.mockResolvedValue(
+      rejectedSignIn([
+        { type: 'field_errors', data: [{ name: 'email', value: 'Taken.' }] }
+      ])
+    );
+
+    renderForm({ mode: 'register' });
+    fillAndSubmit();
+
+    await waitFor(() => expect(capturedEvents).toHaveLength(1));
+    expect(capturedEvents[0]).toMatchObject({
+      action: 'sign_up',
+      status: 'error'
+    });
+  });
+
+  it('stays silent when the registration hands off to OTP or captcha', async () => {
+    signIn.mockResolvedValueOnce(rejectedSignIn([{ type: 'otp' }]));
+
+    renderForm({ mode: 'register' });
+    fillAndSubmit();
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(1));
+
+    signIn.mockResolvedValueOnce(rejectedSignIn([{ type: 'captcha' }]));
+    fillAndSubmit();
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(2));
+
+    expect(capturedEvents).toHaveLength(0);
+  });
+
+  it('reports a successful login and stays silent on a failed one', async () => {
+    signIn.mockResolvedValueOnce(
+      rejectedSignIn([{ type: 'non_field_errors', data: ['Wrong password.'] }])
+    );
+
+    renderForm({ mode: 'login' });
+    fillAndSubmit();
+    await waitFor(() => expect(signIn).toHaveBeenCalledTimes(1));
+    expect(capturedEvents).toHaveLength(0);
+
+    signIn.mockResolvedValueOnce({ error: null, url: '/' });
+    fillAndSubmit();
+
+    await waitFor(() => expect(capturedEvents).toHaveLength(1));
+    expect(capturedEvents[0]).toMatchObject({ action: 'login' });
+    expect(capturedEvents[0].status).toBeUndefined();
+  });
+
+  it('reports logout BEFORE the sessions are dropped', async () => {
+    let logoutSignalledFirst = false;
+    logoutMutation.mockImplementationOnce(() => {
+      logoutSignalledFirst = capturedEvents.some(
+        (detail) => detail.action === 'logout'
+      );
+      return { unwrap: logoutUnwrap };
+    });
+
+    render(
+      <AccountMenuBlock
+        block={{
+          id: 'account-menu-1',
+          type: 'account-menu',
+          label: 'Account Menu',
+          properties: {},
+          styles: {},
+          order: 0,
+          hidden: false
+        }}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    fireEvent.click(screen.getByText('Log out'));
+
+    await waitFor(() => expect(signOut).toHaveBeenCalled());
+    expect(logoutSignalledFirst).toBe(true);
+  });
+});

package/src/blocks/account-menu-block.tsx

@@ -5,6 +5,7 @@ import NextLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import { signOut } from 'next-auth/react';
 import { useLogoutMutation } from '@akinon/next/data/client/user';
+import { emitCommerceEvent } from '../utils/analytics';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -127,6 +128,11 @@ const AccountMenuBlock = ({
   const handleLogout = async () => {
     if (isDesigner) return;
 
+    // The logout moment is reported BEFORE either session drops — afterwards
+    // there is no member left to name. The brand bridge reads the member id
+    // while it still exists and hands the event over the signOut navigation.
+    emitCommerceEvent('logout', {});
+
     // The commerce session must be dropped before the next-auth session,
     // otherwise next-auth can immediately re-authenticate from osessionid.
     try {

package/src/blocks/auth-form-block.tsx

@@ -99,6 +99,32 @@ const signInErrorDetail = (
     | undefined
 ): string | null | undefined => response?.code || response?.error;
 
+/**
+ * True when the rejected submit is really a hand-off to another step — a
+ * captcha challenge or an OTP/SMS verification — rather than a validation
+ * verdict. A pending flow has no outcome yet, so it must not be reported as a
+ * failed registration (the live storefronts report nothing at that moment
+ * either).
+ */
+const AUTH_CHALLENGE_TYPES = new Set(['otp', 'captcha']);
+
+const isPendingAuthChallenge = (error?: string | null): boolean => {
+  if (!error) return false;
+
+  try {
+    const parsed = JSON.parse(error);
+
+    return (
+      Array.isArray(parsed) &&
+      parsed.some((entry) =>
+        AUTH_CHALLENGE_TYPES.has(String((entry as { type?: unknown })?.type))
+      )
+    );
+  } catch {
+    return false;
+  }
+};
+
 /**
  * Functional auth block: login or register form driven by props.mode.
  *
@@ -329,16 +355,32 @@ const AuthFormBlock = ({
       });
 
       if (!response || response.error) {
-        setError(readAuthError(signInErrorDetail(response)) || errorLabel);
+        const errorDetail = signInErrorDetail(response);
+
+        // A rejected registration is itself a measurable outcome — the live
+        // storefronts report sign_up with an error type on it. A rejected
+        // LOGIN is not (they stay silent), and neither is a captcha/OTP
+        // hand-off, which is a pending step rather than a verdict.
+        if (mode === 'register' && !isPendingAuthChallenge(errorDetail)) {
+          emitCommerceEvent('sign_up', {
+            method: providerId,
+            status: 'error'
+          });
+        }
+
+        setError(readAuthError(errorDetail) || errorLabel);
 
         return;
       }
 
-      // GA4 auth events, on success only: a failed submit is an error state,
-      // not a login. `method` mirrors what the credentials provider is.
-      emitCommerceEvent(mode === 'register' ? 'sign_up' : 'login', {
-        method: providerId
-      });
+      // GA4 auth events: sign_up carries its outcome so a brand bridge can
+      // tell the successful registration from the rejected one above.
+      // `method` mirrors what the credentials provider is.
+      if (mode === 'register') {
+        emitCommerceEvent('sign_up', { method: providerId, status: 'success' });
+      } else {
+        emitCommerceEvent('login', { method: providerId });
+      }
 
       if (closeModalsOnSuccess) closeAllModals();
       router.refresh();

package/src/utils/analytics.ts

@@ -54,6 +54,13 @@ export interface CommerceFacts {
   searchTerm?: string;
   method?: string;
   transactionId?: string;
+  /**
+   * Outcome of an auth moment: `sign_up` carries 'success' or 'error' (a
+   * rejected registration is itself a measurable event). Deliberately NOT
+   * forwarded by the default GA4 bridge — how an outcome is reported is a
+   * brand schema decision.
+   */
+  status?: 'success' | 'error';
 }
 
 /** What rides on the event: the named facts, plus whatever else a brand adds. */