@bjsdistribution/dms-client-return 0.1.18-prod → 0.1.19-prod

package/package.json

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

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -61,7 +61,7 @@ function SelectionFilter() {
   });
 
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && clientPortal !== undefined) {
       fetchData();
     }
   }, []);

package/src/components/order-daily-overview/index.tsx

@@ -57,8 +57,9 @@ function ReturnMainTable() {
     pagination: { is_pagination: false },
     showLoader: false,
   });
+
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && clientPortal !== undefined) {
       fetchData();
     }
   }, []);
@@ -85,7 +86,7 @@ function ReturnMainTable() {
     showLoader: false,
   });
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && clientPortal !== undefined) {
       fetchProductStats();
     }
   }, []);

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

@@ -1,25 +1,48 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
+import { useClientPortal } from '../../../../../store';
 
-// 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+)?)$/;
+//import { VALIDATE_UK_IRISH_NUMBER_REGEX } from '../../../helper';
+import CallCustomer from './CallCustomer';
 
 function ContactHome() {
   const [errors, setErrors] = useAtom(errorAtom);
-
-  // Show call icons only if number is valid
-  // show copy icon if there is input value
+  const [isClientPortal] = useClientPortal();
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails] = usePrevOrderDetails();
+  const apiContactHome = prevOrderDetails?.order_recipient?.contact_home;
   const orderRecipient = orderDetails?.order_recipient;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+    let val = e.target.value.replace(/\s+/g, '');
+    console.log(val, 'valuee');
+
+    if (!/^\+?\d*$/.test(val)) return;
+
+    const validPrefixes = ['+44', '44', '0', '+353', '353'];
+
+    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));
+    let prefix = matchedPrefix || '';
+    let numberPart = val.slice(prefix.length);
+
+    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+    if (numberPart.length > digitLimit) return;
+
+    const contactValue = val;
+
     const updatedOrderRecipient = {
       ...(orderRecipient === null
-        ? { contact_home: val }
-        : { ...orderRecipient, contact_home: val }),
+        ? { contact_home: contactValue }
+        : { ...orderRecipient, contact_home: contactValue }),
     };
 
     setOrderDetails(prev => ({
@@ -27,58 +50,100 @@ function ContactHome() {
       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: '',
+    if (!numberPart) {
+      setErrors(prev => ({ ...prev, homeContactError: '' }));
+    } else if (numberPart.length !== digitLimit) {
+      setErrors(prev => ({
+        ...prev,
+        homeContactError: `Number must have exactly ${digitLimit} digits after the prefix.`,
       }));
+    } else {
+      setErrors(prev => ({ ...prev, homeContactError: '' }));
     }
   };
 
   return (
-    <MainContainer>
+    <Container>
       <Wrapper>
         <Label label="Contact Home" htmlFor="contact-home" />
-        {/* {showCopyIcon && <CopyText text={orderRecipient?.contact_home!} />} */}
       </Wrapper>
       <InputContainer>
         <CustomInput
           name="contact-home"
+          // maxLength={12}
           type="text"
           placeholder="Home Number"
           onKeyDown={handleKeyDown}
-          minLength={10}
-          maxLength={10}
           value={orderRecipient?.contact_home || ''}
           onChange={onChange}
+          disabled={isClientPortal}
         />
+        {/* 
+        <CallCustomer /> */}
+        {apiContactHome &&
+          (() => {
+            const rawNumber = apiContactHome.replace(/\s+/g, '');
+
+            let formattedNumber = rawNumber.replace(/\D/g, ''); // digits only
+            let prefix = '';
+            let numberPart = '';
+
+            if (rawNumber.startsWith('+44')) {
+              prefix = '+44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('44')) {
+              prefix = '44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('0')) {
+              prefix = '0';
+              numberPart = formattedNumber.slice(1);
+            } else if (rawNumber.startsWith('+353')) {
+              prefix = '+353';
+              numberPart = formattedNumber.slice(3);
+            } else if (rawNumber.startsWith('353')) {
+              prefix = '353';
+              numberPart = formattedNumber.slice(3);
+            } else {
+              numberPart = formattedNumber;
+            }
+
+            // Set digit limit based on prefix
+            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+            if (numberPart.length !== digitLimit) return null;
+
+            let hrefPrefix = '';
 
-        {/* <CallCustomer /> */}
+            if (prefix === '0' || prefix === '44' || prefix === '+44') {
+              hrefPrefix = '+44';
+            } else if (prefix === '353' || prefix === '+353') {
+              hrefPrefix = '+353';
+            } else {
+              hrefPrefix = '+44';
+            }
+
+            const finalHref = `tel:${hrefPrefix}${numberPart}`;
+
+            return (
+              <a href={finalHref} style={{ cursor: 'pointer' }}>
+                <CallCustomer />
+              </a>
+            );
+          })()}
       </InputContainer>
       {errors.homeContactError && (
         <ErrorText>{errors.homeContactError}</ErrorText>
       )}
-    </MainContainer>
+    </Container>
   );
 }
 
+const InputContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -87,9 +152,6 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-  // @media (max-width: 1024px) {
-  //   width: 80%;
-  // }
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -101,13 +163,7 @@ const CustomInput = styled(Input)`
   }
 `;
 
-const InputContainer = styled.div`
-  display: flex;
-  gap: 7px;
-  align-items: center;
-`;
-
-const MainContainer = styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -119,4 +175,5 @@ const ErrorText = styled.span`
   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,16 +3,21 @@ import React from 'react';
 import styled from 'styled-components';
 import CopyText from '../../../../../../common/copy/CopyText';
 import CallCustomer from './CallCustomer';
-import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
-// const MOBILE_REGEX = /^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/;
+import { useClientPortal } from '../../../../../store';
 
 function ContactMobile() {
   const [errors, setErrors] = useAtom(errorAtom);
-
-  // Show call icons only if number is valid
-  // show copy icon if there is input value
+  const [isClientPortal] = useClientPortal();
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails] = usePrevOrderDetails();
+  const apiContactMobile = prevOrderDetails?.order_recipient?.contact_mobile;
   const orderRecipient = orderDetails?.order_recipient;
 
   const showCopyIcon =
@@ -21,11 +26,26 @@ function ContactMobile() {
     orderRecipient?.contact_mobile?.length > 0;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+    let val = e.target.value.replace(/\s+/g, '');
+
+    if (!/^\+?\d*$/.test(val)) return;
+
+    const validPrefixes = ['+44', '44', '0', '+353', '353'];
+
+    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));
+    let prefix = matchedPrefix || '';
+    let numberPart = val.slice(prefix.length);
+
+    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+    if (numberPart.length > digitLimit) return;
+
+    const contactValue = val;
+
     const updatedOrderRecipient = {
       ...(orderRecipient === null
-        ? { contact_mobile: val }
-        : { ...orderRecipient, contact_mobile: val }),
+        ? { contact_mobile: contactValue }
+        : { ...orderRecipient, contact_mobile: contactValue }),
     };
 
     setOrderDetails(prev => ({
@@ -33,50 +53,89 @@ function ContactMobile() {
       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: '',
+    // Validation errors
+    if (!numberPart) {
+      setErrors(prev => ({ ...prev, mobileError: '' }));
+    } else if (numberPart.length !== digitLimit) {
+      setErrors(prev => ({
+        ...prev,
+        mobileError: `Number must have exactly ${digitLimit} digits after the prefix.`,
       }));
+    } else {
+      setErrors(prev => ({ ...prev, mobileError: '' }));
     }
   };
 
   return (
     <Container>
       <Wrapper>
-        <Label label="Contact Mobile" htmlFor="contact-work" />
+        <Label label="Contact Mobile" htmlFor="contact-mobile" />
         {showCopyIcon && <CopyText text={orderRecipient?.contact_mobile!} />}
       </Wrapper>
       <InputContainer>
         <CustomInput
-          name="contact-work"
-          minLength={10}
-          maxLength={10}
+          name="contact-mobile"
+          // maxLength={12}
           type="text"
           placeholder="Mobile Number"
           onKeyDown={handleKeyDown}
           value={orderRecipient?.contact_mobile || ''}
           onChange={onChange}
+          disabled={isClientPortal}
         />
-        <CallCustomer />
+
+        {apiContactMobile &&
+          (() => {
+            const rawNumber = apiContactMobile.replace(/\s+/g, '');
+
+            let formattedNumber = rawNumber.replace(/\D/g, '');
+            let prefix = '';
+            let numberPart = '';
+
+            if (rawNumber.startsWith('+44')) {
+              prefix = '+44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('44')) {
+              prefix = '44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('0')) {
+              prefix = '0';
+              numberPart = formattedNumber.slice(1);
+            } else if (rawNumber.startsWith('+353')) {
+              prefix = '+353';
+              numberPart = formattedNumber.slice(3);
+            } else if (rawNumber.startsWith('353')) {
+              prefix = '353';
+              numberPart = formattedNumber.slice(3);
+            } else {
+              numberPart = formattedNumber;
+            }
+
+            // Set digit limit based on prefix
+            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+            if (numberPart.length !== digitLimit) return null;
+
+            let hrefPrefix = '';
+
+            if (prefix === '0' || prefix === '44' || prefix === '+44') {
+              hrefPrefix = '+44';
+            } else if (prefix === '353' || prefix === '+353') {
+              hrefPrefix = '+353';
+            } else {
+              hrefPrefix = '+44';
+            }
+
+            const finalHref = `tel:${hrefPrefix}${numberPart}`;
+
+            return (
+              <a href={finalHref} style={{ cursor: 'pointer' }}>
+                <CallCustomer />
+              </a>
+            );
+          })()}
       </InputContainer>
+
       {errors.mobileError && <ErrorText>{errors.mobileError}</ErrorText>}
     </Container>
   );

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

@@ -1,52 +1,59 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
+import CallCustomer from './CallCustomer';
 
 function ContactWork() {
   const [errors, setErrors] = useAtom(errorAtom);
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const orderRecipient = orderDetails?.order_recipient;
-
+  const [prevOrderDetails] = usePrevOrderDetails();
+  const apiContactWork = prevOrderDetails?.order_recipient?.contact_work;
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+    let val = e.target.value.replace(/\s+/g, '');
+
+    if (!/^\+?\d*$/.test(val)) return;
+
+    const validPrefixes = ['+44', '44', '0', '+353', '353'];
+
+    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));
+    let prefix = matchedPrefix || '';
+    let numberPart = val.slice(prefix.length);
+
+    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+    if (numberPart.length > digitLimit) return;
+
+    const contactValue = val;
+
     const updatedOrderRecipient = {
       ...(orderRecipient === null
-        ? { contact_work: val }
-        : { ...orderRecipient, contact_work: val }),
+        ? { contact_work: contactValue }
+        : { ...orderRecipient, contact_work: contactValue }),
     };
+
     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: '',
+    if (!numberPart) {
+      setErrors(prev => ({ ...prev, workCOntanctError: '' }));
+    } else if (numberPart.length !== digitLimit) {
+      setErrors(prev => ({
+        ...prev,
+        workCOntanctError: `Number must have exactly ${digitLimit} digits after the prefix.`,
       }));
+    } else {
+      setErrors(prev => ({ ...prev, workCOntanctError: '' }));
     }
   };
-
   return (
     <Container>
       <Wrapper>
@@ -60,9 +67,59 @@ function ContactWork() {
           onKeyDown={handleKeyDown}
           value={orderRecipient?.contact_work || ''}
           onChange={onChange}
-          minLength={10}
-          maxLength={10}
+          // minLength={10}
+          // maxLength={10}
         />
+        {apiContactWork &&
+          (() => {
+            const rawNumber = apiContactWork.replace(/\s+/g, '');
+
+            let formattedNumber = rawNumber.replace(/\D/g, '');
+            let prefix = '';
+            let numberPart = '';
+
+            if (rawNumber.startsWith('+44')) {
+              prefix = '+44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('44')) {
+              prefix = '44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('0')) {
+              prefix = '0';
+              numberPart = formattedNumber.slice(1);
+            } else if (rawNumber.startsWith('+353')) {
+              prefix = '+353';
+              numberPart = formattedNumber.slice(3);
+            } else if (rawNumber.startsWith('353')) {
+              prefix = '353';
+              numberPart = formattedNumber.slice(3);
+            } else {
+              numberPart = formattedNumber;
+            }
+
+            // Set digit limit based on prefix
+            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+            if (numberPart.length !== digitLimit) return null;
+
+            let hrefPrefix = '';
+
+            if (prefix === '0' || prefix === '44' || prefix === '+44') {
+              hrefPrefix = '+44';
+            } else if (prefix === '353' || prefix === '+353') {
+              hrefPrefix = '+353';
+            } else {
+              hrefPrefix = '+44';
+            }
+
+            const finalHref = `tel:${hrefPrefix}${numberPart}`;
+
+            return (
+              <a href={finalHref} style={{ cursor: 'pointer' }}>
+                <CallCustomer />
+              </a>
+            );
+          })()}
       </InputContainer>
       {errors.workCOntanctError && (
         <ErrorText>{errors.workCOntanctError}</ErrorText>

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

@@ -145,6 +145,18 @@ export const getCookie = (name: string): string | null => {
 };
 
 export const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  // Allow common shortcuts like Ctrl+V, Ctrl+C, Ctrl+A, etc.
+  if (e.ctrlKey || e.metaKey) {
+    if (
+      e.key.toLowerCase() === 'v' || // Paste
+      e.key.toLowerCase() === 'c' || // Copy
+      e.key.toLowerCase() === 'x' || // Cut
+      e.key.toLowerCase() === 'a' // Select All
+    ) {
+      return;
+    }
+  }
+
   // Allowed keys: numbers (0-9), '.', '-', '+'
   const allowedKeys = [
     '0',

package/src/components/order-view/view-reminder/ViewReminder.tsx

@@ -30,8 +30,6 @@ import { useReminderData } from '../../store';
 
 export interface IProps {
   callReminderApi: any;
-  callReminderForCount?: any;
-  callReminderTableApi?: any;
 }
 
 const ViewReminderModal = (props: IProps) => {

package/src/components/store.ts

@@ -263,7 +263,7 @@ export function useNewReturnOrderData() {
   return useAtom(newReturnOrderData);
 }
 
-const isClientPortalAtom = atom<boolean>(false);
+const isClientPortalAtom = atom<boolean | undefined>(undefined);
 function useClientPortal() {
   return useAtom(isClientPortalAtom);
 }