@treely/strapi-slices 7.16.1 → 7.17.0

package/dist/utils/buildRedirectUrl.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+import type { ParsedUrlQuery } from 'querystring';
+export declare function buildRedirectUrl(url: string, asPath: string, query: ParsedUrlQuery): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.16.1",
+  "version": "7.17.0",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -136,7 +136,7 @@
     "mq-polyfill": "^1.1.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "semantic-release": "^22.0.8",
+    "semantic-release": "^25.0.1",
     "size-limit": "^11.0.0",
     "storybook": "^8.6.4",
     "typescript": "^5.3.2"

package/src/slices/Redirect/Redirect.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { useRouter, replaceSpy } from '../../../__mocks__/next/router';
+import { DEFAULT_USE_ROUTER_RETURN_VALUE } from '../../test/defaultMocks/next';
+import Redirect from '.';
+import type { RedirectProps } from './Redirect';
+
+const defaultProps: RedirectProps = {
+  slice: { url: 'https://redirect.com' },
+};
+
+const setup = (
+  props: Partial<RedirectProps> = {},
+  routerOverrides: any = {}
+) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  useRouter.mockReturnValue({
+    ...DEFAULT_USE_ROUTER_RETURN_VALUE,
+    asPath: '/from',
+    query: { utm_source: 'linkedin' },
+    replace: replaceSpy,
+    ...routerOverrides,
+  });
+  render(<Redirect {...combinedProps} />);
+};
+
+describe('Redirect component', () => {
+  const originalDateNow = Date.now;
+  const originalLocation = window.location;
+  const mockDateNow = jest.fn(() => 1730284800000);
+  const mockOrigin = 'https://origin.com';
+
+  beforeEach(() => {
+    Date.now = mockDateNow;
+    // @ts-ignore - Mocking window.location
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, origin: mockOrigin },
+      writable: true,
+    });
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    Date.now = originalDateNow;
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    });
+    useRouter.mockRestore();
+    replaceSpy.mockRestore();
+  });
+
+  it('calls the redirect URL when rendering preserving the utm_* params and passing the source and ts params', () => {
+    setup();
+
+    expect(replaceSpy).toHaveBeenCalledTimes(1);
+    const calledUrl = replaceSpy.mock.calls[0][0];
+    const url = new URL(calledUrl);
+
+    // URLSearchParams.get automatically decodes values
+    expect(url.searchParams.get('source')).toBe('https://origin.com/from');
+    expect(url.searchParams.get('utm_source')).toBe('linkedin');
+    expect(url.searchParams.get('ts')).toBe('1730284800000');
+    expect(url.origin + url.pathname).toBe('https://redirect.com/');
+  });
+
+  it('does nothing when slice.url is empty', () => {
+    setup({ slice: { url: '' } });
+
+    expect(replaceSpy).not.toHaveBeenCalled();
+  });
+});

package/src/slices/Redirect/Redirect.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
+import { buildRedirectUrl } from '../../utils/buildRedirectUrl';
 
 export interface RedirectProps {
   slice: {
@@ -9,10 +10,20 @@ export interface RedirectProps {
 
 export const Redirect = ({ slice }: RedirectProps): JSX.Element => {
   const router = useRouter();
+
   useEffect(() => {
-    // When using `replace`, the current browser history entry will be replaced
-    router.replace(slice.url);
-  }, [slice.url]);
+    if (!slice.url) return;
+
+    // Build redirect URL
+    const redirectUrl = buildRedirectUrl(
+      slice.url,
+      router.asPath,
+      router.query
+    );
+
+    // Redirect
+    router.replace(redirectUrl);
+  }, [slice.url, router]);
 
   return <></>;
 };

package/src/utils/buildRedirectUrl.test.ts

@@ -0,0 +1,102 @@
+import { buildRedirectUrl } from './buildRedirectUrl';
+
+const ORIGIN = 'https://site.local';
+
+const getParams = (u: string) => new URL(u).searchParams;
+
+describe('buildRedirectUrl', () => {
+  let dateNowSpy: jest.SpyInstance<number, []>;
+
+  beforeAll(() => {
+    // stable origin for all tests
+    Object.defineProperty(window, 'location', {
+      value: { ...window.location, origin: ORIGIN },
+      writable: true,
+    });
+  });
+
+  beforeEach(() => {
+    // stable timestamp per test
+    dateNowSpy = jest.spyOn(Date, 'now').mockReturnValue(1730284800000);
+  });
+
+  afterEach(() => {
+    dateNowSpy.mockRestore();
+  });
+
+  it('returns empty string for empty target url', () => {
+    expect(buildRedirectUrl('', '/from', {})).toBe('');
+  });
+
+  it('adds absolute source and ts, preserves existing target params', () => {
+    const out = buildRedirectUrl(
+      'https://redirect.com/landing?existing=value',
+      '/from',
+      {}
+    );
+    const p = getParams(out);
+    expect(p.get('existing')).toBe('value');
+    expect(p.get('source')).toBe(`${ORIGIN}/from`);
+    expect(p.get('ts')).toBe('1730284800000');
+  });
+
+  it('forwards utm_* params from current page and ignores others', () => {
+    const out = buildRedirectUrl('https://redirect.com', '/page', {
+      utm_source: 'google',
+      utm_medium: 'cpc',
+      utm_campaign: 'spring',
+      other: 'ignore-me',
+    });
+    const p = getParams(out);
+    expect(p.get('utm_source')).toBe('google');
+    expect(p.get('utm_medium')).toBe('cpc');
+    expect(p.get('utm_campaign')).toBe('spring');
+    expect(p.get('other')).toBeNull();
+  });
+
+  it('includes query string in source when asPath has one', () => {
+    const out = buildRedirectUrl(
+      'https://redirect.com',
+      '/from?utm_source=fb&x=1',
+      { utm_source: 'fb' }
+    );
+    const p = getParams(out);
+    expect(p.get('source')).toBe(`${ORIGIN}/from?utm_source=fb&x=1`);
+  });
+
+  it('handles relative target URLs using window.location.origin', () => {
+    const out = buildRedirectUrl('/relative', '/current', {});
+    expect(out.startsWith(`${ORIGIN}/relative?`)).toBe(true);
+    const p = getParams(out);
+    expect(p.get('source')).toBe(`${ORIGIN}/current`);
+    expect(p.get('ts')).toBe('1730284800000');
+  });
+
+  it('overwrites existing source in target (deduplicated)', () => {
+    const out = buildRedirectUrl('https://redirect.com?source=old', '/new', {});
+    const p = getParams(out);
+    expect(p.get('source')).toBe(`${ORIGIN}/new`);
+    expect(p.getAll('source').length).toBe(1);
+  });
+
+  it('skips array values from router.query', () => {
+    const out = buildRedirectUrl('https://redirect.com', '/x', {
+      utm_source: ['a', 'b'] as any,
+      utm_medium: ['m'] as any,
+    });
+    const p = getParams(out);
+    expect(p.get('utm_source')).toBeNull();
+    expect(p.get('utm_medium')).toBeNull();
+  });
+
+  it('does not add utm params when none present', () => {
+    const out = buildRedirectUrl('https://redirect.com', '/from', {
+      foo: 'bar',
+    });
+    const p = getParams(out);
+    expect(p.get('utm_source')).toBeNull();
+    expect(p.get('utm_medium')).toBeNull();
+    expect(p.get('utm_campaign')).toBeNull();
+    expect(p.get('source')).toBe(`${ORIGIN}/from`);
+  });
+});

package/src/utils/buildRedirectUrl.ts

@@ -0,0 +1,34 @@
+import type { ParsedUrlQuery } from 'querystring';
+
+export function buildRedirectUrl(
+  url: string,
+  asPath: string,
+  query: ParsedUrlQuery
+): string {
+  if (!url) return '';
+
+  // Parse the base target URL
+  const target = new URL(url, window.location.origin);
+
+  // Merge existing params from the target
+  const mergedParams = new URLSearchParams(target.search);
+
+  // Add absolute source
+  const absoluteSource = `${window.location.origin}${asPath}`;
+  mergedParams.set('source', absoluteSource);
+
+  // Forward utm_* params from the current page
+  for (const [key, value] of Object.entries(query)) {
+    if (key.startsWith('utm_') && typeof value === 'string') {
+      mergedParams.set(key, value);
+    }
+  }
+
+  // Add timestamp
+  mergedParams.set('ts', Date.now().toString());
+
+  // Build final merged URL
+  target.search = mergedParams.toString();
+
+  return target.toString();
+}

package/src/slices/Redirect/Rediect.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '../../test/testUtils';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { replaceSpy, useRouter } from '../../../__mocks__/next/router';
-import Redirect from '.';
-import { RedirectProps } from './Redirect';
-
-const defaultProps: RedirectProps = {
-  slice: {
-    url: 'https://redirect.com',
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Redirect {...combinedProps} />);
-};
-
-describe('The Redirect component', () => {
-  afterEach(() => {
-    replaceSpy.mockRestore();
-    useRouter.mockRestore();
-  });
-
-  it('calls the redirect URL when rendering', () => {
-    setup();
-
-    expect(replaceSpy).toHaveBeenCalledWith('https://redirect.com');
-  });
-});