site_logiciels/components/Common/CookiesConsent.vue

<template>
  <div v-if="layoutStore.isCookieConsentDialogVisible">
    <div v-if="!showCustomizationOptions" class="cookie-consent-banner">
      <div class="continue-wrapper">
        <a class="continue" href="#" @click.prevent="continueWithoutAccepting">
          Continuer sans accepter
        </a>
        <v-icon
          size="20"
          class="fa-solid fa-arrow-right ml-6"
          @click="closePopup()"
        />
      </div>
      <v-row justify="center">
        <v-col cols="12">
          <img
            src="/images/components/cookie-consent/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png"
            alt="Cookie"
            class="cookie-image"
          />
        </v-col>
      </v-row>
      <v-row no-gutters>
        <v-col cols="12">
          <div class="text">
            <p>GESTION DES COOKIES</p>
          </div>
        </v-col>
      </v-row>
      <p class="details-cookies" style="padding-left: 20px">
        Le site Opentalent.fr utilise des cookies fonctionnels nécessaires à la
        navigation du site et d'autres technologies similaire pour plusieurs
        objectifs : des cookies d'analyse de l'audience du site, des cookies de
        personnalisation de contenu et des cookies publicitaires. Pour plus de
        détail, veuillez consulter notre
        <NuxtLink to="/politique-de-confidentialite#cookie-policy">
          Politique de confidentialité</NuxtLink
        >. Vous pouvez ajuster vos préférences en matière de cookies à tout
        moment en cliquant sur le bouton "Gérer mes préférences"
      </p>
      <div class="horizontal-line"></div>
      <div class="actions">
        <button
          class="customize-button"
          @click="showCustomizationOptions = true"
        >
          Gérer mes préférences
        </button>
        <button class="accept-button" @click="acceptAllCookies">
          Tout accepter
        </button>
        <!-- <button class="decline-button" @click="declineCookies">Refuser</button> -->
      </div>
    </div>

    <v-dialog v-model="showCustomizationOptions" persistent max-width="600px">
      <v-card>
        <v-row class="headline">
          <v-btn
            class="close-dialog"
            :icon="true"
            @click="showCustomizationOptions = false"
          >
            <v-icon size="20" class="fas fa-times" />
          </v-btn>

          <v-card-title>Gérer mes préferences</v-card-title>
        </v-row>

        <p class="gestion-preferences">
          Vous pouvez définir vos préférences sur la manière dont vous souhaitez
          que vos données soient utilisées en fonction des finalités et des
          entreprises tierces ci-dessous. Certains tiers peuvent traiter des
          données sur la base d'un intérêt légitime et vous pouvez choisir de
          vous désinscrire.
        </p>

        <v-container class="preferences-actions text-end">
          <button class="decline-button" @click="declineCookies">
            Tout refuser
          </button>
          <button class="accept-button" @click="acceptAllCookies">
            Tout accepter
          </button>
        </v-container>

        <v-card-text>
          <h4>Des cookies tiers permettant de réaliser des statistiques</h4>

          <v-row align="center">
            <v-col cols="auto">
              <v-switch
                v-model="cookiesPreferences.analyticsConsent"
                label="Mesure d'audience"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.analyticsConsent ? 'Autorisé' : 'Non-autorisé'
            }}</v-col>
          </v-row>
          <p>
            Ces cookies nous permettent d'établir des statistiques, des volumes
            de fréquentation et d'utilisation des divers éléments de notre site,
            nous permettant d’optimiser son fonctionnement.
          </p>

          <h4 class="mt-6">Des cookies tiers à visée publicitaire</h4>

          <v-row align="center">
            <v-col cols="auto">
              <v-switch
                v-model="cookiesPreferences.advertisingConsent"
                label="Suivi publicitaire"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.advertisingConsent
                ? 'Autorisé'
                : 'Non-autorisé'
            }}</v-col>
          </v-row>
          <p>
            Autoriser le stockage et l'accès aux cookies pour diffuser des
            annonces publicitaires personnalisées. Cela permet de vous montrer
            des publicités plus pertinentes.
          </p>

          <v-row align="center">
            <v-col cols="auto">
              <v-switch
                v-model="cookiesPreferences.adUserDataConsent"
                label="Données Utilisateur pour la Publicité"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.advertisingConsent
                ? 'Autorisé'
                : 'Non-autorisé'
            }}</v-col>
          </v-row>
          <p>
            Autoriser la collecte et l'utilisation de vos données personnelles
            (comme votre adresse e-mail ou numéro de téléphone) pour créer des
            profils de publicité personnalisés et améliorer le ciblage des
            annonces.
          </p>

          <v-row align="center">
            <v-col cols="auto">
              <v-switch
                v-model="cookiesPreferences.adPersonalizationConsent"
                label="Personnalisation des annonces"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.advertisingConsent
                ? 'Autorisé'
                : 'Non-autorisé'
            }}</v-col>
          </v-row>
          <p>
            Autoriser la personnalisation des annonces en fonction de vos
            préférences et de votre comportement de navigation pour vous offrir
            des publicités plus pertinentes et ciblées.
          </p>
        </v-card-text>

        <v-card-actions>
          <v-btn color="secondary" @click="showCustomizationOptions = false">
            Fermer
          </v-btn>

          <v-spacer />

          <button class="accept-button" @click="saveCookiesPreferences">
            Sauvegarder
          </button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
  <v-alert
    v-model="showNotification"
    title="Confirmation"
    type="warning"
    width="400"
    closable
    transition="fade-transition"
    density="compact"
    class="alert"
  >
    Vous avez refusé nos cookies. Si vous le souhaitez, vous pouvez encore
    modifier votre décision en
    <a href="#" @click="showPopup()">cliquant ici</a>.
  </v-alert>
</template>

<script setup lang="ts">
import { onMounted, type Ref, ref } from 'vue'
import { useCookies } from 'vue3-cookies'
import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
import type { CookiesPreferences } from '~/types/interface'

const layoutStore = useLayoutStore()

const { cookies } = useCookies()
const showCustomizationOptions = ref(false)
const showNotification = ref(false)

const { gtag, initialize: initializeGTag } = useGtag()

/**
 * Cookies options
 */
const cookiesPreferences: Ref<CookiesPreferences> = ref({
  consent: COOKIE_CONSENT_CHOICE.NONE,
  analyticsConsent: true,
  advertisingConsent: true,
  adUserDataConsent: true,
  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

  // Hide the notification after 1 minute
  setTimeout(() => {
    showNotification.value = false
  }, 60000)
}

/**
 * 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(
    'cookie_consent',
    cookiesPreferences.value.consent,
    duration + 'd'
  )

  cookies.set(
    'cookie_preferences',
    JSON.stringify({
      analyticsConsent: cookiesPreferences.value.analyticsConsent,
      advertisingConsent: cookiesPreferences.value.advertisingConsent,
      adUserDataConsent: cookiesPreferences.value.adUserDataConsent,
      adPersonalizationConsent:
        cookiesPreferences.value.adPersonalizationConsent,
    }),
    duration + 'd'
  )

  // Initialise et paramètre google tag manager
  initializeGTag()

  gtag('consent', 'update', {
    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',
  })

  // 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()
  }

  // Enregistre la date et le contenu de la dernière acceptation (comme trace)
  localStorage.setItem(
    'cookie_consent',
    JSON.stringify({
      date: new Date(),
      consent: cookiesPreferences.value,
    })
  )
}

/**
 * Nettoie les cookies google analytics
 */
const purgeAnalyticsCookies = () => {
  cookies.remove('_ga')
  cookies.remove('_gat')
  cookies.remove('_gid')
  cookies.keys().forEach((name) => {
    if (/_ga_\w{10}/.test(name)) {
      cookies.remove(name)
    }
  })
}

/**
 * Nettoie les cookies meta pixel
 */
const purgeAdvertisingCookies = () => {
  cookies.remove('_fbp')
}

/**
 * Accept and setup all the cookies and close the popup
 */
const acceptAllCookies = () => {
  cookiesPreferences.value = {
    consent: COOKIE_CONSENT_CHOICE.ACCEPTED,
    analyticsConsent: true,
    advertisingConsent: true,
    adUserDataConsent: true,
    adPersonalizationConsent: true,
  }

  setupCookies()
  closePopup()
}

/**
 * Refuse all the cookies, set up the cookie_consent cookie and close the popup
 */
const declineCookies = () => {
  cookiesPreferences.value = {
    consent: COOKIE_CONSENT_CHOICE.DECLINED,
    analyticsConsent: false,
    advertisingConsent: false,
    adUserDataConsent: false,
    adPersonalizationConsent: false,
  }

  setupCookies(7)
  notify()
  closePopup()
}

/**
 * Set up the cookies following user preferences and close the popup
 */
const saveCookiesPreferences = () => {
  cookiesPreferences.value.consent = COOKIE_CONSENT_CHOICE.CUSTOMIZED
  setupCookies()
  closePopup()
}

/**
 * Continue without accepting cookies
 */
const continueWithoutAccepting = () => {
  closePopup()
}

/**
 * Charge les préférences depuis les cookies
 */
const loadActivePreferences = () => {
  const cookieConsentVal = cookies.get('cookie_consent')
  const cookiePreferencesVal = cookies.get('cookie_preferences')

  if (cookieConsentVal && cookiePreferencesVal) {
    cookiesPreferences.value = {
      consent: cookieConsentVal,
      // @ts-ignore
      ...cookiePreferencesVal,
    }
  }
}

/**
 * Check if the user has already accepted the cookies when page is mounted
 */
onMounted(() => {
  loadActivePreferences()
  if (cookiesPreferences.value.consent === COOKIE_CONSENT_CHOICE.NONE) {
    showPopup()
  }
})
</script>

<style scoped lang="scss">
.gestion-preferences {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 10px;
  padding: 20px;
  text-align: justify;
}

.preferences-actions {
  overflow: visible;
}

.headline {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 10px 0;
  background-color: var(--secondary-color);
  color: var(--on-secondary-color);
  text-transform: uppercase;
  padding: 15px;
}

.cookie-consent-banner {
  background: var(--neutral-color);
  position: fixed;
  bottom: 10px;
  left: 15px;
  max-width: 550px;
  z-index: 1000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
}

.cookie-image {
  width: 150px;
  margin: 0;
}

.text {
  padding-top: 10px;
  padding-bottom: 0;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
}

.details-cookies {
  padding: 10px;
  text-align: justify;
}

.horizontal-line {
  width: 90%;
  height: 1px;
  background-color: var(--neutral-color-alt-strong);
  margin-top: 10px;
  margin-bottom: 10px;
}

.actions {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.accept-button,
.customize-button {
  background-color: var(--on-primary-color-alt);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

.decline-button {
  border: 1px solid var(--on-neutral-color);
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

.accept-button:hover,
.customize-button:hover {
  background-color: var(--on-primary-color-alt);
}

.cookie-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-neutral-color-light);
}

.custom-switch .v-input--selection-controls__ripple .v-ripple__container {
  background-color: var(--v-primary-color);
}

.custom-switch,
.v-input--selection-controls__ripple--active,
.v-ripple__container {
  background-color: var(--v-primary-darken4);
}

.custom-switch .v-input--selection-controls__input {
  --v-theme-primary: var(--v-primary-base);
  --v-theme-primary-lighten4: var(--v-primary-lighten4);
  --v-theme-primary-darken4: var(--v-primary-darken4);
}

.custom-switch,
.v-input--selection-controls__input,
input:checked,
.v-input--selection-controls__ripple,
.v-ripple__container {
  background-color: var(--v-primary-darken4);
}

.custom-switch,
.v-input--selection-controls__input,
input:checked,
.v-input--selection-controls__ripple,
.v-ripple__container,
.v-ripple__animation {
  background-color: var(--v-primary-darken4);
}

:deep(.v-switch__track) {
  background-color: var(--warning-color);
}

.close-dialog {
  background: none !important;
  box-shadow: none !important;
}

.continue {
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--on-neutral-color);
}

.continue-wrapper {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: auto;
}

:deep(.v-switch .v-label) {
  opacity: 0.8;
}

.alert {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;

  a {
    color: var(--on-primary-color);
    font-weight: 700;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}
</style>