initial commit

src/firebase_notification/firebase.js

@@ -0,0 +1,28 @@
+// firebase.js // firebase is initialised here
+import { initializeApp } from 'firebase/app';
+import { getMessaging } from 'firebase/messaging';
+
+const firebaseConfig = {
+  // apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  // authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  // databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
+  // projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  // storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  // messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+  // appId: process.env.REACT_APP_FIREBASE_APP_ID,
+  // measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
+  apiKey: 'AIzaSyACBg8oyAR2DWMu4xW85gx5thpRgxnvI_0',
+  authDomain: 'nearle-gear.firebaseapp.com',
+  databaseURL: 'https://nearle-gear-default-rtdb.firebaseio.com',
+  projectId: 'nearle-gear',
+  storageBucket: 'nearle-gear.appspot.com',
+  messagingSenderId: '140444764229',
+  appId: '1:140444764229:web:e5ed6259a92d0532283b2c',
+  measurementId: 'G-3YQ4DNMXE5'
+};
+
+// Initialize Firebase only once
+const app = initializeApp(firebaseConfig);
+
+// Export initialized messaging instance
+export const messaging = getMessaging(app);

src/firebase_notification/notification.js

@@ -0,0 +1,88 @@
+// src/firebase/notification.js
+import { getToken, onMessage } from 'firebase/messaging';
+import { messaging } from './firebase';
+import { dispatch } from 'store';
+import { setFcmToken, setFcmPermission } from 'store/reducers/fcmSlice';
+import { enqueueSnackbar, closeSnackbar } from 'notistack';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import { GlobalToast } from 'components/nearle_components/GlobalToast';
+
+// ===================== Toast Helper =====================
+const opentoast = (message, color, vertical = 'bottom') => {
+  enqueueSnackbar(message, {
+    variant: color,
+    anchorOrigin: { vertical, horizontal: 'right' },
+    autoHideDuration: null,
+    action: (snackbarId) => (
+      <IconButton size="small" color="inherit" onClick={() => closeSnackbar(snackbarId)}>
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    )
+  });
+};
+
+// ===================== Generate FCM Token =====================
+export const generateToken = async () => {
+  try {
+    const permission = await Notification.requestPermission();
+    dispatch(setFcmPermission(permission));
+
+    if (permission !== 'granted') {
+      opentoast('Enable notifications to receive OTP, alerts, and updates', 'error');
+      return;
+    }
+
+    // ✅ Register & reuse the SAME Service Worker
+    const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/' });
+
+    await navigator.serviceWorker.ready;
+
+    const token = await getToken(messaging, {
+      vapidKey: 'BBfin2w2LLwc51gmgIUzSi9F6C6TchC99xwIWVpodbZJckqhyuN_2BKmIaA7cwF2JiqhzYJ0Rqszjh1-pDgYMWw',
+      serviceWorkerRegistration: registration
+    });
+
+    if (token) {
+      console.log('📌 FCM Token:', token);
+      dispatch(setFcmToken(token));
+    } else {
+      console.warn('⚠️ No FCM token generated');
+    }
+  } catch (err) {
+    console.error('❌ FCM token error:', err);
+  }
+};
+
+// ===================== Foreground Notifications =====================
+export const initFirebaseNotificationListener = () => {
+  console.log('🔥 Firebase foreground listener initialized');
+
+  onMessage(messaging, async (payload) => {
+    console.log('📥 Foreground message:', payload);
+
+    const { notification = {}, data = {} } = payload;
+
+    // ✅ UI Toast (your custom toast)
+    if (notification?.body) {
+      GlobalToast(notification.body, 'primary', 'top');
+    }
+
+    // ✅ System notification ONLY ONCE
+    if (Notification.permission === 'granted') {
+      const registration = await navigator.serviceWorker.getRegistration();
+
+      if (registration) {
+        registration.showNotification(notification.title || 'Nearle', {
+          body: notification.body,
+          icon: notification.image || '/favicon.ico',
+          data,
+          tag: 'nearle-foreground',
+          renotify: true,
+          badge: '/badge.png',
+          vibrate: [100, 50, 100]
+        });
+      }
+    }
+  });
+};