@bjsdistribution/dms-client-return 0.0.12 → 0.0.13

package/src/components/order-view/general-information/Status.tsx

@@ -7,21 +7,11 @@ import RouteIcon from '../../../assets/icons/RoutedIcon';
 import SuccessIcon from '../../../assets/icons/SuccessIcon';
 import DeliveredIcon from '../../../assets/icons/DeliveredIcon';
 import ConfirmedIcon from '../../../assets/icons/ConfirmedIcon';
-// import { useStatusDetails } from '../store';
+import { useStatusDetails } from '../store';
 
 function Status() {
-  // const [orderStatus] = useStatusDetails();
-  const orderStatus = [
-    {
-      released: true,
-      received: 'True',
-      routed: true,
-      scheduled: true,
-      confirmed: false,
-      delivered: true,
-      completed: false,
-    },
-  ];
+  const [orderStatus] = useStatusDetails();
+
   return (
     <Container>
       <BoxContainer>
@@ -46,6 +36,10 @@ const renderIcon = (value: any, orderStatus: any) => {
     return null;
   }
 
+  if (!status) {
+    return null;
+  }
+
   switch (value) {
     case 'released':
     case 'scheduled':
@@ -55,7 +49,7 @@ const renderIcon = (value: any, orderStatus: any) => {
     case 'received':
       if (status.received === 'True') {
         return <SuccessIcon />;
-      } else if (status.received === 'partially') {
+      } else if (status.received === 'Partial') {
         return <RouteIcon />;
       } else {
         return <ConfirmedIcon />;
@@ -65,9 +59,11 @@ const renderIcon = (value: any, orderStatus: any) => {
         status.delivered &&
         (status.completed === false || status.completed === null)
       ) {
-        return <DeliveredIcon />;
-      } else if (status.delivered && status.completed) {
+        return <DeliveredIcon />; //grey
+      } else if (status.delivered === true && status.completed === true) {
         return <SuccessIcon />;
+      } else if (status.delivered === true && status.completed === false) {
+        return <RouteIcon />;
       } else {
         return <ConfirmedIcon />;
       }
@@ -95,7 +91,7 @@ const Heading = styled.div`
 `;
 
 const Container = styled.div`
-  margin-top: 35px;
+  padding: 15px;
 `;
 
 const TextContainer = styled.div`

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -4,6 +4,12 @@ import { Skeleton } from 'antd';
 import { formatDateTime } from '@bjsdistribution/dms-component-library';
 import { usegetNotes, UseNotesLoading } from '../store';
 import { NotesTableData } from '../notes/logs/fakeData';
+import {
+  IconCover,
+  Td as BaseTd,
+  Th,
+  Table,
+} from '../../order-daily-overview/common/css/TableStyle';
 
 const GenericAuditLogsTable = () => {
   const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
@@ -13,14 +19,20 @@ const GenericAuditLogsTable = () => {
   return (
     <ScrollableTableWrapper>
       <AuditTableWrapper>
-        <table>
-          <thead>
-            <tr>
-              {tableHeadData.map(column => (
-                <th key={column.key}>{column.label}</th>
-              ))}
-            </tr>
-          </thead>
+        <StickyHeaderWrapper>
+          <StyledTable>
+            <thead>
+              <tr>
+                {tableHeadData.map(column => (
+                  <Th key={column.key}>
+                    <IconCover>{column.label}</IconCover>
+                  </Th>
+                ))}
+              </tr>
+            </thead>
+          </StyledTable>
+        </StickyHeaderWrapper>
+        <StyledTable>
           <tbody>
             {isLoading ? (
               <tr>
@@ -30,30 +42,32 @@ const GenericAuditLogsTable = () => {
               </tr>
             ) : getNotes && getNotes?.length > 0 ? (
               getNotes?.map((note: any) => (
-                <tr key={note?.id}>
-                  <td>
-                    <div className="bold" title={note?.created_by}>
+                <StyledTr key={note?.id}>
+                  <DateTd>
+                    <CreatedBy title={note?.created_by}>
                       {note?.created_by}
-                    </div>
+                    </CreatedBy>
                     <div>{formatDateTime(note?.created_at)}</div>
-                  </td>
-                  <td>{note?.description}</td>
-                </tr>
+                  </DateTd>
+                  <StyledTd
+                    dangerouslySetInnerHTML={{ __html: note?.description }}
+                  ></StyledTd>
+                </StyledTr>
               ))
             ) : (
               <tr>
-                <td colSpan={tableHeadData?.length}>No data found</td>
+                <NoDataFound colSpan={tableHeadData?.length}>
+                  No data found
+                </NoDataFound>
               </tr>
             )}
           </tbody>
-        </table>
+        </StyledTable>
       </AuditTableWrapper>
     </ScrollableTableWrapper>
   );
 };
 
-const ScrollableTableWrapper = styled.div``;
-
 export const AuditTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
@@ -93,4 +107,52 @@ export const AuditTableWrapper = styled.div`
   }
 `;
 
+const DateTd = styled(BaseTd)`
+  color: #6d6d6d;
+`;
+
+const NoDataFound = styled(BaseTd)`
+  text-align: center;
+  padding: 16px;
+  font-size: 16px;
+  color: #999;
+`;
+
+const StyledTable = styled(Table)`
+  width: 100%;
+  table-layout: fixed;
+  td.noBoder {
+    background: none !important;
+    border: none !important;
+    padding: 0;
+  }
+`;
+
+const StyledTr = styled.tr`
+  &:nth-child(even) {
+    background-color: #f3fbff;
+  }
+`;
+
+const StyledTd = styled(BaseTd)`
+  padding: 10px;
+`;
+
+const CreatedBy = styled.div`
+  font-weight: bold;
+`;
+
+const ScrollableTableWrapper = styled.div`
+  height: 250px;
+  min-height: 200px;
+  overflow: auto;
+`;
+
+const StickyHeaderWrapper = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #fff;
+`;
+
 export default GenericAuditLogsTable;

package/src/components/order-view/index.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 // import Notification from './notification';
 import styled from 'styled-components';
 import OrderDetails from './order-details';
 import Notes from './notes';
 import Order from './order-resources/expanded-content';
-// import Toolbox from './toolbox-resources/expanded-content';
+import Toolbox from './toolbox-resources/expanded-content';
 import SystemLogs from './system-event-logs/expanded-content';
 import GeneralHeader from './general-information';
 import ProductsInfo from './products-info';
-// import TomTomLogs from './tomtomlogs/expanded-content';
+import TomTomLogs from './tomtomlogs/expanded-content';
 // import { OrderViewType } from '../types';
 // import Modals from './modals';
 import OrderActions from './order-actions';
-import { Alert, useApiHook } from '@bjsdistribution/dms-component-library';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
 
 import {
   useOrderDetails,
@@ -21,17 +21,25 @@ import {
   useOrderId,
   useDepotOptions,
   usePrevOrderDetails,
+  useOrderProductsResources,
+  useOrderProductsToolbox,
+  useCustomerInfo,
+  useLocationOptions,
   useOrderProductSystemLogs,
+  useGsitCUstomerId,
+  useCUstomerId,
+  useRouteId,
+  useGsitOrderId,
+  useOrderProductId,
+  useApiCalling,
+  useLiveRecalling,
 } from './store';
-// import Loader from '../order-daily-overview/header/loader/Loader';
-import { useLoading } from '../order-daily-overview/store/store';
+import Loader from '../order-daily-overview/header/loader/Loader';
+// import { useLoading } from '../order-daily-overview/store/store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
-import RouterHeader from '../order-daily-overview/header/route-header/RouterHeader';
-// import HeaderFilter from '../order-daily-overview/Header-filters/HeaderFilter';
-// import Filters from '../order-daily-overview/filters/Filters';
-import DetailsFilters from './details-filters/DetailsFilters';
 import useSystemLogs from './hooks/useGetSystemLogs';
+import { notification } from 'antd';
 
 interface ApiResponse {
   message: string;
@@ -43,8 +51,11 @@ interface ApiResponse {
 }
 
 function OrderView() {
+  notification.config({
+    top: 150,
+  });
   const [orderId, setOrderId] = useOrderId();
-
+  const [gsitOrderId, setGsitOrderId] = useGsitOrderId();
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
     return parts;
@@ -53,14 +64,30 @@ function OrderView() {
   // For API Call
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
-  const [, setLoading] = useLoading();
+  const [, setLoading] = useState<boolean>(false);
   const [, setOrderStaticData] = useOrderStaticData();
   const [, setOrderStatus] = useStatusDetails();
   const [, setDepotOptions] = useDepotOptions();
+  const [, setCustomerInfo] = useCustomerInfo();
   const location = useLocation();
   const paths = splitPath(location.pathname);
+  const [, setLocationOptions] = useLocationOptions();
+  const [apiCalling] = useApiCalling();
+
+  const [orderResources, setOrderResources] = useOrderProductsResources();
+  const [orderToolbox, setOrderToolbox] = useOrderProductsToolbox();
+  const [GsitCUstomerId, setGsitCUstomerId] = useGsitCUstomerId();
+  const [, setOrderProductId] = useOrderProductId();
+  const [, setCUstomerId] = useCUstomerId();
+  const [, setRouteId] = useRouteId();
+  const [liveRecalling] = useLiveRecalling();
+  const systemLogsData = useSystemLogs();
 
-  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+  const {
+    data: fetchedData,
+    loading,
+    setShouldPerformAction: orderUpdate,
+  } = useApiHook<{
     data: OrdersType[];
   }>({
     endpoint: `orders/${orderId}`,
@@ -79,7 +106,7 @@ function OrderView() {
   const {
     data: fetchedStatusData,
     loading: statusDataLoading,
-    setShouldPerformAction: setPerformAction,
+    setShouldPerformAction: setLivePerformAction,
   } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -87,25 +114,36 @@ function OrderView() {
     method: 'GET',
     performAction: false,
   });
-
   const { data: fetchedDepotData, loading: depotDataLoading } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `/depot/`,
     method: 'GET',
+    filters: [{ field: 'visibility', op: '=', value: true }],
   });
-
   useEffect(() => {
     if (orderId) {
-      setShouldPerformAction(true);
-      setPerformAction(true);
+      orderUpdate(true);
+      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
+    }
+  }, [orderId, liveRecalling]);
+
+  useEffect(() => {
+    if (apiCalling) {
+      orderUpdate(true);
+    } else {
+      orderUpdate(false);
     }
-  }, [orderId]);
+  }, [apiCalling]);
 
   useEffect(() => {
     if (paths.length > 1) {
       setOrderId(paths[1]);
     }
+    // for local
+    // if (paths.length >= 0) {
+    //   setOrderId(paths[0]);
+    // }
   }, [paths]);
 
   useEffect(() => {
@@ -121,6 +159,17 @@ function OrderView() {
     if (fetchedData && fetchedData.data) {
       const requiredData = fetchedData?.data;
       setOrderDetails(requiredData[0]);
+      //@ts-ignore
+      setCUstomerId(requiredData[0]?.customer_id);
+      setRouteId(requiredData[0]?.order_routes?.route_id);
+      //@ts-ignore
+      setGsitOrderId(requiredData[0]?.gsit_order_id);
+      //@ts-ignore
+      setOrderProductId(requiredData[0]?.id);
+      setCustomerInfo({
+        recipient_name: requiredData[0]?.order_recipient?.recipient_name,
+        postcode: requiredData[0]?.order_recipient?.postcode,
+      });
       setPrevOrderDetails(requiredData[0]);
     }
   }, [loading]);
@@ -129,13 +178,16 @@ function OrderView() {
     setLoading(statusDataLoading);
     if (fetchedStatusData && fetchedStatusData.data) {
       const requiredData = fetchedStatusData?.data;
-      if (requiredData.length > 0) {
+      if (requiredData) {
         setOrderStatus(requiredData);
       } else {
-        setOrderStatus(null);
+        // setOrderStatus(null);
       }
     }
-  }, [statusDataLoading]);
+    return () => {
+      setOrderId(null);
+    };
+  }, [statusDataLoading, fetchedStatusData]);
 
   useEffect(() => {
     setLoading(depotDataLoading);
@@ -153,11 +205,104 @@ function OrderView() {
         setDepotOptions([]);
       }
     }
+    return () => {
+      setOrderId(null);
+    };
   }, [depotDataLoading]);
 
-  const gsitId = orderDetails?.gsit_order_id;
+  // Order resources
+  const {
+    data: fetchedResourcesData,
+    setShouldPerformAction: setActions,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/${orderId}/order_resources/`,
+    method: 'GET',
+    performAction: false,
+  });
 
-  const systemLogsData = useSystemLogs();
+  useEffect(() => {
+    if (orderId) {
+      setActions(true);
+    }
+  }, [orderId, setActions]);
+
+  useEffect(() => {
+    if (orderId) {
+      setOrderResources(fetchedResourcesData);
+    }
+    return () => {
+      setOrderId(null);
+    };
+  }, [fetchedResourcesData, orderResources, setOrderResources]);
+
+  // Toolbox resources
+  const {
+    data: fetchedToolboxData,
+    setShouldPerformAction: setAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/${orderId}/toolbox_resources/`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (orderId) {
+      setAction(true);
+    }
+  }, [orderId, setAction]);
+
+  useEffect(() => {
+    if (orderId) {
+      setOrderToolbox(fetchedToolboxData);
+    }
+    return () => {
+      setOrderId(undefined);
+    };
+  }, [fetchedToolboxData, orderToolbox, setOrderToolbox]);
+
+  useEffect(() => {
+    if (GsitCUstomerId?.id) {
+      shouldFetch(true);
+    } else {
+      shouldFetch(false);
+    }
+  }, [GsitCUstomerId]);
+
+  useEffect(() => {
+    return () => {
+      setGsitCUstomerId((prev: any) => ({ ...prev, id: undefined }));
+    };
+  }, []);
+
+  const {
+    data: fetchedLocationData,
+    loading: dataLoading,
+    setShouldPerformAction: shouldFetch,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/return_locations/?customer_id=${GsitCUstomerId?.id}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (fetchedLocationData && fetchedLocationData?.data) {
+      const locationOptions = fetchedLocationData?.data?.map((item: any) => {
+        return {
+          label: item?.location_name + ', ' + item?.postcode,
+          value: item?.token,
+          is_default: item?.is_default === 'True' ? true : false,
+        };
+      });
+      setLocationOptions(locationOptions);
+    }
+  }, [dataLoading]);
+  let gsitId = orderDetails?.gsit_order_id;
   const [, setSystemLogsEvents] = useOrderProductSystemLogs();
 
   const fetchReminderData = async () => {
@@ -166,182 +311,37 @@ function OrderView() {
   };
 
   useEffect(() => {
-    if (gsitId) {
+    if (gsitOrderId) {
       fetchReminderData();
-
-      console.log('Setting filters for gsitId:', gsitId);
     }
+    return () => {
+      setGsitOrderId(undefined);
+    };
   }, [gsitId]);
 
   return (
-    <>
-      <DashBoardWrapper>
-        <RouterHeader />
-        <div className="Tableconatiner">
-          {/* <HeaderFilter /> */}
-          <DetailsFilters />
-          <MainContainer>
-            {/* <Loader /> */}
-            <Section>
-              <GeneralHeader />
-              {/* <Notification /> */}
-              <NotifyContainer>
-                <Alert
-                  type="error"
-                  title={`Outstanding`}
-                  description=""
-                  showOkButton={false}
-                  onClose={() => {}}
-                />
-              </NotifyContainer>
-              <OrderDetails />
-            </Section>
-
-            <ProductsInfo />
-            <SplitLayout>
-              <NotesContainer>
-                <Notes />
-              </NotesContainer>
-              <TablesContainer>
-                <Order />
-                {/* <Toolbox /> */}
-                <SystemLogs />
-                {/* <TomTomLogs /> */}
-              </TablesContainer>
-            </SplitLayout>
-            <OrderActions />
-          </MainContainer>
-        </div>
-      </DashBoardWrapper>
-    </>
+    <MainContainer>
+      <Loader />
+      <GeneralHeader />
+      {/* <Notification /> */}
+      <OrderDetails />
+      <ProductsInfo />
+      <SplitLayout>
+        <NotesContainer>
+          <Notes />
+        </NotesContainer>
+        <TablesContainer>
+          <Order />
+          <Toolbox />
+          <SystemLogs />
+          <TomTomLogs />
+        </TablesContainer>
+      </SplitLayout>
+      <OrderActions />
+    </MainContainer>
   );
 }
 
-const Section = styled.div`
-  display: flex;
-  background: #ffffff;
-  // padding: 15px;
-  flex-direction: column;
-  gap: 14px;
-  border-radius: 12px;
-  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-  border: 1px solid #e0e0e0;
-  padding: 12px;
-`;
-/* // `; */
-const DashBoardWrapper = styled.section`
-  .Tableconatiner {
-    border-radius: 12px;
-    /* background: #fff; */
-    /* box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1); */
-    display: block;
-    padding: 15px 0px;
-  }
-  .headerWrap,
-  .tableData,
-  .styleCovered {
-    transition: all ease 0.5s;
-  }
-  &.stickyTableHead {
-    h2 {
-      font-size: 21px;
-    }
-    .headerWrap {
-      height: 84px;
-      padding: 10px;
-      border-radius: 0px 0px 15px 15px;
-      > div {
-        position: relative;
-        z-index: 10;
-      }
-    }
-    .styleCovered {
-      margin-top: -32px;
-      width: 67%;
-      float: right;
-      gap: 5px;
-      padding-right: 11px;
-
-      li {
-        padding: 4px 10px 5px 5px;
-        gap: 5px;
-        .svgCover {
-          width: 30px;
-          height: 30px;
-          svg {
-            height: auto;
-            width: 58%;
-          }
-        }
-        .countDigit {
-          font-size: 19px;
-        }
-      }
-      .countMess {
-        font-size: 13px;
-      }
-    }
-    .dmsBulkFilter {
-      min-height: unset;
-      gap: 4px;
-      > div {
-        padding: 4px 12px;
-        label {
-          font-size: 11px;
-        }
-      }
-    }
-
-    .StyledFilterList {
-      gap: 4px;
-      li {
-        height: 29px;
-        padding: 3px 8px;
-        gap: 4px;
-        .StyledFilterBtnIcon {
-          width: 20px;
-          height: 20px;
-          svh {
-            width: 10px;
-            height: auto;
-          }
-        }
-        .StyledFilterBtnLabel {
-          font-size: 13px;
-        }
-      }
-    }
-    .StyledFilterLabel {
-      padding-left: 10px;
-      span {
-        font-size: 13px;
-      }
-    }
-    .cardcontainer.tableData {
-      max-height: calc(100vh - 310px);
-      min-height: calc(100vh - 310px);
-    }
-
-    .tableData {
-      max-height: calc(100vh - 320px);
-      min-height: calc(100vh - 320px);
-
-      margin-top: 8px;
-      thead {
-        position: sticky;
-        top: 0;
-        z-index: 9;
-        th {
-          font-size: 13px;
-          padding: 2px 15px;
-        }
-      }
-    }
-  }
-`;
-const NotifyContainer = styled.div`
-  margin-left: 18px;
-`;
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column;