Fix user pay via stripe 187584890 (#64)

* Finishes user pay cart functionality * --ammend * --ammend * --ammend * --ammend
atlp-rwanda · Aug 5, 2024 · d4e54ea · d4e54ea
1 parent 2d99f3a
commit d4e54ea
Show file tree

Hide file tree

Showing 12 changed files with 710 additions and 246 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -22,18 +22,20 @@
 @import './assets/styles/ImageSlider.scss';
 @import './assets/styles/Queries.scss';
 @import './assets/styles/ViewCart.scss';
-@import "./assets/styles/Notifications.scss";
-@import "./assets/styles/Search.scss";
-@import "./assets/styles/CustomSelect.scss";
-@import "./assets/styles/SellerProduct.scss";
-@import "./assets/styles/SellerCollection.scss";
-@import "./assets/styles/SellerLayout.scss";
-@import "./assets/styles/tables.scss";
-@import "./assets/styles/adminDashboard.scss";
-@import "./assets/styles/users.scss";
-@import "./assets/styles/liveChat.scss";
-@import "./assets//styles/UserProfile.scss";
-@import "./assets/styles/SellerSideProduct.scss";
+@import './assets/styles/Notifications.scss';
+@import './assets/styles/Search.scss';
+@import './assets/styles/CustomSelect.scss';
+@import './assets/styles/SellerProduct.scss';
+@import './assets/styles/SellerCollection.scss';
+@import './assets/styles/SellerLayout.scss';
+@import './assets/styles/tables.scss';
+@import './assets/styles/adminDashboard.scss';
+@import './assets/styles/users.scss';
+@import './assets/styles/liveChat.scss';
+@import './assets//styles/UserProfile.scss';
+@import './assets/styles/SellerSideProduct.scss';
+@import './assets/styles/myOrders.scss';
 @import "./assets/styles/tables.scss";
 @import "./assets/styles/cards.scss";
 @import "./assets/styles/trackOrder.scss";
+@import './assets/styles/trackOrder.scss';
diff --git a/src/assets/styles/Colors.scss b/src/assets/styles/Colors.scss
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 $primary-color: #ff6d18;
+$primary-color-opacity: #ff6d184d;
 $primary-color-light: #ffe2d1;
 $primary-color-dark: #ff8a46;
 $secondary-color: #777777;

diff --git a/src/assets/styles/myOrders.scss b/src/assets/styles/myOrders.scss
@@ -0,0 +1,118 @@
+.my-orders-section {
+  h1 {
+    color: $primary-color;
+    text-align: center;
+    font-size: 22px;
+    padding: 10px;
+  }
+  .order {
+    width: 90%;
+    margin: auto;
+    font-size: 14px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .head {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0;
+      background: $border-color;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      div {
+        flex: 1;
+        color: $black;
+        font-weight: bold;
+        font-size: 12px;
+        padding-left: 5px;
+      }
+
+      .or {
+        flex: 2;
+      }
+    }
+
+    .order-body {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      background: $white;
+
+      div {
+        flex: 1;
+        color: $black;
+        padding: 5px;
+        border: 1px solid $border-color;
+        min-height: 100px;
+        margin: -1px 0 0 -1px; // Adjust to remove gaps between borders
+      }
+
+      .order-product {
+        display: flex;
+        flex-direction: row;
+        font-size: 12px;
+
+        img {
+          width: 48%;
+          height: 80px;
+          object-fit: cover;
+        }
+
+        p {
+          padding-left: 10px;
+
+          h3 {
+            margin-top: 5px;
+            font-size: 12px;
+          }
+
+          span {
+            font-weight: bold;
+          }
+
+          .o-price {
+            margin-left: 20px;
+          }
+        }
+      }
+
+      .order-details {
+        a {
+          top: 20px;
+          position: relative;
+          text-transform: uppercase;
+          text-decoration: underline;
+          font-size: 12px;
+        }
+      }
+
+      .date-placed {
+        span {
+          top: 20px;
+          position: relative;
+        }
+      }
+
+      .track {
+        button {
+          padding: 5px;
+          border: 2px solid $primary-color;
+          color: $primary-color;
+          border-radius: 5px;
+          margin-top: 20px;
+          cursor: pointer;
+        }
+
+        .disabled {
+          cursor: default;
+          color: $primary-color-opacity;
+          border: 2px solid $primary-color-opacity;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/trackOrder.scss b/src/assets/styles/trackOrder.scss
@@ -35,7 +35,7 @@ $text-family: 'Averia Serif Libre';
 
   p {
     margin: 30px 0;
-    
+
   }
 
   img {
@@ -64,7 +64,7 @@ $text-family: 'Averia Serif Libre';
     padding: 0;
     position: relative;
     margin-left: 20px;
-  
+
 
     &::before {
       content: '';
@@ -91,7 +91,7 @@ $text-family: 'Averia Serif Libre';
       border-radius: 50%;
       margin-right: 10px;
       z-index: 1;
-      
+
     }
 
     p {
@@ -120,4 +120,4 @@ $text-family: 'Averia Serif Libre';
     border-bottom: 2px solid #ccc;
     padding-bottom: 5px;
   }
-}
+}