@bjsdistribution/dms-client-return 0.0.18 → 0.0.20

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

@@ -1,103 +1,150 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  AmountContainer,
-  AmountSymbol,
+  // AmountContainer,
+  // AmountSymbol,
   ContentContainer,
-  DeleteCircleIcon,
+  // DeleteCircleIcon,
   Heading,
-  StatusWrapper,
-  StyledAmountInput,
-  SuccessText,
+  // StatusWrapper,
+  // StyledAmountInput,
+  // SuccessText,
 } from '../modalstyle';
-import { AntTable, DeleteIcon } from '@bjsdistribution/dms-component-library';
+import { AntTable } from '@bjsdistribution/dms-component-library';
 
-import { useCurrentAction } from '../../../store';
-import { ChargeLogData, Column } from '../../../types';
-import { initialData } from '../../../fakedata';
+import { useCurrentAction, useCustomerInfo } from '../../../store';
+import { ChargeLogData } from '../../../types';
+// import { initialData } from '../../../fakedata';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import DustbinIcon from '../../../../../assets/icons/DustbinIcon';
 
 function ChargeLog() {
   const [, setCurrentAction] = useCurrentAction();
-  const [data, setData] = useState<ChargeLogData[]>(initialData);
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  // const [data, setData] = useState<ChargeLogData[]>(initialData);
 
   const closeModal = () => {
     setCurrentAction(undefined);
   };
 
-  const handleDelete = (record: ChargeLogData) => {
-    const newData = data.filter(item => item.id !== record.id);
-    setData(newData);
-  };
+  // const handleDelete = (record: ChargeLogData) => {
+  //   const newData = data.filter(item => item.id !== record.id);
+  //   setData(newData);
+  // };
+  // const handleAmountChange = (value: string, id: number) => {
+  //   const amountValue = value.replace(/[^0-9.]/g, '');
+  //   const parts = amountValue.split('.');
+  //   if (parts.length > 2) {
+  //     return;
+  //   }
+  //   if (parts.length === 2 && parts[1].length > 2) {
+  //     return;
+  //   }
 
-  const handleAmountChange = (value: string, id: number) => {
-    const amountValue = value.replace(/[^0-9.]/g, '');
-    const parts = amountValue.split('.');
-    if (parts.length > 2) {
-      return;
-    }
-    if (parts.length === 2 && parts[1].length > 2) {
-      return;
-    }
+  //   const newData = data.map(item => {
+  //     if (item.id === id) {
+  //       return { ...item, amount: amountValue };
+  //     }
+  //     return item;
+  //   });
+  //   setData(newData);
+  // };
 
-    const newData = data.map(item => {
-      if (item.id === id) {
-        return { ...item, amount: amountValue };
-      }
-      return item;
-    });
-    setData(newData);
-  };
+  //   const columns: Column[] = [
+  //     { key: 'date', title: 'Date', dataIndex: 'date' },
+  //     { key: 'description', title: 'Description', dataIndex: 'description' },
+  //     {
+  //       key: 'amount',
+  //       title: 'Amount',
+  //       dataIndex: 'amount',
+  //       render: (record: any) => (
+  //         <AmountContainer>
+  //           <AmountSymbol>£</AmountSymbol>
+  //           {record.status ? (
+  //             <StyledAmountInput
+  //               type="text"
+  //               value={record.amount}
+  //               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+  //                 handleAmountChange(e.target.value, record.id)
+  //               }
+  //             />
+  //           ) : (
+  //             <div>{record.amount}</div>
+  //           )}
+  //         </AmountContainer>
+  //       ),
+  //     },
+  //     {
+  //       key: 'status',
+  //       title: 'Status',
+  //       render: (record: any) => (
+  //         <StatusWrapper>
+  //           {record.status ? (
+  //             <>
+  //               Invoice : <SuccessText>{record.status}</SuccessText>
+  //             </>
+  //           ) : (
+  //             'Awaiting Invoice'
+  //           )}
+  //         </StatusWrapper>
+  //       ),
+  //     },
+  //     {
+  //       key: 'action',
+  //       title: 'Action',
+  //       render: (record: any) => (
+  //         <DeleteCircleIcon onClick={() => handleDelete(record)}>
+  //           <DeleteIcon />
+  //         </DeleteCircleIcon>
+  //       ),
+  //     },
+  //   ];
 
-  const columns: Column[] = [
-    { key: 'date', title: 'Date', dataIndex: 'date' },
-    { key: 'description', title: 'Description', dataIndex: 'description' },
+  const column = [
+    { key: 'date', title: 'Date' },
+    { key: 'description', title: 'Description' },
+    { key: 'amount', title: 'Amount' },
+    { key: 'status', title: 'Status' },
+    { key: 'action', title: 'Action' },
+  ];
+  const Data = [
     {
-      key: 'amount',
-      title: 'Amount',
-      dataIndex: 'amount',
-      render: (record: any) => (
-        <AmountContainer>
-          <AmountSymbol>£</AmountSymbol>
-          {record.status ? (
-            <StyledAmountInput
-              type="text"
-              value={record.amount}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                handleAmountChange(e.target.value, record.id)
-              }
-            />
-          ) : (
-            <div>{record.amount}</div>
-          )}
-        </AmountContainer>
-      ),
+      date: '17/05/2024',
+      description: 'Delivery Success - 17/05/2024',
+      amount: '£0.00',
+      status: '2024-06-02 - Moreham Wood Direct - 34113',
+      action: <DustbinIcon />,
     },
     {
-      key: 'status',
-      title: 'Status',
-      render: (record: any) => (
-        <StatusWrapper>
-          {record.status ? (
-            <>
-              Invoice : <SuccessText>{record.status}</SuccessText>
-            </>
-          ) : (
-            'Awaiting Invoice'
-          )}
-        </StatusWrapper>
-      ),
+      date: '17/05/2024',
+      description: 'Delivery Success - 17/05/2024',
+      amount: '£0.45',
+      status: '2024-06-02 - Moreham Wood Direct - 34113',
+      action: <DustbinIcon />,
     },
     {
-      key: 'action',
-      title: 'Action',
-      render: (record: any) => (
-        <DeleteCircleIcon onClick={() => handleDelete(record)}>
-         <DeleteIcon/>
-        </DeleteCircleIcon>
-      ),
+      date: '17/05/2024',
+      description: 'Delivery Success - 17/05/2024',
+      amount: '£0.00',
+      status: '',
+      action: <DustbinIcon />,
+    },
+    {
+      date: '17/05/2024',
+      description: 'Delivery Success - 17/05/2024',
+      amount: '£0.78',
+      status: 'Awaiting Invoice',
+      action: <DustbinIcon />,
+    },
+    {
+      date: '17/05/2024',
+      description: 'Delivery Success - 17/05/2024',
+      amount: '£0.108',
+      status: 'Awaiting',
+      action: <DustbinIcon />,
     },
   ];
-
   return (
     <OrderActionModal
       headerTitle="Charges For"
@@ -105,13 +152,13 @@ function ChargeLog() {
       onSubmit={() => {}}
       submitBtnTitle="Save Details"
       showAdditionalInfo
-      infoText="632801 (OFS)"
+      infoText={infoText}
     >
       <ContentContainer>
         <Heading> PRODUCTS </Heading>
         <AntTable
-          columns={columns}
-          data={data}
+          columns={column}
+          data={Data}
           onSelectChange={(value: any, record: ChargeLogData) =>
             console.log('Selected value:', value, 'for record:', record)
           }

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ActionDropdown.tsx

@@ -1,24 +1,36 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import OrderActionsDropdown from '../../../Dropdown';
+import { useOrderStaticData } from '../../../../store';
+import { capitalize } from '../../../../utils';
 
 function ActionDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [actionTypeOptions, setActionTypeOptions] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (orderStaticData) {
+      const options = orderStaticData?.order_contact_action_type?.map(
+        (option: any) => ({
+          label: capitalize(option.type.replaceAll('_', ' ')),
+          value: option.id,
+        })
+      );
+      setActionTypeOptions(options);
+    }
+  }, [orderStaticData]);
+
   const onSelect = () => {};
   const onSearch = () => {};
 
-  const options = [
-    { label: 'small', value: 'small' },
-    { label: 'medium', value: 'medium' },
-    { label: 'large', value: 'large' },
-  ];
-
   return (
     <OrderActionsDropdown
       label="Action"
       placeholder="Select Action"
-      options={options}
+      options={actionTypeOptions}
+      value={actionTypeOptions?.find(option => option.value === 7)}
       onSelect={onSelect}
       onSearch={onSearch}
-      className='action-dropdown'
+      className="action-dropdown"
     />
   );
 }

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactMobile.tsx

@@ -2,11 +2,68 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
 
+import { handleKeyDown } from '../../../../utils';
+import {
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
+} from '../../../store';
+
 function ContactMobile() {
+  const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();
+  const orderRecipient = orderDetails?.order_recipient;
+  const [errors, setErrors] = useErrorConfirmOrder();
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_mobile: val }
+        : { ...orderRecipient, contact_mobile: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+
+    if (e.target.value) {
+      if (e.target.value.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (e.target.value.length > 11) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: 'Phone number must not exceed 10 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          mobileError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        mobileError: '',
+      }));
+    }
+  };
   return (
     <Container>
       <Label>Contact Mobile</Label>
-      <Input style={{ borderRadius: '15px' }} />
+      <Input
+        name="contact-work"
+        type="text"
+        placeholder="Mobile Number"
+        style={{ borderRadius: '15px' }}
+        value={orderRecipient?.contact_mobile || ''}
+        onKeyDown={handleKeyDown}
+        onChange={onChange}
+      />
+      {errors.mobileError && <ErrorText>{errors.mobileError}</ErrorText>}
     </Container>
   );
 }
@@ -25,4 +82,10 @@ const Container = styled.div`
   gap: 6px;
 `;
 
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
 export default ContactMobile;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactPhone.tsx

@@ -2,11 +2,71 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
 
+import { handleKeyDown } from '../../../../utils';
+import {
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
+} from '../../../store';
+
 function ContactPhone() {
+  const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();
+  const orderRecipient = orderDetails?.order_recipient;
+  const [errors, setErrors] = useErrorConfirmOrder();
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_home: val }
+        : { ...orderRecipient, contact_home: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+
+    if (e.target.value) {
+      if (e.target.value.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (e.target.value.length > 11) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: 'Phone number must not exceed 10 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          homeContactError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        homeContactError: '',
+      }));
+    }
+  };
+
   return (
     <Container>
       <Label>Contact Phone</Label>
-      <Input style={{ borderRadius: '15px' }} />
+      <Input
+        name="contact-home"
+        type="text"
+        placeholder="Home Number"
+        onKeyDown={handleKeyDown}
+        style={{ borderRadius: '15px' }}
+        value={orderRecipient?.contact_home || ''}
+        onChange={onChange}
+      />
+      {errors.homeContactError && (
+        <ErrorText>{errors.homeContactError}</ErrorText>
+      )}
     </Container>
   );
 }
@@ -25,4 +85,10 @@ const Container = styled.div`
   gap: 6px;
 `;
 
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
 export default ContactPhone;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactTypeDropdown.tsx

@@ -1,23 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import OrderActionsDropdown from '../../../Dropdown';
+import { useOrderStaticData } from '../../../../store';
+import { capitalize } from '../../../../utils';
 
 function ContactTypeDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [contactTypeOptions, setContactTypeOptions] = useState<any[]>([]);
+
   const onSelect = () => {};
   const onSearch = () => {};
 
-  const options = [
-    { label: 'small', value: 'small' },
-    { label: 'medium', value: 'medium' },
-    { label: 'large', value: 'large' },
-  ];
+  useEffect(() => {
+    if (orderStaticData) {
+      const options = orderStaticData?.order_contact_type?.map(
+        (option: any) => ({
+          label: capitalize(option.type.replaceAll('_', ' ')),
+          value: option.id,
+        })
+      );
+      setContactTypeOptions(options);
+    }
+  }, [orderStaticData]);
 
   return (
     <OrderActionsDropdown
       label="Contact Type"
       placeholder="Select Contact Type"
-      options={options}
+      options={contactTypeOptions}
       onSelect={onSelect}
       onSearch={onSearch}
+      disabled={false}
       className="contact-type-dropdown"
     />
   );

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactWith.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+function ContactWith() {
+  return (
+    <Container>
+      <Label>Contact With</Label>
+      <Input style={{ borderRadius: '15px' }} />
+    </Container>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default ContactWith;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactWork.tsx

@@ -2,11 +2,69 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
 
+import { handleKeyDown } from '../../../../utils';
+import {
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
+} from '../../../store';
+
 function ContactWork() {
+  const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();
+  const orderRecipient = orderDetails?.order_recipient;
+  const [errors, setErrors] = useErrorConfirmOrder();
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_work: val }
+        : { ...orderRecipient, contact_work: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+    if (e.target.value) {
+      if (e.target.value.length < 10) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workContactError: 'Phone number must be at least 10 digits.',
+        }));
+      } else if (e.target.value.length > 11) {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workContactError: 'Phone number must not exceed 10 digits.',
+        }));
+      } else {
+        setErrors(prevErrors => ({
+          ...prevErrors,
+          workContactError: '',
+        }));
+      }
+    } else {
+      setErrors(prevErrors => ({
+        ...prevErrors,
+        workContactError: '',
+      }));
+    }
+  };
   return (
     <Container>
       <Label>Contact Work</Label>
-      <Input style={{ borderRadius: '15px' }} />
+      <Input
+        name="contact-work"
+        type="text"
+        placeholder="Work Number"
+        onKeyDown={handleKeyDown}
+        style={{ borderRadius: '15px' }}
+        value={orderRecipient?.contact_work || ''}
+        onChange={onChange}
+      />
+      {errors.workContactError && (
+        <ErrorText>{errors.workContactError}</ErrorText>
+      )}
     </Container>
   );
 }
@@ -25,4 +83,10 @@ const Container = styled.div`
   gap: 6px;
 `;
 
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
 export default ContactWork;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/DeliveryDate.tsx

@@ -1,13 +1,49 @@
 import { DatePicker } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import dayjs from 'dayjs';
+import {
+  useConfirmOrderDate,
+  useOrderDetailsConfirmOrder,
+} from '../../../store';
+import { format, isValid } from 'date-fns';
 
 function DeliveryDate() {
-  const onChange = () => {};
+  const [orderDetails] = useOrderDetailsConfirmOrder();
+  const [deliveryDate, setDeliveryDate] = useConfirmOrderDate();
+
+  const actionDate = orderDetails?.action_date
+    ? dayjs(orderDetails?.action_date)
+    : null;
+
+  useEffect(() => {
+    if (actionDate) {
+      setDeliveryDate(actionDate);
+    } else {
+      setDeliveryDate(null);
+    }
+  }, [orderDetails]);
+
+  const handleDateChange = (date: any | null) => {
+    if (date && isValid(date.$d)) {
+      const formattedDate = format(new Date(date.$d), 'yyyy-MM-dd');
+      setDeliveryDate(formattedDate);
+    }
+  };
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+
   return (
     <Container>
       <Label>Delivery Date</Label>
-      <DatePicker onChange={onChange} style={{ borderRadius: '15px' }} />
+      <DatePicker
+        onChange={handleDateChange}
+        format="DD/MM/YYYY"
+        value={deliveryDate ? dayjs(deliveryDate) : null}
+        style={{ borderRadius: '15px' }}
+        minDate={dayjs(tomorrow)}
+      />
     </Container>
   );
 }
@@ -25,6 +61,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 6px;
   flex: 1;
+  white-space: nowrap;
 `;
 
 export default DeliveryDate;