@bjsdistribution/dms-client-return 0.0.81 → 0.0.83

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-actions/store.ts

@@ -107,7 +107,7 @@ const resolvedModalPayload = atom<SingleResolvedPayload>(resolvedValue);
 
 const routeDetails = atom<any>({});
 
-const orderNotifyCount = atom<number>(2);
+const orderNotifyCount = atom<number>(0);
 
 //errors
 const errorMessage = atom<any>({
@@ -178,7 +178,6 @@ export function useSelectedSplit() {
   return useAtom(selectedSplitList);
 }
 
-
 export function useLoadingText() {
   return useAtom(loadingText);
 }

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);
     }
   };

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -10,7 +10,8 @@ import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import Loader from '../../../order-daily-overview/header/loader/Loader';
 import { notification } from 'antd';
-import { useSelectedProducts } from '../../../store';
+import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
+import styled from 'styled-components';
 
 const ReturnProductTable = () => {
   const [selectedProducts, setSelectedProducts] = useSelectedProducts();
@@ -18,6 +19,7 @@ const ReturnProductTable = () => {
   const [productData, setProductData] = useProductDetails();
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
+  const [returnOrderData] = useNewReturnOrderData();
 
   const handleActionClick = (id: number) => {
     setSelectedRowId(id);
@@ -93,7 +95,8 @@ const ReturnProductTable = () => {
     return matchedReason ? matchedReason.label : 'N/A';
   };
 
-  const disableCheckbox = productData?.length == 0;
+  const disableCheckbox =
+    productData?.length == 0 || returnOrderData?.length == 0;
 
   return (
     <div>
@@ -103,7 +106,7 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailproductsCheckbox">
-                <Checkbox
+                <StyleCheckbox
                   disabled={disableCheckbox}
                   checked={selectAll}
                   onChange={handleSelectAll}
@@ -123,9 +126,10 @@ const ReturnProductTable = () => {
               productData?.map((product: any) => (
                 <tr key={product.id}>
                   <td>
-                    <Checkbox
+                    <StyleCheckbox
                       checked={selectedProducts?.includes(product?.id)}
                       onChange={() => handleSelectProduct(product?.id)}
+                      disabled={disableCheckbox}
                     />
                   </td>
                   <td>{product?.orders_products_stock?.location || 'N/A'}</td>
@@ -164,4 +168,12 @@ const ReturnProductTable = () => {
   );
 };
 
+const StyleCheckbox = styled(Checkbox)`
+  &:disabled {
+    background-color: gray;
+    cursor: not-allowed;
+    opacity: -0.4;
+  }
+`;
+
 export default ReturnProductTable;

package/src/components/order-view/view-reminder/reminder-styles.tsx

@@ -10,6 +10,7 @@ export const ReferenceContainer = styled.div`
   border-radius: 40px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
+  margin-top: 15px;
 `;
 export const InnerContainer = styled.div`
   display: flex;

package/src/components/store.ts

@@ -76,6 +76,8 @@ const locationOptions = atom<any[]>([]);
 
 const selectedProductsMove = atom<any>([]);
 
+const newReturnOrderData = atom<any>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -197,6 +199,10 @@ export function useSelectedData() {
   return useAtom(selectedAssignee);
 }
 
+export function useNewReturnOrderData() {
+  return useAtom(newReturnOrderData);
+}
+
 export {
   useAtom,
   useFilter,
@@ -226,5 +232,5 @@ export {
   useActionTypeOptions,
   useLocationOptions,
   useSelectedProducts,
-  useVisibilityData
+  useVisibilityData,
 };