From 9f08dcdce3513493de1dc835ff9beddb18bb2eb6 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 10 Oct 2023 12:13:36 +0100
Subject: [PATCH] feat: Reuse centralized Toast Notifs component - MEED-2627 -
 Meeds-io/MIPs#99 (#276)

Prior to this change, the used toast notifications wasn't relying on the centralized reusable component to display alerts. This change removes the specific alerts in order to reuse the centralized component.
---
 .../vue-app/components/PerkStoreApp.vue       | 12 ---
 .../components/perk-store/PerkStoreAlert.vue  | 42 -----------
 .../components/perk-store/ProductDetail.vue   |  4 +-
 .../perk-store/ProductNotification.vue        | 73 -------------------
 .../src/main/webapp/vue-app/initComponents.js |  4 -
 .../components/PerkStoreAdmin.vue             | 25 +------
 .../webapp/vue-app/perk-store-admin/main.js   |  4 +-
 .../components/PerkStoreOverview.vue          |  1 -
 .../perk-store-overview/initComponents.js     |  2 -
 .../vue-app/perk-store-overview/main.js       |  4 +-
 .../src/main/webapp/vue-app/perk-store.js     |  4 +-
 11 files changed, 11 insertions(+), 164 deletions(-)
 delete mode 100644 perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue
 delete mode 100644 perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue

diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue b/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue
index a2a16fd4c..f0ef30d7f 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue
+++ b/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue
@@ -19,7 +19,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     id="PerkStoreApp"
     class="transparent singlePageApplication"
     flat>
-    <perk-store-alert />
     <wallet-notification-alert />
     <main v-if="loading">
       <v-toolbar color="transparent" flat>
@@ -104,9 +103,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 :wallet-loading="walletLoading"
                 :wallet-enabled="walletEnabled"
                 @closeProductDetails="closeProduct()" />
-              <perk-store-product-notification
-                :products="modifiedProducts"
-                @refresh-list="addNewProductsToList" />
               <perk-store-no-result
                 v-if="perkStoreEnabled && walletEnabled && emptySearchResult"
                 :click-condition="walletEnabled && userSettings.canAddProduct"
@@ -591,14 +587,6 @@ export default {
         }
       }
     },
-    addNewProductsToList() {
-      this.modifiedProducts.reverse().forEach(product => {
-        if (!product.lastModifiedDate && !this.products.find(existingProduct => existingProduct.id === product.id)) {
-          this.products.unshift(product);
-        }
-      });
-      this.modifiedProducts.splice(0, this.modifiedProducts.length);
-    },
   }
 };
 </script>
\ No newline at end of file
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue
deleted file mode 100644
index de0fc2cd6..000000000
--- a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
-This file is part of the Meeds project (https://meeds.io/).
-Copyright (C) 2022 Meeds Association
-contact@meeds.io
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU Lesser General Public
-License as published by the Free Software Foundation; either
-version 3 of the License, or (at your option) any later version.
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-Lesser General Public License for more details.
-You should have received a copy of the GNU Lesser General Public License
-along with this program; if not, write to the Free Software Foundation,
-Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
-<template>
-  <v-alert
-    v-model="displayAlert"
-    :type="alertType"
-    dismissible
-    :icon="alertType === 'warning' ? 'mdi-alert-circle' : ''">
-    <span v-sanitized-html="alertMessage"> </span>
-  </v-alert>
-</template>
-<script>
-export default {
-  data: () => ({
-    displayAlert: false,
-    alertMessage: null,
-    alertType: null,
-  }),
-  created() {
-    this.$root.$on('show-alert', alert => {
-      this.alertMessage = alert.message;
-      this.alertType = alert.type;
-      this.displayAlert= true;
-      window.setTimeout(() => this.displayAlert = false, 5000);
-    });
-  }
-};
-</script>
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue
index 9491cf1d7..e1c948d17 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue
+++ b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue
@@ -352,7 +352,7 @@ export default {
     removeProduct() {
       deleteProduct(this.product.id)
         .then(() => {
-          this.$root.$emit('show-alert', {type: 'success',message: this.$t('exoplatform.perkstore.label.deleteSuccess')});
+          this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.label.deleteSuccess'), 'success');
           this.$emit('product-deleted');
         }).catch(e => {
           let msg = '';
@@ -363,7 +363,7 @@ export default {
           } else  {
             msg = this.$t('exoplatform.perkstore.label.deleteError');
           }
-          this.$root.$emit('show-alert', {type: 'error',message: msg});
+          this.$root.$emit('alert-message', msg, 'error');
         });
     },
   }
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue
deleted file mode 100644
index 2ff7f85be..000000000
--- a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
-This file is part of the Meeds project (https://meeds.io/).
-Copyright (C) 2020 Meeds Association
-contact@meeds.io
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU Lesser General Public
-License as published by the Free Software Foundation; either
-version 3 of the License, or (at your option) any later version.
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-Lesser General Public License for more details.
-You should have received a copy of the GNU Lesser General Public License
-along with this program; if not, write to the Free Software Foundation,
-Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
-<template>
-  <v-alert 
-    v-if="hasNewProducts"
-    v-model="alert"
-    type="success"
-    dismissible>
-    <template v-for="product in filteredProducts">
-      <template v-if="product.lastModifiedDate">
-        {{ $t('exoplatform.perkstore.info.productModified', {0: product.title}) }}
-      </template>
-      <template v-else>
-        {{ $t('exoplatform.perkstore.info.productCreated', {0: product.title}) }}
-      </template>
-    </template>
-  </v-alert>
-</template>
-<script>
-export default {
-  props: {
-    products: {
-      type: Array,
-      default: function() {
-        return [];
-      },
-    },
-  },
-  data () {
-    return {
-      alert: false,
-      alertDisplayed: [],
-    };
-  },
-  computed: {
-    displayDivider() {
-      return this.products && this.products.length > 1;
-    },
-    hasNewProducts() {
-      return this.products && this.products.find(product => !product.lastModifiedDate);
-    },
-    filteredProducts() {
-      return this.products.filter(product => this.alertDisplayed.indexOf(product.id) < 0).slice(0, Math.min(3, this.products.length));
-    },
-  },
-  watch: {
-    alert() {
-      if (!this.alert) {
-        this.$emit('refresh-list');
-        this.products.forEach(product => this.alertDisplayed.push(product.id));
-      }
-    },
-    products() {
-      window.setTimeout(() => this.alert = false, 5000);
-      this.alert = this.products.filter(product => this.alertDisplayed.indexOf(product.id) < 0).length;
-    },
-  },
-};
-</script>
diff --git a/perk-store-webapps/src/main/webapp/vue-app/initComponents.js b/perk-store-webapps/src/main/webapp/vue-app/initComponents.js
index ab1fd2b33..43a5fafbf 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/initComponents.js
+++ b/perk-store-webapps/src/main/webapp/vue-app/initComponents.js
@@ -13,9 +13,7 @@ import OrderNotification from './components/perk-store/OrderNotification.vue';
 import OrdersFilter from './components/perk-store/OrdersFilter.vue';
 import OrdersList from './components/perk-store/OrdersList.vue';
 import ProductDetailContent from './components/perk-store/ProductDetailContent.vue';
-import ProductNotification from './components/perk-store/ProductNotification.vue';
 import PerkStoreProductSearchCard from './components/perk-store-search/PerkStoreProductSearchCard.vue';
-import PerkStoreAlert from './components/perk-store/PerkStoreAlert.vue';
 import RefundDrawer from './components/perk-store/RefundDrawer.vue';
 import PerkStoreToolbar from './components/perk-store/PerkStoreToolbar.vue';
 
@@ -35,9 +33,7 @@ const components = {
   'perk-store-orders-filter': OrdersFilter,
   'perk-store-orders-list': OrdersList,
   'perk-store-product-detail-content': ProductDetailContent,
-  'perk-store-product-notification': ProductNotification,
   'perk-store-product-search-card': PerkStoreProductSearchCard,
-  'perk-store-alert': PerkStoreAlert,
   'perk-store-refund-drawer': RefundDrawer,
   'perk-store-toolbar': PerkStoreToolbar,
 };
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue
index f7fc1670d..0875669e8 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue
@@ -7,11 +7,6 @@
         </span>
       </div>
       <v-card-text class="perkStoreSettings">
-        <exo-notification-alert
-          v-if="alert"
-          :alert="alert"
-          @dismissed="clear" />
-
         <perk-store-auto-complete
           ref="applicationAccessPermissionAutocomplete"
           :input-label="$t('exoplatform.perkstore.label.applicationAccessPermissions')"
@@ -69,13 +64,11 @@ export default {
       dialog: false,
       loading: false,
       settingsToSave: {},
-      alert: null
     };
   },
   watch: {
     dialog() {
       if (this.dialog) {
-        this.alert = null;
         this.loading = false;
         this.$nextTick().then(this.init);
       } else {
@@ -85,7 +78,6 @@ export default {
   },
   created() {
     this.dialog = true;
-    this.alert = null;
   },
   methods: {
     open() {
@@ -128,25 +120,14 @@ export default {
     },
     saveSettings() {
       this.loading = true;
-      this.alert = null;
       return saveSettings(this.settingsToSave)
         .then(() => {
           this.$emit('saved');
           this.dialog = false;
-          this.loading = false;
-          this.alert = {
-            message: this.$t('exoplatform.perkstore.admin.settings.success'),
-            type: 'success'
-          };
+          this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.admin.settings.success'), 'success');
         })
-        .catch(e => {
-          console.error('Save settings error', e);
-          this.loading = false;
-          this.alert = {
-            message: this.$t('exoplatform.perkstore.admin.settings.error', {0: e && e.message ? e.message : String(e),}),
-            type: 'error'
-          };
-        });
+        .catch(() => this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.admin.settings.error', 'error')))
+        .finally(() => this.loading = false);
     },
   },
 };
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js
index 88d67a58d..e1e612234 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js
@@ -25,13 +25,13 @@ const appId = 'PerkStoreAdminApp';
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
     // init Vue app when locale ressources are ready
-    new Vue({
+    Vue.createApp({
       mounted() {
         document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
       },
       template: `<perk-store-admin id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Perks Administration');
   });
 }
\ No newline at end of file
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue
index 836ae5837..54dbeddf1 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue
@@ -46,7 +46,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       :symbol="symbol"
       :need-password="walletNeedPassword"
       wallet-enabled />
-    <perk-store-alert />
     <wallet-notification-alert />
   </div>
 </template>
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js
index 002e243a4..69331c9e5 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js
@@ -20,14 +20,12 @@ import PerkStoreOverview from './components/PerkStoreOverview.vue';
 import ProductDetail from '../components/perk-store/ProductDetail.vue';
 import BuyModal from '../components/perk-store/BuyModal.vue';
 import BuyForm from '../components/perk-store/BuyForm.vue';
-import PerkStoreAlert from '../components/perk-store/PerkStoreAlert.vue';
 
 const components = {
   'perk-store-overview': PerkStoreOverview,
   'perk-store-product-detail': ProductDetail,
   'perk-store-buy-modal': BuyModal,
   'perk-store-buy-form': BuyForm,
-  'perk-store-alert': PerkStoreAlert,
 };
 
 for (const key in components) {
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js
index f7a5c0897..2c7c32362 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js
@@ -31,11 +31,11 @@ const appId = 'PerkStoreOverviewApp';
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
     // init Vue app when locale ressources are ready
-    new Vue({
+    Vue.createApp({
       template: `<perk-store-overview id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Perks Overview');
 
     // get overrided components if exists
     extensions.registerPerkStoreOverview();
diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store.js
index 807573fd6..5527732fb 100644
--- a/perk-store-webapps/src/main/webapp/vue-app/perk-store.js
+++ b/perk-store-webapps/src/main/webapp/vue-app/perk-store.js
@@ -26,10 +26,10 @@ const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    new Vue({
+    Vue.createApp({
       render: (h) => h(PerkStoreApp),
       i18n,
       vuetify,
-    }).$mount('#PerkStoreApp');
+    }, '#PerkStoreApp', 'Perks application');
   });
 }