Merge branch 'dev'

pooranjoyb · Jun 29, 2024 · 832a9bc · 832a9bc
2 parents 4c9300c + ca155b7
commit 832a9bc
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 126 deletions.
diff --git a/.gitignore b/.gitignore
@@ -116,6 +116,7 @@ dist
 # DynamoDB Local files
 .dynamodb/
 .vercel
+dist
 
 # TernJS port file
 .tern-port

diff --git a/dist/assets/browser-OhFq99mK.js b/dist/assets/browser-OhFq99mK.js
diff --git a/dist/assets/index-BacZYtc7.js b/dist/assets/index-BacZYtc7.js
diff --git a/dist/assets/index-DHNlpPs2.css b/dist/assets/index-DHNlpPs2.css
diff --git a/dist/icon.ico b/dist/icon.ico
diff --git a/dist/images/dress.jpg b/dist/images/dress.jpg
diff --git a/dist/images/fashion.jpg b/dist/images/fashion.jpg
diff --git a/dist/images/footer.jpg b/dist/images/footer.jpg
diff --git a/dist/images/hero.png b/dist/images/hero.png
diff --git a/dist/images/winter1.jpg b/dist/images/winter1.jpg
diff --git a/dist/images/winter2.jpg b/dist/images/winter2.jpg
diff --git a/dist/images/winter3.jpg b/dist/images/winter3.jpg
diff --git a/dist/images/winter4.jpg b/dist/images/winter4.jpg
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/logo.png b/dist/logo.png
diff --git a/src/pages/Auth/Oauth.tsx b/src/pages/Auth/Oauth.tsx
@@ -60,7 +60,7 @@ function Oauth() {
             password: hashedPassword,
             firstname: credential.user_metadata.full_name.split(' ')[0],
             lastname: credential.user_metadata.full_name.split(' ')[1],
-            gender: "not-found",
+            gender: "Edit profile to set gender",
             phone: 0,
             createdAt: new Date().toISOString(),
           },

diff --git a/src/pages/Orders/MyOrders.tsx b/src/pages/Orders/MyOrders.tsx
@@ -1,24 +1,46 @@
+import Popup from "./Popup";
 import { Link } from "react-router-dom";
 import Head from "../../components/Head";
 import Button from "../../components/Button";
 import { useEffect, useState } from "react";
 import { supabase } from "../../utils/client";
 import { useSelector } from "react-redux";
 import { RootState } from "../../utils/features/store";
+import Loader from "../../components/Loader/Loader";
+
+export interface Product {
+  desc: string | null;
+  image: string;
+  name: string;
+  price: number;
+  quantity: number;
+  ratings: number;
+  size: string;
+}
 
 export interface ORDER {
   username: string;
   orderId: string;
+  product: Product[];
   date: string;
   phone: number;
   status: string;
   price: string;
 }
 
 const MyOrders = () => {
+  const [selectedOrder, setSelectedOrder] = useState<ORDER | null>(null);
   const [orders, setOrders] = useState<ORDER[]>([]);
   const userName = useSelector((state: RootState) => state.auth.user.username);
 
+  const handleViewClick = (order: ORDER) => {
+    setSelectedOrder(order);
+  };
+
+  const handleClosePopup = () => {
+    setSelectedOrder(null);
+  };
+
   useEffect(() => {
     const fetchOrdersData = async () => {
       try {
@@ -29,7 +51,6 @@ const MyOrders = () => {
 
         if (error) throw error;
 
-        console.log(data);
         if (data) setOrders(data);
         else setOrders([]);
       } catch (err) {
@@ -40,37 +61,42 @@ const MyOrders = () => {
     if (userName) fetchOrdersData();
   }, [userName]);
 
+  const truncateText = (text: string, maxLength: number): string => {
+    return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text;
+  };
+
   return (
     <>
-      <div className="mx-auto max-w-screen-xl px-4 pt-8 mt-8 sm:py-12">
-        <Head h1="My" h2="Orders" />
-      </div>
+      {orders ? (
+        <>
+          <div className="mx-auto max-w-screen-xl px-4 pt-8 mt-8 sm:py-12">
+            <Head h1="My" h2="Orders" />
+          </div>
 
-      <div className="w-2/3 mx-auto mb-32 mt-12">
-        <div className="overflow-x-auto rounded-lg border border-base-300">
-          <table className="table w-full">
-            {/* Table header */}
-            <thead>
-              <tr className="text-neutral">
-                <th>Order No.</th>
-                <th>Product Name</th>
-                <th>Price</th>
-                <th>Date</th>
-                <th>Status</th>
-                <th className="pl-12">Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {orders
-                ? orders.map((order, index) => (
+          <div className="w-2/3 mx-auto mb-32 mt-12">
+            <div className="overflow-x-auto rounded-lg border border-base-300">
+              <table className="table w-full">
+                {/* Table header */}
+                <thead>
+                  <tr className="text-neutral">
+                    <th>Order No.</th>
+                    <th>Product Name</th>
+                    <th>Price</th>
+                    <th>Date</th>
+                    <th>Status</th>
+                    <th className="pl-12">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orders.map((order, index) => (
                     <tr
                       key={index}
                       className={
                         index % 2 === 0 ? "bg-base-200" : "bg-base-100"
                       }
                     >
-                      <td>{order.orderId}</td>
-                      <td>{}</td>
+                      <td>{truncateText(order.orderId, 10)}</td>
+                      <td>{order.product[0].name}</td>
                       <td>${order.price}</td>
                       <td>{order.date}</td>
                       <td>
@@ -92,16 +118,23 @@ const MyOrders = () => {
                             text="View"
                             color="mygreen"
                             hover="myyellow"
+                            onClick={() => handleViewClick(order)}
                           />
                         </Link>
                       </td>
                     </tr>
-                  ))
-                : ""}
-            </tbody>
-          </table>
-        </div>
-      </div>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {selectedOrder && (
+            <Popup order={selectedOrder} onClose={handleClosePopup} />
+          )}
+        </>
+      ) : (
+        <Loader />
+      )}
     </>
   );
 };

diff --git a/src/pages/Orders/Popup.tsx b/src/pages/Orders/Popup.tsx
@@ -0,0 +1,61 @@
+interface Product {
+  desc: string | null;
+  image: string;
+  name: string;
+  price: number;
+  quantity: number;
+  ratings: number;
+  size: string;
+}
+
+interface ORDER {
+  username: string;
+  orderId: string;
+  product: Product[];
+  date: string;
+  phone: number;
+  status: string;
+  price: string;
+}
+
+interface PopupProps {
+  order: ORDER;
+  onClose: () => void;
+}
+
+const Popup: React.FC<PopupProps> = ({ order, onClose }) => {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center z-50">
+        {/* Overlay */}
+        <div className="absolute inset-0 bg-mywhite bg-opacity-50"></div>
+        {/* Popup */}
+        <div className="relative p-8 rounded-lg shadow-lg w-1/2 bg-mywhite text-black">
+          <button
+            onClick={onClose}
+            className="absolute top-0 right-0 mt-4 mr-4 text-xl"
+          >
+            &times;
+          </button>
+          <h2 className="font-bold mb-4 text-2xl flex items-center justify-center text-myred">INVOICE</h2>
+          <div className="mb-4 text-lg">
+            <strong>Order No:</strong> {order.orderId}
+          </div>
+          <div className="mb-4 text-lg">
+            <strong>Product Name:</strong> {order.product[0].name}
+          </div>
+          <div className="mb-4 text-lg">
+            <strong>Price:</strong> ${order.price}
+          </div>
+          <div className="mb-4 text-lg">
+            <strong>Date:</strong> {order.date}
+          </div>
+          <div className="mb-4 text-lg">
+            <strong>Status:</strong> {order.status}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default Popup;
+