@bjsdistribution/dms-client-return 0.0.54 → 0.0.56

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

@@ -1,15 +1,10 @@
 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 SystemLogs from './system-event-logs/expanded-content';
 import GeneralHeader from './general-information';
 import ProductsInfo from './products-info';
-// import { OrderViewType } from '../types';
-// import Modals from './modals';
 import OrderActions from './order-actions';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 
@@ -30,15 +25,13 @@ import {
   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 { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
 import useSystemLogs from './hooks/useGetSystemLogs';
 import { notification } from 'antd';
+import { useAssignData } from '../store';
 import DetailsFilters from './details-filters/DetailsFilters';
 
 interface ApiResponse {
@@ -56,11 +49,6 @@ function OrderView() {
   });
   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;
-  };
-
   // For API Call
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
@@ -69,10 +57,8 @@ function OrderView() {
   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();
@@ -81,6 +67,61 @@ function OrderView() {
   const [, setRouteId] = useRouteId();
   const [liveRecalling] = useLiveRecalling();
   const systemLogsData = useSystemLogs();
+  const [, setAssignData] = useAssignData();
+
+  // query param
+  const location = useLocation();
+  const [filters, setFilters] = useState<
+    Array<{ field: string; op: string; value: string | null }>
+  >([]);
+
+  // for third party apps
+  const {
+    data: fetchedDataExternal,
+    loading: loadingExternal,
+    setShouldPerformAction: setShouldPerformExternal,
+  } = useApiHook<{
+    data: any[];
+  }>({
+    endpoint: `orders/`,
+    method: 'GET',
+    filters: filters,
+    performAction: false,
+  });
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    if (searchParams?.toString()) {
+      const dynamicFilters: Array<{
+        field: string;
+        op: string;
+        value: string | null;
+      }> = [];
+      searchParams?.forEach((value, key) => {
+        if (key === 'order') {
+          dynamicFilters.push({
+            field: 'gsit_order_id',
+            op: '=',
+            value: value,
+          });
+        } else {
+          dynamicFilters.push({
+            field: key,
+            op: '=',
+            value: value,
+          });
+        }
+      });
+      setFilters(dynamicFilters);
+      if (filters) {
+        setShouldPerformExternal(true);
+        setOrderId(fetchedDataExternal?.data[0]?.id);
+      }
+    } else {
+      const paths = location.pathname.split('/');
+      setOrderId(paths[paths.length - 1]);
+    }
+  }, [location.search, loadingExternal]);
 
   const {
     data: fetchedData,
@@ -94,6 +135,13 @@ function OrderView() {
     performAction: false,
   });
 
+  useEffect(() => {
+    if (orderId) {
+      orderUpdate(true);
+      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
+    }
+  }, [orderId, liveRecalling]);
+
   const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -120,36 +168,17 @@ function OrderView() {
     method: 'GET',
     filters: [{ field: 'visibility', op: '=', value: true }],
   });
-  useEffect(() => {
-    if (orderId) {
-      orderUpdate(true);
-      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
-    }
-  }, [orderId, liveRecalling]);
-
-  useEffect(() => {
-    if (apiCalling) {
-      orderUpdate(true);
-    } else {
-      orderUpdate(false);
-    }
-  }, [apiCalling]);
-
-  useEffect(() => {
-    if (paths.length > 1) {
-      setOrderId(paths[2]);
-    }
-    // for local
-    // if (paths.length >= 0) {
-    //   setOrderId(paths[1]);
-    // }
-  }, [paths]);
 
   useEffect(() => {
     setLoading(staticDataLoading);
     if (fetchedStaticData && fetchedStaticData.data) {
       const result = fetchedStaticData?.data;
       setOrderStaticData(result[0]);
+      setAssignData(
+        fetchedStaticData?.data?.flatMap(
+          (i: any) => i?.resource_visibility_type
+        )
+      );
     }
   }, [staticDataLoading]);
 
@@ -184,7 +213,7 @@ function OrderView() {
       }
     }
     return () => {
-      setOrderId(null);
+      // setOrderId(null);
     };
   }, [statusDataLoading, fetchedStatusData]);
 
@@ -205,7 +234,7 @@ function OrderView() {
       }
     }
     return () => {
-      setOrderId(null);
+      // setOrderId(null);
     };
   }, [depotDataLoading]);
 
@@ -232,7 +261,7 @@ function OrderView() {
       setOrderResources(fetchedResourcesData);
     }
     return () => {
-      setOrderId(null);
+      // setOrderId(null);
     };
   }, [fetchedResourcesData, orderResources, setOrderResources]);
 
@@ -259,18 +288,10 @@ function OrderView() {
       setOrderToolbox(fetchedToolboxData);
     }
     return () => {
-      setOrderId(undefined);
+      // setOrderId(undefined);
     };
   }, [fetchedToolboxData, orderToolbox, setOrderToolbox]);
 
-  useEffect(() => {
-    if (GsitCUstomerId?.id) {
-      shouldFetch(true);
-    } else {
-      shouldFetch(false);
-    }
-  }, [GsitCUstomerId]);
-
   useEffect(() => {
     return () => {
       setGsitCUstomerId((prev: any) => ({ ...prev, id: undefined }));
@@ -289,6 +310,14 @@ function OrderView() {
     performAction: false,
   });
 
+  useEffect(() => {
+    if (GsitCUstomerId?.id) {
+      shouldFetch(true);
+    } else {
+      shouldFetch(false);
+    }
+  }, [GsitCUstomerId]);
+
   useEffect(() => {
     if (fetchedLocationData && fetchedLocationData?.data) {
       const locationOptions = fetchedLocationData?.data?.map((item: any) => {
@@ -320,10 +349,8 @@ function OrderView() {
 
   return (
     <MainContainer>
-      {/* <Loader /> */}
       <GeneralHeader />
       <DetailsFilters />
-      {/* <Notification /> */}
       <OrderDetails />
       <ProductsInfo />
       <SplitLayout>
@@ -331,9 +358,6 @@ function OrderView() {
           <Notes />
         </NotesContainer>
         <TablesContainer>
-          {/* call logs */}
-          {/* <Order /> */}
-          {/* <Toolbox /> */}
           <SystemLogs />
         </TablesContainer>
       </SplitLayout>
@@ -347,8 +371,6 @@ const MainContainer = styled.div`
   flex-direction: column;
   gap: 10px;
   padding-bottom: 30px;
-  border-radius: 25px;
-  border: 1px solid #e3e3e3;
 `;
 
 const SplitLayout = styled.div`

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -114,7 +114,7 @@ const ModalManager = () => {
       // navigate('/order-return');
 
       // for dev
-      navigate('/order/return/view');
+      navigate('/orders/view/return');
     }
   }, [postLoading]);
 

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../types';
-import { useOrderDetails, useProductDetails } from '../../store';
+import { useOrderDetails, useOrderId, useProductDetails } from '../../store';
 import { Select } from 'antd';
 import { useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
@@ -19,6 +19,7 @@ const NewReturnDropdown = () => {
   const [, setPayload] = useAtom(payloadAtom);
   const [productData] = useProductDetails();
   const [idProduct, setId] = useState<any>();
+  const [orderId] = useOrderId();
 
   const id = orderData?.customer_id;
 
@@ -32,6 +33,7 @@ const NewReturnDropdown = () => {
     { field: 'customer_id', op: '=', value: id },
     { field: 'is_deleted', op: '=', value: 0 },
     { field: 'status', op: '!=', value: 'SD' },
+    { field: 'id', op: '!=', value: orderId },
   ];
 
   if (idProduct?.length > 0 && idProduct[0]) {

package/src/components/order-view/order-actions/actions/change-customer-account/ChangeCustomerAccModal.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { AntSelect } from '@bjsdistribution/dms-component-library';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import { ContentContainer, Label, Row, SplitLayout } from '../modalstyle';
-import { OptionsMenu } from '../../../fakedata';
 import { useCurrentAction } from '../../../store';
 import { notification } from 'antd';
+import { optionsMenu } from '../../../fakedata';
 
 function ChangeCustomerAccModal() {
   const [, setCurrentAction] = useCurrentAction();
@@ -34,7 +34,7 @@ function ChangeCustomerAccModal() {
           <Row>
             <Label>New Customer</Label>
             <AntSelect
-              options={OptionsMenu}
+              options={optionsMenu}
               placeholder="Select Customer"
               onChange={handleSelectChange}
               disabled={false}
@@ -48,7 +48,7 @@ function ChangeCustomerAccModal() {
           <Row>
             <Label>New Trading Name</Label>
             <AntSelect
-              options={OptionsMenu}
+              options={optionsMenu}
               placeholder="Select Trading Name"
               onChange={handleSelectChange}
               disabled={false}

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -118,7 +118,9 @@ function NotesTable() {
                       )}
                     </div>
                   </td>
-                  <td>{order?.description}</td>
+                  <td
+                    dangerouslySetInnerHTML={{ __html: order?.description }}
+                  ></td>
                 </tr>
               ))
             )}

package/src/components/order-view/order-actions/actions/unhold-order/UnholdOrder.tsx

@@ -1,19 +1,84 @@
 import {
   CancelAndCompleteAction,
   CancelationModal,
+  useApiHook,
 } from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useCurrentAction, useIsOnHoldOrder } from '../../../store';
+import {
+  useCurrentAction,
+  useOrderDetails,
+  useOrderId,
+  usePrevOrderDetails,
+} from '../../../store';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
 
 const UnholdOrder = () => {
+  const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/unhold/?unhold_reason="unhold"`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
 
-  const [, setOnHoldOrder] = useIsOnHoldOrder();
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData?.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+      setCurrentAction(undefined);
+    }
+    if (
+      (fetchedData && fetchedData?.data === null) ||
+      fetchedData?.data?.length === 0
+    ) {
+      setCurrentAction(undefined);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        setShouldPerformAction(true);
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response]);
 
   const saveButton = () => {
-    setOnHoldOrder(false);
-    setCurrentAction(undefined);
+    if (orderId) {
+      setPerformAction(true);
+    }
   };
 
   const closeModal = () => {
@@ -21,8 +86,8 @@ const UnholdOrder = () => {
   };
   return (
     <CancelationModal
-      title="Un-hold Order"
-      description="Are you sure, you want to Un-Hold the Order?"
+      title="Unhold Order"
+      description="Are you sure, you want to UnHold the Order?"
       actions={
         <CustomCancelAndCompleteAction
           cancelLabel="Cancel"

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

@@ -40,7 +40,7 @@ const ReturnProductTable = () => {
     if (isresponse && isresponse.data) {
       notification.success({
         message: 'Success',
-        description: 'An error has occurred. Please try again later.',
+        description: 'Successfully Delete Order Product.',
       });
       handleRemoveRow();
       setSelectedRowId(null);
@@ -63,7 +63,7 @@ const ReturnProductTable = () => {
     if (selectAll) {
       setSelectedProducts([]);
     } else {
-      const allProductIds = productData.map((product: any) => product.id);
+      const allProductIds = productData?.map((product: any) => product.id);
       setSelectedProducts(allProductIds);
     }
     setSelectAll(!selectAll);
@@ -93,6 +93,8 @@ const ReturnProductTable = () => {
     return matchedReason ? matchedReason.label : 'N/A';
   };
 
+  const disableCheckbox = productData?.length == 0;
+
   return (
     <div>
       {loading && <Loader title="Deleting" />}
@@ -101,7 +103,11 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailproductsCheckbox">
-                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                <Checkbox
+                  disabled={disableCheckbox}
+                  checked={selectAll}
+                  onChange={handleSelectAll}
+                />
               </th>
               <th>Location</th>
               <th>Sender</th>

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

@@ -442,6 +442,13 @@ const apiCalling = atom<boolean>(false);
 export function useApiCalling() {
   return useAtom(apiCalling);
 }
+
+const globalStateHitAuditLog = atom<boolean>(false);
+export function useGlobalStateHitAuditLog() {
+  return useAtom(globalStateHitAuditLog);
+}
+
+
 const liveRecalling = atom<boolean>(false);
 
 //re api call of live status

package/src/index.tsx

@@ -21,7 +21,6 @@ import {
 import { ApiResponse } from './components/types';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { useLocationOptions } from './components/order-view/store';
-
 function ReturnClient() {
   notification.config({
     top: 80,
@@ -37,28 +36,24 @@ function ReturnClient() {
   const [, setSelectedFilterValue] = useSelectedAction();
   const [, setSelectedClient] = useSelectedClient();
   const [searchParams] = useSearchParams();
-
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
     return parts;
   };
   const paths = splitPath(location.pathname);
-
   useEffect(() => {
-    if (paths[paths.length - 1] === 'order/return') {
+    if (paths[paths.length - 1] === 'orders/view/return') {
       setActionTypeOptions([]);
       setLocationOptions([]);
       setSelectedClient(null);
       setSelectedFilterValue(null);
     }
   }, [location.pathname, searchParams]);
-
   // useEffect(() => {
   //   if (selectedClientId) {
   //     navigate(`filter/${selectedClientId}`);
   //   }
   // }, [selectedClientId]);
-
   //API for client data
   const { data: fetchedCustomerData, loading: loading } = useApiHook<
     ApiResponse
@@ -68,7 +63,6 @@ function ReturnClient() {
     //@ts-ignore
     pagination: { page: 1, per_page: 50 },
   });
-
   //API for action type
   const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
     ApiResponse
@@ -76,7 +70,6 @@ function ReturnClient() {
     endpoint: `/orders/getStaticData/all/`,
     method: 'GET',
   });
-
   //API for return locations
   const { data: fetchedLocationData, loading: locationloading } = useApiHook<
     ApiResponse
@@ -86,13 +79,11 @@ function ReturnClient() {
     //@ts-ignore
     pagination: { is_pagination: false },
   });
-
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
       setCustomers(fetchedCustomerData?.data);
     }
   }, [loading]);
-
   useEffect(() => {
     if (fetchedStaticData && fetchedStaticData?.data) {
       setActionType(
@@ -108,28 +99,22 @@ function ReturnClient() {
       );
     }
   }, [actionLoading]);
-
   useEffect(() => {
     if (fetchedLocationData && fetchedLocationData?.data) {
       setLocationData(fetchedLocationData?.data);
     }
   }, [locationloading]);
-
   return (
     <>
       <RouterHeader />
       <Suspense fallback={<LoadingMessage />}>
         <Routes>
           {/* for local */}
-          {/* <Route path="order/return" element={<ReturnMainTable />} /> */}
-
           {/* for dev */}
           <Route path="" element={<ReturnMainTable />} />
-
-          <Route path="view" element={<ReturnAfterTable />} />
-          <Route path="view/:id" element={<OrderView />} />
+          <Route path="overview" element={<ReturnAfterTable />} />
+          <Route path="/:id" element={<OrderView />} />
           <Route path="filter" element={<ReturnTable />} />
-
           {/* <Route
           path=""
           element={
@@ -145,5 +130,4 @@ function ReturnClient() {
     </>
   );
 }
-
-export default ReturnClient;
+export default ReturnClient;

package/dist/components/order-view/general-information/dropdowns/Options.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function Options(): React.JSX.Element;
-export default Options;

package/src/components/order-view/general-information/dropdowns/Options.tsx

@@ -1,68 +0,0 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { OptionsMenu } from '../../fakedata';
-import { useCurrentAction, useIsOnHoldOrder } from '../../store';
-
-function Options() {
-  const [, setCurrentAction] = useCurrentAction();
-  const [hold] = useIsOnHoldOrder();
-
-  const handleSelectChange = (selectedOption: any) => {
-    setCurrentAction(selectedOption.value);
-  };
-
-  const filteredOptions = OptionsMenu.filter(option => {
-    if (hold) {
-      return option.value !== 'hold-order';
-    } else {
-      return option.value !== 'unhold-order';
-    }
-  });
-
-  return (
-    <Option>
-      <SelectDropdown
-        placeholder="OPTIONS"
-        inputId="bjsmenu"
-        options={filteredOptions}
-        onChange={handleSelectChange}
-        isSearchable={false}
-        styles={{
-          ...dropdownStyles,
-          ...filterDropdownStyles,
-          container: styles => ({
-            ...styles,
-            cursor: 'pointer',
-          }),
-          menu: styles => ({
-            ...styles,
-            top: '113%',
-            borderRadius: '5px',
-            width: 'max-content',
-            cursor: 'pointer',
-          }),
-          control: styles => ({
-            ...styles,
-            width: '105px',
-            boxShadow: 'none',
-            borderColor: 'transparent',
-            cursor: 'pointer',
-            '&:hover': {
-              boxShadow: 'none',
-              borderColor: 'transparent',
-            },
-          }),
-        }}
-        value="OPTIONS"
-      />
-    </Option>
-  );
-}
-const Option = styled.div``;
-
-export default Options;