From 1e14075e033057bf195a081f21806467fd74ca93 Mon Sep 17 00:00:00 2001
From: Orka Arnest CRUZE <orka.cruze@ign.fr>
Date: Mon, 16 Sep 2024 19:35:24 +0200
Subject: [PATCH 1/2] feat: customize localStorage key for analytics consents
 #302

---
 .../createConsentManagement.ts                 | 17 +++++++++++++----
 stories/ConsentManagement.stories.tsx          | 18 +++++++++++++-----
 .../integration/vite/src/consentManagement.tsx |  6 ++++--
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/consentManagement/createConsentManagement.ts b/src/consentManagement/createConsentManagement.ts
index b46f80487..2b6990e4f 100644
--- a/src/consentManagement/createConsentManagement.ts
+++ b/src/consentManagement/createConsentManagement.ts
@@ -9,7 +9,7 @@ import { useRerenderOnChange } from "../tools/StatefulObservable/hooks";
 import { createConsentBannerAndConsentManagement } from "./ConsentBannerAndConsentManagement";
 import { isBrowser } from "../tools/isBrowser";
 
-export const localStorageKeyPrefix = "@codegouvfr/react-dsfr finalityConsent";
+export const defaultLocalStorageKeyPrefix = "@codegouvfr/react-dsfr finalityConsent";
 
 export function createConsentManagement<
     FinalityDescription extends Record<
@@ -21,10 +21,16 @@ export function createConsentManagement<
     consentCallback?: ConsentCallback<ExtractFinalityFromFinalityDescription<FinalityDescription>>;
     /** Optional: If you have a dedicated page that provides comprehensive information about your website's GDPR policies. */
     personalDataPolicyLinkProps?: RegisteredLinkProps;
+    localStorageKeyPrefix?: string;
 }) {
     type Finality = ExtractFinalityFromFinalityDescription<FinalityDescription>;
 
-    const { finalityDescription, personalDataPolicyLinkProps, consentCallback } = params;
+    const {
+        finalityDescription,
+        personalDataPolicyLinkProps,
+        consentCallback,
+        localStorageKeyPrefix
+    } = params;
 
     const finalities = getFinalitiesFromFinalityDescription({
         "finalityDescription":
@@ -33,7 +39,9 @@ export function createConsentManagement<
                 : finalityDescription
     });
 
-    const localStorageKey = `${localStorageKeyPrefix} ${finalities.join("-")}`;
+    const localStorageKey = `${
+        localStorageKeyPrefix ?? defaultLocalStorageKeyPrefix
+    } ${finalities.join("-")}`;
 
     const $finalityConsent = createStatefulObservable<FinalityConsent<Finality> | undefined>(() => {
         if (!isBrowser) {
@@ -98,7 +106,8 @@ export function createConsentManagement<
         useConsent,
         ConsentBannerAndConsentManagement,
         FooterConsentManagementItem,
-        FooterPersonalDataPolicyItem
+        FooterPersonalDataPolicyItem,
+        consentLocalStorageKey: localStorageKey
     };
 }
 
diff --git a/stories/ConsentManagement.stories.tsx b/stories/ConsentManagement.stories.tsx
index a122e7cd4..5a5cba16d 100644
--- a/stories/ConsentManagement.stories.tsx
+++ b/stories/ConsentManagement.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import { createConsentManagement } from "../dist/consentManagement";
-import { localStorageKeyPrefix } from "../dist/consentManagement/createConsentManagement";
+import { defaultLocalStorageKeyPrefix } from "../dist/consentManagement/createConsentManagement";
 import { Placeholder } from "../dist/consentManagement/Placeholder";
 import { Footer } from "../dist/Footer";
 import { Button } from "../dist/Button";
@@ -34,7 +34,8 @@ export const {
     ConsentBannerAndConsentManagement, 
     FooterConsentManagementItem, 
     FooterPersonalDataPolicyItem,
-    useConsent
+    useConsent,
+    consentLocalStorageKey
 } = createConsentManagement({
     /* 
         Can be an object or a function that take the current language as argument.
@@ -121,7 +122,13 @@ export const {
         }
         */
 
-    }
+    },
+
+    /*
+    This optional parameter let's you personalise the key that is used to store user's consents in the localStorage.
+    The default value is "${defaultLocalStorageKeyPrefix}"
+    */
+    "localStorageKeyPrefix": "company-name/app-name"
 });
 \`\`\`
 
@@ -213,7 +220,8 @@ const {
     ConsentBannerAndConsentManagement,
     FooterConsentManagementItem,
     FooterPersonalDataPolicyItem,
-    useConsent
+    useConsent,
+    consentLocalStorageKey
 } = createConsentManagement({
     "finalityDescription": {
         "advertising": {
@@ -284,7 +292,7 @@ function Story() {
             <Button
                 onClick={() => {
                     Object.keys(localStorage)
-                        .filter(key => key.startsWith(localStorageKeyPrefix))
+                        .filter(key => key.startsWith(consentLocalStorageKey))
                         .forEach(key => localStorage.removeItem(key));
 
                     location.reload();
diff --git a/test/integration/vite/src/consentManagement.tsx b/test/integration/vite/src/consentManagement.tsx
index 8e23b00bc..9a837a0f6 100644
--- a/test/integration/vite/src/consentManagement.tsx
+++ b/test/integration/vite/src/consentManagement.tsx
@@ -6,7 +6,8 @@ export const {
     ConsentBannerAndConsentManagement, 
     FooterConsentManagementItem, 
     FooterPersonalDataPolicyItem,
-    useConsent
+    useConsent,
+    consentLocalStorageKey
 } = createConsentManagement({
     "finalityDescription": ({ lang }) => ({
         "advertising": {
@@ -41,5 +42,6 @@ export const {
         }
 
         console.log("callback from gdpr hook");
-    }
+    },
+    "localStorageKeyPrefix": "company-name/app-name finalityConsent"
 });

From e89a22e2ef5721063ce609d5e2c6b19b49a8b2ad Mon Sep 17 00:00:00 2001
From: Orka Arnest CRUZE <orka.cruze@ign.fr>
Date: Tue, 17 Sep 2024 15:58:03 +0200
Subject: [PATCH 2/2] fix: changes as requested in PR #310 #302

---
 src/consentManagement/createConsentManagement.ts |  9 +++------
 stories/ConsentManagement.stories.tsx            | 16 ++++------------
 test/integration/vite/src/consentManagement.tsx  |  6 ++----
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/consentManagement/createConsentManagement.ts b/src/consentManagement/createConsentManagement.ts
index 2b6990e4f..d58c7877d 100644
--- a/src/consentManagement/createConsentManagement.ts
+++ b/src/consentManagement/createConsentManagement.ts
@@ -29,7 +29,7 @@ export function createConsentManagement<
         finalityDescription,
         personalDataPolicyLinkProps,
         consentCallback,
-        localStorageKeyPrefix
+        localStorageKeyPrefix = defaultLocalStorageKeyPrefix
     } = params;
 
     const finalities = getFinalitiesFromFinalityDescription({
@@ -39,9 +39,7 @@ export function createConsentManagement<
                 : finalityDescription
     });
 
-    const localStorageKey = `${
-        localStorageKeyPrefix ?? defaultLocalStorageKeyPrefix
-    } ${finalities.join("-")}`;
+    const localStorageKey = `${localStorageKeyPrefix} ${finalities.join("-")}`;
 
     const $finalityConsent = createStatefulObservable<FinalityConsent<Finality> | undefined>(() => {
         if (!isBrowser) {
@@ -106,8 +104,7 @@ export function createConsentManagement<
         useConsent,
         ConsentBannerAndConsentManagement,
         FooterConsentManagementItem,
-        FooterPersonalDataPolicyItem,
-        consentLocalStorageKey: localStorageKey
+        FooterPersonalDataPolicyItem
     };
 }
 
diff --git a/stories/ConsentManagement.stories.tsx b/stories/ConsentManagement.stories.tsx
index 5a5cba16d..87800d3a1 100644
--- a/stories/ConsentManagement.stories.tsx
+++ b/stories/ConsentManagement.stories.tsx
@@ -34,8 +34,7 @@ export const {
     ConsentBannerAndConsentManagement, 
     FooterConsentManagementItem, 
     FooterPersonalDataPolicyItem,
-    useConsent,
-    consentLocalStorageKey
+    useConsent
 } = createConsentManagement({
     /* 
         Can be an object or a function that take the current language as argument.
@@ -122,13 +121,7 @@ export const {
         }
         */
 
-    },
-
-    /*
-    This optional parameter let's you personalise the key that is used to store user's consents in the localStorage.
-    The default value is "${defaultLocalStorageKeyPrefix}"
-    */
-    "localStorageKeyPrefix": "company-name/app-name"
+    }
 });
 \`\`\`
 
@@ -220,8 +213,7 @@ const {
     ConsentBannerAndConsentManagement,
     FooterConsentManagementItem,
     FooterPersonalDataPolicyItem,
-    useConsent,
-    consentLocalStorageKey
+    useConsent
 } = createConsentManagement({
     "finalityDescription": {
         "advertising": {
@@ -292,7 +284,7 @@ function Story() {
             <Button
                 onClick={() => {
                     Object.keys(localStorage)
-                        .filter(key => key.startsWith(consentLocalStorageKey))
+                        .filter(key => key.startsWith(defaultLocalStorageKeyPrefix))
                         .forEach(key => localStorage.removeItem(key));
 
                     location.reload();
diff --git a/test/integration/vite/src/consentManagement.tsx b/test/integration/vite/src/consentManagement.tsx
index 9a837a0f6..8e23b00bc 100644
--- a/test/integration/vite/src/consentManagement.tsx
+++ b/test/integration/vite/src/consentManagement.tsx
@@ -6,8 +6,7 @@ export const {
     ConsentBannerAndConsentManagement, 
     FooterConsentManagementItem, 
     FooterPersonalDataPolicyItem,
-    useConsent,
-    consentLocalStorageKey
+    useConsent
 } = createConsentManagement({
     "finalityDescription": ({ lang }) => ({
         "advertising": {
@@ -42,6 +41,5 @@ export const {
         }
 
         console.log("callback from gdpr hook");
-    },
-    "localStorageKeyPrefix": "company-name/app-name finalityConsent"
+    }
 });