@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

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

@@ -1,48 +1,63 @@
 import { DatePicker } from 'antd';
 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';
+  useNotificationConfirmedDate,
+  useOrderDetails,
+} from '../../../../store';
+import dayjs, { Dayjs } from 'dayjs';
+import { isValid } from 'date-fns';
 
 function DeliveryDate() {
-  const [orderDetails] = useOrderDetailsConfirmOrder();
-  const [deliveryDate, setDeliveryDate] = useConfirmOrderDate();
+  const [dateOrderDetails] = useOrderDetails();
+  const [confirmedDate, setConfirmedDate] = useNotificationConfirmedDate();
 
-  const actionDate = orderDetails?.action_date
-    ? dayjs(orderDetails?.action_date)
+  const actionDate = dateOrderDetails?.action_date
+    ? dayjs(dateOrderDetails.action_date).format('YYYY-MM-DD')
     : null;
 
   useEffect(() => {
     if (actionDate) {
-      setDeliveryDate(actionDate);
+      setConfirmedDate(_prev => ({
+        previousDate: actionDate,
+        currentDate: actionDate,
+      }));
     } else {
-      setDeliveryDate(null);
+      setConfirmedDate({
+        previousDate: null,
+        currentDate: null,
+      });
     }
-  }, [orderDetails]);
+  }, [actionDate, setConfirmedDate]);
 
-  const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      const formattedDate = format(new Date(date.$d), 'yyyy-MM-dd');
-      setDeliveryDate(formattedDate);
+  const handleDateChange = (date: Dayjs | null) => {
+    if (date && isValid(date.toDate())) {
+      const formattedDate = dayjs(date).format('YYYY-MM-DD');
+
+      setConfirmedDate(prev => ({
+        previousDate: prev?.currentDate || null,
+        currentDate: formattedDate,
+      }));
     }
   };
-  const today = new Date();
-  const tomorrow = new Date(today);
-  tomorrow.setDate(today.getDate() + 1);
-  //confirm popouop
+
   return (
     <Container>
       <Label>Delivery Date</Label>
       <DatePicker
         onChange={handleDateChange}
-        format="DD/MM/YYYY"
-        value={deliveryDate ? dayjs(deliveryDate) : null}
-        style={{ borderRadius: '15px' }}
-        minDate={dayjs(tomorrow)}
+        format="YYYY-MM-DD"
+        value={
+          confirmedDate?.currentDate
+            ? dayjs(confirmedDate.currentDate)
+            : actionDate
+            ? dayjs(actionDate)
+            : null
+        }
+        style={{ borderRadius: '15px', minWidth: '60px' }}
+        disabledDate={current =>
+          current && current.isBefore(dayjs().startOf('day'))
+        }
         allowClear={false}
       />
     </Container>
@@ -53,7 +68,6 @@ const Label = styled.label`
   color: #6a7378;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
-  font-style: normal;
   font-weight: 500;
 `;
 

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

@@ -4,7 +4,7 @@ import { Input } from 'antd';
 import {
   useErrorConfirmOrder,
   useOrderDetailsConfirmOrder,
-} from '../../../store';
+} from '../../../../store';
 
 function EmailAddress() {
   const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import OrderActionsDropdown from '../../../Dropdown';
-import { useOrderStaticData } from '../../../../store';
+import {
+  useOrderDetailsConfirmOrder,
+  useOrderStaticData,
+} from '../../../../store';
 import { capitalize } from '../../../../utils';
-import { useOrderDetailsConfirmOrder } from '../../../store';
 
 function convertTo12HourFormat(time24: any) {
   const [hours, minutes] = time24?.split(':')?.map(Number);

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

@@ -8,7 +8,7 @@ import ContactTypeDropdown from './ContactTypeDropdown';
 import ActionDropdown from './ActionDropdown';
 import DeliveryDate from './DeliveryDate';
 import TimedServiceDropdown from './TimedServiceDropdown';
-import { useOrderDetailsConfirmOrder } from '../../../store';
+import { useOrderDetailsConfirmOrder } from '../../../../store';
 
 function CustomerInformation() {
   const [orderDetails] = useOrderDetailsConfirmOrder();

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

@@ -5,25 +5,26 @@ import CustomerInformation from './customer-info';
 import ProductTable from './tables/ProductTable';
 import NotesTable from './tables/NotesTable';
 import SlotAndInstructions from './slot-and-instructions';
-import { useApiHook, useAxios } from '@bjsdistribution/dms-component-library';
+import { Alert, useAxios } from '@bjsdistribution/dms-component-library';
+import { notification } from 'antd';
 import {
   useCurrentAction,
   useCustomerInfo,
+  useErrorConfirmOrder,
   useGlobalStateHitOrder,
-  useLiveRecalling,
+  useNotificationConfirmedDate,
   useOrderDetails,
+  useOrderDetailsConfirmOrder,
   useOrderId,
   usePrevOrderDetails,
+  useSelectionAction,
+  useStatusDetails,
 } from '../../../store';
-import {
-  useConfirmOrderDate,
-  useErrorConfirmOrder,
-  useOrderDetailsConfirmOrder,
-} from '../../store';
+
 import { ApiResponse } from '../../../types';
-import { notification } from 'antd';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
 import { format } from 'date-fns';
+import { useConfirmOrderDate } from '../../store';
 
 function ConfirmOrder() {
   const [, setCurrentAction] = useCurrentAction();
@@ -36,17 +37,19 @@ function ConfirmOrder() {
   const [customerInfo] = useCustomerInfo();
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
   const [deliveryDate, setDeliveryDate] = useConfirmOrderDate();
-  const [, setRecalling] = useLiveRecalling();
   const [orderId] = useOrderId();
   const [errorState] = useErrorConfirmOrder();
-  // const updateOrder = useUpdateOrder();
   const [, setRecallOrders] = useGlobalStateHitOrder();
+  const [confirmedDate] = useNotificationConfirmedDate();
+  const [selectedAction] = useSelectionAction();
+  const [, setOrderStatus] = useStatusDetails();
 
-  const onClose = () => {
-    setCurrentAction(undefined);
-  };
+  const contactHome = orderDetailsConfirmOrder?.order_recipient?.contact_home;
+  const contactMobile =
+    orderDetailsConfirmOrder?.order_recipient?.contact_mobile;
+  const contactWork = orderDetailsConfirmOrder?.order_recipient?.contact_work;
 
-  //update Order API
+  // update Order API
   const { fetchData: callUpdateOrderAPI } = useAxios<{
     data: ApiResponse[];
   }>({
@@ -54,61 +57,199 @@ function ConfirmOrder() {
     method: 'PUT',
   });
 
+  // send notifications
+  const { fetchData: notificationCall } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/send-comms/?notification_type={Confirm - Accepted} `,
+    method: 'POST',
+  });
+
+  const { fetchData: declineDate } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/decline-date/?date=${confirmedDate?.previousDate}`,
+    method: 'POST',
+  });
+
+  const { fetchData: confirmDeliveryDate } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/confirm-date/?date=${confirmedDate?.currentDate}`,
+    method: 'POST',
+  });
+
+  const { fetchData: sendComs } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/send-comms/?notification_type=Precall`,
+    method: 'POST',
+  });
+
+  const { fetchData: noResponseApi } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/no-response-date/?date=${confirmedDate?.currentDate}`,
+    method: 'POST',
+  });
+
+  const { fetchData: proposeDate } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/propose-date/?date=${confirmedDate?.currentDate}`,
+    method: 'POST',
+  });
+
+  //Order status api
+  const {
+    fetchData: fetchStatusData,
+    data: statusData,
+    loading: statusDataLoading,
+  } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/get_live_status/${orderId}`,
+    method: 'GET',
+  });
+
+  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,
-  });
-
   useEffect(() => {
-    if (response) {
-      //@ts-ignore
-      if (response?.data && response?.code === 200) {
-        notification.success({
-          message: 'Success',
-          // @ts-ignore
-          description: response?.message || 'Order confirmed successfully',
-        });
-        setRecalling(true);
-        setTimeout(() => {
-          setRecalling(false);
-        }, 2000);
-      } else {
-        notification.error({
-          message: 'Error',
-          description:
-            //@ts-ignore
-            response?.error_traceback ||
-            'An error has occurred. Please try again later.',
-        });
-        setCurrentAction(undefined);
-      }
+    if (statusData && statusData?.data) {
+      setOrderStatus(statusData?.data);
     }
-  }, [loadingForConfirm]);
+  }, [statusDataLoading]);
+
+  // THIS HAS BEEN REMOVED AS WE HAVE NEW APIS
+  // const {
+  //   loading: loadingForConfirm,
+  //   data: response,
+  //   setShouldPerformAction: setPerformAction,
+  // } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `orders/${orderId}/confirm-date/?date=${deliveryDate}`,
+  //   method: 'POST',
+  //   performAction: false,
+  // });
 
   function hasOnlyIdKey(obj: any) {
     return Object.keys(obj).length === 1 && obj.hasOwnProperty('id');
   }
 
-  const ConfirmOrder = async () => {
-    setRecalling(false);
+  const executeActions = async () => {
+    switch (selectedAction) {
+      case 'decline_and_propose_new_date':
+        // call propose date api
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        await proposeDate();
+        await fetchStatusData();
+        break;
+
+      case 'decline_and_confirm_new_date':
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        await confirmDeliveryDate();
+        await fetchStatusData();
+        break;
+
+      case 'declined_proposed_date(outstanding)':
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        await fetchStatusData();
+        break;
+
+      case 'no_response_propose_new_date':
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        await noResponseApi();
+        await fetchStatusData();
+        break;
+
+      case 'confirmed':
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        await confirmDeliveryDate();
+        await fetchStatusData();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  const executeSendComs = async () => {
+    switch (selectedAction) {
+      case 'left_message':
+      case 'contact_made':
+      case 'no_contact':
+        // await confirmDeliveryDate();
+        notificationCall();
+        break;
+
+      case 'precall':
+        if (confirmedDate?.previousDate !== null) {
+          await declineDate();
+        }
+        // await confirmDeliveryDate();
+        sendComs();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const confirmOrder = async () => {
     setRecallOrders(false);
 
+    if (
+      selectedAction === 'left_message' ||
+      selectedAction === 'contact_made' ||
+      selectedAction === 'no_contact' ||
+      selectedAction === 'precall'
+    ) {
+      if (
+        contactHome?.length === 0 &&
+        contactMobile?.length === 0 &&
+        contactWork?.length === 0
+      ) {
+        notification.info({
+          message: 'Info',
+          description: 'Please add contact information',
+        });
+        return;
+      }
+      if (
+        confirmedDate?.previousDate === null &&
+        confirmedDate?.currentDate === null
+      ) {
+        notification.info({
+          message: 'Info',
+          description: 'Please add delivery date',
+        });
+        return;
+      }
+    }
+
+    // Execute actions first
+    await executeActions();
+
     const keysToRemovefromOrders = [
       'order_locked',
       'order_communications',
@@ -118,68 +259,115 @@ function ConfirmOrder() {
       '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) {
-      let response = (await callUpdateOrderAPI({
-        payload: [payload],
+      const updatedPayload = {
+        ...payload,
+        action_date: confirmedDate?.currentDate,
+      };
+
+      const response = (await callUpdateOrderAPI({
+        payload: [updatedPayload],
       })) as {
         code: number | null;
         error?: string | null | undefined;
         [key: string]: any;
       };
-      if (response && response?.data?.length > 0) {
-        setOrderDetails(response?.data[0]);
-        setPrevOrderDetails(response?.data[0]);
+
+      await executeSendComs();
+
+      if (response?.data?.length > 0) {
+        const updatedOrder = response?.data[0];
+        setOrderDetails(updatedOrder);
+        setPrevOrderDetails(updatedOrder);
         setRecallOrders(true);
       } else {
         setOrderDetails(prevOrderDetails);
       }
     }
+
     if (orderId && deliveryDate) {
-      //call order update api then call confirm order if required
       const formattedDate = format(new Date(deliveryDate), 'yyyy-MM-dd');
-
       setDeliveryDate(formattedDate);
-      setPerformAction(true);
     }
+
+    setCurrentAction(undefined);
   };
 
+  // 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;
+  //
+  // console.log(orderDetailsSorted, 'orderDetailsSorted');
+  // console.log(prevOrderDetailsSorted, 'prevOrderDetailsSorted');
+  // console.log(isSame, 'isSameisSame');
+  //
+  // 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;
   };
 
+  const disabledButton = confirmedDate?.currentDate === null;
+
   return (
     <OrderActionModal
       headerTitle="Confirm Order"
+      minWidth="28vw"
       showAdditionalInfo
       infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={ConfirmOrder}
+      onSubmit={confirmOrder}
       submitBtnTitle="Save Details"
-      isSubmitDisabled={errorFound()}
+      isSubmitDisabled={errorFound() && disabledButton}
     >
       <ContentContainer>
+        <Alert
+          description=""
+          onClose={() => {}}
+          type="info"
+          title="There is Orders with identical postcodes that are yet to be delivered.View Orders"
+          showOkButton={false}
+          showCloseIcon={false}
+        />
         <Wrapper>
           <CustomerInformation />
           <SlotAndInstructions />

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

@@ -3,7 +3,7 @@ import React from 'react';
 import ConfirmationNotes from './ConfirmationNotes';
 import DeliveryInstructions from './DeliveryInstructions';
 import ContactWith from '../customer-info/ContactWith';
-import { useOrderDetailsConfirmOrder } from '../../../store';
+import { useOrderDetailsConfirmOrder } from '../../../../store';
 
 function SlotAndInstructions() {
   const [orderDetails] = useOrderDetailsConfirmOrder();

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

@@ -1,16 +1,17 @@
-import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  formatUtcToLocal,
+  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 CustomScrollBar from '../../../../../../common/scrollbar';
 import {
   EmptyDataContainer,
   StyledTable,
   StyledTableWrapper,
 } from './ReminderStyles';
+import CustomScrollBar from '../../../../../../common/scrollbar';
+import { Empty, Skeleton } from 'antd';
 
 function NotesTable() {
   const [moduleIds, setModuleIds] = useState<{
@@ -30,8 +31,8 @@ function NotesTable() {
   useEffect(() => {
     if (!apiLoading && fetchedData?.data) {
       const modules = fetchedData?.data
-        .filter((item: any) => item?.name === 'ORDER')
-        .map((item: any) => {
+        ?.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;
@@ -114,10 +115,13 @@ function NotesTable() {
                         {order?.created_by}
                       </div>
                       <div>
-                        {format(
+                        {/* {format(
                           new Date(order?.created_at),
                           "dd/MM/yyyy '@' HH:mm"
-                        )}
+                        )} */}
+                        {`${formatUtcToLocal(order?.created_at).date} @ ${
+                          formatUtcToLocal(order?.created_at).time
+                        }`}
                       </div>
                     </td>
                     <td

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

@@ -50,7 +50,7 @@ function ProductTable() {
             ) : (
               orderProductDetails?.map((order: any) => (
                 <tr key={order.id}>
-                  <td>{order?.order_product_type?.type}</td>
+                  <td>{order?.order_product_type?.type}</td>{' '}
                   <td>{order?.code}</td>
                   <td>{order?.description}</td>
                   <td>{order?.sku}</td>