feat: WF-2856 Test with latest cookie banner

Author: jatin.gundabathula

.yarnrc.yml

@@ -1 +1,12 @@
+approvedGitRepositories:
+  - "**"
+
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableScripts: true
+
 nodeLinker: node-modules
+
+npmMinimalAgeGate: 0

nextjs-app-v15/src/app/components/cookie-banner/cookie-banner.tsx

@@ -3,16 +3,28 @@
 import NavigationLayout from "@/app/layout/navigation";
 import { PieCookieBanner } from '@justeattakeaway/pie-webc/react/cookie-banner.js';
 
-export default function CookieBanner() {
+type CookieBannerProps = {
+    variant?: string;
+};
+
+export default function CookieBanner({ variant }: CookieBannerProps) {
+    const personalizedLabel = variant === 'personalized-label' ? 'Custom personalized label' : undefined;
+    const personalizedDescription = variant === 'personalized-description'
+        ? 'Read our <a href="https://example.com/privacy">privacy policy</a> for more info.'
+        : undefined;
+
     return (
         <NavigationLayout title="Cookie Banner">
-        <PieCookieBanner
-            defaultPreferences={{functional: true, personalized: true, analytical: true}}
-            language="da"
-            country="dk"
-            hasPrimaryActionsOnly
-            cookieTechnologiesLink="https://justeattakeaway.com"
-            cookieStatementLink="https://justeattakeaway.com" />
+            <PieCookieBanner
+                defaultPreferences={{ functional: true, personalized: true, analytical: true }}
+                language="da"
+                country="dk"
+                hasPrimaryActionsOnly
+                cookieTechnologiesLink="https://justeattakeaway.com"
+                cookieStatementLink="https://justeattakeaway.com"
+                personalizedLabel={personalizedLabel}
+                personalizedDescription={personalizedDescription}
+            />
         </NavigationLayout>
     );
 }

nextjs-app-v15/src/app/components/cookie-banner/page.tsx

@@ -6,5 +6,5 @@ export const metadata: Metadata = {
 }
 
 export default function CookieBannerComponent() {
-    return <CookieBanner/>;
+    return <CookieBanner />;
 }

nextjs-app-v15/src/app/components/cookie-banner/personalized-description/page.tsx

@@ -0,0 +1,10 @@
+import CookieBanner from '../cookie-banner';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Cookie Banner',
+};
+
+export default function PersonalizedDescriptionCookieBannerPage() {
+    return <CookieBanner variant="personalized-description" />;
+}

nextjs-app-v15/src/app/components/cookie-banner/personalized-label/page.tsx

@@ -0,0 +1,10 @@
+import CookieBanner from '../cookie-banner';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Cookie Banner',
+};
+
+export default function PersonalizedLabelCookieBannerPage() {
+    return <CookieBanner variant="personalized-label" />;
+}

nextjs-app-v15/src/app/layout/navigation.tsx

@@ -6,7 +6,7 @@ import { useRouter, usePathname } from "next/navigation";
 import { type ReactNode } from "react";
 
 interface NavigationLayoutProps {
-  children: ReactNode;
+  children?: ReactNode;
   title: string;
 }
 

test/system/cookie-banner.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const { APP_NAME } = process.env;
+const isNextJsAppV15 = APP_NAME === 'nextjs-app-v15';
+
+test.describe('Cookie Banner personalized content', () => {
+    test.skip(!isNextJsAppV15, 'Runs only against nextjs-app-v15');
+
+    async function openManagePreferences(page: Page) {
+        await page.getByTestId('actions-manage-prefs').click();
+        await expect(page.getByRole('dialog')).toBeVisible();
+    }
+
+    test('uses built-in copy when no override props are provided', async ({ page }) => {
+        await page.goto('components/cookie-banner');
+        await openManagePreferences(page);
+
+        await expect(page.getByTestId('personalized-label')).toHaveText('Personlige (målretning og annoncering)');
+        await expect(page.getByTestId('personalized-description')).toContainText('Disse markedsføringscookier bruges til at skræddersy leveringen af oplysninger');
+    });
+
+    test('supports overriding the personalized label', async ({ page }) => {
+        await page.goto('components/cookie-banner/personalized-label');
+        await openManagePreferences(page);
+
+        await expect(page.getByTestId('personalized-label')).toHaveText('Custom personalized label');
+        await expect(page.getByTestId('personalized-description')).toContainText('Disse markedsføringscookier bruges til at skræddersy leveringen af oplysninger');
+    });
+
+    test('supports overriding the personalized description with HTML content', async ({ page }) => {
+        await page.goto('components/cookie-banner/personalized-description');
+        await openManagePreferences(page);
+
+        const personalizedDescription = page.getByTestId('personalized-description');
+
+        await expect(page.getByTestId('personalized-label')).toHaveText('Personlige (målretning og annoncering)');
+        await expect(personalizedDescription).toContainText('Read our privacy policy for more info.');
+        await expect(personalizedDescription.getByRole('link', { name: 'privacy policy' })).toHaveAttribute('href', 'https://example.com/privacy');
+    });
+});