ok

src/pages/Transaction_success.js

@@ -1,29 +1,57 @@
 import React from "react";
-import { ColorRing } from "react-loader-spinner";
 import styles from "./Transactions.module.css";
+import { requestNotificationPermission } from '../services/notificationService'; // Import the notification service
 
-export default function Transaction_pending() {
-  const containerStyle = {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "100%",
-    height: "100%", // This makes the container stretch to the bottom of the viewport
-    backgroundColor: "#000", // Optional: Set a background color if you want to see the color ring clearly
+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 if (permission === "denied") {
+      console.error("Notification permission denied.");
+      setModal('blocked_notification'); // Show modal for blocked notifications
+    }
   };
 
   return (
     <div className={styles.Transactions}>
-      <div className={containerStyle}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
-          <h2>transaction success</h2>
+          <h2>Transaction Success</h2>
           <img
             className={styles.expression}
-            src="https://i.imgur.com/sgvMI02.pngs"
+            src="https://i.imgur.com/sgvMI02.png"
             alt="Success"
           />
+          <p style={{ marginTop: "20px", color: "white" }}>
+            Do you want to get notifications when your item is ready?
+          </p>
+          <button
+            onClick={handleNotificationClick}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              cursor: "pointer",
+              backgroundColor: "#4CAF50",
+              color: "#fff",
+              border: "none",
+              borderRadius: "5px",
+            }}
+          >
+            yes
+          </button>
         </div>
-      </div>
     </div>
   );
 }