From 6385a448bacdd0b4a4269e287659e3b4e0cb7a1f Mon Sep 17 00:00:00 2001
From: mugaboshafidanny <mugabodannyshafi@gmail.com>
Date: Thu, 4 Jul 2024 18:28:34 +0200
Subject: [PATCH 1/2] Added Chatbot with Ai capabilities

---
 src/Components/ChatWidget.js | 25 +++++++++++++++++++++++++
 src/Routes/index.tsx         |  1 +
 src/pages/Homepage.tsx       |  2 ++
 3 files changed, 28 insertions(+)
 create mode 100644 src/Components/ChatWidget.js

diff --git a/src/Components/ChatWidget.js b/src/Components/ChatWidget.js
new file mode 100644
index 00000000..2b17658d
--- /dev/null
+++ b/src/Components/ChatWidget.js
@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+const VoiceflowChatWidget = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.onload = () => {
+      window.voiceflow.chat.load({
+        verify: { projectID: '667d389695d66da905e86ce4' },
+          url: 'https://general-runtime.voiceflow.com',
+          versionID: 'production'
+      });
+    };
+    script.src = 'https://cdn.voiceflow.com/widget/bundle.mjs';
+    script.type = 'text/javascript';
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return null;
+};
+
+export default VoiceflowChatWidget;
diff --git a/src/Routes/index.tsx b/src/Routes/index.tsx
index a686fafd..afdaa714 100644
--- a/src/Routes/index.tsx
+++ b/src/Routes/index.tsx
@@ -25,6 +25,7 @@ import Singlepage from "../pages/singlePage";
 const AppRoutes: React.FC = () => (
   <div>
     <Routes>
+      
       <Route path="" element={<Homepage />} />
       <Route path="/login" element={<Signin />} />
       <Route path="/checkout" element={<Checkout />} />
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 24008680..e6fb4b81 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -6,6 +6,7 @@ import HeroSection from '../Components/Homepage/HeroSection';
 import BestDeals from '../Components/Homepage/BestDeals';
 import AboutCrafters from '../Components/Homepage/AboutCrafters'
 import PopularProducts from '../Components/Homepage/PopularProducts';
+import VoiceflowChatWidget from '../Components/ChatWidget';
 
 
 const Homepage: React.FC = () => {
@@ -18,6 +19,7 @@ const Homepage: React.FC = () => {
       <BestDeals />
       <ContactSection />
       <Footer />
+      <VoiceflowChatWidget />
     </div>
   );
 };

From 21a956a288090fe45b96a503bb682fe5e587fedd Mon Sep 17 00:00:00 2001
From: bernice uwituze <b.uwituze@alustudent.com>
Date: Thu, 18 Jul 2024 10:24:09 +0200
Subject: [PATCH 2/2] add loaders for order tracking page

---
 src/Components/orders.tsx       | 34 +++++++++++++++++++++++-
 src/Routes/index.tsx            |  5 ++--
 src/pages/orderTrackingPage.tsx | 47 +++++++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/src/Components/orders.tsx b/src/Components/orders.tsx
index e44c0061..b2db0a3b 100644
--- a/src/Components/orders.tsx
+++ b/src/Components/orders.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import OrderTable from "./orderComponent";
 import { useGetAllOrdersQuery } from "../Redux/OrderSlice";
+import Skeleton from "react-loading-skeleton";
+import 'react-loading-skeleton/dist/skeleton.css';
 
 interface Order {
     orderId: string;
@@ -25,13 +27,43 @@ const OrderComponent = () => {
     console.log('token ', token);
     const { data: orders, isLoading, error } = useGetAllOrdersQuery({ token });
 
+    const LoadingSkeleton = () => {
+        return (
+            <div className="m-10">
+                {[...Array(3)].map((_, index) => (
+                    <div key={index} className="bg-gray-300 rounded-lg p-6 mb-4 flex justify-between mr-20">
+                        <div className="flex gap-10">
+                            <div>
+                                <Skeleton width={20} />
+                            </div>
+                            <div>
+                                <Skeleton width={100} />
+                            </div>
+                            <div>
+                                <Skeleton width={100} />
+                            </div>
+                            <div>
+                                <Skeleton width={80} />
+                            </div>
+                        </div>
+                        <div>
+                            <Skeleton width={80}/>
+                        </div>
+    
+                    </div>
+                ))}
+            </div>
+        );
+        
+    }
+
     return (
         <div className="font-outfit">
             <div className="font-semibold m-10">
                 My Orders
             </div>
             {isLoading ? (
-                <div>Loading orders...</div>
+                <LoadingSkeleton/>
             ) : error ? (
                 <div>Error loading orders</div>
             ) : !orders || orders.length === 0 ? (
diff --git a/src/Routes/index.tsx b/src/Routes/index.tsx
index 51537b08..a5994fa1 100644
--- a/src/Routes/index.tsx
+++ b/src/Routes/index.tsx
@@ -43,11 +43,10 @@ const AppRoutes: React.FC = () => (
       <Route path="/products" element={<Products />} />
       <Route path="/forgot-password" element={<Forgotpassword />} />
       <Route path="/product/:id" element={<Singlepage />} />
-      <Route path="/order/:orderId" element={<OrderTrackingPage />} />
-      <Route path="/orders" element={<OrderComponent />} />
       <Route element={<AuthOutlet fallbackPath="/login" />}>
         <Route path="/chat" element={<Chat />} />
-
+        <Route path="/order/:orderId" element={<OrderTrackingPage />} />
+        <Route path="/orders" element={<OrderComponent />} />
         <Route path="/admin" element={<Admin />}>
           <Route index element={<AdminHome />} />
           <Route path="users" element={<Users />} />
diff --git a/src/pages/orderTrackingPage.tsx b/src/pages/orderTrackingPage.tsx
index d7fed22e..a17f041c 100644
--- a/src/pages/orderTrackingPage.tsx
+++ b/src/pages/orderTrackingPage.tsx
@@ -8,6 +8,8 @@ import { getCookie } from "../Components/OrderTracking/authUtils";
 import { useGetOrderQuery, useGetUserInfoQuery } from "../Redux/OrderSlice";
 import { useParams } from "react-router-dom";
 import Header from "../Components/Homepage/Homepage_header";
+import Skeleton from "react-loading-skeleton";
+import 'react-loading-skeleton/dist/skeleton.css';
 
 export const OrderTrackingPage = () => {
   const { orderId } = useParams();
@@ -28,6 +30,51 @@ export const OrderTrackingPage = () => {
 
   const { data: userInfo, error: userInfoError, isLoading: userInfoLoading } = useGetUserInfoQuery({ userId }, { skip: !userId });
 
+  const LoadingSkeleton = () => (
+    <div className="flex flex-col gap-20 h-screen p-10 lg:p-20 mt-20">
+      <div className="order-details-container border-b pb-8">
+        <Skeleton width={300} height={30} className="mb-4" />
+        <div className="flex justify-between">
+        <Skeleton width={200} height={30} className="mb-4" />
+        <Skeleton width={200} height={30} className="mb-4" />
+        </div>
+        
+        <div className="flex justify-between mb-4">
+          <Skeleton width={100} height={20} />
+          <Skeleton width={100} height={20} />
+          <Skeleton width={100} height={20} />
+          <Skeleton width={100} height={20} />
+        </div>
+      </div>
+      <div className="contact-info-container flex justify-between">
+        <div>
+        <Skeleton width={200} height={30} className="mb-4" />
+        <Skeleton width={250} height={20} className="mb-2" />
+        <Skeleton width={250} height={20} className="mb-2" />
+        </div>
+        <div>
+        <Skeleton width={200} height={30} className="mb-4" />
+        <Skeleton width={250} height={20} className="mb-2" />
+        <Skeleton width={250} height={20} className="mb-2" />
+        </div>
+        
+      </div>
+      <div className="pb-10">
+        <Skeleton width={200} height={30} className="mb-4" />
+        <Skeleton width="100%" height={50} className="mb-4" />
+        <Skeleton width="100%" height={50} />
+      </div>
+    </div>
+  );
+
+  if(orderLoading || userInfoLoading){
+    return(
+      <>
+      <Header/>
+      <LoadingSkeleton/>
+      </>
+    )
+  }
 
   if(orderError) return <div>Error loading order</div>
   return (