Skip to content

Commit

Permalink
Merge pull request #1731 from ga-devfront/feature/CMP-message
Browse files Browse the repository at this point in the history
Cmp message
  • Loading branch information
ga-devfront committed May 21, 2024
2 parents 4b43271 + a78a17b commit 6d71595
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 6 deletions.
32 changes: 27 additions & 5 deletions _dev/apps/ui/src/assets/scss/components/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down
64 changes: 64 additions & 0 deletions _dev/apps/ui/src/components/commons/alert-cmp.vue
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions _dev/apps/ui/src/views/onboarding-page.vue
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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',
Expand All @@ -202,6 +210,7 @@ export default defineComponent({
PsToast,
TrackingActivationModal,
PopinModuleConfigured,
AlertCmp,
},
data() {
return {
Expand All @@ -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)}`;
Expand Down Expand Up @@ -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'];
},
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -445,7 +452,7 @@
"syncFilteredProducts": "Synchronize filtered products",
"syncFilteredProductsDesc": "Only the products you select will be synchronized."
}

},
"syncSchedule": {
"title": "Synchronization schedule",
Expand Down

0 comments on commit 6d71595

Please sign in to comment.