@bjsdistribution/dms-client-return 0.0.81 → 0.0.82

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

@@ -84,6 +84,12 @@ function CancelOrder() {
       //@ts-ignore
       if (response?.data && response?.code === 200) {
         setShouldPerformAction(true);
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
       } else {
         // alert(response?.error_traceback);
         notification.error({
@@ -132,6 +138,7 @@ function CancelOrder() {
         <Top>
           <TopLeft>
             <OrderActionsDropdown
+              required
               label="Cancelation Reason"
               placeholder="Select Cancelation Reason"
               options={cancelReasonOptions || []}
@@ -145,8 +152,11 @@ function CancelOrder() {
           </TopLeft>
           <TopRight>
             <Container>
-              <Label>Cancelation Note</Label>
-              <TextArea
+              <div style={{ display: 'flex', flexDirection: 'row' }}>
+                <Label>Cancelation Note</Label>{' '}
+                <RequiredAsterisk>*</RequiredAsterisk>
+              </div>
+              <TArea
                 rows={5}
                 onChange={onChangeNotes}
                 value={cancelNotes}
@@ -162,6 +172,15 @@ function CancelOrder() {
     </OrderActionModal>
   );
 }
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+  font-size: x-small;
+`;
+
+const TArea = styled(TextArea)`
+  resize: none;
+`;
 
 const Label = styled.label`
   color: #6a7378;

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

@@ -5,6 +5,7 @@ import { useOrderId } from '../../../../store';
 
 import { Empty, Skeleton } from 'antd';
 import { format } from 'date-fns';
+import CustomScrollBar from '../../../../../../common/scrollbar';
 import {
   EmptyDataContainer,
   StyledTable,
@@ -56,7 +57,7 @@ function NotesTable() {
   });
   useEffect(() => {
     setNoteLoadingStore(true);
-    if (moduleIds && orderId) {
+    if (moduleIds) {
       setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
@@ -76,56 +77,58 @@ function NotesTable() {
     <Container>
       <Title>Notes ({notes?.length})</Title>
       <StyledTableWrapper>
-        <StyledTable className="scrollClass">
-          <thead>
-            <tr>
-              <th>Created</th>
-              <th>Notes</th>
-            </tr>
-          </thead>
-          <tbody>
-            {loading ? (
+        <CustomScrollBar>
+          <StyledTable className="scrollClass">
+            <thead>
               <tr>
-                <td colSpan={6}>
-                  <Skeleton active />
-                </td>
-                <td colSpan={6}></td>
+                <th>Created</th>
+                <th>Notes</th>
               </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>
+            </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>
-                  <td
-                    dangerouslySetInnerHTML={{ __html: order?.description }}
-                  ></td>
                 </tr>
-              ))
-            )}
-          </tbody>
-        </StyledTable>
+              ) : (
+                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
+                      dangerouslySetInnerHTML={{ __html: order?.description }}
+                    ></td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </StyledTable>
+        </CustomScrollBar>
       </StyledTableWrapper>
     </Container>
   );
@@ -147,7 +150,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 8px;
   > div {
-    min-height: 165px;
+    min-height: 350px;
   }
 `;
 

package/src/components/order-view/order-actions/actions/split-order/SplitOrderTable.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useProductDetails } from '../../../store';
 
 import { Empty, Skeleton } from 'antd';
-import { useLoading } from '../../../../order-daily-overview/store/store';
 import { Checkbox } from '@bjsdistribution/dms-component-library';
+import { useLoading } from '../../../../order-daily-overview/store/store';
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
 import {
   EmptyDataContainer,
@@ -18,13 +18,14 @@ function SplitOrderTable() {
   const [selectAll, setSelectAll] = useState(false);
   const [payload, setPayload] = useSplitOrderPayload();
 
+  // Handle Select All
   const handleSelectAll = (e: any) => {
-    setSelectAll(e.target.checked);
-    if (e.target.checked) {
+    const isChecked = e.target.checked;
+    setSelectAll(isChecked);
+
+    if (isChecked) {
       setSelectedSplit(
-        orderProductDetails.map((order: any) => ({
-          id: order.id,
-        }))
+        orderProductDetails?.map((order: any) => ({ id: order.id }))
       );
     } else {
       setSelectedSplit([]);
@@ -32,16 +33,16 @@ function SplitOrderTable() {
   };
 
   const handleSelectedSplitList = (id: any) => {
-    setSelectedSplit((prevSelectedOrder: any) => {
-      const isSelected = prevSelectedOrder?.some(
-        (order: any) => order.id === id
-      );
+    setSelectedSplit(prevSelectedOrder => {
+      const isSelected = prevSelectedOrder?.some(order => order.id === id);
+
+      const updatedSelection = isSelected
+        ? prevSelectedOrder?.filter(order => order.id !== id)
+        : [...prevSelectedOrder, { id }];
+
+      setSelectAll(updatedSelection?.length === orderProductDetails?.length);
 
-      if (isSelected) {
-        return prevSelectedOrder?.filter((order: any) => order.id !== id);
-      } else {
-        return [...prevSelectedOrder, { id: id }];
-      }
+      return updatedSelection;
     });
   };
 
@@ -52,7 +53,7 @@ function SplitOrderTable() {
       products: selectedSplits?.map(order => order.id),
       force: true,
     });
-  }, [orderProductDetails, selectedSplits]);
+  }, [selectedSplits, setPayload]);
 
   return (
     <StyledTableWrapper id="tableScrolling">
@@ -60,7 +61,14 @@ function SplitOrderTable() {
         <thead>
           <tr>
             <th>
-              <Checkbox checked={selectAll} onChange={handleSelectAll} />
+              <Checkbox
+                checked={selectAll}
+                onChange={handleSelectAll}
+                disabled={
+                  orderProductDetails?.length === 0 ||
+                  orderProductDetails?.length === null
+                }
+              />
             </th>
             <th>Type</th>
             <th>Code</th>
@@ -82,17 +90,18 @@ function SplitOrderTable() {
             <tr>
               <td className="emptyTd" colSpan={7}>
                 <EmptyDataContainer>
-                  <Empty />
+                  <Empty description="No Data Found" />
                 </EmptyDataContainer>
               </td>
             </tr>
           ) : (
+            orderProductDetails?.length > 0 &&
             orderProductDetails?.map((order: any) => (
               <tr key={order.id}>
                 <td>
                   <Checkbox
                     checked={selectedSplits?.some(
-                      (selectedInvoice: any) => selectedInvoice?.id === order.id
+                      selectedOrder => selectedOrder.id === order.id
                     )}
                     onChange={() => handleSelectedSplitList(order.id)}
                   />

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

@@ -7,6 +7,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../../types';
 
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
+import { notification } from 'antd';
 
 function SplitOrder() {
   const [, setCurrentAction] = useCurrentAction();
@@ -21,7 +22,10 @@ function SplitOrder() {
     setCurrentAction(undefined);
   };
 
-  const { setShouldPerformAction: setPerformAction } = useApiHook<{
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `orders/split_order/${orderId}`,
@@ -33,8 +37,26 @@ function SplitOrder() {
   const onSubmitSplitOrder = () => {
     if (orderId) {
       setPerformAction(true);
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
+      } else {
+        // alert(response?.error_traceback);
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.message ||
+            'An error has occurred. Please try again later.',
+        });
+      }
+      setSelectedSplit([]);
     }
-    setSelectedSplit([]);
   };
 
   const isSubmitDisabled = () => {

package/src/components/order-view/order-actions/actions/uncancel-order/UncancelOrder.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react';
+import {
+  AntSelect,
+  TextArea,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+  useOrderId,
+  useOrderStaticData,
+  usePrevOrderDetails,
+} from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { HoldContentContainer, HoldRow, Label, SplitText } from '../modalstyle';
+import { ApiResponse, OrdersType } from '../../../types';
+import styled from 'styled-components';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
+
+function UncancelOrder() {
+  const [orderId] = useOrderId();
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  const [orderStaticData] = useOrderStaticData();
+  const [unCancelReason, setUncancelReason] = useState<string | undefined>(
+    undefined
+  );
+  const [unCancelNotes, setUncancelNotes] = useState<string>('');
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  const unCancelReasonOptions = orderStaticData?.uncancel_reasons?.map(
+    (item: any) => {
+      return {
+        label: item?.reason,
+        value: item?.reason,
+      };
+    }
+  );
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/uncancel/?uncancelled_reason=${unCancelReason}&uncancelled_notes=${unCancelNotes}`,
+    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]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        setShouldPerformAction(true);
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response]);
+
+  const onChange = (event: any) => {
+    setUncancelNotes(event.target.value);
+  };
+
+  const onChangeUnCancelReason = (value: string) => {
+    setUncancelReason(value);
+  };
+
+  const onSubmit = () => {
+    if (orderId) {
+      setPerformAction(true);
+    }
+  };
+
+  const showSubmitBtn =
+    unCancelReason !== undefined && unCancelNotes?.length > 0;
+
+  return (
+    <OrderActionModal
+      headerTitle="Un-Cancel order"
+      onCloseHeader={onClose}
+      onSubmit={onSubmit}
+      showAdditionalInfo
+      infoText={infoText}
+      submitBtnTitle="Save Details"
+      isSubmitDisabled={!showSubmitBtn}
+    >
+      <HoldContentContainer>
+        <SplitText>
+          <HoldRow>
+            <Label>Un-cancel Reason</Label>
+            <AntSelect
+              options={unCancelReasonOptions || []}
+              placeholder="Select un-cancel Reason"
+              onChange={onChangeUnCancelReason}
+              disabled={false}
+              style={{ width: '346px', height: 40 }}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+              defaultValue={unCancelReason}
+            />
+          </HoldRow>
+          <HoldRow>
+            <Label>Un-cancel Note</Label>
+            <CustomTextArea rows={5} onChange={onChange} />
+          </HoldRow>
+        </SplitText>
+      </HoldContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const CustomTextArea = styled(TextArea)`
+  width: 346px;
+`;
+
+export default UncancelOrder;

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

@@ -18,6 +18,7 @@ import TaskReminderModal from './actions/create-task-reminder';
 import OrderLock from './actions/order-lock';
 import ViewFlag from '../flags-action-modal/index';
 import ReleaseOrder from './actions/release-order/ReleaseOrder';
+import UncancelOrder from './actions/uncancel-order/UncancelOrder';
 
 function OrderActions() {
   const [currentAction] = useCurrentAction();
@@ -36,8 +37,8 @@ function OrderActions() {
         return <LogServiceRefusal />;
       case 'cancel-order':
         return <CancelOrder />;
-      // case 'uncancel-order':
-      //   return <UncancelOrder />;
+      case 'uncancel-order':
+        return <UncancelOrder />;
       case 'confirm-order':
         return <ConfirmOrder />;
       case 'send-sms':

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

@@ -9,6 +9,8 @@ import {
   errorAtom,
   useCustomerInfo,
   useUpdateApiCall,
+  useLiveRecalling,
+  useGlobalStateHitAuditLog,
 } from '../../../store';
 import useUpdateOrder from '../../../hooks/useUpdateOrder';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
@@ -21,6 +23,8 @@ function OrderDetailsFooter() {
   const updateOrder = useUpdateOrder();
   const [errorState] = useAtom(errorAtom);
   const [, setCallApi] = useUpdateApiCall(); //single detail
+  const [, setRecalling] = useLiveRecalling();
+  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
   const errorFound = () => {
     const isError =
       errorState?.w3wError.length > 0 ||
@@ -84,14 +88,13 @@ function OrderDetailsFooter() {
         recipient_name: response?.data[0]?.order_recipient?.recipient_name,
         postcode: response?.data[0]?.order_recipient?.postcode,
       });
-      // setNoteLoadingStore(true);
-      // setTimeout(() => {
-      // setLogsCallAPi(true);
+      setRecalling(true);
+      setTimeout(() => {
+        setRecalling(false);
+        setRecallAuditLog(false);
+      }, 1000);
       setCallApi(true);
-      // }, 2000);
     } else {
-      // setLogsCallAPi(false);
-      // setCallApi(false);
       setOrderDetails(prevOrderDetails);
     }
   };