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/logos/cookies/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 } = useGtag()

/**
 * Cookies options
 */
const cookiesPreferences: Ref<CookiesPreferences> = ref({
  analyticsConsent: true,
  advertisingConsent: true,
  adUserDataConsent: true,
  adPersonalizationConsent: true,
})

const showPopup = () => {
  layoutStore.setIsCookieConsentDialogVisible(true)
}

const closePopup = () => {
  layoutStore.setIsCookieConsentDialogVisible(false)
  showCustomizationOptions.value = false
  showNotification.value = false
}

const notify = () => {
  showNotification.value = true

  // Hide the notification after 1 minute
  setTimeout(() => {
    showNotification.value = false
  }, 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')

  cookiesPreferences.value.analyticsConsent = analyticsConsent
  cookies.set('analytics_consent', analyticsConsent.toString(), duration + 'd')

  cookiesPreferences.value.advertisingConsent = advertisingConsent
  cookies.set(
    'advertising_consent',
    advertisingConsent.toString(),
    duration + 'd'
  )

  cookiesPreferences.value.adUserDataConsent = adUserDataConsent
  cookies.set(
    'ad_user_data_consent',
    adUserDataConsent.toString(),
    duration + 'd'
  )

  cookiesPreferences.value.adPersonalizationConsent = adPersonalizationConsent
  cookies.set(
    'ad_personalization_consent',
    adPersonalizationConsent.toString(),
    duration + 'd'
  )

  gtag('consent', 'update', {
    analytics_storage: analyticsConsent ? 'granted' : 'denied',
    ad_storage: analyticsConsent ? 'granted' : 'denied',
    ad_user_data: adUserDataConsent ? 'granted' : 'denied',
    ad_personalization: adPersonalizationConsent ? 'granted' : 'denied',
  })

  // Store consent date and status
  localStorage.setItem(
    'cookie_consent',
    JSON.stringify({
      date: new Date(),
      consent: {
        analyticsConsent,
        advertisingConsent,
        adUserDataConsent,
        adPersonalizationConsent,
      },
    })
  )
}

/**
 * Accept and setup all the cookies and close the popup
 */
const acceptAllCookies = () => {
  setupCookies(COOKIE_CONSENT_CHOICE.ACCEPTED, true, true, true, true)
  closePopup()
}

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

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

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

const loadActivePreferences = () => {
  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'
}

/**
 * Check if the user has already accepted the cookies when page is mounted
 */
onMounted(() => {
  const cookieConsent = cookies.get('cookie_consent')
  if (!cookieConsent) {
    showPopup()
  }
  loadActivePreferences()
})
</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>