checkout validation/404page/OrderSuccessPage

Author: murtazatankiwala456

src/App.js

@@ -10,7 +10,7 @@ import {
   Route,
   Link,
 } from "react-router-dom";
-import Cart from "./features/cart/Cart";
+
 import CartPage from "./pages/CartPage";
 import Checkout from "./pages/Checkout";
 import ProductDetailPage from "./pages/ProductDetailPage";
@@ -19,6 +19,8 @@ import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectLoggedInUser } from "./features/auth/authSlice";
 import { fetchItemsByUserIdAsync } from "./features/cart/cartSlice";
+import PageNotFound from "./pages/404";
+import OrderSuccessPage from "./pages/OrderSuccessPage";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -61,6 +63,14 @@ const router = createBrowserRouter([
       </Protected>
     ),
   },
+  {
+    path: "/order-success",
+    element: <OrderSuccessPage></OrderSuccessPage>,
+  },
+  {
+    path: "*",
+    element: <PageNotFound></PageNotFound>,
+  },
 ]);
 
 function App() {

src/pages/404.js

@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+function PageNotFound() {
+  return (
+    <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+      <div className="text-center">
+        <p className="text-base font-semibold text-indigo-600">404</p>
+        <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          Page not found
+        </h1>
+        <p className="mt-6 text-base leading-7 text-gray-600">
+          Sorry, we couldn’t find the page you’re looking for.
+        </p>
+        <div className="mt-10 flex items-center justify-center gap-x-6">
+          <Link
+            to="/"
+            href="#"
+            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            Go back home
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default PageNotFound;

src/pages/Checkout.js

@@ -51,16 +51,20 @@ function Checkout() {
     setpaymentMethod(e.target.value); // cash/card
   };
   const handleOrder = (e) => {
-    const order = {
-      items,
-      totalAmount,
-      totalItems,
-      user,
-      selectedAddress,
-      paymentMethod,
-    };
-    dispatch(createOrderAsync(order));
-    // TODO: redirect to order success page
+    if (selectedAddress && paymentMethod) {
+      const order = {
+        items,
+        totalAmount,
+        totalItems,
+        user,
+        selectedAddress,
+        paymentMethod,
+      };
+      dispatch(createOrderAsync(order));
+      // TODO: redirect to order success page
+    } else {
+      alert("Enter Address and  Payment Method");
+    }
     // TODO: clear cart after order
     // TODO: on server change the stock number of items
   };

src/pages/OrderSuccessPage.js

@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom";
+import { Navigate } from "react-router-dom";
+function OrderSuccessPage({ order }) {
+  return (
+    <>
+      {!order && <Navigate to="/" replace={true}></Navigate>}
+      <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+        <div className="text-center">
+          <p className="text-base font-semibold text-indigo-600">
+            Order Successfully Placed
+          </p>
+          <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            Order Number #{order?.id}
+          </h1>
+          <p className="mt-6 text-base leading-7 text-gray-600">
+            You can check your order in My Account > My Orders
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Link
+              to="/"
+              href="#"
+              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Go back home
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default OrderSuccessPage;