@bjsdistribution/dms-client-return 0.1.13-prod → 0.1.14-prod

package/src/components/order-view/order-details/expanded-content/index.tsx

@@ -5,24 +5,38 @@ import OrdersSection from './orders-section';
 import InstructionSection from './instruction-section';
 import ServicesSection from './services-section';
 import OrderDetailsFooter from './footer';
+import { Skeleton } from 'antd';
+import { FormSection } from '@bjsdistribution/dms-component-library';
 
-function ExpandedContent() {
+function ExpandedContent({ orderLoading, depotDataLoading }: any) {
   return (
-    <MainContainer>
-      <Container>
-        <HalfWidth>
-          <CustomerSection />
-        </HalfWidth>
-        <HalfWidth>
-          <OrdersSection />
-        </HalfWidth>
-        <InstructionSection />
-      </Container>
-      {/* <InstructionContainer>
-      </InstructionContainer> */}
-      <ServicesSection />
-      <OrderDetailsFooter />
-    </MainContainer>
+    <>
+      <MainContainer>
+        {orderLoading || depotDataLoading ? (
+          <>
+            <CustomFormSection>
+              <Skeleton paragraph={{ rows: 4 }} />
+              <Skeleton paragraph={{ rows: 4 }} />
+            </CustomFormSection>
+          </>
+        ) : (
+          <>
+            <Container>
+              <HalfWidth>
+                <CustomerSection />
+              </HalfWidth>
+              <HalfWidth>
+                <OrdersSection />
+              </HalfWidth>
+              <InstructionSection />
+            </Container>
+
+            <ServicesSection />
+            <OrderDetailsFooter />
+          </>
+        )}
+      </MainContainer>
+    </>
   );
 }
 
@@ -86,4 +100,11 @@ const MainContainer = styled.div`
   }
 `;
 
+const CustomFormSection = styled(FormSection)`
+  flex: 1;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
 export default ExpandedContent;

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

@@ -14,7 +14,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function OrderDetails() {
+function OrderDetails({ orderLoading, depotDataLoading }: any) {
   const [orderData] = useOrderDetails();
   const customerData = orderData;
   const id = customerData?.customer_id;
@@ -44,7 +44,10 @@ function OrderDetails() {
 
   return (
     <>
-      <ExpandedContent />
+      <ExpandedContent
+        orderLoading={orderLoading}
+        depotDataLoading={depotDataLoading}
+      />
     </>
   );
 }

package/src/components/order-view/order-resources/expanded-content/index.tsx

@@ -6,7 +6,7 @@ import DynamicTable from '../../DynamicTable';
 import { useOrderProductsResources } from '../../store';
 import { tableColumns } from '../helper';
 
-function Order() {
+function Order({ loading }: any) {
   const [orderResources] = useOrderProductsResources();
 
   const data =
@@ -17,7 +17,7 @@ function Order() {
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        <DynamicTable columns={tableColumns} data={data} />
+        <DynamicTable columns={tableColumns} data={data} loading={loading} />
       </CollapsableForm>
     </Table>
   );

package/src/components/order-view/products-info/expanded-content/index.tsx

@@ -16,6 +16,8 @@ import { useOrderId } from '../../store';
 
 interface IPROS {
   callReturnProducts: any;
+  loading: boolean;
+  locationloading: boolean;
 }
 
 function ExpandedContent(props: IPROS) {
@@ -106,7 +108,11 @@ function ExpandedContent(props: IPROS) {
 
   return (
     <Container>
-      <ProductTable callReturnProducts={props?.callReturnProducts} />
+      <ProductTable
+        callReturnProducts={props?.callReturnProducts}
+        loading={props?.loading}
+        locationloading={props?.locationloading}
+      />
       <MidContainer>
         <SaveNoteContainer>
           <Button

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

@@ -15,7 +15,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function ProductsInfo() {
+function ProductsInfo({ locationloading }: any) {
   const [data] = useOrderDetails();
   const returnOrder = data;
 
@@ -43,17 +43,21 @@ function ProductsInfo() {
     setLoading(loading);
     if (returnOrdersData && returnOrdersData.data) {
       const requiredData = returnOrdersData.data;
-      if (requiredData.length > 0) {
+      if (requiredData?.length > 0) {
         setProductsData(requiredData);
       } else {
-        setProductsData(null);
+        setProductsData([]);
       }
     }
   }, [returnOrdersData, loading]);
 
   return (
     <CollapsableForm collapsedContent={<CollapsedContent />}>
-      <ExpandedContent callReturnProducts={callReturnProducts} />
+      <ExpandedContent
+        callReturnProducts={callReturnProducts}
+        loading={loading}
+        locationloading={locationloading}
+      />
     </CollapsableForm>
   );
 }

package/src/components/order-view/return-client-products/ProductTable.tsx

@@ -4,12 +4,18 @@ import styled from 'styled-components';
 
 interface IPROS {
   callReturnProducts: any;
+  loading: boolean;
+  locationloading: boolean;
 }
 
 const ProductTable = (props: IPROS) => {
   return (
     <Container>
-      <ReturnProductTable callReturnProducts={props?.callReturnProducts} />
+      <ReturnProductTable
+        callReturnProducts={props?.callReturnProducts}
+        loading={props?.loading}
+        locationloading={props?.locationloading}
+      />
     </Container>
   );
 };

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -11,13 +11,16 @@ import {
 import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useOrderId, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
-import { notification } from 'antd';
+import { Empty, notification, Skeleton } from 'antd';
 import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
+import { EmptyDataContainer } from '../../order-actions/actions/charge-log';
 
 interface IPROS {
   callReturnProducts: any;
+  loading: boolean;
+  locationloading: boolean;
 }
 
 const ReturnProductTable = (props: IPROS) => {
@@ -144,7 +147,21 @@ const ReturnProductTable = (props: IPROS) => {
             </tr>
           </thead>
           <tbody>
-            {productData && productData?.length > 0 ? (
+            {props?.loading || props?.locationloading ? (
+              <tr>
+                <td colSpan={14}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : productData?.length === 0 ? (
+              <tr>
+                <td colSpan={14}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
               productData?.map((product: any) => (
                 <tr key={product.id}>
                   <td>
@@ -189,12 +206,6 @@ const ReturnProductTable = (props: IPROS) => {
                   </td>
                 </tr>
               ))
-            ) : (
-              <tr>
-                <td colSpan={8} style={{ textAlign: 'center' }}>
-                  No records found
-                </td>
-              </tr>
             )}
           </tbody>
         </StyledTable>

package/src/components/order-view/store.ts

@@ -320,7 +320,7 @@ const DepotDeatils = atom<any>(0);
 function useDepotDetails() {
   return useAtom(DepotDeatils);
 }
-const productDetails = atom<any>([]);
+const productDetails = atom<any[]>([]);
 function useProductDetails() {
   return useAtom(productDetails);
 }

package/src/components/order-view/system-event-logs/expanded-content/index.tsx

@@ -8,7 +8,7 @@ import { tableColumns } from '../helper';
 // import { useAxios } from '@bjsdistribution/dms-component-library';
 // import { ApiResponse } from '../../types';
 
-function SystemLogs() {
+function SystemLogs({ loading }: any) {
   const [systemLogs] = useOrderProductSystemLogs();
   // const [, setNotesData] = useEventNotesData();
 
@@ -38,7 +38,11 @@ function SystemLogs() {
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        <DynamicTable columns={tableColumns} data={systemLogs} />
+        <DynamicTable
+          columns={tableColumns}
+          data={systemLogs}
+          loading={loading}
+        />
       </CollapsableForm>
     </Table>
   );

package/src/index.tsx

@@ -70,7 +70,7 @@ function ReturnClient() {
   }, [location.pathname, searchParams]);
 
   //API for action type
-  const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
+  const { data: fetchedStaticData, loading: staticLoading } = useApiHook<
     ApiResponse
   >({
     endpoint: `/orders/getStaticData/all/`,
@@ -110,7 +110,7 @@ function ReturnClient() {
         fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)
       );
     }
-  }, [actionLoading]);
+  }, [staticLoading]);
   useEffect(() => {
     if (fetchedLocationData && fetchedLocationData?.data) {
       setLocationData(fetchedLocationData?.data);
@@ -136,7 +136,10 @@ function ReturnClient() {
             {/* for dev */}
             <Route path="" element={<OrderViewQueryHandler />} />
             <Route path="overview" element={<ReturnAfterTable />} />
-            <Route path="/:id" element={<OrderView />} />
+            <Route
+              path="/:id"
+              element={<OrderView locationloading={locationloading} />}
+            />
             {/* for local */}
             {/* <Route path="/orders/view/return/filter" element={<ReturnTable />} /> */}
             {/* for dev */}