Merge pull request #408 from hotwax/notification-initialization

Firebase Notification  initialization from setting page

package.json

@@ -17,7 +17,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.14.1",
+    "@hotwax/dxp-components": "^1.15.2",
     "@hotwax/oms-api": "^1.14.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",

src/store/modules/user/UserState.ts

@@ -10,5 +10,6 @@ export default interface UserState {
     notifications: any;
     notificationPrefs: any;
     firebaseDeviceId: string;
-    hasUnreadNotifications: boolean
+    hasUnreadNotifications: boolean;
+    allNotificationPrefs: any;
 }

src/store/modules/user/actions.ts

@@ -107,6 +107,7 @@ const actions: ActionTree<UserState, RootState> = {
 
       //fetching partial order rejection config for BOPIS orders
       await dispatch("getPartialOrderRejectionConfig");
+      await dispatch("fetchAllNotificationPrefs");
 
     } catch (err: any) {
       // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
@@ -323,6 +324,19 @@ const actions: ActionTree<UserState, RootState> = {
     }
   },
 
+  async fetchAllNotificationPrefs({ commit, state }) {
+    let allNotificationPrefs = [];
+
+    try {
+      const resp = await getNotificationUserPrefTypeIds(process.env.VUE_APP_NOTIF_APP_ID, state.current.userLoginId)
+      allNotificationPrefs = resp.docs
+    } catch(error) {
+      logger.error(error)
+    }
+
+    commit(types.USER_ALL_NOTIFICATION_PREFS_UPDATED, allNotificationPrefs)
+  },
+
   async updateNotificationPreferences({ commit }, payload) {
     commit(types.USER_NOTIFICATIONS_PREFERENCES_UPDATED, payload)
   },

src/store/modules/user/getters.ts

@@ -59,6 +59,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getUnreadNotificationsStatus(state) {
         return state.hasUnreadNotifications
+    },
+    getAllNotificationPrefs(state) {
+        return state.allNotificationPrefs
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -23,7 +23,8 @@ const userModule: Module<UserState, RootState> = {
       notifications: [],
       notificationPrefs: [],
       firebaseDeviceId: '',
-      hasUnreadNotifications: true
+      hasUnreadNotifications: true,
+      allNotificationPrefs: []
     },
     getters,
     actions,

src/store/modules/user/mutation-types.ts

@@ -10,5 +10,6 @@ export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_PARTIAL_ORDER_REJECTION_CONFIG_UPDATED = SN_USER + '/PARTIAL_ORDER_REJECTION_CONFIG_UPDATED'
 export const USER_NOTIFICATIONS_UPDATED = SN_USER + '/NOTIFICATIONS_UPDATED'
 export const USER_NOTIFICATIONS_PREFERENCES_UPDATED = SN_USER + '/NOTIFICATIONS_PREFERENCES_UPDATED'
+export const USER_ALL_NOTIFICATION_PREFS_UPDATED = SN_USER + '/ALL_NOTIFICATION_PREFS_UPDATED'
 export const USER_FIREBASE_DEVICEID_UPDATED = SN_USER + '/FIREBASE_DEVICEID_UPDATED'
 export const USER_UNREAD_NOTIFICATIONS_STATUS_UPDATED = SN_USER + '/UNREAD_NOTIFICATIONS_STATUS_UPDATED'

src/store/modules/user/mutations.ts

@@ -15,7 +15,8 @@ const mutations: MutationTree <UserState> = {
         showShippingOrders: false,
         showPackingSlip: false,
         configurePicker: false
-      }
+      },
+      state.allNotificationPrefs = []
     },
     [types.USER_INFO_UPDATED] (state, payload) {
         state.current = payload
@@ -49,6 +50,9 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_UNREAD_NOTIFICATIONS_STATUS_UPDATED] (state, payload) {
         state.hasUnreadNotifications = payload
+    },
+    [types.USER_ALL_NOTIFICATION_PREFS_UPDATED] (state, payload) {
+        state.allNotificationPrefs = payload
     }
 
 }

src/utils/firebase.ts

@@ -6,17 +6,31 @@ const storeClientRegistrationToken = async (registrationToken: string) => store.
 const addNotification = async (notification: any) => store.dispatch('user/addNotification', notification);
 
 // device ID: <DDMMYY><timestamp[6]>
-const generateDeviceId = () => (DateTime.now().toFormat('ddMMyy') + String(DateTime.now().toMillis()).slice(-6))
+const generateDeviceId = () => {
+  const deviceId = store.getters['user/getFirebaseDeviceId'];
+  return deviceId ? deviceId : (DateTime.now().toFormat('ddMMyy') + String(DateTime.now().toMillis()).slice(-6))
+}
 
 // topic name: oms-facilityId-enumId(enumCode)
 const generateTopicName = (facilityId: string, enumId: string) => {
   const userProfile = store.getters['user/getUserProfile'];
   return `${userProfile.omsInstanceName}-${facilityId}-${enumId}`;
 };
 
+//Checking if firebase cloud messaging is configured.
+const isFcmConfigured = () => {
+  try {
+    const config = JSON.parse(process.env.VUE_APP_FIREBASE_CONFIG as any);
+    return !!(config && config.apiKey);
+  } catch (e) {
+    return false;
+  }
+}
+
 export {
   addNotification,
   generateTopicName,
   generateDeviceId,
+  isFcmConfigured,
   storeClientRegistrationToken
 }

src/views/Settings.vue

@@ -214,9 +214,9 @@ import { DateTime } from 'luxon';
 import { UserService } from '@/services/UserService'
 import { showToast } from '@/utils';
 import { hasError, removeClientRegistrationToken, subscribeTopic, unsubscribeTopic } from '@/adapter'
-import { translate } from "@hotwax/dxp-components";
+import { initialiseFirebaseApp, translate } from "@hotwax/dxp-components";
 import { Actions, hasPermission } from '@/authorization'
-import { generateTopicName } from "@/utils/firebase";
+import { addNotification, generateTopicName, isFcmConfigured, storeClientRegistrationToken } from "@/utils/firebase";
 import emitter from "@/event-bus"
 import logger from '@/logger';
 
@@ -270,7 +270,8 @@ export default defineComponent({
       showPackingSlip: 'user/showPackingSlip',
       partialOrderRejectionConfig: 'user/getPartialOrderRejectionConfig',
       firebaseDeviceId: 'user/getFirebaseDeviceId',
-      notificationPrefs: 'user/getNotificationPrefs'
+      notificationPrefs: 'user/getNotificationPrefs',
+      allNotificationPrefs: 'user/getAllNotificationPrefs'
     })
   },
   mounted() {
@@ -417,7 +418,15 @@ export default defineComponent({
       await this.store.dispatch('user/updatePartialOrderRejectionConfig', params)
     },
     async updateNotificationPref(enumId: string) {
+      let isToggledOn = false;
+
       try {
+        if (!isFcmConfigured()) {
+          logger.error("FCM is not configured.");
+          showToast(translate('Notification preferences not updated. Please try again.'))
+          return;
+        }
+
         emitter.emit('presentLoader',  { backdropDismiss: false })
         const facilityId = (this.currentFacility as any).facilityId
         const topicName = generateTopicName(facilityId, enumId)
@@ -427,6 +436,7 @@ export default defineComponent({
           ? await unsubscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
           : await subscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
 
+        isToggledOn = !notificationPref.isEnabled
         notificationPref.isEnabled = !notificationPref.isEnabled
         await this.store.dispatch('user/updateNotificationPreferences', this.notificationPrefs)
         showToast(translate('Notification preferences updated.'))
@@ -435,6 +445,17 @@ export default defineComponent({
       } finally {
         emitter.emit("dismissLoader")
       }
+      
+      try {
+        if(!this.allNotificationPrefs.length && isToggledOn) {
+          await initialiseFirebaseApp(JSON.parse(process.env.VUE_APP_FIREBASE_CONFIG), process.env.VUE_APP_FIREBASE_VAPID_KEY, storeClientRegistrationToken, addNotification)
+        } else if(this.allNotificationPrefs.length == 1 && !isToggledOn) {
+          await removeClientRegistrationToken(this.firebaseDeviceId, process.env.VUE_APP_NOTIF_APP_ID)
+        }
+        await this.store.dispatch("user/fetchAllNotificationPrefs");
+      } catch(error) {
+        logger.error(error);
+      }
     },
     async confirmNotificationPrefUpdate(enumId: string, event: CustomEvent) {
       event.stopImmediatePropagation();