Refactoring Payments/checkout & shopping cart pages of sprint_01

Using the layout pattern.. say hi!

Author: ragab0

src/apps/dashboardApp/App.js

@@ -47,7 +47,10 @@ export default function DashboardApp() {
               <Route index element={<ChaptersTabDetailsTab />} />
               <Route path="resources" element={<ChaptersTabResourcesTab />} />
             </Route>
-            <Route path="promotion" element={<PromotionTab />} />
+            <Route path="promotion">
+              <Route index element={<PromotionTab />} />
+              <Route path=":couponId" element={<h1>CouponPage here</h1>} />
+            </Route>
             <Route path="details" element={<DetailsTab />} />
             <Route path="settings" element={<SettingsTab />} />
           </Route>

src/apps/mainApp/App.css

@@ -12,7 +12,28 @@
   height: 100%;
 }
 
-/* Signup && login pages */
+/* Global classes */
+
+.btn--squared {
+  padding: 10px;
+}
+
+.btn--flatted {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+}
+
+figure:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
+  transition: 0.2s ease;
+}
+
+/*
+ * Signup && login pages:
+ *
+ */
 .signup-page,
 .login-page {
   display: grid;
@@ -32,21 +53,3 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-
-/* Global classes */
-
-.btn--squared {
-  padding: 10px;
-}
-
-.btn--flatted {
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-}
-
-figure:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
-  transition: 0.2s ease;
-}

src/apps/mainApp/App.js

@@ -19,6 +19,7 @@ import TabMessage from "./pages/Profile/Components/TabMessage/TabMessage";
 import TabMyReviews from "./pages/Profile/Components/TabMyReviews/TabMyReviews";
 import CourseContent from "./pages/CourseContent/CourseContent";
 import MentorPage from "./pages/Mentor/MentorPage";
+import OrderComplete from "./components/OrderComplete/OrderComplete";
 
 function App() {
   return (
@@ -31,9 +32,10 @@ function App() {
             <Route index element={<CoursesPage />} />
             <Route path=":id" element={<CoursePage />} />
           </Route>
-          <Route path="cart">
-            <Route index element={<ShoppingCartPage />} />
-            <Route path="checkout" element={<CheckoutPage />} />
+          <Route path="cart" element={<ShoppingCartPage />} />
+          <Route path="payment/checkout">
+            <Route index element={<CheckoutPage />} />
+            <Route path="done" element={<OrderComplete />} />
           </Route>
           <Route path="profile" element={<ProfilePage />}>
             <Route index element={<TabProfile />} />
@@ -57,7 +59,7 @@ function App() {
 function AppDev() {
   return (
     <>
-      {/* <Dev /> */}
+      <Dev />
       <App />
     </>
   );

src/apps/mainApp/components/Navbar/Navbar.js

@@ -19,7 +19,9 @@ export default function Navbar() {
         <Logo />
         <ul className="navbar-items">
           <li>
-            <NavLink to={"/courses"}>courses</NavLink>
+            <NavLink to={"/courses"} end>
+              courses
+            </NavLink>
           </li>
           <li className="form-item">
             <form onSubmit={submitHandler}>

src/apps/mainApp/components/OrderComplete/OrderComplete.css

@@ -0,0 +1,21 @@
+.order-complete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.order-complete-content {
+  text-align: center;
+  margin-block: var(--main-margin);
+}
+
+.order-complete h1 {
+  margin-block: 1rem 0.5rem;
+}
+
+.order-complete img {
+  width: unset;
+  height: unset;
+  margin-inline: auto;
+  display: block;
+}

src/apps/mainApp/components/OrderComplete/OrderComplete.js

@@ -1,6 +1,17 @@
 import React from "react";
 import "./OrderComplete.css";
+import done from "../../../../assets/done.png";
 
 export default function OrderComplete() {
-  return <div className="order-complete">index</div>;
+  return (
+    <div className="order-complete">
+      <div className="container">
+        <div className="order-complete-content">
+          <img alt="order-complete" src={done} />
+          <h1>Order Complete</h1>
+          <h3>You Will Receive a confirmation email soon! </h3>
+        </div>
+      </div>
+    </div>
+  );
 }

src/apps/mainApp/layouts/Cart/Cart.css

@@ -0,0 +1,30 @@
+/*
+ * Shopping && Payment/checkout pages
+ *
+ */
+.layout-cart h1 {
+  color: #333;
+  margin-block: 2rem;
+}
+
+.layout-cart h3 {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgb(211, 211, 211);
+  margin-bottom: 1.25rem;
+  color: #333;
+  font-size: 1rem;
+}
+
+.layout-cart p {
+  color: #334155;
+}
+.layout-cart-body {
+  margin-block: 2rem;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: 2rem;
+}
+
+.layout-cart-content > * {
+  margin-bottom: var(--main-margin);
+}

src/apps/mainApp/layouts/Cart/Cart.js

@@ -0,0 +1,23 @@
+import React from "react";
+import "./Cart.css";
+import Details from "./Details/Details";
+
+export default function LayoutCart({
+  children,
+  title = "Shopping Cart",
+  isCheckoutPage = false,
+}) {
+  return (
+    <div className="layout-cart">
+      <div className="container">
+        <h1>{title}</h1>
+        <div className="layout-cart-body">
+          <div className="layout-cart-content">{children}</div>
+          <aside className="aside">
+            <Details isCheckoutPage={isCheckoutPage} />
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}

src/apps/mainApp/layouts/Cart/Details/Details.css

@@ -0,0 +1,18 @@
+.layout-cart .details-aside h3 {
+  margin-bottom: 0.5rem;
+  border-bottom-color: transparent;
+  font-size: 1.25rem;
+}
+
+.layout-cart .details-aside .orderDetails {
+  border: thin solid rgb(211, 211, 211);
+}
+
+.layout-cart .details-aside .orderDetails .orderPrice .num {
+  color: #0f172a;
+  font-weight: bolder;
+}
+
+.layout-cart .details-aside .btn {
+  padding: 0.75rem;
+}

src/apps/mainApp/layouts/Cart/Details/Details.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import "./Details.css";
+import { Link, useNavigate } from "react-router-dom";
+
+export default function Details({ isCheckoutPage = false }) {
+  const navigate = useNavigate();
+  const [isPaymentCompleted, setIsPaymentCompleted] = useState(false);
+
+  function completeHandler() {
+    setIsPaymentCompleted(true);
+    navigate("done");
+  }
+
+  return (
+    <aside className="details-aside">
+      <h3>Order Details</h3>
+      <div className="orderDetails p-3 text-black mb-4">
+        <div className="orderPrice d-flex justify-content-between my-2">
+          <span>Price</span>
+          <span className="num">$300.00</span>
+        </div>
+        <div className="orderPrice d-flex justify-content-between my-2">
+          <span>Discount</span>
+          <span className="num">-$10.00</span>
+        </div>
+        <div className="orderPrice d-flex justify-content-between my-2">
+          <span>Tax</span>
+          <span className="num">$20.00</span>
+        </div>
+        <div className="orderPrice d-flex justify-content-between my-3">
+          <span className=" fw-bolder fs-5">Total</span>
+          <span className="num fs-5">$00.00</span>
+        </div>
+      </div>
+
+      {isCheckoutPage ? (
+        <button
+          onClick={completeHandler}
+          className="text-center w-100 m-auto d-block btn px-5 rounded-3 btn-danger"
+        >
+          Complete Checkout
+        </button>
+      ) : (
+        <Link
+          className="text-center w-100 m-auto d-block btn px-5 rounded-3 btn-dark"
+          to={"/payment/checkout"}
+        >
+          Proceed to Checkout
+        </Link>
+      )}
+    </aside>
+  );
+}