@bjsdistribution/dms-client-return 0.0.24 → 0.0.26

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.24",
+  "version": "0.0.26",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -7,6 +7,7 @@ import {
   useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
+  usePostLoading,
   useReturnPayload,
   useSelectAll,
   useSelectedOrders,
@@ -26,6 +27,7 @@ import { filtersReducerAtom } from '../../header-filters/filterStore';
 import { displayValueOrNA } from '../../shared/utlis';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { format } from 'date-fns';
+import Loader from '../../header/loader/Loader';
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
 
@@ -34,6 +36,7 @@ const ReturnOrderTable = () => {
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const [returnData, setReturnData] = useReturnData();
   const [load, setLoading] = useLoading();
+  const [postLoading] = usePostLoading();
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
@@ -256,6 +259,7 @@ const ReturnOrderTable = () => {
 
   return (
     <>
+      {postLoading && <Loader />}
       <StyledTableWrapper className="fortables">
         <StyledTable>
           <thead>

package/src/components/order-daily-overview/shared/utlis.ts

@@ -69,7 +69,9 @@ export const formatDate = (date: any) => {
   // const minutes = padZero(date.getMinutes());
   // const seconds = padZero(date.getSeconds());
 
-  return `${year}-${month}-${day}`;
+  return `
+  ${day}/${month}/${year}
+  `;
 };
 
 export const displayValueOrNA = (value: any) => {

package/src/components/order-view/hooks/useGetSystemLogs.tsx

@@ -18,8 +18,7 @@ function useSystemLogs() {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${ssoToken}`,
         'x-pagination': JSON.stringify({
-          page: 1,
-          per_page: 100,
+          is_pagination: false,
         }),
         'x-filters': JSON.stringify([
           {

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

@@ -136,13 +136,13 @@ function OrderView() {
   }, [apiCalling]);
 
   useEffect(() => {
-    // if (paths.length > 1) {
-    //   setOrderId(paths[2]);
-    // }
-    // for local
-    if (paths.length >= 0) {
-      setOrderId(paths[1]);
+    if (paths.length > 1) {
+      setOrderId(paths[2]);
     }
+    // for local
+    // if (paths.length >= 0) {
+    //   setOrderId(paths[1]);
+    // }
   }, [paths]);
 
   useEffect(() => {

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

@@ -4,17 +4,14 @@ import styled from 'styled-components';
 import {
   useFinalPayload,
   useGroupedPayload,
-  usePostLoading,
   useSelectedConfirmLoc,
   useSelectedOrders,
 } from '../../store';
 import { displayValueOrNA } from '../../order-daily-overview/shared/utlis';
-import Loader from '../../order-daily-overview/header/loader/Loader';
 
 const CreateReturnModal = () => {
   const [selectedlocation, setSelectedLocations] = useSelectedConfirmLoc();
   const [selectedReturnOrder] = useSelectedOrders();
-  const [load] = usePostLoading();
   const [groupedPayload] = useGroupedPayload();
   const [, setNew] = useFinalPayload();
 
@@ -55,7 +52,6 @@ const CreateReturnModal = () => {
 
   return (
     <>
-      {load && <Loader />}
       <Wrapper>
         <Alert
           onClose={() => {}}

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

@@ -47,7 +47,7 @@ const ModalManager = () => {
   const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
   const [newGrouped] = useFinalPayload();
-  const [, SetPostLoading] = usePostLoading();
+  const [postLoading, SetPostLoading] = usePostLoading();
   const [, setSelectedReturnOrder] = useSelectedOrders();
   const [forDisabledCheck, setCheck] = useSelectedConfirmLoc();
   const [, setNewPayload] = useNewReturnPayload();
@@ -155,6 +155,7 @@ const ModalManager = () => {
     if (newGrouped?.length > 0) {
       setShouldPerformAction(true);
       setCallForFetch(true);
+      SetPostLoading(confirmLoading);
     }
     dispatch({ type: 'close' });
   };
@@ -218,40 +219,39 @@ const ModalManager = () => {
       setShouldPerformAction(false);
       setSelectAll(false);
       setError(null);
-      navigate('/order-return');
+      navigate('returnclient/order-return');
     }
-  }, [response, apiError]);
-
-  console.log(apiError, 'apiError apiError');
-  console.log(response, 'response response ');
+  }, [response, apiError, postLoading]);
 
   return (
     <>
-      {popupName?.state == 'create-return' && (
-        <AntModal
-          openStatus={popupName?.state == 'create-return' ? true : false}
-          closeModal={() => closeModal()}
-          PopupHeader={{
-            heading: 'CONFIRM RETURN',
-            subHeading: '',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: 'Submit',
-                btnStyle: 'rounded',
-                onClick: handleConfirmReturn,
-                type: 'button',
-                disabled: forDisabledCheck.length === 0,
-              },
-            ],
+      {popupName?.state === 'create-return' && (
+        <>
+          <AntModal
+            openStatus={popupName?.state == 'create-return' ? true : false}
+            closeModal={() => closeModal()}
+            PopupHeader={{
+              heading: 'CONFIRM RETURN',
+              subHeading: '',
+            }}
+            PopupFooter={{
+              btns: [
+                {
+                  name: 'Submit',
+                  btnStyle: 'rounded',
+                  onClick: handleConfirmReturn,
+                  type: 'button',
+                  disabled: forDisabledCheck.length === 0,
+                },
+              ],
 
-            btnAlign: 'justifyEnd',
-          }}
-          BodyComponent={CreateReturnModal}
-          width={800}
-          classNameAdd={'globalPopup'}
-        />
+              btnAlign: 'justifyEnd',
+            }}
+            BodyComponent={CreateReturnModal}
+            width={800}
+            classNameAdd={'globalPopup'}
+          />
+        </>
       )}
       {popupName?.state === 'qclog' && (
         <AntModal

package/src/components/order-view/order-details/expanded-content/services-section/DeliveryPoint.tsx

@@ -26,10 +26,13 @@ function DeliveryPointDropdown() {
     const newData = { ...orderData, order_services_detail: updatedServices };
     setOrderData(newData);
   };
+
+  const isDisabled = true;
+
   return (
     <Container>
       <Label label="Delivery Point" htmlFor="deliveryPointDropdown" />
-      <SelectDropdown
+      <StyledSelectDropdown
         placeholder="Select Delivery Point"
         options={deliveryPointOptions || []}
         inputId="deliveryPointDropdown"
@@ -38,7 +41,8 @@ function DeliveryPointDropdown() {
         )}
         openMenuOnFocus
         onChange={onChange}
-        isDisabled={true}
+        // isDisabled={true}
+        className={isDisabled ? 'disabled' : ''}
       />
     </Container>
   );
@@ -50,5 +54,10 @@ const Container = styled.div`
   gap: 6px;
   flex: 1;
 `;
-
+const StyledSelectDropdown = styled(SelectDropdown)`
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+`;
 export default DeliveryPointDropdown;

package/src/components/order-view/order-details/expanded-content/services-section/OrderServices.tsx

@@ -193,9 +193,10 @@ function OrderServices() {
       setOrderDetails(newData);
     }
   };
+  const isDisabled = true;
 
   return (
-    <Container>
+    <Container disabled={isDisabled}>
       {orderServicesOptions?.map((service: any) => {
         const selected = !!orderServices?.find(
           (s: OrderServiceType) =>
@@ -216,12 +217,22 @@ function OrderServices() {
   );
 }
 
-const Container = styled.div`
+const Container = styled.div<{ disabled: boolean }>`
   display: flex;
   gap: 30px;
   flex: 1;
   @media screen and (max-width: 1170px) {
     flex-wrap: wrap;
+
+    ${({ disabled }) =>
+      disabled &&
+      `
+    pointer-events: none;
+
+    > * {
+    pointer-events: none;
+    }
+  `}
   }
 `;
 

package/src/components/order-view/order-details/expanded-content/services-section/ServiceLevel.tsx

@@ -26,26 +26,40 @@ function ServiceLevel() {
     const newData = { ...orderData, order_services_detail: updatedServices };
     setOrderData(newData);
   };
+
+  const isDisabled = true; // Example value
+
   return (
-    <Container>
+    <Container disabled={isDisabled}>
       <RadioButtonGroup
         selectedValue={serviceLevelId?.toString() || ''}
         heading="Service Level"
         options={serviceLevelOptions || []}
         onChange={radioGroupHandler}
         required={true}
-        isDisabled={true}
+        isDisabled={isDisabled}
       />
     </Container>
   );
 }
 
-const Container = styled.div`
+const Container = styled.div<{ disabled: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
-  /* temporary change will add this in library */
+
+  ${({ disabled }) =>
+    disabled &&
+    `
+    cursor: not-allowed;
+    pointer-events: none;
+
+    > * {
+      cursor: not-allowed;
+    }
+  `}
+
   > fieldset {
     > div {
       > div {

package/src/components/order-view/order-details/expanded-content/services-section/ServiceType.tsx

@@ -21,11 +21,12 @@ function ServiceTypeDropdown() {
     const newData = { ...orderData, order_type_id: event.value };
     setOrderData(newData);
   };
+  const isDisabled = true;
 
   return (
     <Container>
       <Label label="Service Type" htmlFor="serviceTypeDropdown" />
-      <SelectDropdown
+      <StyledSelectDropdown
         placeholder="Select Service Type"
         options={serviceTypeOptions || []}
         value={serviceTypeOptions?.filter((f: any) => f.value === orderTypeId)}
@@ -33,6 +34,7 @@ function ServiceTypeDropdown() {
         openMenuOnFocus
         onChange={onChange}
         isDisabled={true}
+        className={isDisabled ? 'disabled' : ''}
       />
     </Container>
   );
@@ -45,4 +47,11 @@ const Container = styled.div`
   flex: 1;
 `;
 
+const StyledSelectDropdown = styled(SelectDropdown)`
+  &.disabled {
+    cursor: not-allowed !important;
+    opacity: 0.7;
+  }
+`;
+
 export default ServiceTypeDropdown;

package/src/components/order-view/order-details/expanded-content/services-section/TimedService.tsx

@@ -40,10 +40,12 @@ function TimedServiceDropdown() {
     setOrderData(newData);
   };
 
+  const isDisabled = true;
+
   return (
     <Container>
       <Label label="Timed Service" htmlFor="timedServiceDropdown" />
-      <SelectDropdown
+      <StyledSelectDropdown
         placeholder="Select Timed Service"
         options={timedServicesOptions || []}
         value={timedServicesOptions?.filter(
@@ -51,7 +53,8 @@ function TimedServiceDropdown() {
         )}
         inputId="timedServiceDropdown"
         onChange={onChange}
-        isDisabled={true}
+        // isDisabled={isDisabled}
+        className={isDisabled ? 'disabled' : ''}
       />
     </Container>
   );
@@ -64,4 +67,11 @@ const Container = styled.div`
   flex: 1;
 `;
 
+const StyledSelectDropdown = styled(SelectDropdown)`
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+`;
+
 export default TimedServiceDropdown;

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

@@ -66,6 +66,11 @@ const CustomFormSection = styled(FormSection)`
   border-radius: 8px;
   background: #f8fafc;
   box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+  label,
+  input,
+  span {
+    cursor: default !important;
+  }
 `;
 
 export default ServicesSection;

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

@@ -1,109 +1,28 @@
 import { SectionHeader } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-// import ModalManager from '../../modalsPopup/ModalManager';
-// import { countReducerAtom, useProductDetails } from '../../store';
-// import { useAtom } from 'jotai';
 
 function CollapsedContent() {
-  // const [, dispatch] = useAtom(countReducerAtom);
-  // const [productdata] = useProductDetails();
-  // const totalItems = productdata?.length;
-
-  // const totalCube = () => {
-  //   let cubeData = 0;
-  //   for (let i = 0; i < productdata?.length; i++) {
-  //     cubeData += parseFloat(productdata[i].cube);
-  //   }
-  //   return `${cubeData.toFixed(2)}m³`;
-  // };
-
-  // const totalWeight = () => {
-  //   let weightData = 0;
-  //   for (let i = 0; i < productdata?.length; i++) {
-  //     weightData += parseFloat(productdata[i].weight);
-  //   }
-  //   return `${weightData.toFixed(2)} KG`;
-  // };
   return (
     <Container>
       <SectionHeader label="Products" />
-      {/* <Left>
-        <Items>{totalItems} Delivery Items</Items>
-        <Dimensions>
-          {totalWeight()}/ {totalCube()}
-        </Dimensions>
-      </Left>
-      <Right>
-        <ActionContainer onClick={() => dispatch({ type: 'bulkUpdate' })}>
-          <Action>Bulk Update</Action>
-        </ActionContainer>
-        <ActionContainer onClick={() => dispatch({ type: 'addProduct' })}>
-          <Action>ADD NEW PRODUCT(S)</Action>
-        </ActionContainer>
-        <ActionContainer onClick={() => dispatch({ type: 'deleteProduct' })}>
-          <Action>DELETE PRODUCT(S)</Action>
-        </ActionContainer>
-      </Right>
-      <ModalManager /> */}
+      <Dimensions>Products to be Returned</Dimensions>
     </Container>
   );
 }
 
-// const Dimensions = styled.span`
-//   font-family: 'Lato', sans-serif;
-//   font-size: 13px;
-//   font-weight: 500;
-//   line-height: 16px;
-//   color: #8e8a85;
-// `;
-
-// const Right = styled.div`
-//   margin-left: auto;
-//   display: flex;
-//   gap: 10px;
-//   margin-right: 10px;
-// `;
-
-// const Action = styled.span`
-//   color: #3a3630;
-//   font-family: 'Lato', sans-serif;
-//   font-size: 12px;
-//   font-style: normal;
-//   font-weight: 600;
-//   line-height: 20px;
-//   text-transform: uppercase;
-// `;
-
-// const ActionContainer = styled.div`
-//   padding: 5px 10px;
-//   border-radius: 4px;
-//   border: 1px solid #edebe8;
-//   background: #edebe8;
-//   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-//   cursor: pointer;
-// `;
-
-// const Items = styled.span`
-//   font-family: 'Roboto', sans-serif;
-//   font-size: 14px;
-//   font-weight: 500;
-//   line-height: 24px;
-//   color: #8e8a85;
-//   text-transform: capitalize;
-//   color: #aea9a1;
-// `;
-
-// const Left = styled.div`
-//   display: flex;
-//   align-items: center;
-//   gap: 30px;
-// `;
+const Dimensions = styled.span`
+  color: #6a7378;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 171.429% */
+`;
 
 const Container = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   width: 100%;
   gap: 30px;
 `;

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

@@ -8,6 +8,8 @@ import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useSelectedOrders } from '../../../store';
 import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
+import Loader from '../../../order-daily-overview/header/loader/Loader';
+import { notification } from 'antd';
 
 const ReturnProductTable = () => {
   const [selectedInvoices] = useSelectedOrders();
@@ -20,7 +22,11 @@ const ReturnProductTable = () => {
     setSelectedRowId(id);
   }, []);
 
-  const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
+  const {
+    data: isresponse,
+    setShouldPerformAction: setaction,
+    loading,
+  } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `order/order_products/delete/`,
@@ -31,6 +37,13 @@ const ReturnProductTable = () => {
 
   useEffect(() => {
     if (isresponse && isresponse.data) {
+      notification.success({
+        message: 'Success',
+        description:
+          //@ts-ignore
+          isresponse?.message ||
+          'An error has occurred. Please try again later.',
+      });
       handleRemoveRow();
       setSelectedRowId(null);
     }
@@ -71,6 +84,7 @@ const ReturnProductTable = () => {
 
   return (
     <div>
+      {loading && <Loader title="Deleting" />}
       <StyledTableWrapper id="tableScrolling">
         <StyledTable>
           <thead>