ok

src/pages/NotificationRequest.js

@@ -0,0 +1,57 @@
+import React from "react";
+import styles from "./Transactions.module.css";
+import { requestNotificationPermission } from '../services/notificationService'; // Import the notification service
+
+export default function Transaction_pending({ setModal }) {
+  // const containerStyle = {
+  //   display: "flex",
+  //   justifyContent: "center",
+  //   alignItems: "center",
+  //   width: "100%",
+  //   height: "100%",
+  //   backgroundColor: "",
+  // };
+
+  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
+    }
+  };
+
+  return (
+    <div className={styles.Transactions}>
+        <div style={{ marginTop: "30px", textAlign: "center" }}>
+          <h2>Aktifkan Notifikasi</h2>
+          <img
+            className={styles.expression}
+            src="https://i.imgur.com/sgvMI02.png"
+            alt="Success"
+          />
+          <p style={{ marginTop: "20px", color: "black" }}>
+          Sepertinya notifikasi untuk situs ini tidak aktif. Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.
+          </p>
+          <button
+            onClick={handleNotificationClick}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              cursor: "pointer",
+              backgroundColor: "#4CAF50",
+              color: "#fff",
+              border: "none",
+              borderRadius: "5px",
+            }}
+          >
+            Aktifkan
+          </button>
+        </div>
+    </div>
+  );
+}