Merge pull request #35 from atlp-rwanda/order-tracking

Order tracking
atlp-rwanda · Jul 18, 2024 · b79bd2c · b79bd2c
2 parents 9ea5435 + fce855c
commit b79bd2c
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 5 deletions.
diff --git a/src/Components/ChatWidget.js 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/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
@@ -35,7 +35,8 @@ import OrderComponent from "../Components/orders";
 const AppRoutes: React.FC = () => (
   <div>
     <Routes>
-      <Route path="/" element={<Homepage />} />
+
+      <Route path="" element={<Homepage />} />
       <Route path="/login" element={<Signin />} />
       <Route path="/checkout" element={<Checkout />} />
       <Route path="/cart" element={<Cart />} />
@@ -50,11 +51,10 @@ const AppRoutes: React.FC = () => (
       <Route path="/order-tracking" element={<OrderTrackingPage />} />
       <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/Homepage.tsx b/src/pages/Homepage.tsx
@@ -18,6 +18,7 @@ const Homepage: React.FC = () => {
       <BestDeals />
       <ContactSection />
       <Footer />
+      <VoiceflowChatWidget />
     </div>
   );
 };

diff --git 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 (