link navigation

Author: svdimitr

examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx

@@ -35,6 +35,10 @@ export const ShoppingCartList: React.FC = () => {
     navigate("/products");
   };
 
+  const onProceedClick = () => {
+    navigate("/paymentdetails")
+  }
+
   const updateQuantity = (event) => {
     const target = event.target.element;
     const id = target.getAttribute("id");
@@ -174,7 +178,7 @@ export const ShoppingCartList: React.FC = () => {
                       </FieldWrapper>
                     </fieldset>
                     <div className="k-form-buttons">
-                      <Button themeColor={"primary"} size={"large"}>
+                      <Button themeColor={"primary"} size={"large"} onClick={onProceedClick}>
                         Proceed to Checkout
                       </Button>
                     </div>
@@ -196,6 +200,11 @@ export const ShoppingCartList: React.FC = () => {
           </section>
         </Layout>
       ) : null}
+      <Layout>
+        <div className="k-d-grid">
+
+        </div>
+      </Layout>
     </>
   );
 };

examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx

@@ -5,6 +5,7 @@ import ExpiryDate from "@/components/ExpiryDate";
 import PasswordInput from "@/components/PasswordInput";
 import CardHolder from "@/components/CardHolder";
 import { Button } from "@progress/kendo-react-buttons";
+import { useNavigate } from 'react-router-dom';
 
 import {
   Form,
@@ -23,6 +24,12 @@ import {
 import creditCards from '../assets/creditCards.png';
 
 const PaymentDetails: React.FC = () => {
+  const navigate = useNavigate();
+
+  const onSubmitClick = () => {
+    navigate("/thankyou")
+  }
+
   return (
     <Layout>
       <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4 k-gap-10">
@@ -68,7 +75,7 @@ const PaymentDetails: React.FC = () => {
                 </FormElement>
               )}
             />
-            <Button className="k-mt-6">Submit Order</Button>
+            <Button className="k-mt-6" onClick={onSubmitClick}>Submit Order</Button>
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
             <h2 className="k-mb-4">Sub total</h2>

examples/ecommerce-jewellery-store/src/pages/ThankYou.tsx

@@ -3,16 +3,22 @@ import { Layout } from "@/components/Layout";
 import { BackgroundImage } from '../components/BackgroundImage';
 import present from "@/assets/present.png";
 import { Button } from "@progress/kendo-react-buttons";
+import { useNavigate } from 'react-router-dom';
 
 const ThankYou: React.FC = () => {
+  const navigate = useNavigate();
+
+  const onBacktoShoppingClick = () => {
+    navigate("/products");
+  }
   return (
     <>
       <BackgroundImage img={present} title="" subtitle="" />
       <Layout>
         <div className="k-d-flex k-flex-col k-justify-content-center k-align-items-center k-h-100 k-text-center">
           <h1>Thank You For Your Order!</h1>
           <p>You have submitted your order</p>
-          <Button className="k-mt-6">Back to Shopping</Button>
+          <Button className="k-mt-6" onClick={onBacktoShoppingClick}>Back to Shopping</Button>
         </div>
       </Layout>
     </>