@bjsdistribution/dms-client-return 0.1.21-dev → 0.1.21-prod

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/order-details/expanded-content/footer/index.tsx

@@ -9,13 +9,12 @@ import {
   errorAtom,
   useCustomerInfo,
   useGlobalStateHitAuditLog,
-  useOrderStaticData,
   useGlobalStateHitOrder,
   useLiveRecalling,
 } from '../../../store';
 // import useUpdateOrder from '../../../hooks/useUpdateOrder';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
-import { ApiResponse, OrderServiceType } from '../../../types';
+import { ApiResponse, OrdersType } from '../../../types';
 import { notification } from 'antd';
 import { useClientPortal } from '../../../../store';
 
@@ -26,7 +25,6 @@ function OrderDetailsFooter() {
   // const updateOrder = useUpdateOrder();
   const [errorState] = useAtom(errorAtom);
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [orderStaticData] = useOrderStaticData();
   const [, setRecallOrders] = useGlobalStateHitOrder();
   const [isClientPortal] = useClientPortal();
   const [, setRecalling] = useLiveRecalling();
@@ -56,7 +54,6 @@ function OrderDetailsFooter() {
       'order_communications',
       'updated_at',
       'updated_by',
-      'order_services',
     ];
     const filteredOrderDetails = filterObject(
       orderDetails,
@@ -67,25 +64,9 @@ function OrderDetailsFooter() {
       keysToRemovefromOrders
     );
 
-    const newOrderServices =
-      orderDetails?.order_services?.length > 0 &&
-      orderDetails?.order_services?.sort(
-        (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-      );
-
-    const prevOrderServices =
-      prevOrderDetails?.order_services?.length > 0 &&
-      prevOrderDetails?.order_services.sort(
-        (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-      );
-
-    const newOrderServicesSorted = JSON.stringify(newOrderServices);
-    const prevOrderServicesSorted = JSON.stringify(prevOrderServices);
     const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
     const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
-    const isSame =
-      orderDetailsSorted === prevOrderDetailsSorted &&
-      newOrderServicesSorted === prevOrderServicesSorted;
+    const isSame = orderDetailsSorted === prevOrderDetailsSorted;
     return !isSame;
   };
 
@@ -94,75 +75,63 @@ function OrderDetailsFooter() {
     setRecallOrders(false);
     setRecalling(false);
     const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
-    const clone = [...orderDetails?.order_services];
 
-    // ASSEMBLE AND DISASSEMBLE SERVICES CHECK FOR ASSEMBLE TYPE
-    const assembleOrderService = orderStaticData?.order_service_list?.find(
-      (x: any) => x?.type?.toLowerCase() === 'assemble'
-    );
-    const disassembleOrderService = orderStaticData?.order_service_list?.find(
-      (x: any) => x?.type?.toLowerCase() === 'disassemble'
-    );
+    const serviceKeys = [
+      'assemble',
+      'disassemble',
+      'unpack_items',
+      'collect_disposal',
+      'take_packaging_away',
+      'assembly_type',
+    ];
 
-    const assemblyTypeService = clone?.find(
-      (x: any) => x?.order_service_list_id === assembleOrderService?.id
-    );
+    let orderServicesPayload: Record<string, any> = {};
 
-    const disassemblyTypeService = clone?.find(
-      (x: any) => x?.order_service_list_id === disassembleOrderService?.id
-    );
+    const includesKey = serviceKeys.some(key => key in payload);
 
-    if (
-      assemblyTypeService !== undefined &&
-      assemblyTypeService?.is_deleted === false &&
-      (assemblyTypeService?.service_category_id === undefined ||
-        assemblyTypeService?.service_category_id === null)
-    ) {
-      notification.info({
-        message: 'Info',
-        description: 'Assembly Type is required',
+    if (includesKey) {
+      for (const key of serviceKeys) {
+        orderServicesPayload[key as keyof typeof payload] =
+          key in payload
+            ? payload[key as keyof typeof payload]
+            : orderDetails[key as keyof OrdersType];
+        delete payload[key as keyof typeof payload];
+        if (
+          orderServicesPayload?.assemble === false &&
+          orderServicesPayload?.disassemble === false
+        ) {
+          orderServicesPayload.assembly_type = null;
+        }
+      }
+    }
+
+    if (Object.keys(orderServicesPayload).length > 0) {
+      payload.order_services = [orderServicesPayload];
+    }
+
+    let response = (await callUpdateOrderAPI({
+      payload: [payload],
+    })) as {
+      code: number | null;
+      error?: string | null | undefined;
+      [key: string]: any;
+    };
+    // const response = await updateOrder([payload]);
+    setRecallOrders(true);
+    if (response.code == 200 && response?.data?.length > 0) {
+      notification.success({
+        message: 'Success',
+        description: `${response?.message}`,
       });
-      return;
-    } else if (
-      disassemblyTypeService !== undefined &&
-      disassemblyTypeService?.is_deleted === false &&
-      (disassemblyTypeService?.service_category_id === undefined ||
-        disassemblyTypeService?.service_category_id === null)
-    ) {
-      notification.info({
-        message: 'Info',
-        description: 'Assembly Type is required',
+      setOrderDetails(response?.data[0]);
+      setPrevOrderDetails(response?.data[0]);
+      setCustomerInfo({
+        recipient_name: response?.data[0]?.order_recipient?.recipient_name,
+        postcode: response?.data[0]?.order_recipient?.postcode,
       });
-      return;
+      setRecallAuditLog(true);
     } else {
-      let response = (await callUpdateOrderAPI({
-        payload: [payload],
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      // const response = await updateOrder([payload]);
-      setRecalling(true);
-      setTimeout(() => {
-        setRecalling(false);
-      }, 2000);
-      setRecallOrders(true);
-      if (response.code == 200 && response?.data?.length > 0) {
-        notification.success({
-          message: 'Success',
-          description: `${response?.message}`,
-        });
-        setOrderDetails(response?.data[0]);
-        setPrevOrderDetails(response?.data[0]);
-        setCustomerInfo({
-          recipient_name: response?.data[0]?.order_recipient?.recipient_name,
-          postcode: response?.data[0]?.order_recipient?.postcode,
-        });
-        setRecallAuditLog(true);
-      } else {
-        setOrderDetails(prevOrderDetails);
-      }
+      setOrderDetails(prevOrderDetails);
     }
   };
 

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

@@ -3,111 +3,29 @@ import React from 'react';
 import styled from 'styled-components';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
 import { capitalize } from '../../../utils';
+import { OrdersType } from '../../../types';
 
 function AssemblyType() {
   const [orderData, setOrderData] = useOrderDetails();
   const [orderStaticData] = useOrderStaticData();
-  const orderServices = orderData?.order_services;
-  const cloneServices = [...orderServices];
-  const assembleOrderService = orderStaticData?.order_service_list?.find(
-    (x: any) => x?.type?.toLowerCase() === 'assemble'
-  );
-  const disassembleOrderService = orderStaticData?.order_service_list?.find(
-    (x: any) => x?.type?.toLowerCase() === 'disassemble'
-  );
-  const assemblyTypeService = cloneServices?.find(
-    (x: any) => x?.order_service_list_id === assembleOrderService?.id
-  );
-  const disassemblyTypeService = cloneServices?.find(
-    (x: any) => x?.order_service_list_id === disassembleOrderService?.id
-  );
-  const assemblyTypeId =
-    assemblyTypeService?.service_category_id ||
-    disassemblyTypeService?.service_category_id;
+
   const assemblyTypeOptions = orderStaticData?.order_service_list_category?.map(
     (option: any) => ({
       label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option.id.toString(),
+      value: option.type,
     })
   );
 
   const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let updatedAssemblyTypeService = {};
-
-    let updatedDisassemblyTypeService = {};
-
-    let updatedOrderServices: any = [];
-
-    if (
-      (assemblyTypeService?.is_deleted === false &&
-        disassemblyTypeService?.is_deleted === true &&
-        disassemblyTypeService !== undefined &&
-        disassemblyTypeService !== null) ||
-      (disassemblyTypeService?.is_deleted === false &&
-        assemblyTypeService?.is_deleted === true &&
-        assemblyTypeService !== undefined &&
-        assemblyTypeService !== null) ||
-      (assemblyTypeService?.is_deleted === false &&
-        disassemblyTypeService?.is_deleted === false)
-    ) {
-      updatedAssemblyTypeService = {
-        ...assemblyTypeService!,
-        service_category_id: +event.target.value,
-      };
-      updatedDisassemblyTypeService = {
-        ...disassemblyTypeService!,
-        service_category_id: +event.target.value,
-      };
-      updatedOrderServices = cloneServices?.filter(
-        s =>
-          s?.order_service_list_id !== assembleOrderService?.id &&
-          s?.order_service_list_id !== disassembleOrderService?.id
-      );
-      updatedOrderServices.push(updatedAssemblyTypeService);
-      updatedOrderServices.push(updatedDisassemblyTypeService);
-    } else if (
-      assemblyTypeService?.is_deleted === false &&
-      (disassemblyTypeService?.is_deleted === true ||
-        disassemblyTypeService === undefined ||
-        disassemblyTypeService === null)
-    ) {
-      updatedAssemblyTypeService = {
-        ...assemblyTypeService!,
-        service_category_id: +event.target.value,
-      };
-      updatedOrderServices = cloneServices?.filter(
-        s => s?.order_service_list_id !== assembleOrderService?.id
-      );
-      updatedOrderServices.push(updatedAssemblyTypeService);
-    } else {
-      updatedDisassemblyTypeService = {
-        ...disassemblyTypeService!,
-        service_category_id: +event.target.value,
-      };
-      updatedOrderServices = cloneServices?.filter(
-        s => s?.order_service_list_id !== disassembleOrderService?.id
-      );
-
-      updatedOrderServices.push(updatedDisassemblyTypeService);
-    }
-    const newData = { ...orderData, order_services: updatedOrderServices };
+    const newData: OrdersType = {
+      ...orderData,
+      assembly_type: event.target.value,
+    };
     setOrderData(newData);
   };
 
   const isServiceDisable = () => {
-    if (
-      (assemblyTypeService?.is_deleted === true &&
-        (disassemblyTypeService?.is_deleted === true ||
-          disassemblyTypeService === undefined ||
-          disassemblyTypeService === null)) ||
-      (disassemblyTypeService?.is_deleted === true &&
-        (assemblyTypeService?.is_deleted === true ||
-          assemblyTypeService === undefined ||
-          assemblyTypeService === null)) ||
-      (assemblyTypeService === undefined &&
-        disassemblyTypeService === undefined) ||
-      (assemblyTypeService === null && disassemblyTypeService === null)
-    ) {
+    if (orderData?.assemble === false && orderData?.disassemble === false) {
       return true;
     } else {
       return false;
@@ -117,7 +35,7 @@ function AssemblyType() {
   return (
     <Container $isDisable={isServiceDisable()}>
       <RadioButtonGroup
-        selectedValue={assemblyTypeId?.toString() || ''}
+        selectedValue={orderData?.assembly_type || ''}
         heading="Assembly Type"
         options={assemblyTypeOptions || []}
         onChange={radioGroupHandler}