site_logiciels/components/Common/CookiesConsent.vue

<template>
  <div v-if="showPopup || show" 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="showPopup = 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="customizeCookies">
        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="customizeDialog" persistent max-width="600px">
    <v-card>
      <v-row class="headline">
        <v-btn class="close-dialog" icon @click="closeCustomizeDialog"
          ><v-icon size="20" class="fas fa-times"></v-icon
        ></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="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="tempCookiesOptions.googleAnalytics"
              label="Google Analytics"
              hide-details
              color="green"
              inset
            />
          </v-col>
          <v-col></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="tempCookiesOptions.metaPixel"
              label="Meta Pixel"
              hide-details
              color="green"
              inset
            />
          </v-col>
          <v-col></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="closeCustomizeDialog">Fermer</v-btn>
        <v-spacer></v-spacer>
        <button class="accept-button" @click="saveCookiesPreferences">
          Sauvegarder
        </button>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <div v-if="showNotification" class="cookie-notification">
    Vous avez refusé nos cookies. Vous pouvez modifier votre décision
    <a href="#" @click="modifyDecision">ici</a>.
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, defineProps } from 'vue'
import { useCookies } from 'vue3-cookies'
import { useEventStore } from '~/stores/eventStore'

const { cookies } = useCookies()
const showPopup = ref(false)
const customizeDialog = ref(false)
const showNotification = ref(false)
const eventStore = useEventStore()

/**
 * Cookies options
 */
const cookiesOptions = ref({
  googleAnalytics: true,
  metaPixel: true,
})

/**
 * Temporary cookies options
 */
const tempCookiesOptions = ref({
  googleAnalytics: true,
  metaPixel: true,
})

/**
 * Continue without accepting cookies
 */
const continueWithoutAccepting = () => {
  showPopup.value = false
}

/**
 * Accept all cookies
 */
const acceptAllCookies = () => {
  cookies.set('cookie_consent', 'accepted', '365d')
  cookies.set('ga_consent', 'true', '365d')
  cookies.set('mp_consent', 'true', '365d')
  cookiesOptions.value.googleAnalytics = true
  cookiesOptions.value.metaPixel = true
  tempCookiesOptions.value.googleAnalytics = true
  tempCookiesOptions.value.metaPixel = true
  initializeAnalytics()
  showPopup.value = false
  customizeDialog.value = false
}

const removeCookie = (cookieName) => {
  cookies.remove(cookieName)
}

const closeCustomizeDialog = () => {
  customizeDialog.value = false
  showPopup.value = true 
}

const declineCookies = () => {
  cookies.set('cookie_consent', 'declined', '7d')
  cookies.set('ga_consent', 'false', '7d')
  cookies.set('mp_consent', 'false', '7d')
  showPopup.value = false
  showNotification.value = true
  customizeDialog.value = false
  // Hide the notification after 1 minute
  setTimeout(() => {
    showNotification.value = false
  }, 60000)
}

const customizeCookies = () => {
  tempCookiesOptions.value = { ...cookiesOptions.value }
  customizeDialog.value = true
  showPopup.value = false
}

const saveCookiesPreferences = () => {
  console.log('Saving cookies preferences')
  cookies.set('cookie_consent', 'customized', '365d')
  cookies.set(
    'ga_consent',
    tempCookiesOptions.value.googleAnalytics.toString(),
    '365d',
  )
  cookies.set('mp_consent', tempCookiesOptions.value.metaPixel.toString(), '365d')

  // Supprimer les cookies si les options sont désactivées
  if (!tempCookiesOptions.value.googleAnalytics) {
    removeCookie('ga_consent')
  }
  if (!tempCookiesOptions.value.metaPixel) {
    removeCookie('mp_consent')
  }
  // Stocker la preuve de consentement
  localStorage.setItem(
    'cookie_consent',
    JSON.stringify({
      date: new Date(),
      consent: tempCookiesOptions.value,
    }),
  )

  cookiesOptions.value = { ...tempCookiesOptions.value }

  if (cookiesOptions.value.googleAnalytics) initializeAnalytics()
  customizeDialog.value = false
  showPopup.value = false
}

/**
 * Modify the decision
 */
const modifyDecision = () => {
  showNotification.value = false
  showPopup.value = true
}

/**
 * Initialize Google Analytics and Meta Pixel
 */
const initializeAnalytics = () => {
  if (cookiesOptions.value.googleAnalytics) {
    // Load Google Analytics script
    ;(function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r
      ;(i[r] =
        i[r] ||
        function () {
          ;(i[r].q = i[r].q || []).push(arguments)
        }),
        (i[r].l = 1 * new Date())
      ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
      a.async = 1
      a.src = g
      m.parentNode.insertBefore(a, m)
    })(
      window,
      document,
      'script',
      'https://www.googletagmanager.com/gtag/js?id=G-L8PZ9TEFNX',
      'ga',
    )

    ga('create', 'UA-XXXXX-Y', 'auto')
    ga('send', 'pageview')
  }
  if (cookiesOptions.value.metaPixel) {
    // Load Meta Pixel script
    !(function (f, b, e, v, n, t, s) {
      if (f.fbq) return
      n = f.fbq = function () {
        n.callMethod
          ? n.callMethod.apply(n, arguments)
          : n.queue.push(arguments)
      }
      if (!f._fbq) f._fbq = n
      n.push = n
      n.loaded = !0
      n.version = '2.0'
      n.queue = []
      t = b.createElement(e)
      t.async = !0
      t.src = v
      s = b.getElementsByTagName(e)[0]
      s.parentNode.insertBefore(t, s)
    })(
      window,
      document,
      'script',
      'https://connect.facebook.net/en_US/fbevents.js',
    )
    fbq('init', '1045498113172655')
    fbq('track', 'PageView')
  }
}

/**
 * Check if the user has already accepted the cookies
 */
onMounted(() => {
  const cookieConsent = cookies.get('cookie_consent')
  if (!cookieConsent) {
    showPopup.value = true
  }
  const gaConsent = cookies.get('ga_consent')
  const mpConsent = cookies.get('mp_consent')
  if (gaConsent !== undefined)
    cookiesOptions.value.googleAnalytics = gaConsent === 'false'
  if (mpConsent !== undefined)
    cookiesOptions.value.metaPixel = mpConsent === 'false'

    eventStore.on('openCustomizeDialog', customizeCookies)
})

</script>

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

.headline {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 10px;
  background-color: #9edbdd;
  text-transform: uppercase;
  padding: 15px;
}
.cookie-consent-banner {
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  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-family: 'Barlow';
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
}

.details-cookies {
  font-family: 'Barlow';
  padding: 10px;
  text-align: center;
  text-align: justify;
}

.horizontal-line {
  width: 90%;
  height: 1px;
  background-color: #7e7d7d;
  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-notification {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 5px;
  z-index: 1100;
}

.cookie-description {
  margin: 0;
  font-size: 0.875rem;
  color: #555;
}

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

.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: red;
}

.close-dialog {
  background: none !important;
  box-shadow: none !important;
}
.continue{
  font-size: .9rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  text-decoration: none !important;
  color: black ;
}

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