site_logiciels/components/Common/CookiesConsent.vue

<template>
  <div v-if="showPopupStatus">
    <div 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="showPopupStatus = false"
        ></v-icon>
      </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.allowGoogleAnalytics"
                label="Google Analytics"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.allowGoogleAnalytics
                ? '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. Lien vers la
            Politique de protection des données de Google Analytics :
            <a href="https://policies.google.com/">
              https://policies.google.com/</a
            >
          </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.allowMetaPixel"
                label="Meta Pixel"
                hide-details
                color="green"
                inset
              />
            </v-col>
            <v-col>{{
              cookiesPreferences.allowMetaPixel ? 'Autorisé' : 'Non-autorisé'
            }}</v-col>
          </v-row>
          <p>
            Ces cookies sont installés par Facebook. Ce service nous permet
            d'établir des statistiques de consultation des publicités. Lien vers
            la Politique de protection des données de Facebook Pixel :
            <a
              href="https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0"
            >
              https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0
            </a>
          </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 CookieManager from '~/services/CookieManager'
import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
import type { CookiesPreferences } from '~/types/interface'

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

/**
 * Cookies options
 */
const cookiesPreferences: Ref<CookiesPreferences> = ref({
  allowGoogleAnalytics: true,
  allowMetaPixel: true,
})

const showPopup = () => {
  showPopupStatus.value = true
  showCustomizationOptions.value = false
  showNotification.value = false
}

const closePopup = () => {
  showPopupStatus.value = false
}

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

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

const setupCookies = (
  choice: COOKIE_CONSENT_CHOICE,
  allowGoogleAnalytics: boolean,
  allowMetaPixel: boolean,
  duration: number = 365
) => {
  cookies.set('cookie_consent', choice, duration + 'd')

  cookiesPreferences.value.allowGoogleAnalytics = allowGoogleAnalytics
  cookies.set('ga_consent', allowGoogleAnalytics.toString(), duration + 'd')
  if (allowGoogleAnalytics) {
    CookieManager.makeGoogleAnalyticsCookies('UA-XXXXX-Y')
  } else {
    purgeGoogleCookies()
  }

  cookiesPreferences.value.allowMetaPixel = allowMetaPixel
  cookies.set('mp_consent', allowMetaPixel.toString(), duration + 'd')
  if (allowMetaPixel) {
    CookieManager.makeMetaPixelCookies('1045498113172655')
  } else {
    purgeMetaCookies()
  }

  // Store consent date and status
  localStorage.setItem(
    'cookie_consent',
    JSON.stringify({
      date: new Date(),
      consent: { allowGoogleAnalytics, allowMetaPixel },
    })
  )
}

const purgeGoogleCookies = () => {
  cookies.remove('google') // TODO: complete
}

const purgeMetaCookies = () => {
  cookies.remove('google') // TODO: complete
}

/**
 * Accept and setup all the cookies and close the popup
 */
const acceptAllCookies = () => {
  setupCookies(COOKIE_CONSENT_CHOICE.ACCEPTED, 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, 7)
  notify()
  closePopup()
}

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

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

const loadActivePreferences = () => {
  cookiesPreferences.value.allowGoogleAnalytics =
    cookies.get('ga_consent') === 'true'
  cookiesPreferences.value.allowMetaPixel = cookies.get('mp_consent') === 'true'
}

/**
 * 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>