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

package/src/components/order-view/order-actions/actions/what3words/What3WordsModal.tsx.tsx

@@ -0,0 +1,306 @@
+import React, { useEffect, useState } from 'react';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { notification } from 'antd';
+import { Label, useAxios } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import GenericInput from '../../../../../common/custom-input/CustomInput';
+import { compareOrderDetailsStates } from '../../../utils';
+import { ApiResponse } from '../../../types';
+import { useClientPortal } from '../../../../store';
+
+function What3WordsModal(props: any) {
+  const w3wRegex = /^\/{0,}[^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}$/;
+  const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
+  const [customerInfo] = useCustomerInfo();
+  const [w3wError, setW3wError] = useState('');
+  const [isClientPortal] = useClientPortal();
+  const orderRecipient = orderDetails?.order_recipient || {};
+  const [currentWhat3Words, setWhat3Words] = useState();
+  const [localW3W, setLocalW3W] = useState('');
+  const [localLat, setLocalLat] = useState(orderRecipient?.latitude || '');
+  const [localLong, setLocalLong] = useState(orderRecipient?.longitude || '');
+
+  const closeModal = () => setCurrentAction(undefined);
+
+  const cleanW3WAddress = (w3wStr: string) => {
+    return w3wStr.replace(/^\/+/, '');
+  };
+
+  const validateInput = (value: string) => {
+    if (value.trim()) {
+      const isValid = w3wRegex.test(value);
+      setW3wError(
+        isValid ? '' : 'Please enter a valid input (format: word.word.word)'
+      );
+    } else {
+      setW3wError('Input cannot be empty or only spaces');
+    }
+  };
+
+  const onChangeW3W = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawVal = e.target.value;
+    const val = cleanW3WAddress(rawVal);
+    validateInput(rawVal); // still validate raw input for dots, etc.
+    setLocalW3W(val);
+  };
+
+  const onChangeLatitude = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalLat(e.target.value);
+  };
+
+  const onChangeLongitude = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalLong(e.target.value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (['e', 'E', '+', '-'].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const { fetchData: callUpdateOrderAPI } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/update/`,
+    method: 'PUT',
+  });
+
+  const { fetchData: getWhat3Words } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/v1/orders/coordinates_to_w3w/?`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (
+      orderDetails?.order_recipient?.latitude &&
+      orderDetails?.order_recipient?.longitude
+    ) {
+      getWhat3Words({
+        endPointQuery: `latitude=${orderDetails?.order_recipient?.latitude}&longitude=${orderDetails?.order_recipient?.longitude}`,
+      }).then((response: any) => {
+        console.log(response?.data);
+        setWhat3Words(response?.data?.words);
+      });
+    }
+  }, [
+    orderDetails?.order_recipient?.latitude,
+    orderDetails?.order_recipient?.longitude,
+  ]);
+
+  const onSave = async () => {
+    const updatedOrderDetails = {
+      ...orderDetails,
+      order_recipient: {
+        ...(orderDetails?.order_recipient || {}),
+        what_3words_address: localW3W,
+        latitude: localLat,
+        longitude: localLong,
+      },
+    };
+
+    const payload = compareOrderDetailsStates(
+      prevOrderDetails,
+      updatedOrderDetails
+    );
+
+    let response = (await callUpdateOrderAPI({
+      payload: [payload],
+    })) as {
+      code: number | null;
+      error?: string | null | undefined;
+      [key: string]: any;
+    };
+
+    if (response.code === 200 && response?.data?.length > 0) {
+      notification.success({
+        message: 'Success',
+        description: `${response?.message}`,
+      });
+
+      await props?.callOrdersApi();
+      setOrderDetails(response?.data[0]);
+      setPrevOrderDetails(response?.data[0]);
+      closeModal();
+    } else {
+      notification.error({
+        message: 'Update Failed',
+        description: response?.error || 'Unknown error',
+      });
+
+      setOrderDetails(prevOrderDetails);
+    }
+  };
+
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  const isDifferent = () => {
+    const original = orderRecipient || {};
+    return (
+      localW3W !== (original.what_3words_address || '') ||
+      localLat !== (original.latitude || '') ||
+      localLong !== (original.longitude || '')
+    );
+  };
+
+  useEffect(() => {
+    setLocalLat(orderRecipient?.latitude || '');
+    setLocalLong(orderRecipient?.longitude || '');
+  }, [orderRecipient]);
+
+  return (
+    <OrderActionModal
+      headerTitle="WHAT3WORDS"
+      onCloseHeader={closeModal}
+      onSubmit={onSave}
+      showAdditionalInfo
+      infoText={infoText}
+      isSubmitDisabled={isClientPortal ? true : !isDifferent() || !!w3wError}
+      submitBtnTitle="Save Details"
+    >
+      <Section>
+        <FieldRow>
+          <WordsSection>
+            <Label label="Words" />
+            <WordInputWrapper>
+              <CustomInput
+                name="w3w"
+                type="text"
+                placeholder="Format: word.word.word"
+                value={localW3W}
+                onChange={onChangeW3W}
+                disabled={isClientPortal}
+              />
+
+              {w3wError && <ErrorText>{w3wError}</ErrorText>}
+            </WordInputWrapper>
+
+            <CurrentText>
+              <strong>Current:</strong>{' '}
+              <a
+                href={`https://what3words.com/${currentWhat3Words}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {currentWhat3Words}
+              </a>
+            </CurrentText>
+          </WordsSection>
+        </FieldRow>
+      </Section>
+
+      <Section>
+        <CoordRow>
+          <Coordinate>
+            <Label label="Latitude" htmlFor="lat" />
+            <CustomInput
+              name="lat"
+              type="number"
+              placeholder="Lat"
+              value={localLat}
+              onChange={onChangeLatitude}
+              onKeyDown={handleKeyDown}
+            />
+          </Coordinate>
+          <Coordinate>
+            <Label label="Longitude" htmlFor="long" />
+
+            <CustomInput
+              name="long"
+              type="number"
+              placeholder="Long"
+              value={localLong}
+              onChange={onChangeLongitude}
+              onKeyDown={handleKeyDown}
+            />
+          </Coordinate>
+        </CoordRow>
+      </Section>
+    </OrderActionModal>
+  );
+}
+
+const WordsSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
+`;
+
+const WordInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`;
+
+const CurrentText = styled.div`
+  font-size: 13px;
+  color: #444;
+  white-space: nowrap;
+
+  a {
+    color: #1677ff;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
+const Section = styled.div`
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const FieldRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+`;
+
+const CoordRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+`;
+
+const Coordinate = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const CustomInput = styled(GenericInput)`
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+export default What3WordsModal;

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

@@ -34,6 +34,8 @@ import ChargeLog from './actions/charge-log';
 import ReminderModal from './actions/create-task-reminder';
 import TaskModal from './actions/create-task-reminder/TaskModal';
 import ForceDebriefModal from './actions/force-debrief/ForceDebriefModal';
+import { useNavigate } from 'react-router-dom';
+import What3WordsModal from './actions/what3words/What3WordsModal.tsx';
 
 function OrderActions() {
   const [currentAction, setCurrentAction] = useCurrentAction();
@@ -47,6 +49,7 @@ function OrderActions() {
   const [, setLoading] = useLoading();
   const [, setTasksData] = useTasksData();
   const [, setReminderNotifyData] = useReminderNotiData();
+  const navigate = useNavigate();
 
   // call orders api
 
@@ -58,19 +61,35 @@ function OrderActions() {
   });
 
   useEffect(() => {
-    setLoading(loading);
-    if (fetchedData && fetchedData?.data) {
-      const requiredData = fetchedData?.data;
-      setOrderDetails(requiredData[0]);
-      setPrevOrderDetails(requiredData[0]);
-      setCurrentAction(undefined);
-    }
-    if (
-      (fetchedData && fetchedData?.data === null) ||
-      fetchedData?.data?.length === 0
-    ) {
-      setCurrentAction(undefined);
-    }
+    const fetchData = async () => {
+      try {
+        setLoading(loading);
+
+        if (fetchedData && fetchedData?.data) {
+          const requiredData = fetchedData?.data;
+          setOrderDetails(requiredData[0]);
+          setPrevOrderDetails(requiredData[0]);
+          setCurrentAction(undefined);
+        }
+
+        if (
+          (fetchedData && fetchedData?.data === null) ||
+          fetchedData?.data?.length === 0
+        ) {
+          setCurrentAction(undefined);
+        }
+      } catch (error) {
+        //@ts-ignore
+
+        if (error?.response?.status === 404) {
+          navigate('/404');
+        } else {
+          console.error('Error fetching order data:', error);
+        }
+      }
+    };
+
+    fetchData();
   }, [loading]);
 
   // orders api ends
@@ -293,6 +312,8 @@ function OrderActions() {
         return <ClearBookingStatus callOrderAlertsApi={callOrderAlertsApi} />;
       case 'remove-from-route':
         return <RemoveFromRoute callOrderAlertsApi={callOrderAlertsApi} />;
+      case 'what3Words':
+        return <What3WordsModal callOrdersApi={callOrdersApi} />;
       default:
         return null;
     }

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/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx

@@ -9,18 +9,16 @@ function Latitude() {
   const orderRecipient = orderDetails?.order_recipient;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = parseFloat(e.target.value);
+    const val = e.target.value;
     const updatedOrderRecipient = {
       ...(orderRecipient === null
         ? { latitude: val }
         : { ...orderRecipient, latitude: val }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
   };
 
   return (

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

@@ -9,7 +9,7 @@ function Longitude() {
   const orderRecipient = orderDetails?.order_recipient;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = parseFloat(e.target.value);
+    const val = e.target.value;
     const updatedOrderRecipient = {
       ...(orderRecipient === null
         ? { longitude: val }

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

@@ -2,28 +2,47 @@ import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import What3WordsIcon from '../../../../../../assets/icons/What3WordsIcon';
-import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useCurrentAction,
+  useOrderDetails,
+} from '../../../../store';
+import { sanitizeInput } from '../../../../utils';
+import { useClientPortal } from '../../../../../store';
 
 function What3words() {
   const w3wRegex = /^\/{0,}[^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}$/;
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [errors, setErrors] = useAtom(errorAtom);
+  const [isClientPortal] = useClientPortal();
   const orderRecipient = orderDetails?.order_recipient;
+  const [, setCurrentAction] = useCurrentAction();
+
+  const cleanW3WAddress = (w3wStr: string) => {
+    if (w3wStr.startsWith('///')) {
+      return w3wStr.slice(3);
+    } else if (w3wStr.startsWith('//')) {
+      return w3wStr.slice(2);
+    } else if (w3wStr.startsWith('/')) {
+      return w3wStr.slice(1);
+    }
+    return w3wStr;
+  };
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+    let val = sanitizeInput(e.target.value);
     validateInput(val);
     const updatedOrderRecipient = {
       ...(orderRecipient === null
         ? { what_3words_address: val }
-        : { ...orderRecipient, what_3words_address: val }),
+        : { ...orderRecipient, what_3words_address: cleanW3WAddress(val) }),
     };
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_recipient: updatedOrderRecipient,
-      };
-    });
+
+    setOrderDetails(prev => ({
+      ...prev,
+      order_recipient: updatedOrderRecipient,
+    }));
   };
 
   const validateInput = (value: string) => {
@@ -31,19 +50,30 @@ function What3words() {
       const isValid = w3wRegex.test(value);
       setErrors(prev => ({
         ...prev,
-        w3wError: isValid ? '' : 'Please enter a valid input (word.word.word)',
+        w3wError: isValid
+          ? ''
+          : 'Please enter a valid input (format: word.word.word)',
       }));
     } else {
       setErrors(prev => ({
         ...prev,
-        w3wError: '',
+        w3wError: 'Input cannot be empty or only spaces',
       }));
     }
   };
 
+  // const handleOpenModal = () => {
+  //   dispatch({ type: 'what3Words' });
+  // };
+
   return (
     <Container>
-      <Label label="What3Words Address" htmlFor="w3w" />
+      <Label
+        style={{ color: '#6396e5', cursor: 'pointer' }}
+        label="What3Words Address"
+        htmlFor="w3w"
+        onClick={() => setCurrentAction('what3Words')}
+      />
       <Wrapper>
         <What3wordsPrefix>
           <What3WordsIcon />
@@ -54,12 +84,14 @@ function What3words() {
           placeholder="Format: word.word.word"
           value={orderRecipient?.what_3words_address || ''}
           onChange={onChange}
+          disabled={isClientPortal}
         />
       </Wrapper>
       {errors.w3wError && <ErrorText>{errors.w3wError}</ErrorText>}
     </Container>
   );
 }
+
 const What3wordsPrefix = styled.div`
   position: absolute;
   top: 13px;
@@ -71,7 +103,7 @@ const Wrapper = styled.div`
 `;
 
 const CustomInput = styled(Input)`
-  border-radius: 25px;
+  /* border-radius: 25px; */
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;