@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import React from 'react';
+import ContactHome from './ContactHome';
+import ContactWork from './ContactWork';
+import ContactMobile from './ContactMobile';
+import ContactEmail from './ContactEmail';
+
+function ContactDetails() {
+  return (
+    <Container>
+      <GroupedInputs>
+        <ContactHome />
+        <ContactWork />
+      </GroupedInputs>
+      <GroupedInputs>
+        <ContactMobile />
+        <ContactEmail />
+      </GroupedInputs>
+    </Container>
+  );
+}
+
+const GroupedInputs = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export default ContactDetails;

package/src/components/order-view/order-details/expanded-content/customer-section/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormSection } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import Header from '../../common/Header';
+import RecipientName from './RecipientName';
+import LocationDetails from './location-info';
+import ContactDetails from './contact-info';
+
+function CustomerSection() {
+  return (
+    <CustomFormSection>
+      <Header label="Customer" />
+      <FormInputs>
+        <RecipientName />
+        <LocationDetails />
+        <ContactDetails />
+      </FormInputs>
+    </CustomFormSection>
+  );
+}
+
+const FormInputs = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const CustomFormSection = styled(FormSection)`
+  flex: 1;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
+export default CustomerSection;

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

@@ -0,0 +1,65 @@
+import { Label, TextArea } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../../store';
+
+function Address() {
+  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.address !== undefined &&
+    orderRecipient?.address !== null &&
+    orderRecipient?.address?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { address: val }
+        : { ...orderRecipient, address: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Address" htmlFor="address" />
+        {showCopyIcon && <CopyText text={orderRecipient?.address!} />}
+      </Wrapper>
+      <TextContainer
+        name="address"
+        placeholder="Address"
+        value={orderRecipient?.address || ''}
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+const TextContainer = styled(TextArea)`
+  resize: none;
+  height: 70%;
+`;
+
+export default Address;

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

@@ -0,0 +1,59 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderDetails } from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
+
+function Latitude() {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = parseFloat(e.target.value);
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { latitude: val }
+        : { ...orderRecipient, latitude: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  return (
+    <Container>
+      <Label label="Latitude" htmlFor="lat" />
+      <CustomInput
+        name="lat"
+        type="number"
+        placeholder="Latitude"
+        onKeyDown={handleKeyDown}
+        value={orderRecipient?.latitude || ''}
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const CustomInput = styled(Input)`
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default Latitude;

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

@@ -0,0 +1,58 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderDetails } from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
+
+function Longitude() {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = parseFloat(e.target.value);
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { longitude: val }
+        : { ...orderRecipient, longitude: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+  return (
+    <Container>
+      <Label label="Longitude" htmlFor="long" />
+      <CustomInput
+        name="long"
+        type="number"
+        placeholder="Longitude"
+        onKeyDown={handleKeyDown}
+        value={orderRecipient?.longitude || ''}
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const CustomInput = styled(Input)`
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default Longitude;

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

@@ -0,0 +1,62 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../../store';
+// import { LocationIcon } from '../../../../assets/icons';
+
+function Postcode() {
+  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+  const showCopyIcon =
+    orderRecipient?.postcode !== undefined &&
+    orderRecipient?.postcode !== null &&
+    orderRecipient?.postcode?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { postcode: val }
+        : { ...orderRecipient, postcode: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Postcode" htmlFor="postcode" />
+        {showCopyIcon && <CopyText text={orderRecipient?.postcode!} />}
+      </Wrapper>
+      <Input
+        name="postcode"
+        type="text"
+        placeholder="Enter Postcode"
+        value={orderRecipient?.postcode || ''}
+        onChange={onChange}
+        autoComplete="off"
+      />
+    </Container>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default Postcode;

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

@@ -0,0 +1,91 @@
+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';
+
+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 orderRecipient = orderDetails?.order_recipient;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    validateInput(val);
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { what_3words_address: val }
+        : { ...orderRecipient, what_3words_address: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  const validateInput = (value: string) => {
+    const isValid = w3wRegex.test(value);
+    setErrors(prev => ({
+      ...prev,
+      w3wError: isValid ? '' : 'Please enter a valid input (word.word.word)',
+    }));
+  };
+
+  return (
+    <Container>
+      <Label label="What3Words Address" htmlFor="w3w" />
+      <Wrapper>
+        <What3wordsPrefix>
+          <What3WordsIcon />
+        </What3wordsPrefix>
+        <CustomInput
+          name="w3w"
+          type="text"
+          placeholder="Format: word.word.word"
+          value={orderRecipient?.what_3words_address || ''}
+          onChange={onChange}
+        />
+      </Wrapper>
+      {errors.w3wError && <ErrorText>{errors.w3wError}</ErrorText>}
+    </Container>
+  );
+}
+const What3wordsPrefix = styled.div`
+  position: absolute;
+  top: 13px;
+  left: 12px;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const CustomInput = styled(Input)`
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+  padding-left: 40px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
+export default What3words;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import Address from './Address';
+import Postcode from './Postcode';
+import Latitude from './Latitude';
+import Longitude from './Longitude';
+import What3words from './What3words';
+
+function LocationDetails() {
+  return (
+    <Container>
+      <Address />
+      <Right>
+        <RightColumn>
+          <Postcode />
+          <What3words />
+        </RightColumn>
+        <RightColumn>
+          <Latitude />
+          <Longitude />
+        </RightColumn>
+      </Right>
+    </Container>
+  );
+}
+
+const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Right = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+export default LocationDetails;

package/src/components/order-view/order-details/expanded-content/footer/AllowTracking.tsx

@@ -0,0 +1,71 @@
+// import { Checkbox } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+// import { useOrderDetails } from '../../../store';
+
+function AllowTracking() {
+  // const [orderDetails, setOrderDetails] = useOrderDetails();
+  // const allowTracking = orderDetails?.allow_live_tracking;
+
+  // const onChange = () => {
+  //   setOrderDetails(prev => {
+  //     return {
+  //       ...prev,
+  //       allow_live_tracking: !orderDetails.allow_live_tracking,
+  //     };
+  //   });
+  // };
+
+  return (
+    <Container>
+      {/* <Wrapper>
+        <Checkbox checked={allowTracking} onChange={onChange} />
+        <Tracking>Allow Tracking?</Tracking>
+      </Wrapper> */}
+      <CreatedBy>
+        <Text>Created: </Text> IT - Manpreet Kaur, 21/08/2024 13:00:51
+      </CreatedBy>
+    </Container>
+  );
+}
+
+// const Wrapper = styled.div`
+//   display: flex;
+//   gap: 10px;
+//   align-items: center;
+// `;
+
+const Text = styled.span`
+  color: #3a3630;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+`;
+
+const CreatedBy = styled.span`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+
+// const Tracking = styled.span`
+//   color: #3a3630;
+//   font-family: 'Lato', sans-serif;
+//   font-size: 13px;
+//   font-style: normal;
+//   font-weight: 400;
+//   line-height: 16px;
+// `;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default AllowTracking;

package/src/components/order-view/order-details/expanded-content/footer/index.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+import AllowTracking from './AllowTracking';
+import { Button } from '@bjsdistribution/dms-component-library';
+// import {
+//   useAtom,
+//   useOrderDetails,
+//   usePrevOrderDetails,
+//   errorAtom,
+// } from '../../../store';
+// import useUpdateOrder from '../../../hooks/useUpdateOrder';
+// import { compareOrderDetailsStates, filterObject } from '../../../utils';
+// import { OrderServiceType } from '../../../types';
+
+function OrderDetailsFooter() {
+  // const [orderDetails, setOrderDetails] = useOrderDetails();
+  // const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
+  // const updateOrder = useUpdateOrder();
+  // const [errorState] = useAtom(errorAtom);
+
+  // const errorFound = () => {
+  //   const isError =
+  //     errorState.w3wError.length > 0 || errorState.emailError.length > 0;
+  //   return isError;
+  // };
+
+  // const isDifferent = () => {
+  //   const keysToRemovefromOrders = [
+  //     'order_locked',
+  //     'order_communications',
+  //     'updated_at',
+  //     'updated_by',
+  //     'order_services',
+  //   ];
+  //   const filteredOrderDetails = filterObject(
+  //     orderDetails,
+  //     keysToRemovefromOrders
+  //   );
+  //   const filteredPrevOrderDetails = filterObject(
+  //     prevOrderDetails,
+  //     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;
+  //   return !isSame;
+  // };
+
+  // const onSave = async () => {
+  //   const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
+  //   const response = await updateOrder([payload]);
+
+  //   if (response && response.data) {
+  //     setOrderDetails(response.data[0]);
+  //     setPrevOrderDetails(response.data[0]);
+  //   }
+  // };
+  const onSave = () => {
+    console.log('save');
+  };
+  return (
+    <Container>
+      <AllowTracking />
+      <Button
+        style={{ borderRadius: '20px' }}
+        onClick={onSave}
+        // disabled={!isDifferent() || errorFound()}
+      >
+        Save Details
+      </Button>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  align-items: flex-start;
+  border-top: 1px solid #edebe8;
+  background: #f8fafc;
+  /* margin: 0px -15px -15px -15px; */
+  border-radius: 0px 0px 8px 8px;
+  margin-bottom: 22px;
+  position: relative;
+  top: 21px;
+`;
+
+export default OrderDetailsFooter;