TrackOrder Page template (#68)

atlp-rwanda · Aug 5, 2024 · 2d99f3a · 2d99f3a
1 parent f0365d7
commit 2d99f3a
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 0 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -36,3 +36,4 @@
 @import "./assets/styles/SellerSideProduct.scss";
 @import "./assets/styles/tables.scss";
 @import "./assets/styles/cards.scss";
+@import "./assets/styles/trackOrder.scss";
diff --git a/src/assets/styles/trackOrder.scss b/src/assets/styles/trackOrder.scss
@@ -0,0 +1,123 @@
+$order-details-font-color: #f6820d;
+$delivery-timeline-color: #ccc;
+$circle-color: #f6820d;
+$text-color: #333;
+$text-family: 'Averia Serif Libre';
+
+
+.order-details-container {
+  display: flex;
+  width: 95%;
+  font-family: $text-family;
+  font-size: 1.5rem;
+  background-color: #f9f9f9;
+}
+
+.order-details, .delivery-timeline {
+  margin-left: 5%;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  width: 48%;
+}
+.order-details h2{
+  color: #f6820d;
+}
+.order-details h2, .delivery-timeline h2 {
+  margin-bottom: 20px;
+}
+
+.order-details {
+  .description {
+    display: flex;
+    gap: 20px;
+  }
+
+  p {
+    margin: 30px 0;
+
+  }
+
+  img {
+    width: 150px;
+    height: 150px;
+    display: block;
+    margin: 20px 0;
+    background-color: #ddd;
+  }
+}
+
+.delivery-timeline {
+  .heading {
+    background-color: #D9D9D9;
+    height: 30px;
+    text-align: center;
+
+    h3 {
+      margin: 0;
+      line-height: 30px;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    position: relative;
+    margin-left: 20px;
+
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 10px;
+      height: 90%;
+      width: 2px;
+      background: #D9D9D9;
+    }
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+    position: relative;
+    margin-bottom: 40px;
+
+    .circle {
+      width: 20px;
+      height: 20px;
+      background-color: $circle-color;
+      border-radius: 50%;
+      margin-right: 10px;
+      z-index: 1;
+
+    }
+
+    p {
+      margin: 0;
+      color: $text-color;
+    }
+
+    span {
+      display: block;
+      color: $delivery-timeline-color;
+    }
+
+    &:last-child::after {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 20px;
+      height: calc(100% - 20px);
+      width: 2px;
+      background: transparent;
+    }
+  }
+
+  h2 {
+    margin-bottom: 20px;
+    border-bottom: 2px solid #ccc;
+    padding-bottom: 5px;
+  }
+}
diff --git a/src/pages/trackerOrder.tsx b/src/pages/trackerOrder.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable */
+import React from "react";
+const TrackerOrder = () => {
+  return (
+    <div className="order-details-container">
+      <div className="order-details">
+        <h2>Order Details</h2>
+        <p>
+          <strong>ORDER ID:</strong> 7001860211
+        </p>
+
+        <div>
+          <p>Your order was delivered on June 22, 2024</p>
+          <p>
+            <strong>Shipping Address:</strong> Musanze, Byangabo
+          </p>
+          <div className="description">
+            <p>
+              <strong>
+                Total
+                <br />
+                <br />
+              </strong>
+              <b>800,000 Rwf</b>
+            </p>
+
+            <p>
+              <strong>
+                Tracking Number
+                <br />
+                <br />
+              </strong>
+              <b>1Z999AA12345678</b>
+            </p>
+          </div>
+        </div>
+
+        <img src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1720293466/i4fufpae6uxecwipwhy7.jpg" alt="Product" />
+
+        <p>Flat TV</p>
+      </div>
+
+      <div className="delivery-timeline">
+        <div className="heading">
+        <h3>Delivery Timeline</h3>
+        </div>
+        <ul>
+          <li>
+            <div className="circle"></div>
+            <div>
+              <p>Order Placed</p>
+              <span>June 21, 2024 - 11:55 p.m</span>
+            </div>
+          </li>
+          <li>
+            <div className="circle"></div>
+            <div>
+              <p>Shipped</p>
+              <span>June 22, 2024 - 8:55 a.m</span>
+            </div>
+          </li>
+          <li>
+            <div className="circle"></div>
+            <div>
+              <p>Delivered</p>
+              <span>June 22, 2024 - 10:25 a.m</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default TrackerOrder;
diff --git a/src/router.tsx b/src/router.tsx
@@ -29,6 +29,7 @@ import Logout from './components/layout/Logout';
 import UserProfile from './pages/UserEditProfile';
 import ProductsPage from './pages/Products';
 import UserCartPaymentSuccess from './pages/UserCartPaymentSuccess';
+import TrackerOrder from "../src/pages/trackerOrder"
 const AppRouter: React.FC = () => {
   return (
     <div>
@@ -64,6 +65,7 @@ const AppRouter: React.FC = () => {
           <Route path="api/cart/payment-success" element={<UserCartPaymentSuccess />} />
           <Route path="*" element={<NotFound />} />
           <Route path="seller/login" element={<SellerLogin />} />
+          <Route path="trackOrder" element={<TrackerOrder/>} />
         </Route>
         <Route path="/seller" element={<SellerLayout />}>
           <Route index element={<Navigate to="dashboard" replace />} />