@bjsdistribution/dms-client-return 0.0.18 → 0.0.20

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -7,6 +7,8 @@ import {
   selectedTabKeyAtom,
   useCreateOrderProducts,
   useDeleteProdsID,
+  usefetchAgain,
+  // usefetchAgain,
   useOrderId,
   useProductDetails,
   useRecieveOrderProducts,
@@ -23,13 +25,14 @@ import { ApiResponse } from '../types';
 import CreateReturnModal from './CreateReturnModal';
 import {
   useFinalPayload,
-  useGroupedPayload,
+  // useGroupedPayload,
   useNewReturnPayload,
   usePostLoading,
   useSelectAll,
   useSelectedConfirmLoc,
   useSelectedOrders,
 } from '../../store';
+import { notification } from 'antd';
 
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
@@ -42,14 +45,14 @@ const ModalManager = () => {
   const [selectedProductId] = useAtom(letselectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
-  const [newGrouped, setNewGrouped] = useFinalPayload();
+  const [newGrouped] = useFinalPayload();
   const [, SetPostLoading] = usePostLoading();
   const [, setSelectedReturnOrder] = useSelectedOrders();
-  const [, setCheck] = useSelectedConfirmLoc();
+  const [forDisabledCheck, setCheck] = useSelectedConfirmLoc();
   const [, setNewPayload] = useNewReturnPayload();
-  const [, setGrouped] = useGroupedPayload();
+  // const [, setGrouped] = useGroupedPayload();
   const [, setSelectAll] = useSelectAll();
-  // const [forCheck, setStateCheck] = useState(false);
+  const [, setCallForFetch] = usefetchAgain();
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -66,113 +69,6 @@ const ModalManager = () => {
     setIsFormValid(validateForm());
   }, [selectedRows]);
 
-  // const payloads: DeleteProds[] = selectedRows?.map(row => ({
-  //   id: row.id,
-  //   order_id: row.order_id,
-  // }));
-
-  // const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
-  //   data: ApiResponse[];
-  // }>({
-  //   endpoint: `order/order_products/delete/`,
-  //   method: 'DELETE',
-  //   body: payloads,
-  //   performAction: false,
-  // });
-
-  // Effect to handle API response
-  // useEffect(() => {
-  //   if (isresponse && isresponse?.data) {
-  //     handleRemoveRow();
-  //     dispatch({ type: 'close' });
-  //   }
-  // }, [isresponse]);
-  // const onDeleteProducts = () => {
-  //   if (isFormValid) {
-  //     setaction(true);
-  //   } else {
-  //     console.log('Please fill in all required fields before proceeding.');
-  //   }
-  // };
-
-  // const handleRemoveRow = () => {
-  //   if (selectedRows.length > 0) {
-  //     setProductData((prevProductData: any) =>
-  //       prevProductData.filter(
-  //         (item: any) => !selectedRows.some(row => row.id === item.id)
-  //       )
-  //     );
-  //     setSelectedRows([]);
-  //   }
-  // };
-
-  // API block for creating product order
-  // const {
-  //   data: response,
-  //   setShouldPerformAction: setOrderAction,
-  // } = useApiHook<{
-  //   data: ApiResponse[];
-  // }>({
-  //   endpoint: `order/order_products/create/`,
-  //   method: 'POST',
-  //   body: [orderProduct],
-  //   performAction: false,
-  // });
-
-  // const validateAddForm = () => {
-  //   if (!Array.isArray(orderProduct)) return false;
-
-  //   return orderProduct.every(
-  //     (product: any) =>
-  //       product.code !== '' &&
-  //       product.description !== '' &&
-  //       product.weight !== 0 &&
-  //       product.cube !== 0 &&
-  //       product.order_product_type_id !== 0 &&
-  //       product.sku !== ''
-  //   );
-  // };
-
-  // useEffect(() => {
-  //   setAddIsFormValid(validateAddForm());
-  // }, [orderProduct]);
-
-  // const onAddOrderProduct = () => {
-  //   if (isAddFormValid) {
-  //     setOrderProduct((prev: any) =>
-  //       prev.map((product: any) => ({
-  //         ...product,
-  //         order_id: orderId,
-  //       }))
-  //     );
-  //     setOrderAction(true);
-  //   } else {
-  //     console.log('Please fill in all required fields before proceeding.');
-  //   }
-  // };
-
-  // useEffect(() => {
-  //   if (response && response?.data) {
-  //     dispatch({ type: 'close' });
-  //   }
-  // }, [response]);
-
-  // const [isAddFormValid, setAddIsFormValid] = useState(false);
-
-  // const AddMore = () => {
-  //   setOrderProduct((prevProducts: any) => [
-  //     ...prevProducts,
-  //     {
-  //       code: '',
-  //       description: '',
-  //       sku: '',
-  //       weight: '',
-  //       cube: '',
-  //       order_product_type_id: '',
-  //     },
-  //   ]);
-  // };
-
   // api block for the create product order
   const {
     data: actionResponse,
@@ -205,15 +101,6 @@ const ModalManager = () => {
     performAction: false,
   });
 
-  // const onUnrecieveProductOrder = () => {
-  //   setUnRecieve((prev: any) => ({
-  //     ...prev,
-  //     order_id: orderId,
-  //     id: selectedProductId,
-  //   }));
-  //   setUnrecieveaction(true);
-  // };
-
   const onSubmit = () => {
     if (selectedTab === '1') {
       setUpdateOrderProduct((prev: any) => ({
@@ -242,12 +129,13 @@ const ModalManager = () => {
     }
   }, [updateResponse]);
 
-  //Confirm return popup
   // Confirm return popup
   const {
     data: response,
     setShouldPerformAction,
     loading: confirmLoading,
+    error: apiError,
+    setError,
   } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -256,36 +144,78 @@ const ModalManager = () => {
     body: newGrouped,
     performAction: false,
   });
-
-  useEffect(() => {
-    SetPostLoading(confirmLoading);
-  }, [confirmLoading]);
-
-  console.log(response, 'response');
-  console.log(newGrouped, 'newGrouped');
+  console.log(response, 'data'),
+    useEffect(() => {
+      SetPostLoading(confirmLoading);
+    }, [confirmLoading]);
 
   const handleConfirmReturn = () => {
-    setShouldPerformAction(false);
-
-    if (newGrouped?.length > 0) {
+    // setStateCheck(!forCheck);
+    if (newGrouped.length > 0) {
       setShouldPerformAction(true);
-    } else {
-      setShouldPerformAction(false);
+      setCallForFetch(true);
     }
-
     dispatch({ type: 'close' });
   };
 
+  // useEffect(() => {
+  //   console.log(error, 'error');
+  //   //@ts-ignore
+  //   if (!confirmLoading) {
+  //     // if (error && error.errorStatus !== 200) {
+  //     //   console.log(error, 'errorINsodeofIFFFFFF');
+  //     //   notification.error({
+  //     //     message: error.errorStatus || 'Error',
+  //     //     description: error.errorMessage || 'Something went wrong',
+  //     //   });
+  //     //   setError(null);
+  //     // }
+
+  //     //@ts-ignore
+  //     if (error === null && response && response?.code === 200) {
+  //       notification.success({
+  //         message: 'Success',
+  //         // @ts-ignore
+  //         description: `${response?.message}`,
+  //       });
+  //       dispatch({ type: 'close' });
+  //       setSelectedReturnOrder([]);
+  //       setCheck([]);
+  //       setNewPayload([]);
+  //       setSelectAll(false);
+  //     }
+  //   }
+  // }, [confirmLoading]); //forCheck
+
   useEffect(() => {
-    if (response && !response) {
+    // @ts-ignore
+    if (apiError && apiError?.code !== 200) {
+      dispatch({ type: 'close' });
+      // setSelectedReturnOrder([]);
+      // setCheck([]);
+      // setNewPayload([]);
+      // setShouldPerformAction(false);
+      // setSelectAll(false);
+      notification.error({
+        message: 'Failure',
+        // @ts-ignore
+        description: `Failed`,
+      });
+      setError(null);
+      // @ts-ignore
+    } else if (response?.code === 200) {
+      notification.success({
+        message: 'Success',
+        // @ts-ignore
+        description: `${response?.message}`,
+      });
       dispatch({ type: 'close' });
-      setNewGrouped([]);
       setSelectedReturnOrder([]);
       setCheck([]);
       setNewPayload([]);
-      setGrouped([]);
       setShouldPerformAction(false);
       setSelectAll(false);
+      setError(null);
     }
   }, [response]);
 
@@ -306,7 +236,7 @@ const ModalManager = () => {
                 btnStyle: 'rounded',
                 onClick: handleConfirmReturn,
                 type: 'button',
-                // disabled: forDisabledCheck.length === 0,
+                disabled: forDisabledCheck.length === 0,
               },
             ],
 
@@ -317,63 +247,6 @@ const ModalManager = () => {
           classNameAdd={'globalPopup'}
         />
       )}
-
-      {/* {popupName?.state === 'deleteProduct' && (
-        <AntModal
-          openStatus={popupName?.state === 'deleteProduct'}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'Delete Product(s) From Order',
-            subHeading: 'TOM LEWIS, CW11 4ZP',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: 'CONFIRM DELETE',
-                type: 'button',
-                btnStyle: 'rounded',
-                onClick: onDeleteProducts,
-                disabled: !isFormValid,
-              },
-            ],
-            btnAlign: 'justifyEnd',
-          }}
-          BodyComponent={DeleteProduct}
-          width={1104}
-          classNameAdd={'globalPopup'}
-        />
-      )} */}
-
-      {/* {popupName?.state === 'addProduct' && (
-        <AntModal
-          openStatus={popupName?.state === 'addProduct'}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'Add Product(s) to Order',
-            subHeading: 'Full Stock Control',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: 'Add More Product',
-                btnStyle: 'normalLink',
-                icon: 'addIcon',
-                onClick: AddMore,
-              },
-              {
-                name: 'Save Details',
-                btnStyle: 'rounded',
-                onClick: onAddOrderProduct,
-                disabled: !isAddFormValid,
-              },
-            ],
-            btnAlign: 'justifySpaceBetween',
-          }}
-          BodyComponent={AddProduct}
-          width={1104}
-          classNameAdd={'globalPopup'}
-        />
-      )} */}
       {popupName?.state === 'qclog' && (
         <AntModal
           openStatus={popupName?.state === 'qclog'}

package/src/components/order-view/notes/AddNote.tsx

@@ -9,16 +9,10 @@ import styled from 'styled-components';
 import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 import { getCookie } from '../utils';
 import { useLocation } from 'react-router-dom';
-import {
-  useCallAPi,
-  usemoduleIds,
-  UseNotesLoading,
-  useOrderId,
-} from '../store';
+import { usemoduleIds, UseNotesLoading, useOrderId } from '../store';
 import { notification } from 'antd';
 
 function AddNote() {
-  const [, setNoteLoadingStore] = UseNotesLoading();
   const [noteText, setNoteText] = useState('');
   const [orderId] = useOrderId();
 
@@ -26,10 +20,11 @@ function AddNote() {
   const pathname = location.pathname;
   const orderIdLocaation = pathname.split('/')[1];
 
-  const [, CallAPi] = useCallAPi();
   const ssoToken = getCookie('id_token');
   const [moduleIds] = usemoduleIds();
 
+  const [NoteLoadingStore, setNoteLoadingStore] = UseNotesLoading();
+
   // Save New Note
 
   const [notificationData, setNotificationData] = useState<{
@@ -39,9 +34,6 @@ function AddNote() {
   } | null>(null);
 
   const saveNote = async () => {
-    setNoteLoadingStore(true);
-    CallAPi(false);
-
     if (!noteText) return;
     const endpoint = `${getBaseEndpoint()}/audit_logs/orders/`;
     const payload = {
@@ -78,10 +70,8 @@ function AddNote() {
           message: 'Success',
           description: message || 'Successfully Created Note.',
         });
-        setNoteLoadingStore(true);
+        setNoteLoadingStore(!NoteLoadingStore);
         setNoteText('');
-        // setNoteLoadingStore(false);
-        CallAPi(true);
       } else if (error) {
         // Error: Set error notification
         setNotificationData({

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

@@ -5,7 +5,7 @@ import AuditLogs from './logs';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
   SeteauditLogToggle,
-  useCallAPi,
+  // useCallAPi,
   usegetNotes,
   usemoduleIds,
   UseNotesLoading,
@@ -18,9 +18,9 @@ function Notes() {
   const location = useLocation();
   const pathname = location.pathname;
   const orderIdLocaation = pathname.split('/')[1];
-  const [, setNoteLoadingStore] = UseNotesLoading();
+  const [apiBaseLoading] = UseNotesLoading();
   const [, setNotes] = usegetNotes();
-  const [loderStatus] = useCallAPi();
+  // const [loderStatus] = useCallAPi();
   const [auditState] = SeteauditLogToggle();
 
   // Fetch module IDs
@@ -64,10 +64,10 @@ function Notes() {
   });
 
   useEffect(() => {
-    setNoteLoadingStore(true);
+    let combinedArray = [];
 
     if (moduleIds) {
-      setShouldPerformAction(auditState);
+      setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
       const updatedData = NotesData?.data
@@ -75,19 +75,14 @@ function Notes() {
         .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
         .flat()
         .filter(Boolean);
-      const combinedArray = updatedData.flat();
+      combinedArray = updatedData.flat();
       combinedArray.sort(
         (a: any, b: any) =>
           new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
       );
-      setNotes(combinedArray);
-      setNotes(combinedArray);
-      setNoteLoadingStore(NotesLoading);
-      loderStatus
-        ? setShouldPerformAction(true)
-        : setShouldPerformAction(false);
     }
-  }, [moduleIds, NotesLoading, auditState]);
+    setNotes({ data: combinedArray, loading: NotesLoading });
+  }, [moduleIds, NotesLoading, auditState, apiBaseLoading]);
 
   return (
     <Container>

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

@@ -9,9 +9,13 @@ interface ActionsDropdownProps {
   label: string;
   placeholder: string;
   options: StandardOptionsType[];
-  onSelect: () => void;
-  onSearch: () => void;
+  onSelect: (value: string) => void;
+  onSearch?: () => void;
   className?: string;
+  value?: string;
+  disabled?: boolean;
+  defaultValue?: any;
+  onChange?: any;
 }
 
 function OrderActionsDropdown(props: ActionsDropdownProps) {
@@ -22,12 +26,13 @@ function OrderActionsDropdown(props: ActionsDropdownProps) {
         options={props.options}
         placeholder={props.placeholder}
         onChange={props.onSelect}
-        disabled={false}
+        disabled={props.disabled}
         style={{ width: '100%' }}
         onSearch={props.onSearch}
         showSearch={true}
         popupClassName={'dropDownStyle'}
         selectWrapperClass={'rounded'}
+        defaultValue={props.value}
       />
     </Container>
   );

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

@@ -1,48 +1,182 @@
 import styled from 'styled-components';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import CancelationNote from './CancelationNote';
-import CancelationReason from './CancelationReason';
 import ReturnAction from './ReturnAction';
 import ReturnReason from './ReturnReason';
-import CancelOrderTable from './CancelOrderTable';
-import { useCurrentAction } from '../../../store';
+// import CancelOrderTable from './CancelOrderTable';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+  useOrderId,
+  useOrderStaticData,
+  usePrevOrderDetails,
+} from '../../../store';
+import OrderActionsDropdown from '../../Dropdown';
+import { TextArea, useApiHook } from '@bjsdistribution/dms-component-library';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
 
 function CancelOrder() {
+  const [orderId] = useOrderId();
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
   const [, setCurrentAction] = useCurrentAction();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  const [orderStaticData] = useOrderStaticData();
+
+  const [cancelReason, setCancelReason] = useState<string | undefined>(
+    undefined
+  );
+
+  const [cancelNotes, setCancelNotes] = useState<string>('');
+
+  const cancelReasonOptions = orderStaticData?.cancellation_reasons?.map(
+    (item: any) => {
+      return {
+        label: item?.reason,
+        value: item?.reason,
+      };
+    }
+  );
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/cancel/?cancelled_reason=${cancelReason}&cancelled_notes=${cancelNotes}`,
+    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);
+      } else {
+        // alert(response?.error_traceback);
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response]);
 
   const onClose = () => {
     setCurrentAction(undefined);
   };
+
+  const onSelectCancelReason = (value: string) => {
+    setCancelReason(value);
+  };
+
+  const onChangeNotes = (event: any) => {
+    setCancelNotes(event.target.value);
+  };
+
+  const onSubmitCancel = () => {
+    if (orderId) {
+      setPerformAction(true);
+    }
+  };
+
+  const showSubmitBtn = cancelReason !== undefined && cancelNotes?.length > 0;
+
   return (
     <OrderActionModal
       headerTitle="Cancel Order"
       showAdditionalInfo
-      infoText="Gemma Harris, LE12 6AW"
+      infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={onSubmitCancel}
+      submitBtnTitle="Save Details"
+      isSubmitDisabled={!showSubmitBtn}
     >
       <ContentContainer>
         <Top>
           <TopLeft>
-            <CancelationReason />
+            <OrderActionsDropdown
+              label="Cancelation Reason"
+              placeholder="Select Cancelation Reason"
+              options={cancelReasonOptions || []}
+              onSelect={onSelectCancelReason}
+              value={cancelReason}
+            />
             <Wrapper>
               <ReturnAction />
               <ReturnReason />
             </Wrapper>
           </TopLeft>
           <TopRight>
-            <CancelationNote />
+            <Container>
+              <Label>Cancelation Note</Label>
+              <TextArea
+                rows={5}
+                onChange={onChangeNotes}
+                value={cancelNotes}
+                placeholder="Reason for Cancel  Order"
+              />
+            </Container>
           </TopRight>
         </Top>
-        <Bottom>
+        {/* <Bottom>
           <CancelOrderTable />
-        </Bottom>
+        </Bottom> */}
       </ContentContainer>
     </OrderActionModal>
   );
 }
 
+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;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   gap: 15px;
@@ -69,7 +203,7 @@ const Top = styled.div`
   width: 100%;
 `;
 
-const Bottom = styled.div``;
+// const Bottom = styled.div``;
 
 const ContentContainer = styled.div`
   display: flex;