@bjsdistribution/dms-client-return 0.1.38-prod → 0.1.39-prod

package/package.json

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

package/src/common/custom-input/CustomInput.tsx

@@ -0,0 +1,24 @@
+import { Input } from '@bjsdistribution/dms-component-library';
+import React, { InputHTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+function GenericInput(
+  props: InputHTMLAttributes<HTMLInputElement> & { hasError?: boolean }
+) {
+  return <StyledInput {...props} />;
+}
+
+const StyledInput = styled(Input)<{ hasError?: boolean }>`
+  height: 30px;
+  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#ccc')};
+  &:hover {
+    background: #ffffff;
+    outline: none;
+    border-color: #7b7874;
+  }
+  &:focus {
+    border-color: ${({ hasError }) => (hasError ? 'red' : '#888')};
+  }
+`;
+
+export default GenericInput;

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

@@ -4,7 +4,7 @@ export const StatusOptions = [
     value: 'released',
   },
   {
-    label: 'Recieved',
+    label: 'Received',
     value: 'received',
   },
   {
@@ -25,13 +25,13 @@ export const StatusOptions = [
   },
 ];
 
-  export const notesTypeOptions = [
-    {
-      label: 'Public',
-      value: 'public',
-    },
-    {
-      label: 'Private',
-      value: 'private',
-    },
-  ];
+export const notesTypeOptions = [
+  {
+    label: 'Public',
+    value: 'public',
+  },
+  {
+    label: 'Private',
+    value: 'private',
+  },
+];

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

@@ -35,6 +35,7 @@ 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();
@@ -311,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/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;

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

@@ -51,7 +51,8 @@ export type OrderActionsType =
   | 'clear-date'
   | 'uncancel-order'
   | 'remove-from-route'
-  | 'force-debrief';
+  | 'force-debrief'
+  | 'what3Words';
 
 export interface ChargeLogData {
   id: number;
@@ -76,8 +77,8 @@ export type OrderRecipientType = {
   postcode?: string | null;
   postcode_district?: string | null;
   postcode_short?: string | null;
-  latitude?: number | null;
-  longitude?: number | null;
+  latitude?: string | null;
+  longitude?: string | null;
   what_3words_address?: string | null;
   contact_home?: string | null;
   contact_work?: string | null;