From 877e1c4d79877d9bcf3fb1ebfb8faf0a5e87041f Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Fri, 17 May 2024 17:04:41 +0200
Subject: [PATCH 1/6] feat: add cmp alert

---
 .../ui/src/components/commons/alert-cmp.vue   | 72 +++++++++++++++++++
 _dev/apps/ui/src/views/onboarding-page.vue    | 12 ++++
 .../translations/en/ui.json                   |  9 ++-
 3 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 _dev/apps/ui/src/components/commons/alert-cmp.vue

diff --git a/_dev/apps/ui/src/components/commons/alert-cmp.vue b/_dev/apps/ui/src/components/commons/alert-cmp.vue
new file mode 100644
index 000000000..12ea936de
--- /dev/null
+++ b/_dev/apps/ui/src/components/commons/alert-cmp.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="col-12">
+    <b-alert
+      v-if="display"
+      variant="info"
+      class=""
+      show
+    >
+      <div>
+        <div class="h3">
+          {{ $t('onboarding.cmpAlert.title') }}
+        </div>
+        <p class="mb-2">
+          {{ $t('onboarding.cmpAlert.paragraph') }}
+        </p>
+        <ol>
+          <li>{{ $t('onboarding.cmpAlert.list1') }}</li>
+          <i18n
+            path="onboarding.cmpAlert.list2"
+            tag="li"
+          >
+            <template #link>
+              <a
+                :href="GDPRModuleLink"
+                target="_blank"
+                rel="noopener"
+              >{{ $t('onboarding.cmpAlert.moduleGDPR') }}</a>
+            </template>
+          </i18n>
+        </ol>
+        <b-button
+          size="sm"
+          variant="outline-primary"
+          @click="onClick"
+        >
+          I understand
+        </b-button>
+      </div>
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import SegmentGenericParams from '@/utils/SegmentGenericParams';
+
+export default {
+  name: 'AlertCMP',
+  data() {
+    return {
+      display: true,
+    };
+  },
+  methods: {
+    sendEvent() {
+      this.$segment.track('[GGL] Understand CMP requirement', {
+        module: 'psxmarketingwithgoogle',
+        params: SegmentGenericParams,
+      });
+    },
+    onClick() {
+      localStorage.setItem('alert-cmp-closed', 1);
+      this.sendEvent();
+      this.display = false;
+    },
+  },
+  computed: {
+    GDPRModuleLink() {
+      return `https://addons.prestashop.com/${this.$i18n.locale}/legal/21644-cookies-gdpr-law-blocker-google-consent-mode-v2.html`;
+    },
+  },
+};
+</script>
diff --git a/_dev/apps/ui/src/views/onboarding-page.vue b/_dev/apps/ui/src/views/onboarding-page.vue
index aeae6f92e..853585e75 100644
--- a/_dev/apps/ui/src/views/onboarding-page.vue
+++ b/_dev/apps/ui/src/views/onboarding-page.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="pt-2 container">
+    <div
+      v-if="displayCmpAlert"
+      class="row"
+    >
+      <AlertCmp />
+    </div>
     <div class="row mb-4 ps_gs-onboardingpage">
       <div class="col-12 col-md-5">
         <div
@@ -176,11 +182,13 @@ import TrackingActivationModal from '@/components/campaigns/tracking-activation-
 import PsToast from '@/components/commons/ps-toast.vue';
 import PopinModuleConfigured from '@/components/commons/popin-configured.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
+import AlertCmp from '@/components/commons/alert-cmp.vue';
 import {CampaignTypes} from '@/enums/reporting/CampaignStatus';
 import EnhancedConversionsCard from '@/components/enhanced-conversions/enhanced-conversions-card.vue';
 import ModalEcIntro from '@/components/enhanced-conversions/modal-ec-intro.vue';
 import {AccountInformations} from '@/store/modules/google-ads/state';
 import GettersTypesApp from '@/store/modules/app/getters-types';
+import {getDataFromLocalStorage} from '@/utils/LocalStorage';
 
 export default defineComponent({
   name: 'OnboardingPage',
@@ -202,6 +210,7 @@ export default defineComponent({
     PsToast,
     TrackingActivationModal,
     PopinModuleConfigured,
+    AlertCmp,
   },
   data() {
     return {
@@ -348,6 +357,9 @@ export default defineComponent({
     ...mapGetters('app', [
       GettersTypesApp.GET_FEATURE_FLAG_ENHANCED_CONVERSIONS,
     ]),
+    displayCmpAlert() {
+      return !this.$store.getters['google-ads/GET_GOOGLE_ADS_ACCOUNT_CHOSEN'] && !getDataFromLocalStorage('alert-cmp-closed');
+    },
     shops() {
       return this.$store.getters['accounts/GET_PS_ACCOUNTS_CONTEXT_SHOPS'];
     },
diff --git a/_dev/packages/mktg-with-google-common/translations/en/ui.json b/_dev/packages/mktg-with-google-common/translations/en/ui.json
index 7955f5f27..1428b4ab3 100644
--- a/_dev/packages/mktg-with-google-common/translations/en/ui.json
+++ b/_dev/packages/mktg-with-google-common/translations/en/ui.json
@@ -67,6 +67,13 @@
       }
     },
     "onboarding": {
+      "cmpAlert": {
+        "title": "GDPR updates",
+        "paragraph": "Starting March 2024, businesses advertising to users in the European Economic Area (EEA) must create a strong framework to collect and communicate end-users’ consent choices via consent banners integrated with Google’s Consent Mode. To build a strong foundation for measuring your ads follow these steps:",
+        "list1": "For users using the Prestashop Marketing with Google module, update the module to the latest version",
+        "list2": "Set up a cookie banner through a supported, dedicated Consent Management Platform. If you do not already have one, we recommend that you use the following consent management platform, which is compliant with the new regulations: {link}",
+        "moduleGDPR": "Cookies GDPR Law (Blocker) + Google Consent Mode V2"
+      },
       "sectionTitle": {
         "psAccount": "Link your shop to your PrestaShop account",
         "freeListing": {
@@ -445,7 +452,7 @@
           "syncFilteredProducts": "Synchronize filtered products",
           "syncFilteredProductsDesc": "Only the products you select will be synchronized."
         }
-        
+
       },
       "syncSchedule": {
         "title": "Synchronization schedule",

From ab0cf30bdedaa60f73f34738a1fd11149c07551b Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Mon, 20 May 2024 10:21:35 +0200
Subject: [PATCH 2/6] fix: condition to open alert

---
 _dev/apps/ui/src/components/commons/alert-cmp.vue | 10 +---------
 _dev/apps/ui/src/views/onboarding-page.vue        | 13 +++++++++++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/_dev/apps/ui/src/components/commons/alert-cmp.vue b/_dev/apps/ui/src/components/commons/alert-cmp.vue
index 12ea936de..a9ac56af8 100644
--- a/_dev/apps/ui/src/components/commons/alert-cmp.vue
+++ b/_dev/apps/ui/src/components/commons/alert-cmp.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="col-12">
     <b-alert
-      v-if="display"
       variant="info"
-      class=""
       show
     >
       <div>
@@ -45,11 +43,6 @@ import SegmentGenericParams from '@/utils/SegmentGenericParams';
 
 export default {
   name: 'AlertCMP',
-  data() {
-    return {
-      display: true,
-    };
-  },
   methods: {
     sendEvent() {
       this.$segment.track('[GGL] Understand CMP requirement', {
@@ -58,9 +51,8 @@ export default {
       });
     },
     onClick() {
-      localStorage.setItem('alert-cmp-closed', 1);
+      this.$emit('close');
       this.sendEvent();
-      this.display = false;
     },
   },
   computed: {
diff --git a/_dev/apps/ui/src/views/onboarding-page.vue b/_dev/apps/ui/src/views/onboarding-page.vue
index 853585e75..9d93e0e91 100644
--- a/_dev/apps/ui/src/views/onboarding-page.vue
+++ b/_dev/apps/ui/src/views/onboarding-page.vue
@@ -4,7 +4,7 @@
       v-if="displayCmpAlert"
       class="row"
     >
-      <AlertCmp />
+      <AlertCmp @close="closeCmpAlert" />
     </div>
     <div class="row mb-4 ps_gs-onboardingpage">
       <div class="col-12 col-md-5">
@@ -223,9 +223,14 @@ export default defineComponent({
       phoneNumberVerified: false,
       cloudSyncSharingConsentScreenStarted: false,
       cloudSyncSharingConsentGiven: false,
+      showCmpAlert: true,
     };
   },
   methods: {
+    closeCmpAlert() {
+      localStorage.setItem('cmp-alert-closed', '1');
+      this.showCmpAlert = false;
+    },
     onMerchantCenterAccountSelected(selectedAccount) {
       this.isMcaLinking = true;
       const correlationId = `${Math.floor(Date.now() / 1000)}`;
@@ -358,7 +363,7 @@ export default defineComponent({
       GettersTypesApp.GET_FEATURE_FLAG_ENHANCED_CONVERSIONS,
     ]),
     displayCmpAlert() {
-      return !this.$store.getters['google-ads/GET_GOOGLE_ADS_ACCOUNT_CHOSEN'] && !getDataFromLocalStorage('alert-cmp-closed');
+      return !!this.$store.getters['googleAds/GET_GOOGLE_ADS_ACCOUNT_CHOSEN'] && this.showCmpAlert;
     },
     shops() {
       return this.$store.getters['accounts/GET_PS_ACCOUNTS_CONTEXT_SHOPS'];
@@ -460,6 +465,10 @@ export default defineComponent({
       this.initCloudSyncConsent();
     });
 
+    if (localStorage.getItem('cmp-alert-closed')) {
+      this.showCmpAlert = false;
+    }
+
     // Try to retrieve Google account details. If the merchant is not onboarded,
     // this action will dispatch another one to generate the authentication route.
     // We do it if the state is empty

From e45e25d6c0d900c75dcad3ddcc13520db0499325 Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Mon, 20 May 2024 10:23:41 +0200
Subject: [PATCH 3/6] fix: lint

---
 _dev/apps/ui/src/views/onboarding-page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_dev/apps/ui/src/views/onboarding-page.vue b/_dev/apps/ui/src/views/onboarding-page.vue
index 9d93e0e91..e404edb09 100644
--- a/_dev/apps/ui/src/views/onboarding-page.vue
+++ b/_dev/apps/ui/src/views/onboarding-page.vue
@@ -465,7 +465,7 @@ export default defineComponent({
       this.initCloudSyncConsent();
     });
 
-    if (localStorage.getItem('cmp-alert-closed')) {
+    if (getDataFromLocalStorage('cmp-alert-closed')) {
       this.showCmpAlert = false;
     }
 

From ddd725f15d7ad762f28f971f3f6ddaa6c526a4c4 Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Mon, 20 May 2024 10:24:51 +0200
Subject: [PATCH 4/6] fix: lint

---
 _dev/apps/ui/src/views/onboarding-page.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/_dev/apps/ui/src/views/onboarding-page.vue b/_dev/apps/ui/src/views/onboarding-page.vue
index e404edb09..a24b6d4a4 100644
--- a/_dev/apps/ui/src/views/onboarding-page.vue
+++ b/_dev/apps/ui/src/views/onboarding-page.vue
@@ -465,9 +465,7 @@ export default defineComponent({
       this.initCloudSyncConsent();
     });
 
-    if (getDataFromLocalStorage('cmp-alert-closed')) {
-      this.showCmpAlert = false;
-    }
+    this.showCmpAlert = !getDataFromLocalStorage('cmp-alert-closed');
 
     // Try to retrieve Google account details. If the merchant is not onboarded,
     // this action will dispatch another one to generate the authentication route.

From 849877d5088fc0c2fecd57243a8b14eb72740bf1 Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Tue, 21 May 2024 09:46:32 +0200
Subject: [PATCH 5/6] fix: btn style inside alert

---
 .../src/assets/scss/components/_button.scss   | 31 ++++++++++++++++---
 .../ui/src/components/commons/alert-cmp.vue   |  2 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_dev/apps/ui/src/assets/scss/components/_button.scss b/_dev/apps/ui/src/assets/scss/components/_button.scss
index 32736b905..9c2853f9b 100644
--- a/_dev/apps/ui/src/assets/scss/components/_button.scss
+++ b/_dev/apps/ui/src/assets/scss/components/_button.scss
@@ -26,12 +26,33 @@
   }
 }
 
-.alert .btn-secondary {
-  color: $white;
-  text-decoration: none;
-
-  &:hover {
+.alert {
+  .btn {
+    &[class*="btn-outline"] {
+      color: $primary-800;
+    }
+    &:hover {
+      &.btn-outline-info {
+        background-color: $blue-100;
+      }
+      &.btn-outline-warning {
+        background-color: $yellow-100;
+      }
+      &.btn-outline-success {
+        background-color: $green-100;
+      }
+      &.btn-outline-danger {
+        background-color: $red-100;
+      }
+    }
+  }
+  .btn-secondary {
     color: $white;
+    text-decoration: none;
+
+    &:hover {
+      color: $white;
+    }
   }
 }
 
diff --git a/_dev/apps/ui/src/components/commons/alert-cmp.vue b/_dev/apps/ui/src/components/commons/alert-cmp.vue
index a9ac56af8..1aacf9f45 100644
--- a/_dev/apps/ui/src/components/commons/alert-cmp.vue
+++ b/_dev/apps/ui/src/components/commons/alert-cmp.vue
@@ -28,7 +28,7 @@
         </ol>
         <b-button
           size="sm"
-          variant="outline-primary"
+          variant="outline-info"
           @click="onClick"
         >
           I understand

From a78a17b63e32be06d903aaf72f803f4cb212b649 Mon Sep 17 00:00:00 2001
From: Alexis Guyomar <alexis.guyomar@prestashop.com>
Date: Tue, 21 May 2024 09:50:14 +0200
Subject: [PATCH 6/6] fix: btn style inside alert

---
 _dev/apps/ui/src/assets/scss/components/_button.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_dev/apps/ui/src/assets/scss/components/_button.scss b/_dev/apps/ui/src/assets/scss/components/_button.scss
index 9c2853f9b..3aebd937b 100644
--- a/_dev/apps/ui/src/assets/scss/components/_button.scss
+++ b/_dev/apps/ui/src/assets/scss/components/_button.scss
@@ -30,6 +30,7 @@
   .btn {
     &[class*="btn-outline"] {
       color: $primary-800;
+      font-weight: 500;
     }
     &:hover {
       &.btn-outline-info {