@akinon/next 1.126.12-v1-rc.8 → 1.126.12

package/CHANGELOG.md

@@ -1,11 +1,12 @@
 # @akinon/next
 
-## 1.126.12-v1-rc.8
+## 1.126.12
 
 ### Patch Changes
 
-- d480941: ZERO-4399: add card rewards to pz-masterpass-rest
-- 182a639: ZERO-4483: Verify v1-rc maintenance pipeline (no-op patch to confirm v1-rc dist-tag flow)
+- 0a64bb5: ZERO-5104: Keep the query of the page when a shopper is sent to the login page
+
+  A 401 signed the shopper out to the login page with only `window.location.pathname` as callbackUrl, and the server `redirect` helper embedded its callbackUrl unencoded, so UTM and other parameters were lost before analytics recorded the visit and it was reported as "not set / Unassigned". Both now build the URL with `getCallbackRedirectUrl`: the query is repeated on the login page and the whole page URL is kept, encoded, in callbackUrl.
 
 ## 1.126.11
 

package/__tests__/get-callback-redirect-url.test.ts

@@ -0,0 +1,73 @@
+import { getCallbackRedirectUrl } from '../utils/get-callback-redirect-url';
+
+const AUTH = '/users/auth';
+
+const paramsOf = (url: string) =>
+  new URL(url, 'https://example.com').searchParams;
+
+describe('getCallbackRedirectUrl', () => {
+  it('repeats the query on the target and keeps the whole URL in callbackUrl', () => {
+    const callbackUrl = '/account/orders/?utm_source=edm&utm_medium=cpc';
+    const url = getCallbackRedirectUrl(AUTH, callbackUrl);
+
+    expect(url).toBe(
+      '/users/auth?utm_source=edm&utm_medium=cpc&callbackUrl=%2Faccount%2Forders%2F%3Futm_source%3Dedm%26utm_medium%3Dcpc'
+    );
+
+    const params = paramsOf(url);
+    expect(params.get('utm_source')).toBe('edm');
+    expect(params.get('utm_medium')).toBe('cpc');
+    expect(params.get('callbackUrl')).toBe(callbackUrl);
+  });
+
+  it('only adds callbackUrl when the page has no query', () => {
+    expect(getCallbackRedirectUrl(AUTH, '/account/orders/')).toBe(
+      '/users/auth?callbackUrl=%2Faccount%2Forders%2F'
+    );
+  });
+
+  it('forwards params with their original encoding and repeated keys', () => {
+    const callbackUrl =
+      '/list/?utm_campaign=yaz%20indirimi&color=red&color=blue&q=%C3%A7ay';
+    const url = getCallbackRedirectUrl(AUTH, callbackUrl);
+
+    expect(url).toBe(
+      `/users/auth?utm_campaign=yaz%20indirimi&color=red&color=blue&q=%C3%A7ay&callbackUrl=${encodeURIComponent(
+        callbackUrl
+      )}`
+    );
+
+    const params = paramsOf(url);
+    expect(params.get('utm_campaign')).toBe('yaz indirimi');
+    expect(params.getAll('color')).toEqual(['red', 'blue']);
+    expect(params.get('q')).toBe('çay');
+    expect(params.get('callbackUrl')).toBe(callbackUrl);
+  });
+
+  it('does not forward a callbackUrl the page already carries', () => {
+    const callbackUrl = '/users/auth?callbackUrl=%2Faccount%2F&utm_source=edm';
+    const params = paramsOf(getCallbackRedirectUrl(AUTH, callbackUrl));
+
+    expect(params.getAll('callbackUrl')).toEqual([callbackUrl]);
+    expect(params.get('utm_source')).toBe('edm');
+  });
+
+  it('appends to a target that already has a query', () => {
+    expect(
+      getCallbackRedirectUrl(
+        '/users/auth?tab=login',
+        '/account/?utm_source=edm'
+      )
+    ).toBe(
+      '/users/auth?tab=login&utm_source=edm&callbackUrl=%2Faccount%2F%3Futm_source%3Dedm'
+    );
+  });
+
+  it('keeps a hash out of the forwarded params', () => {
+    expect(
+      getCallbackRedirectUrl(AUTH, '/account/?utm_source=edm#orders')
+    ).toBe(
+      '/users/auth?utm_source=edm&callbackUrl=%2Faccount%2F%3Futm_source%3Dedm%23orders'
+    );
+  });
+});

package/__tests__/redirect.test.ts

@@ -0,0 +1,77 @@
+const mockNextRedirect = jest.fn();
+const mockHeaders = new Map<string, string>();
+const mockServerVariables = { locale: 'en' };
+
+jest.mock('next/navigation', () => ({
+  redirect: (...args: unknown[]) => mockNextRedirect(...args)
+}));
+
+jest.mock('next/headers', () => ({
+  headers: () => mockHeaders
+}));
+
+jest.mock('@akinon/next/utils/server-variables', () => ({
+  ServerVariables: mockServerVariables
+}));
+
+jest.mock('settings', () => ({
+  __esModule: true,
+  default: {
+    localization: {
+      locales: [{ value: 'en' }, { value: 'tr' }],
+      defaultLocaleValue: 'en',
+      localeUrlStrategy: 'hide-default-locale'
+    }
+  }
+}));
+
+import { redirect } from '../utils/redirect';
+
+describe('redirect', () => {
+  beforeEach(() => {
+    mockNextRedirect.mockClear();
+    mockServerVariables.locale = 'en';
+  });
+
+  it('keeps the query of the page on the target and in callbackUrl', async () => {
+    mockHeaders.set(
+      'pz-url',
+      'https://example.com/account/orders/?utm_source=edm&utm_medium=cpc&foo=bar%20baz'
+    );
+
+    await redirect('/users/auth');
+
+    expect(mockNextRedirect).toHaveBeenCalledWith(
+      '/users/auth?utm_source=edm&utm_medium=cpc&foo=bar%20baz&callbackUrl=%2Faccount%2Forders%2F%3Futm_source%3Dedm%26utm_medium%3Dcpc%26foo%3Dbar%2520baz'
+    );
+
+    const [redirectUrl] = mockNextRedirect.mock.calls[0];
+    expect(
+      new URL(redirectUrl, 'https://example.com').searchParams.get(
+        'callbackUrl'
+      )
+    ).toBe('/account/orders/?utm_source=edm&utm_medium=cpc&foo=bar%20baz');
+  });
+
+  it('prefixes the locale on the target and strips it from callbackUrl', async () => {
+    mockServerVariables.locale = 'tr';
+    mockHeaders.set('pz-url', 'https://example.com/tr/account/?utm_source=edm');
+
+    await redirect('/users/auth', 'replace' as never);
+
+    expect(mockNextRedirect).toHaveBeenCalledWith(
+      '/tr/users/auth?utm_source=edm&callbackUrl=%2Faccount%2F%3Futm_source%3Dedm',
+      'replace'
+    );
+  });
+
+  it('only adds callbackUrl when the page has no query', async () => {
+    mockHeaders.set('pz-url', 'https://example.com/account/orders/');
+
+    await redirect('/users/auth');
+
+    expect(mockNextRedirect).toHaveBeenCalledWith(
+      '/users/auth?callbackUrl=%2Faccount%2Forders%2F'
+    );
+  });
+});

package/__tests__/rtk-query-error-handler.test.ts

@@ -0,0 +1,68 @@
+const mockSignOut = jest.fn(() => Promise.resolve());
+
+jest.mock('next-auth/react', () => ({
+  signOut: (...args: unknown[]) => mockSignOut(...(args as []))
+}));
+jest.mock('routes', () => ({ ROUTES: { AUTH: '/users/auth' } }), {
+  virtual: true
+});
+jest.mock('../redux/middlewares/checkout', () => ({}));
+jest.mock('../redux/middlewares/pre-order', () => ({
+  preOrderMiddlewares: []
+}));
+jest.mock('../data/client/api', () => ({ api: {} }));
+jest.mock('@akinon/next/utils/log', () => ({
+  __esModule: true,
+  default: { debug: jest.fn(), warn: jest.fn() }
+}));
+jest.mock('@akinon/pz-saved-card', () => ({}), { virtual: true });
+jest.mock('@akinon/pz-cybersource-uc/src/redux/middleware', () => ({}), {
+  virtual: true
+});
+
+import { rtkQueryErrorHandler } from '../redux/middlewares';
+
+const setLocation = (pathname: string, search: string) => {
+  (globalThis as unknown as { window: unknown }).window = {
+    location: { pathname, search }
+  };
+};
+
+const dispatch401 = async () => {
+  const next = jest.fn();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  await rtkQueryErrorHandler({} as any)(next)({
+    type: 'api/executeQuery/rejected',
+    payload: { status: 401 }
+  });
+  return next;
+};
+
+describe('rtkQueryErrorHandler', () => {
+  afterEach(() => {
+    mockSignOut.mockClear();
+    delete (globalThis as unknown as { window?: unknown }).window;
+  });
+
+  it('signs out to the login page keeping the query of the current page', async () => {
+    setLocation('/account/orders/', '?utm_source=edm&utm_medium=cpc');
+
+    const next = await dispatch401();
+
+    expect(mockSignOut).toHaveBeenCalledWith({
+      callbackUrl:
+        '/users/auth?utm_source=edm&utm_medium=cpc&callbackUrl=%2Faccount%2Forders%2F%3Futm_source%3Dedm%26utm_medium%3Dcpc'
+    });
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it('keeps the locale prefix of the current page in callbackUrl', async () => {
+    setLocation('/tr/account/', '');
+
+    await dispatch401();
+
+    expect(mockSignOut).toHaveBeenCalledWith({
+      callbackUrl: '/users/auth?callbackUrl=%2Ftr%2Faccount%2F'
+    });
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.126.12-v1-rc.8",
+  "version": "1.126.12",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -35,7 +35,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.126.12-v1-rc.8",
+    "@akinon/eslint-plugin-projectzero": "1.126.12",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/redux/middlewares/index.ts

@@ -15,6 +15,7 @@ import { preOrderMiddlewares } from './pre-order';
 
 import { api } from '../../data/client/api';
 import logger from '@akinon/next/utils/log';
+import { getCallbackRedirectUrl } from '@akinon/next/utils/get-callback-redirect-url';
 
 // Plugin middlewares
 import { savedCardMiddleware } from '@akinon/pz-saved-card';
@@ -28,7 +29,10 @@ export const rtkQueryErrorHandler: Middleware =
   () => (next) => async (action) => {
     if (action?.payload?.status === 401) {
       await signOut({
-        callbackUrl: `${ROUTES.AUTH}?callbackUrl=${window.location.pathname}`
+        callbackUrl: getCallbackRedirectUrl(
+          ROUTES.AUTH,
+          window.location.pathname + window.location.search
+        )
       });
       logger.debug('Session expired: 401');
 

package/utils/get-callback-redirect-url.ts

@@ -0,0 +1,33 @@
+/**
+ * Builds the URL that sends the visitor to `path` (e.g. the login page) and
+ * brings them back to `callbackUrl` afterwards.
+ *
+ * The query of `callbackUrl` (utm_*, gclid, ...) is repeated on `path` as is:
+ * these redirects can run before analytics records the page being left, so
+ * the page they land on is the one that has to carry the traffic source.
+ *
+ * `callbackUrl` itself is encoded as a whole. Left raw, its `&` would split it
+ * into parameters of `path` and `searchParams.get('callbackUrl')` would only
+ * return the part before the first one.
+ */
+export const getCallbackRedirectUrl = (
+  path: string,
+  callbackUrl: string
+): string => {
+  const [pathAndQuery] = callbackUrl.split('#');
+  const queryIndex = pathAndQuery.indexOf('?');
+  const forwardedParams =
+    queryIndex === -1
+      ? []
+      : pathAndQuery
+          .slice(queryIndex + 1)
+          .split('&')
+          .filter((param) => param && param.split('=')[0] !== 'callbackUrl');
+
+  const params = [
+    ...forwardedParams,
+    `callbackUrl=${encodeURIComponent(callbackUrl)}`
+  ];
+
+  return `${path}${path.includes('?') ? '&' : '?'}${params.join('&')}`;
+};

package/utils/redirect.ts

@@ -4,6 +4,7 @@ import { headers } from 'next/headers';
 import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
 import { urlLocaleMatcherRegex } from '@akinon/next/utils';
+import { getCallbackRedirectUrl } from '@akinon/next/utils/get-callback-redirect-url';
 
 export const redirect = (path: string, type?: RedirectType) => {
   const nextHeaders = headers();
@@ -15,18 +16,18 @@ export const redirect = (path: string, type?: RedirectType) => {
     (locale) => locale.value === ServerVariables.locale
   );
 
-  const searchParams = new URLSearchParams(pageUrl.search);
-
   const callbackUrl =
-    pageUrl.pathname.replace(urlLocaleMatcherRegex, '') +
-    (searchParams.toString() ? `?${searchParams.toString()}` : '');
+    pageUrl.pathname.replace(urlLocaleMatcherRegex, '') + pageUrl.search;
 
   const redirectUrlWithLocale = getUrlPathWithLocale(
     path,
     currentLocale?.value
   );
 
-  const redirectUrl = `${redirectUrlWithLocale}?callbackUrl=${callbackUrl}`;
+  const redirectUrl = getCallbackRedirectUrl(
+    redirectUrlWithLocale,
+    callbackUrl
+  );
 
   if (type) {
     return nextRedirect(redirectUrl, type);