Merge pull request #1731 from ga-devfront/feature/CMP-message

Cmp message
PrestaShopCorp · May 21, 2024 · 6d71595 · 6d71595
2 parents 4b43271 + a78a17b
commit 6d71595
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 6 deletions.
diff --git a/_dev/apps/ui/src/assets/scss/components/_button.scss b/_dev/apps/ui/src/assets/scss/components/_button.scss
@@ -26,12 +26,34 @@
   }
 }
 
-.alert .btn-secondary {
-  color: $white;
-  text-decoration: none;
-
-  &:hover {
+.alert {
+  .btn {
+    &[class*="btn-outline"] {
+      color: $primary-800;
+      font-weight: 500;
+    }
+    &: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
@@ -0,0 +1,64 @@
+<template>
+  <div class="col-12">
+    <b-alert
+      variant="info"
+      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-info"
+          @click="onClick"
+        >
+          I understand
+        </b-button>
+      </div>
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import SegmentGenericParams from '@/utils/SegmentGenericParams';
+
+export default {
+  name: 'AlertCMP',
+  methods: {
+    sendEvent() {
+      this.$segment.track('[GGL] Understand CMP requirement', {
+        module: 'psxmarketingwithgoogle',
+        params: SegmentGenericParams,
+      });
+    },
+    onClick() {
+      this.$emit('close');
+      this.sendEvent();
+    },
+  },
+  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
@@ -1,5 +1,11 @@
 <template>
   <div class="pt-2 container">
+    <div
+      v-if="displayCmpAlert"
+      class="row"
+    >
+      <AlertCmp @close="closeCmpAlert" />
+    </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 {
@@ -214,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)}`;
@@ -348,6 +362,9 @@ export default defineComponent({
     ...mapGetters('app', [
       GettersTypesApp.GET_FEATURE_FLAG_ENHANCED_CONVERSIONS,
     ]),
+    displayCmpAlert() {
+      return !!this.$store.getters['googleAds/GET_GOOGLE_ADS_ACCOUNT_CHOSEN'] && this.showCmpAlert;
+    },
     shops() {
       return this.$store.getters['accounts/GET_PS_ACCOUNTS_CONTEXT_SHOPS'];
     },
@@ -448,6 +465,8 @@ export default defineComponent({
       this.initCloudSyncConsent();
     });
 
+    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.
     // We do it if the state is empty

diff --git 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",