[4.x] Add useNotifications store for notifications

resources/js/components/Notifications/Notifications.vue

@@ -1,4 +1,7 @@
 <script>
+import { pendingNotifications, clearNotifications, notificationCount } from '../../stores/useNotifications.js'
+import { watch } from 'vue'
+
 import notification from './Notification.vue'
 Vue.component('notification', notification)
 
@@ -10,15 +13,24 @@ export default {
         return this.$scopedSlots.default(this)
     },
     mounted() {
-        this.$root.$on('notification-message', (message, type, params, link) => {
-            this.notifications.push({
-                message: message,
-                type: type,
-                params: params,
-                link: link,
-                show: true,
+        this.triggerNotifications()
+        watch(notificationCount, this.triggerNotifications)
+    },
+    methods: {
+        triggerNotifications() {
+            if (notificationCount.value == 0) {
+                return
+            }
+
+            pendingNotifications.value.forEach((notification) => {
+                this.notifications.push({
+                    show: true,
+                    ...notification,
+                })
             })
-        })
+
+            clearNotifications()
+        },
     },
 }
 </script>

resources/js/package.js

@@ -1,6 +1,15 @@
+import { pushNotification } from './stores/useNotifications'
+
 window.debug = import.meta.env.VITE_DEBUG == 'true'
-window.Notify = (message, type = 'info', params = [], link = null) =>
-    window.setTimeout(() => window.app.$emit('notification-message', message, type, params, link), window.app ? 0 : 500)
+window.Notify = (message, type = 'info', params = [], link = null) => {
+    pushNotification({
+        message: message,
+        type: type,
+        params: params,
+        link: link,
+        timestamp: +new Date(),
+    })
+}
 
 if (!window.process) {
     // Workaround for process missing, if data is actually needed from here you should apply the following polyfill.
@@ -10,7 +19,7 @@ if (!window.process) {
 
 import './polyfills'
 import { useLocalStorage, StorageSerializers, useScrollLock } from '@vueuse/core'
-import useOrder from './stores/useOrder.js'
+import useOrder from './stores/useOrder'
 import useCart from './stores/useCart'
 import useUser from './stores/useUser'
 import useMask from './stores/useMask'
@@ -22,7 +31,7 @@ import './cookies'
 import './callbacks'
 import './vue-components'
 import './instantsearch'
-import { fetchCount } from './stores/useFetches.js'
+import { fetchCount } from './stores/useFetches'
 ;(() => import('./turbolinks'))()
 
 if (import.meta.env.VITE_DEBUG === 'true') {

resources/js/stores/useNotifications.js

@@ -0,0 +1,15 @@
+import { ref, computed } from 'vue'
+
+export let pendingNotifications = ref([])
+
+export const notificationCount = computed(() => {
+    return pendingNotifications.value.length
+})
+
+export function pushNotification(notification) {
+    pendingNotifications.value.push(notification)
+}
+
+export function clearNotifications() {
+    pendingNotifications.value = []
+}

resources/views/layouts/app.blade.php

@@ -46,11 +46,9 @@
 
     @if (session('notifications'))
         <script async>
-            document.addEventListener('vue:loaded', function() {
-                @foreach (session('notifications') ?? [] as $notification)
-                    window.Notify('{{ $notification['message'] }}', '{{ $notification['type'] ?? 'success' }}')
-                @endforeach
-            });
+            @foreach (session('notifications') ?? [] as $notification)
+                window.Notify('{{ $notification['message'] }}', '{{ $notification['type'] ?? 'success' }}')
+            @endforeach
         </script>
     @endif
     @stack('foot')