From 57b5da1e79b87774dcf0d8858e5bde4b49ede2be Mon Sep 17 00:00:00 2001
From: iamtrazy <iamtrazy@proton.me>
Date: Sun, 21 Jul 2024 00:58:56 +0530
Subject: [PATCH] fix: proper navigations from cart to checkout

---
 src/components/User/Cart/index.tsx     | 131 ++++++++++++-------------
 src/components/User/Checkout/index.tsx |  20 ++--
 src/pages/Checkout/index.tsx           |   9 +-
 3 files changed, 77 insertions(+), 83 deletions(-)

diff --git a/src/components/User/Cart/index.tsx b/src/components/User/Cart/index.tsx
index cf89ab3..571ac15 100644
--- a/src/components/User/Cart/index.tsx
+++ b/src/components/User/Cart/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import Food from '@images/product/pizza.png';
 import { Checkbox } from '@nextui-org/react';
 import QtySelector from './QtySelector';
-// import { Link } from '@nextui-org/react';
 import { Link } from 'react-router-dom';
-import { Button } from "@nextui-org/react";
+import { Button } from '@nextui-org/react';
+import { useNavigate } from 'react-router-dom';
 
 function index() {
+  const navigate = useNavigate();
   const item = [
     {
       id: '01',
@@ -88,10 +88,12 @@ function index() {
                       className="rounded-xl border dark:border-foodbg dark:bg-foodbg p-2 shadow-sm md:px-6 backdrop-blur-md"
                       style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
                     >
-                      
-
                       <div className="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
-                        <Checkbox radius="full" color="warning" className='text-foodbg'></Checkbox>
+                        <Checkbox
+                          radius="full"
+                          color="warning"
+                          className="text-foodbg"
+                        ></Checkbox>
                         <a href="#" className="shrink-0 md:order-1">
                           <img
                             className="h-30 w-30"
@@ -138,62 +140,61 @@ function index() {
                 </h3>
 
                 <div className="mt-6 grid grid-cols-3 gap-4 sm:mt-8">
-                  
-                {alsoBoughtItems.map((_: any) => {
-                  return (
-                    <div
-                      className="space-y-6 overflow-hidden rounded-xl border border-gray-200 dark:bg-foodbg dark:border-foodbg p-6 shadow-sm backdrop-blur-md"
-                      style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
-                    >
-                      <a href="#" className="overflow-hidden rounded">
-                        <img
-                          className="mx-auto h-44 w-44"
-                          src={Food}
-                          alt="imac image"
-                        />
-                      </a>
-                      <div>
-                        <a
-                          href="#"
-                          className="text-xl font-semibold leading-tight text-gray-900 hover:underline dark:text-white"
-                        >
-                          Cheese Pizza
+                  {alsoBoughtItems.map((_: any) => {
+                    return (
+                      <div
+                        className="space-y-6 overflow-hidden rounded-xl border border-gray-200 dark:bg-foodbg dark:border-foodbg p-6 shadow-sm backdrop-blur-md"
+                        style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
+                      >
+                        <a href="#" className="overflow-hidden rounded">
+                          <img
+                            className="mx-auto h-44 w-44"
+                            src={Food}
+                            alt="imac image"
+                          />
                         </a>
-                        <p className="mt-2 text-base font-normal text-gray-500 dark:text-gray-400">
-                          Indulge in our classic Cheese Pizza, featuring..
-                        </p>
-                      </div>
-                      <div>
-                        <p className="text-lg font-bold text-gray-900 dark:text-white">
-                          <span className="pr-2 text-orange-500">Rs.</span>
-                          3500
-                        </p>
-                      </div>
-                      <div className="mt-2 flex items-center gap-2.5">
-                        <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300">
-                          <svg
-                            className="-ms-2 me-2 h-5 w-5"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            fill="none"
-                            viewBox="0 0 24 24"
+                        <div>
+                          <a
+                            href="#"
+                            className="text-xl font-semibold leading-tight text-gray-900 hover:underline dark:text-white"
                           >
-                            <path
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7h-1M8 7h-.688M13 5v4m-2-2h4"
-                            />
-                          </svg>
-                          Add to cart
-                        </Button>
+                            Cheese Pizza
+                          </a>
+                          <p className="mt-2 text-base font-normal text-gray-500 dark:text-gray-400">
+                            Indulge in our classic Cheese Pizza, featuring..
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-lg font-bold text-gray-900 dark:text-white">
+                            <span className="pr-2 text-orange-500">Rs.</span>
+                            3500
+                          </p>
+                        </div>
+                        <div className="mt-2 flex items-center gap-2.5">
+                          <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300">
+                            <svg
+                              className="-ms-2 me-2 h-5 w-5"
+                              aria-hidden="true"
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="24"
+                              height="24"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7h-1M8 7h-.688M13 5v4m-2-2h4"
+                              />
+                            </svg>
+                            Add to cart
+                          </Button>
+                        </div>
                       </div>
-                    </div>
-                  );
-                })}
+                    );
+                  })}
                 </div>
               </div>
             </div>
@@ -256,14 +257,12 @@ function index() {
                   </dl>
                 </div>
 
-                <Link
-                  to="/checkout"
-                  className='hover:text-white transition duration-300 ease-in-out'
+                <Button
+                  className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-8"
+                  onClick={() => navigate('/checkout')}
                 >
-                  <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-8">
-                    Proceed to Checkout
-                  </Button>
-                </Link>
+                  Proceed to Checkout
+                </Button>
 
                 <div className="flex items-center justify-center gap-2">
                   <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
diff --git a/src/components/User/Checkout/index.tsx b/src/components/User/Checkout/index.tsx
index a0c7d2d..3ce56a9 100644
--- a/src/components/User/Checkout/index.tsx
+++ b/src/components/User/Checkout/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import { Button } from '@nextui-org/react';
+import { useNavigate } from 'react-router-dom';
 
 function index() {
+  const navigate = useNavigate();
   return (
     <section
       className="bg-white py-8 antialiased dark:bg-foodbg border dark:border-foodbg backdrop-blur-md rounded-2xl md:py-16"
@@ -177,10 +177,10 @@ function index() {
                         height="30px"
                         viewBox="0 0 80 64"
                         xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        xmlnsXlink="http://www.w3.org/1999/xlink"
                         aria-hidden="true"
                         role="img"
-                        class="iconify iconify--emojione"
+                        className="iconify iconify--emojione"
                         preserveAspectRatio="xMidYMid meet"
                       >
                         <path
@@ -441,14 +441,12 @@ function index() {
             </div>
 
             <div className="space-y-3">
-              <Link
-                to="/checkout"
-                className="hover:text-white transition duration-300 ease-in-out"
+              <Button
+                className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 py-5 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-2"
+                onClick={() => navigate('/checkout')}
               >
-                <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 py-5 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-2">
-                  Proceed to Payment
-                </Button>
-              </Link>
+                Proceed to Payment
+              </Button>
             </div>
           </div>
         </div>
diff --git a/src/pages/Checkout/index.tsx b/src/pages/Checkout/index.tsx
index 19403f5..b7365f0 100644
--- a/src/pages/Checkout/index.tsx
+++ b/src/pages/Checkout/index.tsx
@@ -1,10 +1,7 @@
-import React from 'react'
-import Checkout from '@components/User/Checkout/index.tsx'
+import Checkout from '@components/User/Checkout/index.tsx';
 
 function index() {
-  return (
-    <Checkout />
-  )
+  return <Checkout />;
 }
 
-export default index
\ No newline at end of file
+export default index;