@bjsdistribution/dms-client-return 0.1.22-prod → 0.1.23-prod

package/package.json

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

package/src/components/client-portal/DateFilterStore.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { atom } from 'jotai';
 
 interface Filter {
@@ -30,21 +31,37 @@ const overviewFilterReducer = (
       const { startDate, endDate } = action.payload;
 
       const filters: Filter[] = [];
+      if (startDate && !endDate) {
+        const nextDay = dayjs(startDate)
+          .add(1, 'day')
+          .format('YYYY-MM-DD');
 
-      if (startDate) {
         filters.push({
           field: 'created_at',
           op: '>=',
           value: `${startDate}T00:00:00+00:00`,
         });
-      }
-
-      if (endDate) {
         filters.push({
           field: 'created_at',
           op: '<=',
-          value: `${endDate}T23:59:59+00:00`,
+          value: `${nextDay}T00:00:00+00:00`,
         });
+      } else {
+        if (startDate) {
+          filters.push({
+            field: 'created_at',
+            op: '>=',
+            value: `${startDate}T00:00:00+00:00`,
+          });
+        }
+
+        if (endDate) {
+          filters.push({
+            field: 'created_at',
+            op: '<=',
+            value: `${endDate}T23:59:59+00:00`,
+          });
+        }
       }
 
       return {

package/src/components/order-daily-overview/header/route-header/ClientRouterHeader.tsx

@@ -58,7 +58,19 @@ const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
   }, [startDate, endDate]);
 
   const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? null);
+    if (!date) {
+      setStartDate(null);
+      setEndDate(null);
+      dispatch({
+        type: 'SET_CP_DATE_FILTER',
+        payload: {
+          startDate: null,
+          endDate: null,
+        },
+      });
+    } else {
+      setStartDate(date);
+    }
   };
 
   const handleEndDateChange: DatePickerProps['onChange'] = date => {
@@ -99,7 +111,7 @@ const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
                 value={startDate ? dayjs(startDate) : null}
                 onChange={handleStartDateChange}
                 format={'MMMM D, YYYY'}
-                allowClear={false}
+                allowClear
                 disabledDate={current =>
                   !!endDate && current.isAfter(dayjs(endDate), 'day')
                 }

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

@@ -12,6 +12,7 @@ import { atom, useAtom } from 'jotai';
 import {
   useActionTypeOptions,
   useClearState,
+  useClientLoading,
   useClientPortal,
   useCustomerData,
   useReturnPayload,
@@ -50,6 +51,7 @@ function SelectionFilter() {
   const [searchParams] = useSearchParams();
   const [clientPortal] = useClientPortal();
   const navigate = useNavigate();
+  const [clientLoading] = useClientLoading();
   //API for client data
   const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
@@ -59,12 +61,12 @@ function SelectionFilter() {
     //@ts-ignore
     pagination: { is_pagination: false },
   });
-
+  //need to fix
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && !clientLoading) {
       fetchData();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {

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

@@ -6,7 +6,12 @@ import {
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
-import { useClientPortal, useCustomerData, useStickyStatus } from '../store';
+import {
+  useClientLoading,
+  useClientPortal,
+  useCustomerData,
+  useStickyStatus,
+} from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import {
   DocumentTitle,
@@ -37,6 +42,7 @@ function ReturnMainTable() {
   // const [tableName] = useTableName();
   const queryParams = new URLSearchParams(location.search);
   const [clientPortal] = useClientPortal();
+  const [clientLoading] = useClientLoading();
 
   const customerId = queryParams.get('customerId');
 
@@ -59,10 +65,10 @@ function ReturnMainTable() {
   });
 
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && !clientLoading) {
       fetchData();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
@@ -85,11 +91,12 @@ function ReturnMainTable() {
     filters: filters,
     showLoader: false,
   });
+
   useEffect(() => {
-    if (!clientPortal) {
+    if (!clientPortal && !clientLoading) {
       fetchProductStats();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     setLoading(statsDataLoading);

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

@@ -1,32 +1,68 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import OptionsDropDown from './OptionsDropDown';
 import Print from '../../../general-information/dropdowns/Print';
 import BjsMenuDropDown from './MenuDropDown';
-import { useCurrentAction, useOrderDetails } from '../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useCurrentAction,
+  useOrderDetails,
+} from '../../../store';
 // components
 
 function DropDowns() {
   const [orderDetails] = useOrderDetails();
   const [, setCurrentAction] = useCurrentAction();
+  const [errors] = useAtom(errorAtom);
+  const [hasNotifiedMobile, setHasNotifiedMobile] = useState(false);
+  const [hasNotifiedEmail, setHasNotifiedEmail] = useState(false);
 
   const isEmailId = orderDetails?.order_recipient?.contact_email;
-  const isContactNum = orderDetails?.order_recipient?.contact_home;
+  // const isContactNum = orderDetails?.order_recipient?.contact_home;
+  const VALID_UK_MOBILE_REGEX = /^(07\d{8,12}|447\d{7,11})$/;
+  const VALID_IRISH_MOBILE_REGEX = /^(08[35679]\d{7}|3538[35679]\d{7}|\+3538[35679]\d{7})$/;
+
+  const isValidUKMobile = (number: string | null | undefined): boolean =>
+    typeof number === 'string' && VALID_UK_MOBILE_REGEX.test(number);
+  const isValidIrishMobile = (number: string | null | undefined): boolean =>
+    typeof number === 'string' && VALID_IRISH_MOBILE_REGEX.test(number);
+  const isValidMobile = (number: string | null | undefined): boolean =>
+    isValidUKMobile(number) || isValidIrishMobile(number);
+
+  const contactMobile = orderDetails?.order_recipient?.contact_mobile;
+  const contactHome = orderDetails?.order_recipient?.contact_home;
+  const contactWork = orderDetails?.order_recipient?.contact_work;
+
+  const allContacts = [contactMobile, contactHome, contactWork];
+  const hasValidMobile = allContacts.some(isValidMobile);
 
   const actions = [];
 
-  if (isContactNum) {
-    actions?.push({
-      label: 'Send SMS',
-      onClick: () => setCurrentAction('send-sms'),
-    });
+  if (hasValidMobile) {
+    if (errors?.mobileError) {
+      if (!hasNotifiedMobile) {
+        setHasNotifiedMobile(true);
+      }
+    } else {
+      actions.push({
+        label: 'Send SMS',
+        onClick: () => setCurrentAction('send-sms'),
+      });
+    }
   }
 
   if (isEmailId) {
-    actions?.push({
-      label: 'Send Email',
-      onClick: () => setCurrentAction('send-email'),
-    });
+    if (errors?.emailError) {
+      if (!hasNotifiedEmail) {
+        setHasNotifiedEmail(true);
+      }
+    } else {
+      actions.push({
+        label: 'Send Email',
+        onClick: () => setCurrentAction('send-email'),
+      });
+    }
   }
 
   return (

package/src/components/order-view/order-actions/actions/send-sms/SendSmsModal.tsx

@@ -1,31 +1,27 @@
 import React, { useState } from 'react';
 import { useCurrentAction, useOrderDetails, useOrderId } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import { ContentContainer, Label, StyledInput } from '../modalstyle';
-import { TextArea, useAxios } from '@bjsdistribution/dms-component-library';
+import { Label, StyledInput } from '../modalstyle';
+import { useAxios } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../../types';
 import styled from 'styled-components';
-
-const CustomTextArea = styled(TextArea)`
-  width: 700px;
-  height: 140px;
-  resize: none;
-`;
-
-const ErrorText = styled.div`
-  color: red;
-  font-size: 12px;
-  margin-top: 4px;
-`;
+import { notification } from 'antd';
+import TextArea from 'antd/es/input/TextArea';
 
 function SendSmsModal() {
   const [, setCurrentAction] = useCurrentAction();
   const [orderDetails] = useOrderDetails();
   const [orderId] = useOrderId();
-  const initialTo = orderDetails?.order_recipient?.contact_home || '';
+  const VALID_UK_MOBILE_REGEX = /^(07\d{8,12}|447\d{7,11})$/;
   const [toError, setToError] = useState('');
   const [formData, setFormData] = useState({
-    to: initialTo,
+    to: [
+      orderDetails?.order_recipient?.contact_mobile,
+      orderDetails?.order_recipient?.contact_home,
+      orderDetails?.order_recipient?.contact_work,
+    ]
+      .filter(Boolean)
+      .join(', '),
     body: '',
   });
 
@@ -42,54 +38,83 @@ function SendSmsModal() {
     const { name, value } = e.target;
 
     if (name === 'to') {
-      const digitsOnly = value.replace(/\D/g, '');
-      let error = '';
-
-      if (digitsOnly.length < 10) {
-        error = 'Phone number must be exactly 10 digits';
-      } else if (digitsOnly.length > 10) {
-        error = 'Phone number cannot exceed 10 digits';
+      const rawValue = value;
+      const numbers = rawValue.split(',').map(num => num.trim());
+      const invalids = numbers.filter(num => !VALID_UK_MOBILE_REGEX.test(num));
+
+      if (invalids.length === numbers.length) {
+        setToError('Enter at least one valid UK mobile number.');
+      } else {
+        setToError('');
       }
-
-      setToError(error);
-
-      setFormData(prev => ({
-        ...prev,
-        to: digitsOnly.slice(0, 10),
-      }));
+      setFormData(prev => ({ ...prev, to: rawValue }));
     } else {
-      setFormData(prev => ({
-        ...prev,
-        [name]: value,
-      }));
+      setFormData(prev => ({ ...prev, [name]: value }));
     }
   };
 
   const handleSubmit = async () => {
-    const trimmedTo = formData?.to?.trim();
     const trimmedBody = formData?.body?.trim();
+    if (!trimmedBody) return;
 
-    if (trimmedTo.length !== 10) {
-      setToError('Phone number must be exactly 10 digits');
-      return;
-    }
+    const rawContacts = formData.to.split(',').map(num => num.trim());
 
-    const payload = {
-      order_id: +orderId,
-      receiver: trimmedTo,
-      message: trimmedBody,
-      notification_type: 'Send SMS',
-    };
+    const validContacts = rawContacts.filter(num =>
+      VALID_UK_MOBILE_REGEX.test(num)
+    );
 
-    if (!trimmedTo || !trimmedBody) {
+    if (validContacts.length === 0) {
+      notification.warning({
+        message: 'No Valid UK Mobile Numbers',
+        description:
+          'Please provide at least one valid UK mobile number (e.g., 07123...).',
+      });
       return;
     }
 
     try {
-      await callSendSms({ payload: payload });
+      for (const number of validContacts) {
+        const payload = {
+          order_id: +orderId,
+          receiver: number,
+          message: trimmedBody,
+          notification_type: 'Send SMS',
+        };
+
+        const response = (await callSendSms({ payload })) as {
+          code: number | null;
+          error?: string | null;
+          message?: string;
+          [key: string]: any;
+        };
+
+        if (response.code === 200) {
+          notification.success({
+            message: 'SMS Sent',
+            description: `Message sent to ${number}`,
+          });
+        } else {
+          notification.error({
+            message: 'SMS Failed',
+            description: `Failed to send to ${number}: ${response?.error ||
+              'Unknown error'}`,
+          });
+        }
+      }
+
       closeModal();
     } catch (error) {
-      console.error('Error sending SMS:', error);
+      const err = error as any;
+      const errMsg =
+        err?.response?.data?.error ||
+        err?.response?.data?.message ||
+        err?.message ||
+        'An unexpected error occurred.';
+
+      notification.error({
+        message: 'Request Failed',
+        description: errMsg,
+      });
     }
   };
 
@@ -98,7 +123,7 @@ function SendSmsModal() {
   };
 
   const isFormValid =
-    formData?.to.trim()?.length === 10 &&
+    formData?.to.trim()?.length > 0 &&
     !toError &&
     formData?.body.trim().length > 0;
 
@@ -119,21 +144,49 @@ function SendSmsModal() {
           onChange={handleInputChange}
           required
           placeholder="Enter the number"
-          maxLength={10}
         />
         {toError && <ErrorText>{toError}</ErrorText>}
 
         <Label>Body</Label>
-        <CustomTextArea
+        <TextArea
+          style={{ width: '700px', height: '140px', resize: 'none' }}
           name="body"
           value={formData.body}
           onChange={handleInputChange}
           required
           placeholder="Write here..."
+          maxLength={500}
+          count={{
+            show: true,
+            max: 500,
+          }}
         />
       </ContentContainer>
     </OrderActionModal>
   );
 }
 
+export const ContentContainer = styled.div`
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+`;
+
+// const CustomTextArea = styled(TextArea)`
+//   width: 700px;
+//   height: 140px;
+//   resize: none;
+// `;
+
+const ErrorText = styled.div`
+  color: red;
+  font-size: 12px;
+  margin-top: 4px;
+`;
+
 export default SendSmsModal;

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

@@ -12,6 +12,7 @@ import { useClientPortal } from '../../../../../store';
 
 //import { VALIDATE_UK_IRISH_NUMBER_REGEX } from '../../../helper';
 import CallCustomer from './CallCustomer';
+import { Tooltip } from 'antd';
 
 function ContactHome() {
   const [errors, setErrors] = useAtom(errorAtom);
@@ -125,9 +126,11 @@ function ContactHome() {
             const finalHref = `tel:${hrefPrefix}${numberPart}`;
 
             return (
-              <a href={finalHref} style={{ cursor: 'pointer' }}>
-                <CallCustomer />
-              </a>
+              <Tooltip placement="top" title={<span>Zoom</span>}>
+                <a href={finalHref} style={{ cursor: 'pointer' }}>
+                  <CallCustomer />
+                </a>
+              </Tooltip>
             );
           })()}
       </InputContainer>

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

@@ -11,6 +11,7 @@ import {
 } from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
 import { useClientPortal } from '../../../../../store';
+import { Tooltip } from 'antd';
 
 function ContactMobile() {
   const [errors, setErrors] = useAtom(errorAtom);
@@ -129,9 +130,11 @@ function ContactMobile() {
             const finalHref = `tel:${hrefPrefix}${numberPart}`;
 
             return (
-              <a href={finalHref} style={{ cursor: 'pointer' }}>
-                <CallCustomer />
-              </a>
+              <Tooltip placement="top" title={<span>Zoom</span>}>
+                <a href={finalHref} style={{ cursor: 'pointer' }}>
+                  <CallCustomer />
+                </a>
+              </Tooltip>
             );
           })()}
       </InputContainer>

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

@@ -8,11 +8,14 @@ import {
   usePrevOrderDetails,
 } from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
+import { useClientPortal } from '../../../../../store';
+import { Tooltip } from 'antd';
 import CallCustomer from './CallCustomer';
 
 function ContactWork() {
   const [errors, setErrors] = useAtom(errorAtom);
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [isClientPortal] = useClientPortal();
   const orderRecipient = orderDetails?.order_recipient;
   const [prevOrderDetails] = usePrevOrderDetails();
   const apiContactWork = prevOrderDetails?.order_recipient?.contact_work;
@@ -69,6 +72,7 @@ function ContactWork() {
           onChange={onChange}
           // minLength={10}
           // maxLength={10}
+          disabled={isClientPortal}
         />
         {apiContactWork &&
           (() => {
@@ -115,9 +119,11 @@ function ContactWork() {
             const finalHref = `tel:${hrefPrefix}${numberPart}`;
 
             return (
-              <a href={finalHref} style={{ cursor: 'pointer' }}>
-                <CallCustomer />
-              </a>
+              <Tooltip placement="top" title={<span>Zoom</span>}>
+                <a href={finalHref} style={{ cursor: 'pointer' }}>
+                  <CallCustomer />
+                </a>
+              </Tooltip>
             );
           })()}
       </InputContainer>

package/src/components/store.ts

@@ -262,11 +262,17 @@ export function useSelectedData() {
 export function useNewReturnOrderData() {
   return useAtom(newReturnOrderData);
 }
-
+//call
 const isClientPortalAtom = atom<boolean | undefined>(undefined);
 function useClientPortal() {
   return useAtom(isClientPortalAtom);
 }
+
+const isClientLoading = atom<boolean>(true);
+function useClientLoading() {
+  return useAtom(isClientLoading);
+}
+
 const activeCardIdAtom = atom<number>(1);
 export const useActiveCardId = () => {
   return useAtom(activeCardIdAtom);
@@ -306,4 +312,5 @@ export {
   useStartDate,
   useEndDate,
   useSelectedClientAfterOrders,
+  useClientLoading,
 };

package/src/index.tsx

@@ -19,6 +19,7 @@ import {
   useActionType,
   useActionTypeOptions,
   useAssignData,
+  useClientLoading,
   useClientPortal,
   useLocationData,
   useStatusOrderData,
@@ -54,10 +55,11 @@ function ReturnClient() {
   const [, setOrderStaticData] = useOrderStaticData();
   const [clientPortal, setClientPortal] = useClientPortal();
   const location = useLocation();
-  const userType = JSON.parse(localStorage.getItem('user_type')!);
-
+  const userType = JSON.parse(localStorage.getItem('user_type') ?? 'null');
+  const [, setLoading] = useClientLoading();
   useEffect(() => {
-    setClientPortal(userType?.is_customer || false); // change it to false bydefault
+    setClientPortal(userType?.is_customer ? true : false); // change it to false bydefault
+    setLoading(false);
   }, []);
 
   const splitPath = (str: any) => {