♻️ (notif) add queue notif service to lazy load notif lib

src/components/AccountSetting.vue

@@ -70,11 +70,11 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import BaseAccount from '@/base-components/BaseAccount'
 import { confirmation } from '@/utils'
-import notif from '@/utils/notif'
 import bus, { SYNC } from '@/utils/bus-event'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
 import accountService from '@/services/AccountService'
+import queueNotifService from '@/services/QueueNotifService'
 
 @Component({
   components: {
@@ -125,7 +125,7 @@ export default class AccountSetting extends Vue {
       this.account
     )
     if (!ok) {
-      notif.error(`Une erreur s'est produite.`)
+      queueNotifService.error(`Une erreur s'est produite.`)
     }
   }
 
@@ -139,10 +139,10 @@ export default class AccountSetting extends Vue {
       this.account
     )
     if (!ok) {
-      notif.error(`Une erreur s'est produite.`)
+      queueNotifService.error(`Une erreur s'est produite.`)
       return
     }
-    notif.success(
+    queueNotifService.success(
       this.$tc('account.newUserAdded', this.newUsers.length).toString()
     )
     this.newUsers = []
@@ -159,17 +159,17 @@ export default class AccountSetting extends Vue {
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.error('Au moins une personne doit être ajoutée au compte.')
+      queueNotifService.error('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {
-      notif.error('Les alias doivent être uniques.')
+      queueNotifService.error('Les alias doivent être uniques.')
       return false
     }
 
     const userIds: string[] = allUsers.map((user: IUser) => user.userId)
     if (userIds.length !== new Set(userIds).size) {
-      notif.error('Les identifiants doivent être uniques.')
+      queueNotifService.error('Les identifiants doivent être uniques.')
       return false
     }
 

src/components/AccountShare.vue

@@ -43,7 +43,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import QrCode from '@xkeshi/vue-qrcode'
 
 @Component({
@@ -79,7 +79,7 @@ export default class Home extends Vue {
   public async copy(): Promise<void> {
     if (this.canClipboard) {
       await navigator.clipboard.writeText(this.accountUrl)
-      notif.success('Adresse copiée')
+      queueNotifService.success('Adresse copiée')
     }
   }
 

src/components/Payment.vue

@@ -25,7 +25,6 @@ import { StripeCheckout } from 'vue-stripe-checkout'
 import IUser from '@/models/IUser'
 import IPaymentIntent from '@/models/IPaymentIntent'
 import IPayment from '@/models/IPayment'
-import notif from '@/utils/notif'
 
 @Component({
   components: {

src/components/QueueNotif.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="queue-notif"></span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import queueNotifService from '@/services/QueueNotifService'
+import notif from '@/utils/notif'
+
+@Component
+export default class QueueNotif extends Vue {
+  public mounted() {
+    queueNotifService.subscribe((notification) => {
+      switch (notification.type) {
+        case 'success':
+          notif.success(notification.message)
+          break
+        case 'error':
+          notif.error(notification.message)
+          break
+      }
+    })
+  }
+
+  public beforeDestroy() {
+    queueNotifService.unsubscribe()
+  }
+}
+</script>

src/components/TransactionCreate.vue

@@ -240,7 +240,7 @@ import accountService from '@/services/AccountService'
 import exchangeService from '@/services/ExchangeService'
 import transactionService from '@/services/TransactionService'
 import formatDate from '@/utils/format-date'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import { money } from '@/utils/filters'
 import { confirmation, alertMessage, findContrastColor } from '@/utils'
 import ILocation from '@/models/ILocation'
@@ -437,21 +437,21 @@ export default class TransactionCreate extends Vue {
       (!this.currency && !this.date && this.payFor.length === 0)
     ) {
       if (this.amount === 0) {
-        notif.error('Le montant doit être supérieur à 0.')
+        queueNotifService.error('Le montant doit être supérieur à 0.')
       } else {
-        notif.error('Tous les champs sont requis.')
+        queueNotifService.error('Tous les champs sont requis.')
       }
       return false
     }
     if (isNaN(this.amount) || this.amount > this.maxAmount) {
       const maxAmount = money(this.maxAmount, this.currency)
-      notif.error(
+      queueNotifService.error(
         `Veuillez saisir un montant numérique inférieur à ${maxAmount}.`
       )
       return false
     }
     if (this.amount < 0) {
-      notif.error('Le montant doit être supérieur à 0.')
+      queueNotifService.error('Le montant doit être supérieur à 0.')
       return false
     }
     return true