@bjsdistribution/dms-client-return 0.0.32 → 0.0.34

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

@@ -3,24 +3,12 @@ import { AntModal, useApiHook } from '@bjsdistribution/dms-component-library';
 import { useAtom } from 'jotai';
 import {
   countReducerAtom,
-  letselectedProductIdAtom,
-  selectedTabKeyAtom,
-  useCreateOrderProducts,
   useDeleteProdsID,
   usefetchAgain,
-  // usefetchAgain,
-  useOrderId,
   useProductDetails,
-  useRecieveOrderProducts,
-  useUpdateOrderProducts,
 } from '../store';
 
-import ProductAction from './ProductAction';
-// import DeleteProduct from './DeleteProduct';
-// import AddProduct from './AddProduct';
-import logsTable from './qclogs/logsTable';
 import DefectsModal from './DefectsModal';
-import repackModal from './RepackModal';
 import { ApiResponse } from '../types';
 import CreateReturnModal from './CreateReturnModal';
 import {
@@ -38,13 +26,7 @@ import { useNavigate } from 'react-router-dom';
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
   const [,] = useProductDetails();
-  const [orderProduct] = useCreateOrderProducts();
-  const [orderId] = useOrderId();
   const [selectedRows] = useDeleteProdsID();
-  const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
-  const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
-  const [selectedProductId] = useAtom(letselectedProductIdAtom);
-  const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
   const [newGrouped] = useFinalPayload();
   const [postLoading, SetPostLoading] = usePostLoading();
@@ -56,14 +38,11 @@ const ModalManager = () => {
   const [, setCallForFetch] = usefetchAgain();
   const navigate = useNavigate();
 
-  console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
-
   const closeModal = () => {
     dispatch({ type: 'close' });
   };
 
   const validateForm = () => {
-    console.log(selectedRows, 'selectedRowsselectedRowsselectedRows');
     return selectedRows?.length > 0;
   };
 
@@ -71,66 +50,6 @@ const ModalManager = () => {
     setIsFormValid(validateForm());
   }, [selectedRows]);
 
-  // api block for the create product order
-  const {
-    data: actionResponse,
-    setShouldPerformAction: setUnrecieveaction,
-  } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `order/order_products/unrecieve/`,
-    method: 'POST',
-    body: [unRecieve],
-    performAction: false,
-  });
-
-  useEffect(() => {
-    if (actionResponse && actionResponse?.data) {
-      dispatch({ type: 'close' });
-    }
-  }, [actionResponse]);
-
-  // api block for the update product order
-  const {
-    data: updateResponse,
-    setShouldPerformAction: setUpdateSction,
-  } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `order/order_products/type/update/`,
-    method: 'PUT',
-    body: [updateOrderProduct],
-    performAction: false,
-  });
-
-  const onSubmit = () => {
-    if (selectedTab === '1') {
-      setUpdateOrderProduct((prev: any) => ({
-        ...prev,
-        order_id: orderId,
-        id: selectedProductId,
-      }));
-      setUpdateSction(true);
-      console.log('Tab 1 selected');
-    } else if (selectedTab === '2') {
-      console.log('Tab 2 selected');
-    } else if (selectedTab === '3') {
-      setUnRecieve((prev: any) => ({
-        ...prev,
-        order_id: orderId,
-        id: selectedProductId,
-      }));
-      setUnrecieveaction(true);
-      console.log('Tab 3 selected');
-    }
-  };
-
-  useEffect(() => {
-    if (updateResponse && updateResponse?.data) {
-      dispatch({ type: 'close' });
-    }
-  }, [updateResponse]);
-
   // Confirm return popup
   const {
     data: response,
@@ -146,10 +65,9 @@ const ModalManager = () => {
     body: newGrouped,
     performAction: false,
   });
-  console.log(response, 'data'),
-    useEffect(() => {
-      SetPostLoading(confirmLoading);
-    }, [confirmLoading]);
+  useEffect(() => {
+    SetPostLoading(confirmLoading);
+  }, [confirmLoading]);
 
   const handleConfirmReturn = () => {
     if (newGrouped?.length > 0) {
@@ -258,49 +176,7 @@ const ModalManager = () => {
           />
         </>
       )}
-      {popupName?.state === 'qclog' && (
-        <AntModal
-          openStatus={popupName?.state === 'qclog'}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'Deliver - STOHOP011GRY-UK - 006064438012831476',
-            subHeading: '[Hopkins Highboard, Walnut Effect Grey]',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: 'Submit',
-                btnStyle: 'rounded',
-                onClick: onSubmit,
-              },
-            ],
-          }}
-          BodyComponent={ProductAction}
-          width={1104}
-          classNameAdd={'globalPopup'}
-        />
-      )}
-      {popupName?.state == 'qclogtable' && (
-        <AntModal
-          openStatus={popupName?.state == 'qclogtable' ? true : false}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'Deliver-AI-00030345784968148412',
-            subHeading: '[Centralized regional adpated] ',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: 'Submit',
-                btnStyle: 'rounded',
-              },
-            ],
-          }}
-          BodyComponent={logsTable}
-          width={1104}
-          classNameAdd={'globalPopup'}
-        />
-      )}
+
       {popupName?.state == 'defectsModal' && (
         <AntModal
           openStatus={popupName?.state == 'defectsModal' ? true : false}
@@ -324,29 +200,6 @@ const ModalManager = () => {
           classNameAdd={'globalPopup'}
         />
       )}
-      {popupName?.state == 'repackModal' && (
-        <AntModal
-          openStatus={popupName?.state == 'repackModal' ? true : false}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'DEliver - DWLK1006 - 00605',
-            subHeading: 'ALtair TV stand for TVs up to 60',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: '',
-                btnStyle: '',
-                type: '',
-              },
-            ],
-            btnAlign: '',
-          }}
-          BodyComponent={repackModal}
-          width={1504}
-          classNameAdd={'globalPopup'}
-        />
-      )}
     </>
   );
 };

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -1,45 +1,120 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AntSelect } from '@bjsdistribution/dms-component-library';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../types';
+import { useOrderDetails, useProductDetails } from '../../store';
+import { Select } from 'antd';
+import { useSelectedProducts } from '../../../store';
+import { atom, useAtom } from 'jotai';
+
+export const payloadAtom = atom<any>(null);
 
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
-  const defaultSelectWrapperClass = 'rounded';
+  const [returnOrderData, setReturnOrderData] = useState<any>([]);
+  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [selectedProducts] = useSelectedProducts();
+  const [orderData] = useOrderDetails();
+  const [, setPayload] = useAtom(payloadAtom);
+  const [productData] = useProductDetails();
+  const [idProduct, setId] = useState<any>();
+
+  const id = orderData?.customer_id;
+
+  useEffect(() => {
+    const allProductIds =
+      productData?.map((product: any) => product.return_location) || [];
+    setId(allProductIds);
+  }, [productData]);
+
+  const filters = [
+    { field: 'customer_id', op: '=', value: id },
+    { field: 'is_deleted', op: '=', value: 0 },
+    { field: 'status', op: '!=', value: 'SD' },
+  ];
+
+  if (idProduct?.length > 0 && idProduct[0]) {
+    filters.push({
+      field: 'return_order_products.return_location',
+      op: '=',
+      value: idProduct[0],
+    });
+  }
+
+  const { data: fetchedReturnOrderData, setShouldPerformAction } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: '/return_orders/?skip_filters=0',
+    method: 'GET',
+    filters,
+    //@ts-ignore
+    pagination: { is_pagination: false },
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (id && idProduct?.length > 0 && idProduct[0]) {
+      setShouldPerformAction(true);
+    }
+  }, [id, idProduct, setShouldPerformAction]);
+
+  useEffect(() => {
+    if (fetchedReturnOrderData && fetchedReturnOrderData?.data && id !== null) {
+      setReturnOrderData(fetchedReturnOrderData?.data);
+    }
+  }, [fetchedReturnOrderData, id]);
+
+  useEffect(() => {
+    if (selectedOrderId && selectedProducts?.length > 0) {
+      const newPayload = {
+        new_return_order: selectedOrderId,
+        products: selectedProducts,
+      };
+      setPayload(newPayload);
+    }
+  }, [selectedOrderId, selectedProducts, setPayload]);
+
+  const handleDropdownChange = (value: string) => {
+    setSelectedOrderId(value);
+  };
+
+  const dropdownOptions = returnOrderData?.map((order: any) => ({
+    label: `${order.order_recipient.recipient_name} - ${order.order_recipient.postcode}`,
+    value: order.id,
+  }));
 
   return (
     <Container>
       <Text>New Return Order:</Text>
-      <AntSelect
-        options={[]}
+      <Select
+        options={dropdownOptions}
         placeholder="Select"
-        onChange={() => {}}
-        defaultValue={'Current Return Order' || ''}
+        onChange={handleDropdownChange}
         style={defaultSelectStyle}
         disabled={false}
-        // onSearch={handleSearch}
         showSearch
+        dropdownStyle={{ width: 'max-content' }}
         popupClassName={defaultPopupClassName}
-        selectWrapperClass={defaultSelectWrapperClass}
       />
     </Container>
   );
 };
+
 const Container = styled.div`
   display: flex;
   align-items: center;
   gap: 10px;
   align-self: stretch;
+  white-space: nowrap;
 `;
+
 const Text = styled.div`
   color: #000;
-
-  /* body/captions */
   font-family: 'Lato';
   font-size: 13px;
-  font-style: normal;
   font-weight: 400;
-  line-height: 16px; /* 123.077% */
+  line-height: 16px;
 `;
 
 export default NewReturnDropdown;

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

@@ -7,9 +7,9 @@ import { Checkbox } from '@bjsdistribution/dms-component-library';
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
 import {
   EmptyDataContainer,
+  StyledTable,
   StyledTableWrapper,
 } from '../confirm-order/tables/ReminderStyles';
-import { StyledTable } from '../modalstyle';
 
 function SplitOrderTable() {
   const [orderProductDetails] = useProductDetails();
@@ -48,7 +48,7 @@ function SplitOrderTable() {
   useEffect(() => {
     setPayload({
       ...payload,
-      return_order: 0,
+      return_order: 1, // FOR SPLIT ORDER WE ARE ASKED TO SET THIS AS 1
       products: selectedSplits?.map(order => order.id),
       force: true,
     });

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

@@ -5,17 +5,14 @@ import { useCurrentAction } from '../store';
 import SplitOrder from './actions/split-order';
 import LogServiceRefusal from './actions/log-service-refusal';
 import CancelOrder from './actions/cancel-order';
-import UpdateProductType from './actions/update-product-type/UpdateProductType';
 import ConfirmOrder from './actions/confirm-order';
 import SendSmsModal from './actions/send-sms/SendSmsModal';
 import SendEmailModal from './actions/send-email/SendEmailModal';
 import ChangeCustomerAccModal from './actions/change-customer-account/ChangeCustomerAccModal';
 import HoldOrderModal from './actions/hold-order/HoldOrderModal';
-import EscalationModal from './actions/escalation/EscalationModal';
 import LogFeedback from './actions/log-feedback/LogFeedback';
 import ChargeLog from './actions/charge-log';
 import UnholdOrder from './actions/unhold-order/UnholdOrder';
-import RestoreProducts from './actions/restore-products/RestoreProducts';
 import ViewReminderModal from '../view-reminder/ViewReminder';
 import TaskReminderModal from './actions/create-task-reminder';
 import OrderLock from './actions/order-lock';
@@ -29,8 +26,6 @@ function OrderActions() {
     switch (currentAction) {
       case 'add-resources':
         return <AddResources />;
-      case 'bulk-update':
-        return <UpdateProductType />;
       case 'split-order':
         return <SplitOrder />;
       case 'release-order':
@@ -53,8 +48,6 @@ function OrderActions() {
         return <ChangeCustomerAccModal />;
       case 'hold-order':
         return <HoldOrderModal />;
-      case 'escalations':
-        return <EscalationModal />;
       case 'create-task':
         return <TaskReminderModal />;
       case 'log-feedback':
@@ -63,8 +56,6 @@ function OrderActions() {
         return <ChargeLog />;
       case 'unhold-order':
         return <UnholdOrder />;
-      case 'restore-products':
-        return <RestoreProducts />;
       case 'view-reminder':
         return <ViewReminderModal />;
       case 'order-lock':

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

@@ -122,6 +122,7 @@ const Container = styled.div`
   background: #f8fafc;
   margin: 0px;
   border-radius: 0px 0px 8px 8px;
+  align-items: center;
 `;
 
 export default OrderDetailsFooter;

package/src/components/order-view/products-info/expanded-content/index.tsx

@@ -1,37 +1,111 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import ProductTable from '../../return-client-products/ProductTable';
-import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
-import { Button } from '@bjsdistribution/dms-component-library';
-// import { notification } from 'antd';
+import NewReturnDropdown, {
+  payloadAtom,
+} from '../../notes/order-dropdown/NewReturnDropdown';
+import { Button, useApiHook } from '@bjsdistribution/dms-component-library';
+import { useAtom } from 'jotai';
+import { ApiResponse } from '../../types';
+import { usePostLoading, useSelectedProducts } from '../../../store';
+import { useOrderId } from '../../store';
+import { useNavigate } from 'react-router-dom';
+import { notification } from 'antd';
 
 function ExpandedContent() {
-  // const SaveNote = () => {
-  //   // alert('saved');
-  //   notification.success({
-  //     message: 'Success',
-  //     description: ' Saved successfully.',
-  //   });
-  // };
+  const [payload] = useAtom(payloadAtom);
+  const [, setPostLoading] = usePostLoading();
+  const [orderId] = useOrderId();
+  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+  const navigate = useNavigate();
+  const [, setSelectedProducts] = useSelectedProducts();
+
+  const {
+    data: response,
+    setShouldPerformAction,
+    loading: confirmLoading,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `return_order_products/move/${orderId}`,
+    method: 'POST',
+    body: payload,
+    performAction: false,
+  });
+
+  useEffect(() => {
+    setPostLoading(confirmLoading);
+  }, [confirmLoading, setPostLoading]);
+
+  useEffect(() => {
+    if (payload?.new_return_order && payload?.products?.length > 0) {
+      setIsButtonDisabled(false);
+    } else {
+      setIsButtonDisabled(true);
+    }
+  }, [payload]);
+
+  const handleConfirmReturn = () => {
+    if (!isButtonDisabled) {
+      setShouldPerformAction(true);
+      setPostLoading(confirmLoading);
+    } else {
+      console.error('Payload is incomplete:', payload);
+    }
+  };
+
+  const newId = Array.isArray(response?.data)
+    ? //@ts-ignore
+      response?.data?.[0]?.id
+    : //@ts-ignore
+      response?.data?.id;
+
+  useEffect(() => {
+    //@ts-ignore
+    if (response?.code === 200) {
+      notification.success({
+        message: 'Success',
+        //@ts-ignore
+
+        description: response?.message || 'Products moved successfully',
+      });
+      setSelectedProducts([]);
+    } else if (response) {
+      notification.error({
+        message: 'Error',
+        //@ts-ignore
+
+        description: response?.message || 'Error while moving products',
+      });
+    }
+
+    //@ts-ignore
+    if (response?.code === 200 && newId) {
+      navigate(`details/${newId}`);
+      setSelectedProducts([]);
+    }
+  }, [response, newId, navigate, setSelectedProducts]);
+
   return (
     <Container>
       <ProductTable />
-      <MidConatiner>
+      <MidContainer>
         <SaveNoteContainer>
           <Button
             style={{ borderRadius: '20px' }}
-            onClick={() => {}}
-            disabled={true}
+            onClick={handleConfirmReturn}
+            disabled={isButtonDisabled}
           >
             Move Products
           </Button>
           <NewReturnDropdown />
         </SaveNoteContainer>
-      </MidConatiner>
+      </MidContainer>
     </Container>
   );
 }
-const MidConatiner = styled.div`
+
+const MidContainer = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 10px 15px;
@@ -47,6 +121,7 @@ const SaveNoteContainer = styled.div`
   display: inline-flex;
   gap: 10px;
 `;
+
 const Container = styled.div``;
 
 export default ExpandedContent;

package/src/components/order-view/products-info/index.tsx

@@ -25,7 +25,7 @@ function ProductsInfo() {
   const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
     data: ApiResponse[];
   }>({
-    endpoint: `/order/order_products/${customerData.id}`,
+    endpoint: `return_order_products/${customerData.id}`,
     method: 'GET',
     performAction: false,
   });