add product details

atlp-rwanda · Jul 1, 2024 · 193d529 · 193d529
1 parent cc1f594
commit 193d529
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
diff --git a/src/Components/OrderTracking/contactInfo.tsx b/src/Components/OrderTracking/contactInfo.tsx
@@ -29,7 +29,7 @@ export const ContactInfo: React.FC<ContactInfoProps> = ({
 
   return (
     <>
-      <div className="flex flex-col gap-12 lg:flex-row justify-between border-b pb-8  font-outfit pl-10 lg:pl-0 lg:pr-20">
+      <div className="flex flex-col gap-12 lg:flex-row justify-between border-b pb-8  font-outfit pl-10 lg:pl-0">
         <div className="delivery-address ">
           <h3 className="font-bold pb-2 font-poppins">Delivery Address</h3>
           <p className="text-gray-300">

diff --git a/src/Components/OrderTracking/orderProductDetails.tsx b/src/Components/OrderTracking/orderProductDetails.tsx
@@ -9,15 +9,11 @@ interface Product {
 }
 
 interface OrderDetailsProps {
-  products: Product[];
   orderId: string;
 }
 
-export const OrderProductDetails: React.FC<OrderDetailsProps> = ({
-  products,
-  orderId,
-}) => {
-  const { data: product, error, isLoading } = useGetOrderQuery({ orderId });
+export const OrderProductDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
+  const { data: order, error, isLoading } = useGetOrderQuery({ orderId });
 
   if (error) {
     console.error("Error fetching order: ", error);
@@ -26,30 +22,30 @@ export const OrderProductDetails: React.FC<OrderDetailsProps> = ({
 
   if (isLoading) return <p>Loading...</p>;
 
-  if (!product) return <p>No product found </p>;
+  if (!order) return <p>No product found </p>;
 
-  const { productName, quantity, price, total } = product;
+  const { products } = order;
   return (
     <>
-      <div className="container mx-auto font-outfit">
+      <div className="container  font-outfit">
         <h3 className="font-bold mb-4 text-lg font-poppins">Order Details</h3>
         <div>
           <table className="min-w-full bg-white">
             <thead>
               <tr className=" text-left">
-                <th className="text-primary pr-8">Product</th>
+                <th className="text-primary ">Product</th>
                 <th className="text-primary">Quantity</th>
                 <th className="text-primary">Price</th>
                 <th className="text-primary">Total</th>
               </tr>
             </thead>
             <tbody>
-              {products.map((product, index) => (
+              {products.map((product: Product, index: number) => (
                 <tr key={index} className="py-4">
                   <td>{product.productName}</td>
                   <td>{product.quantity}</td>
-                  <td>{product.price}</td>
-                  <td>{product.total}</td>
+                  <td>{product.price} $</td>
+                  <td>{product.total} $</td>
                 </tr>
               ))}
             </tbody>

diff --git a/src/pages/orderTrackingPage.tsx b/src/pages/orderTrackingPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { ContactInfo } from "../Components/OrderTracking/contactInfo";
 import OrderDetails from "../Components/OrderTracking/orderDetails";
 import { OrderProductDetails } from "../Components/OrderTracking/orderProductDetails";
@@ -11,14 +11,12 @@ export const OrderTrackingPage = () => {
   const email = "[email protected]";
   const contactName = "bernice";
   const address = "Kigali, Kicukiro";
-  const products = [
-    { productName: "Nike Shoes", quantity: 3, price: 100, total: 300 },
-  ];
+  const [orderStatus, setOrderStatus] = useState('pending');
 
   return (
     <>
       <Navbar />
-      <div className="flex flex-col gap-20 h-screen p-4 lg:p-20 overflow-y-auto">
+      <div className="flex flex-col gap-20 h-screen p-10 lg:p-20">
         <div className="order-details-container">
           <OrderDetails orderId={orderId} />
         </div>
@@ -32,8 +30,8 @@ export const OrderTrackingPage = () => {
           />
         </div>
 
-        <div className="order-products-details-container">
-          <OrderProductDetails products={products} orderId={orderId} />
+        <div className="pb-10">
+          <OrderProductDetails orderId={orderId} />
         </div>
       </div>
     </>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
         gray: {
           100: '#EEEDED',
           200: '#CACACA',
+          300: '#797979'
         },
         border: '#666666',
       },