From 666d227df76abd88f81e4546d4b96b3e20357191 Mon Sep 17 00:00:00 2001
From: gisubizo Jovan <gisubizojovan@gisubizos-MacBook-Pro.local>
Date: Mon, 29 Jul 2024 17:58:20 +0200
Subject: [PATCH] Fix stripe payment

---
 src/components/common/header/Header.tsx |  2 +-
 src/pages/paymentPage.tsx               | 21 ++++++++++++++++++++-
 src/routes/AppRoutes.tsx                |  9 ++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 249eede..8b9ee8d 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -181,7 +181,7 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
               )}
               <Stack className="flex flex-col">
                 <span className="hidden lg:block select-none font-semibold text-[12px]">
-                  {userInfo.name.split(" ")[0]}
+                  {userInfo.name?.split(" ")[0]}
                 </span>
               </Stack>
               {dropdownOpen && <ProfileDropdown userInfo={userInfo} />}
diff --git a/src/pages/paymentPage.tsx b/src/pages/paymentPage.tsx
index 3bb3dec..07ee29f 100644
--- a/src/pages/paymentPage.tsx
+++ b/src/pages/paymentPage.tsx
@@ -174,5 +174,24 @@ const SuccessfulPayment = () => {
   );
 };
 
+const CancelledPayment = () => (
+  <section className="flex items-center justify-center py-32 bg-gray-100 md:m-0 px-4  ">
+    <div className="bg-white p-6 rounded shadow-md text-center">
+      <h1 className="text-2xl font-medium text-red-500">
+        ❌ Payment Was Cancelled
+      </h1>
+      <p className="mt-4">
+        Checkout Details about your carts If you wish to adjust !
+      </p>
+      <p className="mt-2">Thank you for shopping with us.</p>
+
+      <Link to="/carts">
+        <button className="mt-4 inline-block px-4 py-2 text-white bg-red-500 rounded transition-colors duration-300 cursor-pointer hover:bg-green-600">
+          Checkout your Carts
+        </button>
+      </Link>
+    </div>
+  </section>
+);
 export default Payment;
-export { SuccessfulPayment };
+export { SuccessfulPayment, CancelledPayment };
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 9153c1e..3c984d9 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -33,8 +33,11 @@ import BuyerOrders from "../pages/BuyerOrders";
 import SignupVerification from "../pages/SignupVerification";
 import SmoothScroll from "../utils/SmoothScroll";
 import NotFound from "../pages/NotFound";
-import Payment, { SuccessfulPayment } from "../pages/paymentPage";
 import { LogoutProvider } from "../components/dashboard/admin/LogoutContext";
+import Payment, {
+  CancelledPayment,
+  SuccessfulPayment,
+} from "../pages/paymentPage";
 
 const AppRoutes = () => {
   const navigate = useNavigate();
@@ -69,7 +72,7 @@ const AppRoutes = () => {
             <Route path="/orders" element={<BuyerOrders />} />
             <Route path="/payment" element={<Payment />} />
             <Route path="/payment/success" element={<SuccessfulPayment />} />
-            <Route path="/payment/canceled" element={<Payment />} />
+            <Route path="/payment/canceled" element={<CancelledPayment />} />
           </Route>
           <Route path="chat" element={<ChatPage />} />
           <Route path="/password-reset-link" element={<GetLinkPage />} />
@@ -111,7 +114,7 @@ const AppRoutes = () => {
           <Route path="/*" element={<NotFound />} />
         </Routes>
       </LogoutProvider>
-    </SmoothScroll>
+     </SmoothScroll>
   );
 };
 export default AppRoutes;