refactor the eventStore logic into layoutStore

.eslintrc.cjs

@@ -53,5 +53,6 @@ module.exports = {
     useHead: 'readonly',
     useError: 'readonly',
     Ref: 'readonly',
+    watch: 'readonly',
   },
 }

components/Common/CookiesConsent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showPopupStatus">
+  <div v-if="layoutStore.isCookieConsentDialogVisible">
     <div class="cookie-consent-banner">
       <div class="continue-wrapper">
         <a class="continue" href="#" @click.prevent="continueWithoutAccepting">
@@ -8,8 +8,8 @@
         <v-icon
           size="20"
           class="fa-solid fa-arrow-right ml-6"
-          @click="showPopupStatus = false"
-        ></v-icon>
+          @click="closePopup()"
+        />
       </div>
       <v-row justify="center">
         <v-col cols="12">
@@ -176,8 +176,9 @@ import CookieManager from '~/services/CookieManager'
 import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
 import type { CookiesPreferences } from '~/types/interface'
 
+const layoutStore = useLayoutStore()
+
 const { cookies } = useCookies()
-const showPopupStatus = ref(false)
 const showCustomizationOptions = ref(false)
 const showNotification = ref(false)
 
@@ -190,13 +191,13 @@ const cookiesPreferences: Ref<CookiesPreferences> = ref({
 })
 
 const showPopup = () => {
-  showPopupStatus.value = true
-  showCustomizationOptions.value = false
-  showNotification.value = false
+  layoutStore.setIsCookieConsentDialogVisible(true)
 }
 
 const closePopup = () => {
-  showPopupStatus.value = false
+  layoutStore.setIsCookieConsentDialogVisible(false)
+  showCustomizationOptions.value = false
+  showNotification.value = false
 }
 
 const notify = () => {

pages/politique-de-confidentialite-et-protection-des-donnees-personnelles.vue

@@ -720,7 +720,9 @@
         <h3>Gestion des cookies</h3>
         Vous pouvez à tout moment modifier vos préférences en cliquant sur le
         lien ci-contre :
-        <NuxtLink class="gestion-preferences" @click="openCustomizeDialog">Gérer mes préférences</NuxtLink>.
+        <NuxtLink class="gestion-preferences" @click="layoutStore.setIsCookieConsentDialogVisible(true)">
+          Gérer mes préférences
+        </NuxtLink>.
       </v-col>
 
 
@@ -729,59 +731,42 @@
 </template>
 
 <script setup>
-import { useEventStore } from '~/stores/eventStore'
-
-const eventStore = useEventStore()
-
-const openCustomizeDialog = () => {
-  eventStore.emit('openCustomizeDialog')
-}
-
+const layoutStore = useLayoutStore()
 </script>
 
 <style scoped>
-:deep().banner-container {
-  height: 20rem !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  text-align: center !important;
+h2,
+h3 {
+  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--on-neutral-color);
+  margin-top: 1rem;
 }
 
 h2 {
   font-size: 1.5rem !important;
-  font-weight: 500;
   line-height: 2.5rem;
   letter-spacing: 0.1rem;
-  text-transform: uppercase;
-  color: #000000;
   margin-bottom: 1rem;
-  margin-top: 1rem;
 }
 
 h3 {
   font-size: 1rem !important;
-  font-weight: 500;
   line-height: 2rem;
-  text-transform: uppercase;
-  color: #000000;
-  margin-top: 1rem;
 }
 
-h2,
-h3,
-p,
-ul,
-li {
-  text-align: justify;
-}
-.liste {
+ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 .gestion-preferences {
-  color: #007bff;
+  color: var(--on-neutral-color-alt);
   cursor: pointer;
+  font-weight: 500;
+}
+
+.gestion-preferences:hover {
+  text-decoration: underline;
 }
 </style>

stores/eventStore.ts

@@ -1,21 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-export const useEventStore = defineStore('eventStore', () => {
-  const events = ref(new Map<string, Function[]>())
-
-  function emit(event: string, ...args: any[]) {
-    if (events.value.has(event)) {
-      events.value.get(event)?.forEach(callback => callback(...args))
-    }
-  }
-
-  function on(event: string, callback: Function) {
-    if (!events.value.has(event)) {
-      events.value.set(event, [])
-    }
-    events.value.get(event)?.push(callback)
-  }
-
-  return { emit, on }
-})

stores/layoutStore.ts

@@ -29,6 +29,11 @@ export const useLayoutStore = defineStore('layout', () => {
     isAnchoredSectionOnScreen.value[sectionId] = value
   }
 
+  const isCookieConsentDialogVisible: Ref<boolean> = ref(false)
+  const setIsCookieConsentDialogVisible = (value: boolean) => {
+    isCookieConsentDialogVisible.value = value
+  }
+
   return {
     isHeaderVisible,
     setIsHeaderVisible,
@@ -39,5 +44,7 @@ export const useLayoutStore = defineStore('layout', () => {
     isAnchoredSectionOnScreen,
     resetAnchoredSections,
     setIsAnchoredSectionOnScreen,
+    isCookieConsentDialogVisible,
+    setIsCookieConsentDialogVisible
   }
 })