From 89241236be188eb1095870955162ed8f55e6c290 Mon Sep 17 00:00:00 2001
From: adrien charrier <adrien.charrier@outlook.fr>
Date: Mon, 9 Dec 2024 16:47:36 +0100
Subject: [PATCH] Enhance CookiesPage components to support scoped slots for
 cookie descriptions

---
 .../CookiesInformation/CookiesInformation.vue | 10 +++-
 .../src/templates/CookiesPage/CookiesPage.vue | 10 +++-
 .../CookiesPage/CookiesTable/CookiesTable.vue |  9 +++-
 .../CookiesPage/tests/CookiesPage.spec.ts     | 49 +++++++++++++++++++
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-bridge/src/templates/CookiesPage/CookiesInformation/CookiesInformation.vue b/packages/synapse-bridge/src/templates/CookiesPage/CookiesInformation/CookiesInformation.vue
index 8b9b8039b4..2265d66305 100644
--- a/packages/synapse-bridge/src/templates/CookiesPage/CookiesInformation/CookiesInformation.vue
+++ b/packages/synapse-bridge/src/templates/CookiesPage/CookiesInformation/CookiesInformation.vue
@@ -101,7 +101,15 @@ export default defineComponent({
 				</VIcon>
 			</summary>
 
-			<CookiesTable :items="tableItems" class="mb-2" />
+			<CookiesTable :items="tableItems" class="mb-2" >
+				<template
+					v-for="(_, slotName) in $slots"
+					:key="slotName"
+					v-slot:[slotName]="props"
+				>
+					<slot :name="slotName" v-bind="props || {}" />
+				</template>
+			</CookiesTable>
 		</details>
 
 		<VRadioGroup
diff --git a/packages/synapse-bridge/src/templates/CookiesPage/CookiesPage.vue b/packages/synapse-bridge/src/templates/CookiesPage/CookiesPage.vue
index cbd2e8d113..4626037ab0 100644
--- a/packages/synapse-bridge/src/templates/CookiesPage/CookiesPage.vue
+++ b/packages/synapse-bridge/src/templates/CookiesPage/CookiesPage.vue
@@ -109,7 +109,15 @@ export default defineComponent({
 					:type="key"
 					:table-items="cookies"
 					class="mb-6"
-				/>
+				>
+					<template
+						v-for="(_, slotName) in $slots"
+						:key="slotName"
+						#[slotName]="props"
+					>
+						<slot :name="slotName" v-bind="props || {}" />
+					</template>
+				</CookiesInformation>
 
 				<div class="d-flex mt-16">
 					<VSpacer />
diff --git a/packages/synapse-bridge/src/templates/CookiesPage/CookiesTable/CookiesTable.vue b/packages/synapse-bridge/src/templates/CookiesPage/CookiesTable/CookiesTable.vue
index 394ab07963..8244989751 100644
--- a/packages/synapse-bridge/src/templates/CookiesPage/CookiesTable/CookiesTable.vue
+++ b/packages/synapse-bridge/src/templates/CookiesPage/CookiesTable/CookiesTable.vue
@@ -39,7 +39,14 @@ export default defineComponent({
 		<tbody>
 			<tr v-for="(cookie, index) in items" :key="index">
 				<td>{{ cookie.name }}</td>
-				<td>{{ cookie.description }}</td>
+				<td>
+					<slot
+						:name="`cookie-description-${cookie.name}`"
+						:cookie="cookie"
+					>
+						{{ cookie.description }}
+					</slot>
+				</td>
 				<td>{{ cookie.conservation }}</td>
 			</tr>
 		</tbody>
diff --git a/packages/synapse-bridge/src/templates/CookiesPage/tests/CookiesPage.spec.ts b/packages/synapse-bridge/src/templates/CookiesPage/tests/CookiesPage.spec.ts
index e27e3d35a4..93f4025dd9 100644
--- a/packages/synapse-bridge/src/templates/CookiesPage/tests/CookiesPage.spec.ts
+++ b/packages/synapse-bridge/src/templates/CookiesPage/tests/CookiesPage.spec.ts
@@ -107,4 +107,53 @@ describe('CookiesPage', () => {
 
 		expect(wrapper.emitted()).toHaveProperty('submit')
 	})
+
+	it('displays the cookie description as a scoped slot', () => {
+		const cookiesList = {
+			essentials: [
+				{
+					name: 'session',
+					description: 'Sauvegarde la session pour rester connecté.',
+					conservation: '20 heures',
+				},
+				{
+					name: 'cookie_policy',
+					description: 'Sauvegarde les préférences de cookies.',
+					conservation: '1 an',
+				},
+			],
+			functional: [
+				{
+					name: 'contrast',
+					description: 'Sauvegarde la personnalisation de l’affichage.',
+					conservation: '1 an',
+				},
+			],
+			analytics: [
+				{
+					name: 'user_id',
+					description: 'Sauvegarde l’identifiant unique de visiteur.',
+					conservation: '6 mois',
+				},
+			],
+		}
+
+		const wrapper = mount(CookiesPage, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: cookiesList,
+			},
+			slots: {
+				'cookie-description-contrast': `
+					<template #cookie-description-contrast="{ cookie }">
+						<a href="#" class="contrast-description">{{ cookie.description }}</a>
+					</template>
+				`,
+			},
+		})
+
+		expect(wrapper.find('a.contrast-description').text()).toContain(cookiesList.functional[0].description)
+	})
 })