finalize CommonCookieConsent component

components/Common/CookiesConsent.vue

@@ -219,10 +219,7 @@ const { cookies } = useCookies()
 const showCustomizationOptions = ref(false)
 const showNotification = ref(false)
 
-const {
-  gtag,
-  initialize: initializeGTag
-} = useGtag()
+const { gtag, initialize: initializeGTag } = useGtag()
 
 /**
  * Cookies options
@@ -235,16 +232,26 @@ const cookiesPreferences: Ref<CookiesPreferences> = ref({
   adPersonalizationConsent: true,
 })
 
+/**
+ * Affiche la popup de choix de consentement aux cookies
+ */
 const showPopup = () => {
   layoutStore.setIsCookieConsentDialogVisible(true)
 }
 
+/**
+ * Ferme la popup de choix de consentement aux cookies
+ */
 const closePopup = () => {
   layoutStore.setIsCookieConsentDialogVisible(false)
   showCustomizationOptions.value = false
   showNotification.value = false
 }
 
+/**
+ * Affiche une notification d'une minute pour permettre à l'utilisateur qui
+ * a refusé les cookies de changer d'avis
+ */
 const notify = () => {
   showNotification.value = true
 
@@ -254,68 +261,71 @@ const notify = () => {
   }, 60000)
 }
 
-const setupCookies = (
-  choice: COOKIE_CONSENT_CHOICE,
-  analyticsConsent: boolean,
-  advertisingConsent: boolean,
-  adUserDataConsent: boolean,
-  adPersonalizationConsent: boolean,
-  duration: number = 365
-) => {
-  cookies.set('cookie_consent', choice, duration + 'd')
-
-  initializeGTag()
-
-  cookiesPreferences.value.analyticsConsent = analyticsConsent
-  cookies.set('analytics_consent', analyticsConsent.toString(), duration + 'd')
-
-  cookiesPreferences.value.advertisingConsent = advertisingConsent
+/**
+ * Créé ou supprime les cookies selon les préférences en cours
+ *
+ * @param duration Durée de vie des cookies (en jours, défaut : 365)
+ */
+const setupCookies = (duration: number = 365) => {
+  // Enregistre les préférences actuelles dans 2 cookies
   cookies.set(
-    'advertising_consent',
-    advertisingConsent.toString(),
+    'cookie_consent',
+    cookiesPreferences.value.consent,
     duration + 'd'
   )
 
-  cookiesPreferences.value.adUserDataConsent = adUserDataConsent
   cookies.set(
-    'ad_user_data_consent',
-    adUserDataConsent.toString(),
+    'cookie_preferences',
+    JSON.stringify({
+      analyticsConsent: cookiesPreferences.value.analyticsConsent,
+      advertisingConsent: cookiesPreferences.value.advertisingConsent,
+      adUserDataConsent: cookiesPreferences.value.adUserDataConsent,
+      adPersonalizationConsent:
+        cookiesPreferences.value.adPersonalizationConsent,
+    }),
     duration + 'd'
   )
 
-  cookiesPreferences.value.adPersonalizationConsent = adPersonalizationConsent
-  cookies.set(
-    'ad_personalization_consent',
-    adPersonalizationConsent.toString(),
-    duration + 'd'
-  )
+  // Initialise et paramètre google tag manager
+  initializeGTag()
 
   gtag('consent', 'update', {
-    analytics_storage: analyticsConsent ? 'granted' : 'denied',
-    ad_storage: advertisingConsent ? 'granted' : 'denied',
-    ad_user_data: adUserDataConsent ? 'granted' : 'denied',
-    ad_personalization: adPersonalizationConsent ? 'granted' : 'denied',
+    analytics_storage: cookiesPreferences.value.analyticsConsent
+      ? 'granted'
+      : 'denied',
+    ad_storage: cookiesPreferences.value.advertisingConsent
+      ? 'granted'
+      : 'denied',
+    ad_user_data: cookiesPreferences.value.adUserDataConsent
+      ? 'granted'
+      : 'denied',
+    ad_personalization: cookiesPreferences.value.adPersonalizationConsent
+      ? 'granted'
+      : 'denied',
   })
 
-  if (!analyticsConsent) {
+  // Nettoie les cookies si ceux ci ne sont plus les bienvenus
+  // TODO: voir si ce nettoyage manuel est nécessaire, ou si google tag manager ne peut pas s'en occuper
+  if (!cookiesPreferences.value.analyticsConsent) {
     purgeAnalyticsCookies()
   }
+  if (!cookiesPreferences.value.advertisingConsent) {
+    purgeAdvertisingCookies()
+  }
 
-  // Store consent date and status
+  // Enregistre la date et le contenu de la dernière acceptation (comme trace)
   localStorage.setItem(
     'cookie_consent',
     JSON.stringify({
       date: new Date(),
-      consent: {
-        analyticsConsent,
-        advertisingConsent,
-        adUserDataConsent,
-        adPersonalizationConsent,
-      },
+      consent: cookiesPreferences.value,
     })
   )
 }
 
+/**
+ * Nettoie les cookies google analytics
+ */
 const purgeAnalyticsCookies = () => {
   cookies.remove('_ga')
   cookies.remove('_gat')
@@ -327,11 +337,26 @@ const purgeAnalyticsCookies = () => {
   })
 }
 
+/**
+ * Nettoie les cookies meta pixel
+ */
+const purgeAdvertisingCookies = () => {
+  cookies.remove('_fbp')
+}
+
 /**
  * Accept and setup all the cookies and close the popup
  */
 const acceptAllCookies = () => {
-  setupCookies(COOKIE_CONSENT_CHOICE.ACCEPTED, true, true, true, true)
+  cookiesPreferences.value = {
+    consent: COOKIE_CONSENT_CHOICE.ACCEPTED,
+    analyticsConsent: true,
+    advertisingConsent: true,
+    adUserDataConsent: true,
+    adPersonalizationConsent: true,
+  }
+
+  setupCookies()
   closePopup()
 }
 
@@ -339,7 +364,15 @@ const acceptAllCookies = () => {
  * Refuse all the cookies, set up the cookie_consent cookie and close the popup
  */
 const declineCookies = () => {
-  setupCookies(COOKIE_CONSENT_CHOICE.DECLINED, false, false, false, false, 7)
+  cookiesPreferences.value = {
+    consent: COOKIE_CONSENT_CHOICE.DECLINED,
+    analyticsConsent: false,
+    advertisingConsent: false,
+    adUserDataConsent: false,
+    adPersonalizationConsent: false,
+  }
+
+  setupCookies(7)
   notify()
   closePopup()
 }
@@ -348,13 +381,8 @@ const declineCookies = () => {
  * Set up the cookies following user preferences and close the popup
  */
 const saveCookiesPreferences = () => {
-  setupCookies(
-    COOKIE_CONSENT_CHOICE.CUSTOMIZED,
-    cookiesPreferences.value.analyticsConsent,
-    cookiesPreferences.value.advertisingConsent,
-    cookiesPreferences.value.adUserDataConsent,
-    cookiesPreferences.value.adPersonalizationConsent
-  )
+  cookiesPreferences.value.consent = COOKIE_CONSENT_CHOICE.CUSTOMIZED
+  setupCookies()
   closePopup()
 }
 
@@ -365,22 +393,20 @@ const continueWithoutAccepting = () => {
   closePopup()
 }
 
+/**
+ * Charge les préférences depuis les cookies
+ */
 const loadActivePreferences = () => {
-  const cookieConsent = cookies.get(
-    'cookie_consent'
-  ) as COOKIE_CONSENT_CHOICE | null
-
-  cookiesPreferences.value.consent =
-    cookieConsent !== null ? cookieConsent : COOKIE_CONSENT_CHOICE.NONE
-
-  cookiesPreferences.value.analyticsConsent =
-    cookies.get('analytics_consent') !== 'false'
-  cookiesPreferences.value.advertisingConsent =
-    cookies.get('advertising_consent') !== 'false'
-  cookiesPreferences.value.adUserDataConsent =
-    cookies.get('ad_user_data_consent') !== 'false'
-  cookiesPreferences.value.adPersonalizationConsent =
-    cookies.get('ad_personalization_consent') !== 'false'
+  const cookieConsentVal = cookies.get('cookie_consent')
+  const cookiePreferencesVal = cookies.get('cookie_preferences')
+
+  if (cookieConsentVal && cookiePreferencesVal) {
+    cookiesPreferences.value = {
+      consent: cookieConsentVal,
+      // @ts-ignore
+      ...cookiePreferencesVal,
+    }
+  }
 }
 
 /**