ok

src/App.js

@@ -44,6 +44,8 @@ import {
 } from "./helpers/subscribeHelpers.js";
 import Modal from "./components/Modal"; // Import your modal component
 
+import { requestNotificationPermission } from './services/notificationService'; // Import the notification service
+
 function App() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -63,6 +65,7 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState(null);
   const [onModalCloseFunction, setOnModalCloseFunction] = useState(null);
+  const [onModalYesFunction, setOnModalYesFunction] = useState(null);
   const transactionList = useRef(null);
   const [queue, setQueue] = useState([]);
 
@@ -83,14 +86,14 @@ function App() {
     setTotalItemsCount(totalCount);
     setTotalPrice(totalPrice);
 
-    
-      // If 'lastTransaction' exists, proceed
-      const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
-      console.log(lastTransaction);
-    
-      if (lastTransaction != null) {
-        setLastTransaction(lastTransaction);
-      }
+
+    // If 'lastTransaction' exists, proceed
+    const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
+    console.log(lastTransaction);
+
+    if (lastTransaction != null) {
+      setLastTransaction(lastTransaction);
+    }
   };
 
   useEffect(() => {
@@ -194,26 +197,26 @@ function App() {
       setModal("transaction_pending", data);
 
       localStorage.setItem('cart', []);
-      
+
       calculateTotalsFromLocalStorage();
     });
 
     socket.on("transaction_confirmed", async (data) => {
       console.log("transaction notification: " + data);
       setModal("transaction_confirmed", data);
-    
+
       localStorage.setItem('cart', []);
-      
+
       const startTime = Date.now(); // Capture the start time
       const timeout = 10000; // 10 seconds timeout in milliseconds
-      
+
       calculateTotalsFromLocalStorage();
 
       while (localStorage.getItem("lastTransaction") === null) {
         if (Date.now() - startTime > timeout) {
           return; // Exit the function and don't proceed further
         }
-    
+
         await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
       }
 
@@ -221,12 +224,12 @@ function App() {
       // If 'lastTransaction' exists, proceed
       const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
       console.log(lastTransaction);
-    
+
       if (lastTransaction != null) {
         setLastTransaction(lastTransaction);
       }
     });
-    
+
 
     socket.on("transaction_success", async (data) => {
       console.log("transaction notification");
@@ -249,6 +252,18 @@ function App() {
     });
 
 
+    const handleNotificationClick = async () => {
+      const permission = await requestNotificationPermission();
+
+      if (permission === "granted") {
+        console.log("Notification permission granted.");
+        // Set up notifications or show a success modal
+      } else {
+        console.error("Notification permission denied.");
+        setModal('blocked_notification'); // Show modal for blocked notifications
+      }
+    };
+
     const checkNotifications = () => {
       let permission = Notification.permission;
 
@@ -257,7 +272,7 @@ function App() {
       let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string
 
       if (permission !== "granted" && searchModal == '') {
-        setModal("req_notification");
+        setModal("message", { captMessage: 'Notifikasi tidak aktif', descMessage: 'Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.' }, null, handleNotificationClick);
       }
     };
 
@@ -268,7 +283,7 @@ function App() {
       } else {
         console.log(data)
         setUser(data.data.user);
-        if(data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
+        if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
         if (
           data.data.user.password == "unsetunsetunset" &&
           localStorage.getItem("settings")
@@ -438,7 +453,7 @@ function App() {
   }, [navigate]);
 
   // Function to open the modal
-  const setModal = (content, params = {}, onCloseFunction) => {
+  const setModal = (content, params = {}, onCloseFunction, onYesFunction) => {
     const queryParams = new URLSearchParams(location.search);
 
     // Update the modal and any additional params
@@ -462,6 +477,11 @@ function App() {
     } else {
       setOnModalCloseFunction(null);
     }
+    if (onYesFunction) {
+      setOnModalYesFunction(() => onYesFunction); // Store the close function
+    } else {
+      setOnModalYesFunction(null);
+    }
   };
 
   const closeModal = (closeTheseContent = []) => {
@@ -693,7 +713,7 @@ function App() {
             element={
               <>
                 <Transactions
-                shop={shop}
+                  shop={shop}
                   shopId={shopId}
                   sendParam={handleSetParam}
                   deviceType={deviceType}
@@ -725,6 +745,7 @@ function App() {
         onClose={closeModal}
         setModal={setModal}
         onModalCloseFunction={onModalCloseFunction}
+        onModalYesFunction={onModalYesFunction}
       />
     </div>
   );