@bjsdistribution/dms-client-return 0.0.33 → 0.0.34

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

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

@@ -1,30 +1,31 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StyledTable,
   StyledTableWrapper,
 } from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
-import { useSelectedOrders } from '../../../store';
+// import { useSelectedOrders } from '../../../store';
 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';
 
 const ReturnProductTable = () => {
-  const [selectedInvoices] = useSelectedOrders();
+  const [selectedProducts, setSelectedProducts] = useSelectedProducts();
   const [selectAll, setSelectAll] = useState(false);
   const [productData, setProductData] = useProductDetails();
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
 
-  const handleActionClick = useCallback((id: number) => {
+  const handleActionClick = (id: number) => {
     setSelectedRowId(id);
-  }, []);
+  };
 
   const {
     data: isresponse,
-    setShouldPerformAction: setaction,
+    setShouldPerformAction: setAction,
     loading,
   } = useApiHook<{
     data: ApiResponse[];
@@ -39,33 +40,43 @@ const ReturnProductTable = () => {
     if (isresponse && isresponse.data) {
       notification.success({
         message: 'Success',
-        description:
-          //@ts-ignore
-          isresponse?.message ||
-          'An error has occurred. Please try again later.',
+        description: 'An error has occurred. Please try again later.',
       });
       handleRemoveRow();
       setSelectedRowId(null);
     }
   }, [isresponse]);
 
-  const handleRemoveRow = useCallback(() => {
+  const handleRemoveRow = () => {
     if (selectedRowId !== null) {
       setProductData((prevData: any) =>
         prevData.filter((item: any) => item.id !== selectedRowId)
       );
     }
-  }, [selectedRowId, setProductData]);
+  };
 
-  const onDeleteProducts = useCallback(() => {
-    setaction(true);
-  }, [setaction, selectedRowId]);
+  const onDeleteProducts = () => {
+    setAction(true);
+  };
 
-  const handleSelectAll = useCallback(() => {
-    setSelectAll(prevSelectAll => !prevSelectAll);
-  }, []);
+  const handleSelectAll = () => {
+    if (selectAll) {
+      setSelectedProducts([]);
+    } else {
+      const allProductIds = productData.map((product: any) => product.id);
+      setSelectedProducts(allProductIds);
+    }
+    setSelectAll(!selectAll);
+  };
+
+  const handleSelectProduct = (id: number) => {
+    setSelectedProducts((prevSelected: any) =>
+      prevSelected.includes(id)
+        ? prevSelected.filter((selectedId: any) => selectedId !== id)
+        : [...prevSelected, id]
+    );
+  };
 
-  // const returnreason =
   const [orderStaticData] = useOrderStaticData();
 
   const returnReasonsOptions = orderStaticData?.return_reasons?.map(
@@ -79,23 +90,18 @@ const ReturnProductTable = () => {
     const matchedReason = returnReasonsOptions?.find(
       (option: any) => option.value === returnReasonId
     );
-    return matchedReason ? matchedReason.label : 'N/A'; // Return label or 'N/A' if no match found
+    return matchedReason ? matchedReason.label : 'N/A';
   };
 
   return (
     <div>
       {loading && <Loader title="Deleting" />}
-      <StyledTableWrapper id="tableScrolling">
+      <StyledTableWrapper id="tableScrolling" className="orderProductTable">
         <StyledTable>
           <thead>
             <tr>
-              <th className="emailInvoiceCheckbox">
-                <Checkbox
-                  checked={selectAll}
-                  onChange={handleSelectAll}
-                  disabled={true}
-                  style={{ cursor: 'not-allowed' }}
-                />
+              <th className="emailproductsCheckbox">
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th>
               <th>Location</th>
               <th>Sender</th>
@@ -107,29 +113,28 @@ const ReturnProductTable = () => {
             </tr>
           </thead>
           <tbody>
-            {productData && productData.length > 0 ? (
-              productData.map((invoice: any) => (
-                <tr key={invoice.id}>
+            {productData && productData?.length > 0 ? (
+              productData?.map((product: any) => (
+                <tr key={product.id}>
                   <td>
                     <Checkbox
-                      checked={selectedInvoices.some(
-                        selectedInvoice => selectedInvoice.id === invoice.id
-                      )}
-                      style={{ cursor: 'not-allowed' }}
+                      checked={selectedProducts?.includes(product?.id)}
+                      onChange={() => handleSelectProduct(product?.id)}
                     />
                   </td>
-                  <td>{'N/A'}</td>
-                  <td>{'N/A'}</td>
-                  <td>{invoice.code}</td>
-                  <td>{invoice.description}</td>
+                  <td>{product?.orders_products_stock?.location || 'N/A'}</td>
                   <td>
-                    {getReturnReasonLabel(invoice?.return_reason_id)}
-                  </td>{' '}
+                    {product?.order_data?.order_recipient?.recipient_name}{' '}
+                    {product?.order_data?.order_recipient?.postcode}
+                  </td>
+                  <td>{product?.code}</td>
+                  <td>{product?.description}</td>
+                  <td>{getReturnReasonLabel(product?.return_reason_id)}</td>
                   <td>1 of 1</td>
                   <td>
                     <div
                       onClick={() => {
-                        handleActionClick(invoice.id);
+                        handleActionClick(product?.id);
                         onDeleteProducts();
                       }}
                       style={{ cursor: 'pointer' }}

package/src/components/store.ts

@@ -1,5 +1,9 @@
 import { atom, useAtom } from 'jotai';
-import { CreateReturnPayload, SelectDateType } from './types';
+import {
+  AssignUpdatePayload,
+  CreateReturnPayload,
+  SelectDateType,
+} from './types';
 
 export const filtersInitialValue = {
   date: {
@@ -16,6 +20,11 @@ export const CreateReturnInitial = {
   return_action: [],
 };
 
+export const AssignUpdateInitial = {
+  return_order_id: 0,
+  bjs_delivery: false,
+};
+
 export const triggerApiCallAtom = atom(false);
 
 const staticData = atom<any>({});
@@ -53,6 +62,18 @@ const final = atom<any[]>([]);
 
 const clearState = atom<boolean>(false);
 
+const assignData = atom<any[]>([]);
+
+const assignPayload = atom<AssignUpdatePayload>(AssignUpdateInitial);
+
+const callAPIAgain = atom<boolean>(true);
+
+const actionTypeOptions = atom<any[]>([]);
+
+const locationOptions = atom<any[]>([]);
+
+const selectedProductsMove = atom<any>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -141,6 +162,29 @@ function useClearState() {
   return useAtom(clearState);
 }
 
+function useAssignData() {
+  return useAtom(assignData);
+}
+
+function useAssignPayload() {
+  return useAtom(assignPayload);
+}
+
+function useCallApiAgain() {
+  return useAtom(callAPIAgain);
+}
+
+function useActionTypeOptions() {
+  return useAtom(actionTypeOptions);
+}
+
+function useLocationOptions() {
+  return useAtom(locationOptions);
+}
+function useSelectedProducts() {
+  return useAtom(selectedProductsMove);
+}
+
 export {
   useAtom,
   useFilter,
@@ -164,4 +208,10 @@ export {
   usePostLoading,
   useFinalPayload,
   useClearState,
+  useAssignData,
+  useAssignPayload,
+  useCallApiAgain,
+  useActionTypeOptions,
+  useLocationOptions,
+  useSelectedProducts,
 };

package/src/components/types.ts

@@ -227,3 +227,8 @@ export type CreateReturnPayload = {
   products: number[];
   return_action: string[];
 };
+
+export type AssignUpdatePayload = {
+  return_order_id: number | null;
+  bjs_delivery: boolean;
+};

package/src/index.tsx

@@ -3,35 +3,40 @@ import { Route, Routes, useNavigate } from 'react-router-dom';
 import OrderView from './components/order-view';
 import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
 import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
-import { useTableName } from './components/order-daily-overview/store/store';
+import {
+  useIdForTableName,
+  useTableName,
+} from './components/order-daily-overview/store/store';
 import ReturnMainTable from './components/order-daily-overview';
 import { notification } from 'antd';
 import RouterHeader from './components/order-daily-overview/header/route-header/RouterHeader';
 import {
   useActionType,
-  // useAtom,
+  useActionTypeOptions,
+  useAssignData,
   useCustomerData,
   useLocationData,
   useStatusOrderData,
 } from './components/store';
 import { ApiResponse } from './components/types';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import { filtersReducerAtom } from './components/order-daily-overview/header-filters/filterStore';
+import { useLocationOptions } from './components/order-view/store';
 
 function ReturnClient() {
   notification.config({
     top: 80,
   });
   const LoadingMessage = () => <div>Loading...</div>;
-  const [selectedClient] = useTableName();
+  const [selectedClientId] = useIdForTableName();
   const navigate = useNavigate();
-  let selectedClientString = selectedClient?.replace(/\s+/g, '-');
-  selectedClientString = selectedClientString?.toLowerCase();
   const [, setCustomers] = useCustomerData();
   const [, setActionType] = useActionType();
   const [, setLocationData] = useLocationData();
   const [, setStatusOfOrders] = useStatusOrderData();
-  // const [dispatchvalue] = useAtom(filtersReducerAtom);
+  const [, setAssignData] = useAssignData();
+  const [, setActionTypeOptions] = useActionTypeOptions();
+  const [, setLocationOptions] = useLocationOptions();
+  const [, setTableName] = useTableName();
 
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
@@ -42,26 +47,27 @@ function ReturnClient() {
     if (paths[paths.length - 1] === 'returnclient') {
       localStorage.removeItem('clientName');
       localStorage.removeItem('clientId');
-      localStorage.removeItem('uuid');
-      // dispatch({ type: 'CLEAR_CLIENT' });
+      localStorage.removeItem('account_number');
+      setActionTypeOptions([]);
+      setLocationOptions([]);
+      setTableName('');
     }
   }, [location.pathname]);
 
   useEffect(() => {
-    if (selectedClient) {
-      const selectedClientString = selectedClient.replace(/\s+/g, '-');
-      navigate(`filter/${selectedClientString}`);
+    if (selectedClientId) {
+      navigate(`filter/${selectedClientId}`);
     }
-  }, [selectedClient]);
+  }, [selectedClientId]);
 
   //API for client data
   const { data: fetchedCustomerData, loading: loading } = useApiHook<
     ApiResponse
   >({
-    endpoint: `/customers/`,
+    endpoint: `/return_orders/customers/`,
     method: 'GET',
     //@ts-ignore
-    pagination: { is_pagination: false },
+    pagination: { page: 1, per_page: 50 },
   });
 
   //API for action type
@@ -99,6 +105,9 @@ function ReturnClient() {
       setStatusOfOrders(
         fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
       );
+      setAssignData(
+        fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)
+      );
     }
   }, [actionLoading]);
 
@@ -121,7 +130,7 @@ function ReturnClient() {
 
           <Route path="order-return" element={<ReturnAfterTable />} />
           <Route path="order-return/:id" element={<OrderView />} />
-          <Route path="filter/:clientName" element={<ReturnTable />} />
+          <Route path="filter/:clientId" element={<ReturnTable />} />
 
           {/* <Route
           path=""