@bjsdistribution/dms-client-return 0.0.18 → 0.0.20

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

@@ -1,12 +1,53 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
+import {
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
+} from '../../../store';
 
 function EmailAddress() {
+  const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+  const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();
+
+  const orderRecipient = orderDetails?.order_recipient;
+  const [errors, setErrors] = useErrorConfirmOrder();
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    validateInput(val);
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_email: val }
+        : { ...orderRecipient, contact_email: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  const validateInput = (value: string) => {
+    const isValid = emailRegex.test(value);
+    setErrors(prev => ({
+      ...prev,
+      emailError: isValid ? '' : 'Please enter a valid Email Address',
+    }));
+  };
+
   return (
     <Container>
       <Label>Email Address</Label>
-      <Input style={{ borderRadius: '15px' }} />
+      <Input
+        style={{ borderRadius: '15px' }}
+        type="text"
+        value={orderRecipient?.contact_email || ''}
+        onChange={onChange}
+      />
+      {errors.emailError && <ErrorText>{errors.emailError}</ErrorText>}
     </Container>
   );
 }
@@ -24,5 +65,9 @@ const Container = styled.div`
   flex-direction: column;
   gap: 6px;
 `;
-
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
 export default EmailAddress;

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

@@ -1,23 +1,52 @@
 import React from 'react';
 import OrderActionsDropdown from '../../../Dropdown';
+import { useOrderStaticData } from '../../../../store';
+import { capitalize } from '../../../../utils';
+import { useOrderDetailsConfirmOrder } from '../../../store';
+
+function convertTo12HourFormat(time24: any) {
+  const [hours, minutes] = time24?.split(':')?.map(Number);
+  const period = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12; // Convert to 12-hour format
+  return `${hours12}:${minutes?.toString()?.padStart(2, '0')} ${period}`;
+}
 
 function TimedServiceDropdown() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [orderStaticData] = useOrderStaticData();
+  const [orderData, setOrderData] = useOrderDetailsConfirmOrder();
+  const timesServiceId = orderData?.order_services_detail?.timed_service_id;
 
-  const options = [
-    { label: 'small', value: 'small' },
-    { label: 'medium', value: 'medium' },
-    { label: 'large', value: 'large' },
-  ];
+  const timedServicesOptions = orderStaticData?.order_timed_services?.map(
+    (option: any) => {
+      const startTime = convertTo12HourFormat(option?.start_time);
+      const endTime = convertTo12HourFormat(option?.end_time);
+      const label = `${capitalize(
+        option?.type?.replaceAll('_', ' ')
+      )} (${startTime} - ${endTime})`;
+      return {
+        label: label,
+        value: option?.id,
+      };
+    }
+  );
 
+  const onSelect = (event: any) => {
+    const updatedServices = {
+      ...orderData?.order_services_detail!,
+      timed_service_id: +event,
+    };
+    const newData = { ...orderData, order_services_detail: updatedServices };
+    setOrderData(newData);
+  };
   return (
     <OrderActionsDropdown
       label="Timed Service"
       placeholder="Select Timed Service"
-      options={options}
+      options={timedServicesOptions || []}
+      value={timedServicesOptions?.filter(
+        (f: any) => f.value === timesServiceId
+      )}
       onSelect={onSelect}
-      onSearch={onSearch}
     />
   );
 }

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

@@ -8,12 +8,15 @@ import ContactTypeDropdown from './ContactTypeDropdown';
 import ActionDropdown from './ActionDropdown';
 import DeliveryDate from './DeliveryDate';
 import TimedServiceDropdown from './TimedServiceDropdown';
+import { useOrderDetailsConfirmOrder } from '../../../store';
 
 function CustomerInformation() {
+  const [orderDetails] = useOrderDetailsConfirmOrder();
+
   return (
     <Container>
       <Title>Address</Title>
-      <AddressField>34 NORTHFIELD AVENUE, PONTEFRACT, WF9 3TG</AddressField>
+      <AddressField>{orderDetails?.order_recipient?.address}</AddressField>
       <Wrapper>
         <EmailAddress />
         <ContactPhone />

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

@@ -1,28 +1,216 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import styled from 'styled-components';
 import CustomerInformation from './customer-info';
 import ProductTable from './tables/ProductTable';
 import NotesTable from './tables/NotesTable';
 import SlotAndInstructions from './slot-and-instructions';
-import { Alert } from '@bjsdistribution/dms-component-library';
-import { useCurrentAction } from '../../../store';
-// import DocFileUpload from './DocFileUpload';
+import { Alert, useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useLiveRecalling,
+  useOrderDetails,
+  useOrderId,
+  usePrevOrderDetails,
+} from '../../../store';
+import {
+  useConfirmOrderDate,
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
+} from '../../store';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
+import { compareOrderDetailsStates, filterObject } from '../../../utils';
+import useUpdateOrder from '../../../hooks/useUpdateOrder';
+// import { filterObject } from '../../../utils';
 
 function ConfirmOrder() {
   const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
+  const [
+    orderDetailsConfirmOrder,
+    setOrderDetailsConfirmOrder,
+  ] = useOrderDetailsConfirmOrder();
+  const [, setLoading] = useLoading();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+  const [deliveryDate] = useConfirmOrderDate();
+  const [liveRecalling, setRecalling] = useLiveRecalling();
+  const [orderId] = useOrderId();
+  const [errorState] = useErrorConfirmOrder();
+  const updateOrder = useUpdateOrder();
 
   const onClose = () => {
     setCurrentAction(undefined);
   };
+
+  useEffect(() => {
+    const clone = JSON.parse(JSON.stringify(orderDetails));
+    setOrderDetailsConfirmOrder(clone);
+
+    return () => {
+      setOrderDetailsConfirmOrder(clone);
+    };
+  }, []);
+
+  const {
+    loading: loadingForConfirm,
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/confirm-date/?date=${deliveryDate}`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  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);
+    }
+  }, [loading, liveRecalling]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          // @ts-ignore
+          description: response?.message || 'Order confirmed successfully',
+        });
+        setShouldPerformAction(true);
+        setRecalling(true);
+        setTimeout(() => {
+          setRecalling(false);
+        }, 2000);
+      } else {
+        setShouldPerformAction(false);
+
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [loadingForConfirm]);
+
+  function hasOnlyIdKey(obj: any) {
+    return Object.keys(obj).length === 1 && obj.hasOwnProperty('id');
+  }
+
+  const ConfirmOrder = async () => {
+    setRecalling(false);
+
+    const keysToRemovefromOrders = [
+      'order_locked',
+      'order_communications',
+      'updated_at',
+      'updated_by',
+      'stock_alias',
+      'order_delivery_declined_dates',
+      'order_eta_updates',
+    ];
+    const filteredOrderDetails = filterObject(
+      orderDetailsConfirmOrder,
+      keysToRemovefromOrders
+    );
+
+    const filteredPrevOrderDetails = filterObject(
+      prevOrderDetails,
+      keysToRemovefromOrders
+    );
+
+    const payload = compareOrderDetailsStates(
+      filteredPrevOrderDetails,
+      filteredOrderDetails
+    );
+
+    const notUpdateOrder = hasOnlyIdKey(payload);
+    if (!notUpdateOrder) {
+      const response = await updateOrder([payload]);
+      if (response && response?.data?.length > 0) {
+        setOrderDetails(response?.data[0]);
+        setPrevOrderDetails(response?.data[0]);
+      } else {
+        setOrderDetails(prevOrderDetails);
+      }
+    }
+    if (orderId && deliveryDate) {
+      //call order update api then call confirm order if required
+      setPerformAction(true);
+    }
+  };
+
+  // const isDifferent = () => {
+  //   const keysToRemovefromOrders = [
+  //     'order_locked',
+  //     'order_communications',
+  //     'updated_at',
+  //     'updated_by',
+  //     'order_services',
+  //   ];
+  //   const filteredOrderDetails = filterObject(
+  //     orderDetailsConfirmOrder,
+  //     keysToRemovefromOrders
+  //   );
+  //   const filteredPrevOrderDetails = filterObject(
+  //     prevOrderDetails,
+  //     keysToRemovefromOrders
+  //   );
+
+  //   const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
+  //   const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
+  //   const isSame = orderDetailsSorted === prevOrderDetailsSorted;
+  //   // newOrderServicesSorted === prevOrderServicesSorted;
+  //   return !isSame;
+  // };
+
+  const errorFound = () => {
+    const isError =
+      errorState.emailError.length > 0 ||
+      errorState.homeContactError.length > 0 ||
+      errorState.workContactError.length > 0 ||
+      errorState.mobileError.length > 0;
+
+    return isError;
+  };
+
   return (
     <OrderActionModal
       headerTitle="Confirm Order"
       showAdditionalInfo
-      infoText="632801 (OFS)"
+      infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={ConfirmOrder}
       submitBtnTitle="Save Details"
+      isSubmitDisabled={errorFound()}
     >
       <ContentContainer>
         <Alert
@@ -31,6 +219,7 @@ function ConfirmOrder() {
           type="info"
           title="There is Orders with identical postcodes that are yet to be delivered.View Orders"
           showOkButton={false}
+          showCloseIcon={false}
         />
         <Wrapper>
           <CustomerInformation />
@@ -61,6 +250,7 @@ const ContentContainer = styled.div`
   min-height: 500px;
   overflow-x: hidden;
   max-height: 500px;
+  scrollbar-width: thin;
 `;
 
 export default ConfirmOrder;

package/src/components/order-view/order-actions/actions/confirm-order/slot-and-instructions/index.tsx

@@ -2,14 +2,18 @@ import styled from 'styled-components';
 import React from 'react';
 import ConfirmationNotes from './ConfirmationNotes';
 import DeliveryInstructions from './DeliveryInstructions';
+import ContactWith from '../customer-info/ContactWith';
+import { useOrderDetailsConfirmOrder } from '../../../store';
 
 function SlotAndInstructions() {
+  const [orderDetails] = useOrderDetailsConfirmOrder();
   return (
     <Container>
       <Slot>
         <Title>Slot</Title>
-        <Value>07:00-10:00</Value>
+        <Value>{orderDetails?.order_routes?.slot}</Value>
       </Slot>
+      <ContactWith />
       <DeliveryInstructions />
       <ConfirmationNotes />
     </Container>

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -1,29 +1,130 @@
-import { AntTable } from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { useOrderId } from '../../../../store';
+
+import { Empty, Skeleton } from 'antd';
+import { format } from 'date-fns';
+import {
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from './ReminderStyles';
 
 function NotesTable() {
-  const data = [
-    {
-      created: 'optimizer @ BJS via API',
-      notes: 'DropTime Updated: 12 to 10',
-    },
-    {
-      created: 'process_lgv_order_create',
-      notes:
-        'Latitude and Longitude have been updated. New lat,long:51.284781,-0.426978',
-    },
-  ];
-
-  const columns = [
-    { key: 'created', title: 'Created', isSelect: false },
-    { key: 'notes', title: 'Notes', isSelect: false },
-  ];
+  const [moduleIds, setModuleIds] = useState<{
+    id?: string;
+    child_id?: string;
+  } | null>(null);
+  const [orderId] = useOrderId();
+  const [notes, setNotes] = useState<any>();
+  const [loading, setNoteLoadingStore] = useState(false);
+
+  // Fetch module IDs
+  const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
+    endpoint: 'audit_logs/modules/',
+    method: 'GET',
+    pagination: { page: 1, per_page: 100 },
+  });
+  useEffect(() => {
+    if (!apiLoading && fetchedData?.data) {
+      const modules = fetchedData?.data
+        .filter((item: any) => item?.name === 'ORDER')
+        .map((item: any) => {
+          const orderProductId = item?.static_child_mappings.find(
+            (i: any) => i?.child_module?.name === 'ORDER-PRODUCT'
+          )?.child_module?.id;
+
+          return {
+            id: item?.id,
+            child_id: orderProductId || null,
+          };
+        });
+      setModuleIds(modules[0] || null);
+    }
+  }, [apiLoading, fetchedData]);
+
+  // Fetch Notes Data
+  const {
+    data: NotesData,
+    loading: NotesLoading,
+    setShouldPerformAction,
+  } = useApiHook<{ data: any }>({
+    endpoint: `audit_logs/?module_id=${moduleIds?.id}&module_object_id=${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+  useEffect(() => {
+    setNoteLoadingStore(true);
+    if (moduleIds) {
+      setShouldPerformAction(true);
+    }
+    if (!NotesLoading && NotesData?.data) {
+      const OrdersData = NotesData?.data[0]?.ORDER || [];
+      const OrderNotesData = NotesData?.data[1]?.['ORDER-PRODUCT'] || [];
+      const allNotes = [...OrdersData, ...OrderNotesData];
+      setNotes(allNotes);
+      setNoteLoadingStore(NotesLoading);
+    }
+  }, [moduleIds, NotesLoading]);
+
+  if (notes?.length === 0) {
+    return null;
+  }
 
   return (
     <Container>
-      <Title>Notes (2)</Title>
-      <AntTable columns={columns} data={data} />
+      <Title>Notes ({notes?.length})</Title>
+      <StyledTableWrapper>
+        <StyledTable className="scrollClass">
+          <thead>
+            <tr>
+              <th>Created</th>
+              <th>Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={6}></td>
+              </tr>
+            ) : notes?.length === 0 ? (
+              <tr>
+                <td className="emptyTd" colSpan={7}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              notes?.map((order: any) => (
+                <tr key={order.id}>
+                  <td>
+                    <div
+                      style={{
+                        fontWeight: 'bold',
+                        textTransform: 'capitalize',
+                      }}
+                    >
+                      {order?.created_by}
+                    </div>
+                    <div>
+                      {format(
+                        new Date(order?.created_at),
+                        "dd/MM/yyyy '@' HH:mm"
+                      )}
+                    </div>
+                  </td>
+                  <td>{order?.description}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
     </Container>
   );
 }

package/src/components/order-view/order-actions/actions/confirm-order/tables/ProductTable.tsx

@@ -1,43 +1,65 @@
-import { AntTable } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
+import { useProductDetails } from '../../../../store';
+
+import { Empty, Skeleton } from 'antd';
+import { useLoading } from '../../../../../order-daily-overview/store/store';
+import {
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from './ReminderStyles';
 
 function ProductTable() {
-  const data = [
-    {
-      action: 'option1',
-      code: 'FFLMW-B1',
-      description:
-        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      parts: '1',
-    },
-    {
-      action: 'option2',
-      code: 'FFLMW-B1',
-      description:
-        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      parts: '1',
-    },
-    {
-      action: 'option3',
-      code: 'FFLMW-B1',
-      description:
-        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
-      parts: '2',
-    },
-  ];
+  const [orderProductDetails] = useProductDetails();
+  const [loading] = useLoading();
 
-  const columns = [
-    { key: 'action', title: 'Action', isSelect: false },
-    { key: 'code', title: 'Code', isSelect: false },
-    { key: 'description', title: 'Description', isSelect: false },
-    { key: 'parts', title: 'Parts', isSelect: false },
-  ];
+  if (!orderProductDetails) {
+    return null;
+  }
 
   return (
     <Container>
-      <Title>Products(1)</Title>
-      <AntTable columns={columns} data={data} />
+      <Title>Products ({orderProductDetails?.length})</Title>
+      <StyledTableWrapper>
+        <StyledTable className="scrollClass">
+          <thead>
+            <tr>
+              <th>Action</th>
+              <th>Code</th>
+              <th>Description</th>
+              <th>Parts</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={6}></td>
+              </tr>
+            ) : orderProductDetails?.length === 0 ? (
+              <tr>
+                <td className="emptyTd" colSpan={7}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              orderProductDetails?.map((order: any) => (
+                <tr key={order.id}>
+                  <td>{order?.order_product_type?.type}</td>
+                  <td>{order?.code}</td>
+                  <td>{order?.description}</td>
+                  <td>{order?.sku}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
     </Container>
   );
 }