@bjsdistribution/dms-client-return 0.0.74 → 0.0.75

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.74",
+  "version": "0.0.75",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.1.11",
+    "@bjsdistribution/dms-component-library": "0.1.42",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/components/order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn.tsx

@@ -6,13 +6,14 @@ import { optionsForReturnPrint } from '../../../../order-daily-overview/common/f
 
 const options: PrintData[] = optionsForReturnPrint;
 
-const PrintDropDownReturn = ({
-  legacyProductId,
-}: {
+const PrintDropDownReturn = ({}: //url has tobe added here
+
+// legacyProductId,
+{
   legacyProductId: number;
 }) => {
   const downloadFiles = () => {
-    const url = `https://us.toolbox.bjshomedelivery.com/offload/return_label?gsit_products_id=${legacyProductId}`;
+    const url = ``;
     window.open(url, '_blank'); // Opens the URL in a new tab
   };
 

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

@@ -17,6 +17,8 @@ export const optionsMenu = [
   { label: 'Confirm', value: 'confirm-order' },
   { label: 'Hold', value: 'hold-order' },
   { label: 'Cancel', value: 'cancel-order' },
+  {label:  'Un Hold', value: 'unhold-order',
+  },
   // { label: 'Charge Log', value: 'charge-log' },
 ];
 

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

@@ -118,6 +118,7 @@ function OrderView() {
       }
     } else {
       const paths = location.pathname.split('/');
+      console.log(paths[paths.length - 1], 'paths');
       setOrderId(paths[paths.length - 1]);
     }
   }, [location.search, loadingExternal]);
@@ -348,6 +349,8 @@ function OrderView() {
     };
   }, [gsitId]);
 
+  console.log(orderId, 'orderId');
+
   return (
     <MainContainer>
       <GeneralHeader />

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

@@ -19,9 +19,9 @@ function Notes() {
   // const pathname = location.pathname;
   // const orderIdLocaation = pathname.split('/')[1];
 
-  const[recallAuditLog]  = useGlobalStateHitAuditLog()
+  const [recallAuditLog] = useGlobalStateHitAuditLog();
 
-  const [,setAuditLogLoading] = useAuditLogLoadingState()
+  const [, setAuditLogLoading] = useAuditLogLoadingState();
 
   const [, setNotes] = usegetNotes();
   // const [loderStatus] = useCallAPi();
@@ -59,24 +59,32 @@ function Notes() {
     loading: NotesLoading,
     setShouldPerformAction,
   } = useApiHook<{ data: any }>({
-    endpoint: `audit_logs/?module_id=${
-      moduleIds?.parentId
-    }&module_object_id=${orderId}`,
+    endpoint: `audit_logs/?module_id=${moduleIds?.parentId}&module_object_id=${orderId}`,
     method: 'GET',
     performAction: false,
   });
 
   useEffect(() => {
-    if (moduleIds && orderId ) {
-     
+    if (moduleIds && orderId) {
       setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
-      const updatedData = NotesData?.data
-        .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
-        .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
-        .flat()
-        .filter(Boolean);
+      // const updatedData = NotesData?.data
+      // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
+      // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
+      // .flat()
+      // .filter(Boolean);
+
+      const updatedData = NotesData.data
+        .filter(
+          (item: any) =>
+            item['ORDER-NOTE'] || item['ORDER'] || item['ORDER-RETURN']
+        )
+        .map((item: any) => [
+          item['ORDER-NOTE'],
+          item['ORDER'],
+          item['ORDER-RETURN'],
+        ]);
 
       // const orderData = NotesData?.data[0]?.ORDER || [];
       // const orderNotesData = NotesData?.data[1]?.['ORDER-NOTE'] || [];
@@ -87,11 +95,12 @@ function Notes() {
           new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
       );
       setNotes(combinedArray);
-      recallAuditLog ?   setShouldPerformAction(true) : setShouldPerformAction(false)
-     
+      recallAuditLog
+        ? setShouldPerformAction(true)
+        : setShouldPerformAction(false);
     }
-    setAuditLogLoading(NotesLoading)
-  }, [moduleIds,orderId,NotesLoading,recallAuditLog]);
+    setAuditLogLoading(NotesLoading);
+  }, [moduleIds, orderId, NotesLoading, recallAuditLog]);
 
   return (
     <Container>

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

@@ -1,14 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import GenericAuditLogsTable from '../../generic-table/AuditLogs';
-// import CustomScrollBar from '../../../../common/scrollbar';
 
 function AuditLogs() {
   return (
     <Container>
-      {/* <CustomScrollBar> */}
       <GenericAuditLogsTable />
-      {/* </CustomScrollBar> */}
     </Container>
   );
 }

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactEmail.tsx

@@ -1,7 +1,6 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import CopyText from '../../../../../../common/copy/CopyText';
 import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
 
 function ContactEmail() {
@@ -10,11 +9,6 @@ function ContactEmail() {
   const [errors, setErrors] = useAtom(errorAtom);
   const orderRecipient = orderDetails?.order_recipient;
 
-  const showCopyIcon =
-    orderRecipient?.contact_email !== undefined &&
-    orderRecipient?.contact_email !== null &&
-    orderRecipient?.contact_email?.length > 0;
-
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     validateInput(val);
@@ -23,19 +17,17 @@ function ContactEmail() {
         ? { contact_email: val }
         : { ...orderRecipient, contact_email: val }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
   };
 
   const validateInput = (value: string) => {
     const isValid = emailRegex.test(value);
     setErrors(prev => ({
       ...prev,
-      emailError: isValid ? '' : 'Please enter a valid Email Address',
+      emailError: value && !isValid ? 'Please enter a valid Email Address' : '',
     }));
   };
 
@@ -43,7 +35,6 @@ function ContactEmail() {
     <Container>
       <Wrapper>
         <Label label="Email" htmlFor="email-id" />
-        {showCopyIcon && <CopyText text={orderRecipient?.contact_email!} />}
       </Wrapper>
       <Input
         name="email-id"
@@ -51,7 +42,6 @@ function ContactEmail() {
         placeholder="Email"
         value={orderRecipient?.contact_email || ''}
         onChange={onChange}
-        style={{ borderRadius: '25px' }}
       />
       {errors.emailError && <ErrorText>{errors.emailError}</ErrorText>}
     </Container>

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx

@@ -1,24 +1,19 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import CopyText from '../../../../../../common/copy/CopyText';
-import { useOrderDetails } from '../../../../store';
+import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
-// import CallCustomer from './CallCustomer';
 
 // const LANDLINE_REGEX = /^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/;
 
 function ContactHome() {
+  const [errors, setErrors] = useAtom(errorAtom);
+
   // Show call icons only if number is valid
   // show copy icon if there is input value
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const orderRecipient = orderDetails?.order_recipient;
 
-  const showCopyIcon =
-    orderRecipient?.contact_home !== undefined &&
-    orderRecipient?.contact_home !== null &&
-    orderRecipient?.contact_home?.length > 0;
-
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     const updatedOrderRecipient = {
@@ -26,18 +21,42 @@ function ContactHome() {
         ? { contact_home: val }
         : { ...orderRecipient, contact_home: val }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
+
+    if (val) {
+      if (val.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (val.length > 11) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: 'Phone number must not exceed 11 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        homeContactError: '',
+      }));
+    }
   };
+
   return (
     <MainContainer>
       <Wrapper>
         <Label label="Contact Home" htmlFor="contact-home" />
-        {showCopyIcon && <CopyText text={orderRecipient?.contact_home!} />}
+        {/* {showCopyIcon && <CopyText text={orderRecipient?.contact_home!} />} */}
       </Wrapper>
       <InputContainer>
         <CustomInput
@@ -45,11 +64,17 @@ function ContactHome() {
           type="text"
           placeholder="Home Number"
           onKeyDown={handleKeyDown}
+          minLength={10}
+          maxLength={10}
           value={orderRecipient?.contact_home || ''}
           onChange={onChange}
         />
+
         {/* <CallCustomer /> */}
       </InputContainer>
+      {errors.homeContactError && (
+        <ErrorText>{errors.homeContactError}</ErrorText>
+      )}
     </MainContainer>
   );
 }
@@ -62,7 +87,6 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-  border-radius: 25px;
   // @media (max-width: 1024px) {
   //   width: 80%;
   // }
@@ -90,4 +114,9 @@ const MainContainer = styled.div`
   flex: 1;
 `;
 
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
 export default ContactHome;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import styled from 'styled-components';
 import CopyText from '../../../../../../common/copy/CopyText';
 import CallCustomer from './CallCustomer';
-import { useOrderDetails } from '../../../../store';
+import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
 // const MOBILE_REGEX = /^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/;
 
 function ContactMobile() {
+  const [errors, setErrors] = useAtom(errorAtom);
+
   // Show call icons only if number is valid
   // show copy icon if there is input value
   const [orderDetails, setOrderDetails] = useOrderDetails();
@@ -25,12 +27,35 @@ function ContactMobile() {
         ? { contact_mobile: val }
         : { ...orderRecipient, contact_mobile: val }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
+
+    if (val) {
+      if (val.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (val.length > 11) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: 'Phone number must not exceed 11 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        mobileError: '',
+      }));
+    }
   };
 
   return (
@@ -42,6 +67,8 @@ function ContactMobile() {
       <InputContainer>
         <CustomInput
           name="contact-work"
+          minLength={10}
+          maxLength={10}
           type="text"
           placeholder="Mobile Number"
           onKeyDown={handleKeyDown}
@@ -50,6 +77,7 @@ function ContactMobile() {
         />
         <CallCustomer />
       </InputContainer>
+      {errors.mobileError && <ErrorText>{errors.mobileError}</ErrorText>}
     </Container>
   );
 }
@@ -68,7 +96,7 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-  border-radius: 25px;
+
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -86,4 +114,10 @@ const Container = styled.div`
   flex: 1;
 `;
 
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
 export default ContactMobile;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactWork.tsx

@@ -1,22 +1,14 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import CopyText from '../../../../../../common/copy/CopyText';
-import { useOrderDetails } from '../../../../store';
+import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
-// import CallCustomer from './CallCustomer';
 
 function ContactWork() {
-  // Show call icons only if number is valid
-  // show copy icon if there is input value
+  const [errors, setErrors] = useAtom(errorAtom);
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const orderRecipient = orderDetails?.order_recipient;
 
-  const showCopyIcon =
-    orderRecipient?.contact_work !== undefined &&
-    orderRecipient?.contact_work !== null &&
-    orderRecipient?.contact_work?.length > 0;
-
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     const updatedOrderRecipient = {
@@ -24,19 +16,41 @@ function ContactWork() {
         ? { contact_work: val }
         : { ...orderRecipient, contact_work: val }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
+
+    // Validate only if there is a value entered
+    if (val) {
+      if (val.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workCOntanctError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (val.length > 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workCOntanctError: 'Phone number must not exceed 10 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workCOntanctError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        workCOntanctError: '',
+      }));
+    }
   };
 
   return (
     <Container>
       <Wrapper>
         <Label label="Contact Work" htmlFor="contact-work" />
-        {showCopyIcon && <CopyText text={orderRecipient?.contact_work!} />}
       </Wrapper>
       <InputContainer>
         <CustomInput
@@ -46,9 +60,13 @@ function ContactWork() {
           onKeyDown={handleKeyDown}
           value={orderRecipient?.contact_work || ''}
           onChange={onChange}
+          minLength={10}
+          maxLength={10}
         />
-        {/* <CallCustomer /> */}
       </InputContainer>
+      {errors.workCOntanctError && (
+        <ErrorText>{errors.workCOntanctError}</ErrorText>
+      )}
     </Container>
   );
 }
@@ -66,7 +84,6 @@ const Wrapper = styled.div`
 `;
 
 const CustomInput = styled(Input)`
-  border-radius: 25px;
   width: 100%;
 
   &::-webkit-outer-spin-button,
@@ -85,5 +102,10 @@ const Container = styled.div`
   gap: 6px;
   flex: 1;
 `;
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
 
 export default ContactWork;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx

@@ -33,13 +33,14 @@ function Latitude() {
         onKeyDown={handleKeyDown}
         value={orderRecipient?.latitude || ''}
         onChange={onChange}
+        readOnly
       />
     </Container>
   );
 }
 
 const CustomInput = styled(Input)`
-  border-radius: 25px;
+  width: 100%;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -48,6 +49,9 @@ const CustomInput = styled(Input)`
   &:focus-visible {
     outline: none;
   }
+  opacity: 0.8;
+  background-color: #f4f4f4;
+  pointer-events: none;
 `;
 
 const Container = styled.div`

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.tsx

@@ -32,13 +32,14 @@ function Longitude() {
         onKeyDown={handleKeyDown}
         value={orderRecipient?.longitude || ''}
         onChange={onChange}
+        readOnly
       />
     </Container>
   );
 }
 
 const CustomInput = styled(Input)`
-  border-radius: 25px;
+  width: 100%;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -47,6 +48,9 @@ const CustomInput = styled(Input)`
   &:focus-visible {
     outline: none;
   }
+  opacity: 0.8;
+  background-color: #f4f4f4;
+  pointer-events: none;
 `;
 
 const Container = styled.div`

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/What3words.tsx

@@ -27,11 +27,18 @@ function What3words() {
   };
 
   const validateInput = (value: string) => {
-    const isValid = w3wRegex.test(value);
-    setErrors(prev => ({
-      ...prev,
-      w3wError: isValid ? '' : 'Please enter a valid input (word.word.word)',
-    }));
+    if (value.trim()) {
+      const isValid = w3wRegex.test(value);
+      setErrors(prev => ({
+        ...prev,
+        w3wError: isValid ? '' : 'Please enter a valid input (word.word.word)',
+      }));
+    } else {
+      setErrors(prev => ({
+        ...prev,
+        w3wError: '',
+      }));
+    }
   };
 
   return (

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

@@ -8,9 +8,7 @@ import {
   usePrevOrderDetails,
   errorAtom,
   useCustomerInfo,
-  // useLogsCallAPi,
   useUpdateApiCall,
-  // UseNotesLoading,
 } from '../../../store';
 import useUpdateOrder from '../../../hooks/useUpdateOrder';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
@@ -22,18 +20,15 @@ function OrderDetailsFooter() {
   const [, setCustomerInfo] = useCustomerInfo();
   const updateOrder = useUpdateOrder();
   const [errorState] = useAtom(errorAtom);
-  // const [, setLogsCallAPi] = useLogsCallAPi();
   const [, setCallApi] = useUpdateApiCall(); //single detail
-  // const [, setNoteLoadingStore] = UseNotesLoading();
-
   const errorFound = () => {
     const isError =
-      errorState.w3wError.length > 0 ||
-      errorState.emailError.length > 0 ||
-      errorState.homeContactError.length > 0 ||
-      errorState.workCOntanctError.length > 0 ||
-      errorState.mobileError.length > 0 ||
-      errorState.postCodeError.length > 0;
+      errorState?.w3wError.length > 0 ||
+      errorState?.emailError.length > 0 ||
+      errorState?.homeContactError.length > 0 ||
+      errorState?.workCOntanctError.length > 0 ||
+      errorState?.mobileError.length > 0 ||
+      errorState?.postCodeError.length > 0;
 
     return isError;
   };
@@ -116,11 +111,10 @@ const Container = styled.div`
   justify-content: space-between;
   padding: 10px 15px;
   align-items: flex-start;
-  border: 1px solid #edebe8;
+  border-top: 1px solid #edebe8;
   background: #f8fafc;
-  margin: 0px;
+  margin: 0px -15px -15px -15px;
   border-radius: 0px 0px 8px 8px;
-  align-items: center;
 `;
 
 export default OrderDetailsFooter;

package/src/components/order-view/order-details/expanded-content/orders-section/DeliveryDate.tsx

@@ -2,12 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 import { Label } from '@bjsdistribution/dms-component-library';
 import { DatePicker, DatePickerProps } from 'antd';
-import { useOrderDetails, usePrevOrderDetails } from '../../../store';
+import {
+  useOrderDetails,
+  usePrevOrderDetails,
+  useStatusDetails,
+} from '../../../store';
 import dayjs from 'dayjs';
 
 function DeliveryDate() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails] = usePrevOrderDetails();
+  const [orderStatus] = useStatusDetails();
+
+  const routedStatus = orderStatus?.[0]?.routed;
 
   const actionDate = orderDetails?.action_date
     ? new Date(orderDetails?.action_date)
@@ -56,6 +63,7 @@ function DeliveryDate() {
         format="DD/MM/YY"
         style={{ borderRadius: '25px' }}
         allowClear={false}
+        disabled={routedStatus}
       />
     </MainContainer>
   );