Fix : Messages for updating the module (#1796)

* Messages of monetization * Prestafont added to module * Prestafont added to module * delete unused component * fix error prestafont * fix: messages for updating the module * fix: messages for updating the module
PrestaShopCorp · Aug 1, 2024 · 09eedae · 09eedae
1 parent 7aece73
commit 09eedae
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 50 deletions.
diff --git a/_dev/apps/ui/src/components/monetization/monetization-alert-warning-update-module.vue b/_dev/apps/ui/src/components/monetization/monetization-alert-warning-update-module.vue
@@ -6,10 +6,10 @@
   >
     <div>
       <h3 class="h3">
-        {{ $t('banner.monetization.bannerWarningTitle') }}
+        {{ $t('monetization.bannerWarningTitle') }}
       </h3>
       <p>
-        {{ $t('banner.monetization.bannerWarningText') }}
+        {{ $t('monetization.bannerWarningText') }}
       </p>
     </div>
     <b-button
@@ -42,21 +42,20 @@ export default defineComponent({
       if (this.loading) {
         return;
       }
-
       this.loading = true;
       try {
         const res = await this.$store.dispatch(`app/${ActionsTypes.GET_MODULES_VERSIONS}`, 'psxmarketingwithgoogle');
 
-        if (res?.upgradeLink) {
-          await fetch(res?.upgradeLink, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json', Accept: 'application/json'},
-          });
+        await fetch(res?.upgradeLink, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json', Accept: 'application/json'},
+        });
 
-          this.$emit('moduleUpdated');
-        }
+        this.$emit('updateSuccess', true);
+        window.location.reload();
       } catch (err) {
         console.error(err);
+        this.$emit('updateSuccess', false);
       } finally {
         this.loading = false;
       }

diff --git a/_dev/apps/ui/src/components/monetization/monetization-banner-information.vue b/_dev/apps/ui/src/components/monetization/monetization-banner-information.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="col-md-8">
       <p class="h2 font-family-prestafont text-primary">
-        {{ $t('banner.monetization.bannerInfoTitle') }}
+        {{ $t('monetization.bannerInfoTitle') }}
       </p>
       <div
         v-for="(item, index) in advantages"
@@ -29,9 +29,9 @@ export default defineComponent({
   data() {
     return {
       advantages: [
-        this.$t('banner.monetization.bannerInfoAdvantage1'),
-        this.$t('banner.monetization.bannerInfoAdvantage2'),
-        this.$t('banner.monetization.bannerInfoAdvantage3'),
+        this.$t('monetization.bannerInfoAdvantage1'),
+        this.$t('monetization.bannerInfoAdvantage2'),
+        this.$t('monetization.bannerInfoAdvantage3'),
       ],
     };
   },

diff --git a/_dev/apps/ui/src/components/monetization/monetization-messages.vue b/_dev/apps/ui/src/components/monetization/monetization-messages.vue
@@ -2,22 +2,42 @@
   <div>
     <!-- Module update messages -->
     <PsToast
-      v-if="moduleIsUpdated"
+      v-if="moduleUpdateSuccess"
       variant="success"
-      :visible="moduleIsUpdated"
+      :visible="moduleUpdateSuccess"
       toaster="b-toaster-top-right"
       body-class="border border-success"
     >
-      <p>{{ $t("toast.moduleUpdated") }}</p>
+      <div>
+        <h3 class="mb-1">
+          {{ $t("monetization.successUpdatedTitle") }}
+        </h3>
+        <p>{{ $t("monetization.successUpdatedSubtitle") }}</p>
+      </div>
     </PsToast>
+    <PsToast
+      v-if="moduleUpdateSuccess === false && modaleIsClosed"
+      :visible="moduleUpdateSuccess === false && !moduleUpdateSuccess && modaleIsClosed"
+      variant="warning"
+      toaster="b-toaster-top-right"
+      body-class="border border-warning"
+    >
+      <div>
+        <h3 class="mb-1">
+          {{ $t("monetization.failedUpdatedTitle") }}
+        </h3>
+        <p>{{ $t("monetization.failedUpdatedSubtitle") }}</p>
+      </div>
+    </PsToast>
+
     <MonetizationAlertWarningUpdateModule
-      v-if="moduleNeedUpgrade && modaleIsClosed && !moduleIsUpdated"
-      @moduleUpdated="clickModuleUpdated"
+      v-if="moduleNeedUpgrade && modaleIsClosed && moduleUpdateSuccess !== true"
+      @updateSuccess="($event) => moduleUpdateSuccess = $event"
     />
     <MonetizationPopinUpdateModule
-      v-if="moduleNeedUpgrade && !moduleIsUpdated"
-      @clickUpdateModule="moduleIsUpdated = true"
+      v-if="moduleNeedUpgrade && moduleUpdateSuccess === null"
       @closeModale="modaleIsClosed = true"
+      @updateSuccess="($event) => moduleUpdateSuccess = $event"
     >
       <template #content>
         <slot name="content-modale" />
@@ -32,8 +52,8 @@
         && subscription.cancelled_at
         && page === 'configuration'"
       :subscription="subscription"
-      :title="$t('banner.monetization.alertSubscriptionCancelTitle')"
-      :subtitle="$t('banner.monetization.alertSubscriptionCancelSubtitle', [endOfSubscriptionDate])"
+      :title="$t('monetization.alertSubscriptionCancelTitle')"
+      :subtitle="$t('monetization.alertSubscriptionCancelSubtitle', [endOfSubscriptionDate])"
       @startSubscription="($event) => $emit('startSubscription', $event)"
     />
     <MonetizationAlertEndSubscription
@@ -43,9 +63,9 @@
         && subscription.cancelled_at
         && page === 'configuration'"
       :subscription="subscription"
-      :title="$t('banner.monetization.alertSubscriptionExpiredTitle')"
+      :title="$t('monetization.alertSubscriptionExpiredTitle')"
       :subtitle="
-        $t('banner.monetization.alertSubscriptionExpiredSubtitle', [endOfSubscriptionDate])"
+        $t('monetization.alertSubscriptionExpiredSubtitle', [endOfSubscriptionDate])"
       @startSubscription="($event) => $emit('startSubscription', $event)"
     />
     <MonetizationBannerInformation
@@ -91,7 +111,7 @@ export default defineComponent({
   },
   data() {
     return {
-      moduleIsUpdated: false,
+      moduleUpdateSuccess: null as boolean|null,
       modaleIsClosed: false,
     };
   },
@@ -112,10 +132,5 @@ export default defineComponent({
       );
     },
   },
-  methods: {
-    clickModuleUpdated() {
-      this.moduleIsUpdated = true;
-    },
-  },
 });
 </script>
diff --git a/_dev/apps/ui/src/components/monetization/monetization-popin-update-module.vue b/_dev/apps/ui/src/components/monetization/monetization-popin-update-module.vue
@@ -13,13 +13,24 @@
       >
         <i class="material-icons ps_gs-fz-24">update</i>
       </h4>
-      {{ $t('banner.monetization.popinUpdateTitle') }}
+      {{ $t('monetization.popinUpdateTitle') }}
     </template>
+    <b-alert
+      v-if="updateFailed"
+      show
+      variant="warning"
+      class="mb-4 border border-warning"
+    >
+      <h3 class="mb-1">
+        {{ $t("monetization.failedUpdatedTitle") }}
+      </h3>
+      <p>{{ $t("monetization.failedUpdatedSubtitle") }}</p>
+    </b-alert>
     <div v-if="text">
       {{ text }}
     </div>
     <slot name="content" />
-    <div class="mb-3 d-flex justify-content-end mt-3">
+    <div class="mb-3 d-flex justify-content-end mt-4">
       <template>
         <b-button
           variant="primary"
@@ -56,6 +67,7 @@ export default defineComponent({
   data() {
     return {
       loading: false,
+      updateFailed: false,
     };
   },
   methods: {
@@ -68,13 +80,15 @@ export default defineComponent({
       try {
         const res = await this.$store.dispatch(`app/${ActionsTypes.GET_MODULES_VERSIONS}`, 'psxmarketingwithgoogle');
 
-        if (res?.upgradeLink) {
-          await fetch(res?.upgradeLink, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json', Accept: 'application/json'},
-          });
-        }
+        await fetch(res?.upgradeLink, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json', Accept: 'application/json'},
+        });
+
+        this.$emit('updateSuccess', true);
+        window.location.reload();
       } catch (err) {
+        this.updateFailed = true;
         console.error(err);
       } finally {
         this.loading = false;

diff --git a/_dev/apps/ui/src/components/onboarding/onboarding-deps-container.vue b/_dev/apps/ui/src/components/onboarding/onboarding-deps-container.vue
@@ -7,7 +7,7 @@
       @startSubscription="startSubscription"
     >
       <template #content-modale>
-        {{ $t('banner.monetization.popinUpdateConfigurationText') }}
+        {{ $t('monetization.popinUpdateConfigurationText') }}
       </template>
     </monetization-messages>
 

diff --git a/_dev/apps/ui/src/views/landing-page.vue b/_dev/apps/ui/src/views/landing-page.vue
@@ -2,7 +2,7 @@
   <div>
     <monetization-messages>
       <template #content-modale>
-        {{ $t('banner.monetization.popinUpdateLandingPageText') }}
+        {{ $t('monetization.popinUpdateLandingPageText') }}
       </template>
     </monetization-messages>
 

diff --git a/_dev/packages/mktg-with-google-common/translations/en/ui.json b/_dev/packages/mktg-with-google-common/translations/en/ui.json
@@ -1176,8 +1176,7 @@
     "attributesMapppingSuccess": "Your product attributes have been successfully saved. Review summary then click \"Export\" to submit them to Google",
     "campaignCreatedSuccess": "You have created your Performance Max campaign successfully!",
     "phoneNumberVerifiedSuccess": "Your phone number has been verified. The Merchant Account is being created",
-    "enhancedConversionEnabledSuccess": "Enhanced conversion tracking enabled",
-    "moduleUpdated": "Module updated"
+    "enhancedConversionEnabledSuccess": "Enhanced conversion tracking enabled"
   },
   "stepper": {
     "nextStep" : "Next: {0}",
@@ -1222,8 +1221,16 @@
     "legend": "*Create a new Google Ads account, the voucher will be applied automatically once you match the spend and you will have 60 days to spend the credits. [Read T&C]({0})[:target=\"_blank\"]",
     "legendWithoutTC": "* Create a new Google Ads account, the voucher will be applied automatically once you match the spend and you will have 60 days to spend the credits.",
     "ctaCreateFirstCampaign": "Create your first PMax campaign",
-    "textCampaignsBanner":  "Create your first campaign and reach more relevant shoppers across all Google’s channels. Let Google’s machine learning optimize your ad placements and efficiently improve your traffic and sales.",
-    "monetization": {
+    "textCampaignsBanner":  "Create your first campaign and reach more relevant shoppers across all Google’s channels. Let Google’s machine learning optimize your ad placements and efficiently improve your traffic and sales."
+  },
+  "tipsAndTricks": {
+    "title": "PrestaShop pro tip"
+  },
+  "monetization": {
+      "successUpdatedTitle": "Module updated",
+      "successUpdatedSubtitle": "This page will restart automatically. ",
+      "failedUpdatedTitle": "Module update failed",
+      "failedUpdatedSubtitle": "Sorry, we couldn't update the module. Please try again.",
       "popinUpdateTitle": "PrestaShop Marketing needs an update",
       "popinUpdateLandingPageText": "Your current version of the PrestaShop Marketing module is out of date. Update now to continue using the module.",
       "popinUpdateConfigurationText": "Your current version of the PrestaShop Marketing module is out of date. Daily synchronization with Google Merchant Center is paused. Update now to continue using the module.",
@@ -1235,13 +1242,9 @@
       "bannerInfoAdvantage3": "Reach the right audience at the right time with Performance Max campaigns",
       "bannerSuccessBilling": "Your subscription is now active, and your daily synchronization has resumed. Your next billing date is May 12, 2024.",
       "alertSubscriptionCancelTitle": "You’ve canceled your PrestaShop Marketing with Google subscription.",
-      "alertSubscriptionCancelSubtitle": "Your subscription will still be active until {0}, You can re-subscribe anytime to continue using the module.",
+      "alertSubscriptionCancelSubtitle": "Your subscription will still be active until {0}, you can re-subscribe anytime to continue using the module.",
       "alertSubscriptionExpiredTitle": "Your PrestaShop Marketing with Google subscription has expired",
       "alertSubscriptionExpiredSubtitle": "Your Google accounts have been disconnected. You can re-subscribe anytime to continue using the module."
 
     }
-  },
-  "tipsAndTricks": {
-    "title": "PrestaShop pro tip"
-  }
 }