@bjsdistribution/dms-client-return 0.0.10 → 0.0.12

package/src/components/order-daily-overview/table-view/Pagination.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import {
   StyledContainer,
   StyledContentWrapper,
+  // StyledDropdown,
   StyledInfoBox,
   StyledLabel,
   StyledPaginationItem,
   StyledPaginationWrapper,
+  // StyledDropdownData,
 } from './PaginationStyle';
 import PrevIcon from '../../../assets/icons/PrevIcon';
 import NextIcon from '../../../assets/icons/NextIcon';
 import { useAtom } from 'jotai';
-import { filtersReducerAtom } from '../store/filterStore';
 import { Select } from 'antd';
+import { filtersReducerAtom } from '../return-after-table/table-filters/ReturnFilterStore';
 
 const PAGE_SIZE_OPTIONS = [50, 100, 150];
 const MAX_PAGES_TO_SHOW = 5;
@@ -46,18 +48,17 @@ const Pagination: React.FC<any> = ({
       type: 'SET_PERPAGE',
       payload: newItemsPerPage,
     });
-  
+
     // Reset to the first page
     dispatch({
       type: 'SET_PAGE',
       payload: 1,
     });
-  
+
     onPageChange(1);
     onItemsPerPageChange(newItemsPerPage);
   };
 
-
   const getPageNumbers = (
     currentPage: number,
     totalPages: number
@@ -96,16 +97,16 @@ const Pagination: React.FC<any> = ({
         </StyledInfoBox>
         <StyledLabel>Row on Page</StyledLabel>
         <Select
-  value={itemsPerPage}
-  onChange={handleItemsPerPageChange}
-  style={{ width: 75 }} 
->
-  {PAGE_SIZE_OPTIONS.map(option => (
-    <Select.Option key={option} value={option}>
-      {option}
-    </Select.Option>
-  ))}
-</Select>
+          value={itemsPerPage}
+          onChange={handleItemsPerPageChange}
+          style={{ width: 75 }}
+        >
+          {PAGE_SIZE_OPTIONS.map(option => (
+            <Select.Option key={option} value={option}>
+              {option}
+            </Select.Option>
+          ))}
+        </Select>
         <StyledPaginationWrapper>
           <StyledPaginationItem
             onClick={() => handlePageChange(currentPage - 1)}

package/src/components/order-view/details-filters/left-side-filters/dropdowns/{PrintDropDown.tsx → PrintDropDownReturn.tsx}

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import { PrintIconMap } from '../../../../order-daily-overview/shared/utlis';
 import { PrintData } from '../../../../order-daily-overview/shared/interface';
-import { optionsPrint } from '../../../../order-daily-overview/common/fakedata';
+import { optionsForReturnPrint } from '../../../../order-daily-overview/common/fakedata';
 // import { PrintIconMap } from '../utils';
 // import { optionsPrint } from '../fakeData';
 // import { PrintData } from '../interface';
 
-const options: PrintData[] = optionsPrint;
+const options: PrintData[] = optionsForReturnPrint;
 
-const PrintDropDown = () => {
+const PrintDropDownReturn = () => {
   const downloadFiles = () => {};
   return (
     <OptionsList>
@@ -26,7 +26,7 @@ const PrintDropDown = () => {
   );
 };
 
-export default PrintDropDown;
+export default PrintDropDownReturn;
 
 export const OptionsList = styled.ul`
   margin: 0;

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

@@ -1,56 +1,94 @@
 import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useSelectedOrders } from '../../store';
+import {
+  useFinalPayload,
+  useGroupedPayload,
+  usePostLoading,
+  useSelectedConfirmLoc,
+  useSelectedOrders,
+} from '../../store';
+import { displayValueOrNA } from '../../order-daily-overview/shared/utlis';
+import Loader from '../../order-daily-overview/header/loader/Loader';
 
 const CreateReturnModal = () => {
-  const [selectedlocation, setSelectedLocations] = useState<any[]>([]);
+  const [selectedlocation, setSelectedLocations] = useSelectedConfirmLoc();
   const [selectedReturnOrder] = useSelectedOrders();
+  const [load] = usePostLoading();
+  const [groupedPayload] = useGroupedPayload();
+  const [forDisabledCheck] = useSelectedConfirmLoc();
+  const [, setNew] = useFinalPayload();
 
   const handleSelectLocations = (id: number) => {
     setSelectedLocations((prevSelectedLocations: number[]) => {
-      const isSelected = prevSelectedLocations.includes(id);
+      const isSelected = prevSelectedLocations?.includes(id);
 
       if (isSelected) {
-        return prevSelectedLocations.filter(selectedId => selectedId !== id);
+        return prevSelectedLocations?.filter(selectedId => selectedId !== id);
       } else {
         return [...prevSelectedLocations, id];
       }
     });
   };
 
+  const uniqueLocations = selectedReturnOrder?.reduce((acc, current) => {
+    const x = acc.find(
+      (item: any) => item.return_location === current.return_location
+    );
+    if (!x) {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+
+  useEffect(() => {
+    if (groupedPayload?.length > 0 && forDisabledCheck?.length > 0) {
+      const matchedItems = groupedPayload?.filter((item: any) =>
+        forDisabledCheck.includes(item.id)
+      );
+
+      if (matchedItems.length > 0) {
+        const finalPayload = matchedItems?.map(({ id, ...rest }: any) => rest);
+        setNew(finalPayload);
+      }
+    }
+  }, [forDisabledCheck]);
+
   return (
-    <Wrapper>
-      <Alert
-        onClose={() => {}}
-        description=""
-        type="info"
-        title="Do you wish to proceed?"
-        showOkButton={false}
-      />
-      <Container>
-        <ul style={{ listStyle: 'none', padding: 0 }}>
-          {selectedReturnOrder?.map((returnLoc: any) => (
-            <li
-              key={returnLoc.id}
-              style={{
-                marginBottom: '8px',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <Checkbox
-                checked={selectedlocation.includes(returnLoc.id)}
-                onChange={() => handleSelectLocations(returnLoc.id)}
-              />
-              <StyledText style={{ marginLeft: '8px' }}>
-                {returnLoc?.return_location}
-              </StyledText>
-            </li>
-          ))}
-        </ul>
-      </Container>
-    </Wrapper>
+    <>
+      {load && <Loader />}
+      <Wrapper>
+        <Alert
+          onClose={() => {}}
+          description=""
+          type="info"
+          title="Do you wish to proceed?"
+          showOkButton={false}
+        />
+        <Container>
+          <ul style={{ listStyle: 'none', padding: 0 }}>
+            {uniqueLocations?.map((returnLoc: any) => (
+              <li
+                key={returnLoc.id}
+                style={{
+                  marginBottom: '8px',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <Checkbox
+                  checked={selectedlocation?.includes(returnLoc.id)}
+                  onChange={() => handleSelectLocations(returnLoc.id)}
+                />
+                <StyledText style={{ marginLeft: '8px' }}>
+                  {displayValueOrNA(returnLoc?.new_location)}
+                </StyledText>
+              </li>
+            ))}
+          </ul>
+        </Container>
+      </Wrapper>
+    </>
   );
 };
 

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

@@ -21,7 +21,16 @@ import DefectsModal from './DefectsModal';
 import repackModal from './RepackModal';
 import { ApiResponse } from '../types';
 import CreateReturnModal from './CreateReturnModal';
-import { useNewReturnPayload } from '../../store';
+import {
+  useFinalPayload,
+  useGroupedPayload,
+  useNewReturnPayload,
+  usePostLoading,
+  useSelectAll,
+  useSelectedConfirmLoc,
+  useSelectedOrders,
+} from '../../store';
+
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
   const [,] = useProductDetails();
@@ -33,7 +42,13 @@ const ModalManager = () => {
   const [selectedProductId] = useAtom(selectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
-  const [newPayload, setNewPayload] = useNewReturnPayload();
+  const [newGrouped, setNewGrouped] = useFinalPayload();
+  const [, SetPostLoading] = usePostLoading();
+  const [, setSelectedReturnOrder] = useSelectedOrders();
+  const [, setCheck] = useSelectedConfirmLoc();
+  const [, setNewPayload] = useNewReturnPayload();
+  const [, setGrouped] = useGroupedPayload();
+  const [, setSelectAll] = useSelectAll();
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -227,27 +242,47 @@ const ModalManager = () => {
   }, [updateResponse]);
 
   //Confirm return popup
-  const { data: response, setShouldPerformAction } = useApiHook<{
+  const {
+    data: response,
+    setShouldPerformAction,
+    loading: confirmLoading,
+  } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `return_orders/`,
     method: 'POST',
-    body: [newPayload],
+    body: newGrouped,
     performAction: false,
   });
-  const handleConfirmReturn = () => {
-    const payloadWithoutId = newPayload?.map(({ id, ...rest }: any) => ({
-      ...rest,
-    }));
 
-    console.log(response);
+  useEffect(() => {
+    SetPostLoading(confirmLoading);
+  }, [confirmLoading]);
+
+  console.log(response);
 
-    if (payloadWithoutId) {
-      setNewPayload(payloadWithoutId);
+  useEffect(() => {
+    if (response === null || (response && response?.data)) {
+      dispatch({ type: 'close' });
+      setNewGrouped([]);
+      setSelectedReturnOrder([]);
+      setCheck([]);
+      setNewPayload([]);
+      setGrouped([]);
+      setShouldPerformAction(false);
+      setSelectAll(false);
+    }
+  }, [response]);
+
+  const handleConfirmReturn = () => {
+    setShouldPerformAction(false);
+
+    if (newGrouped.length > 0) {
       setShouldPerformAction(true);
     } else {
       setShouldPerformAction(false);
     }
+    dispatch({ type: 'close' });
   };
 
   return (
@@ -267,7 +302,7 @@ const ModalManager = () => {
                 btnStyle: 'rounded',
                 onClick: handleConfirmReturn,
                 type: 'button',
-                disabled: !newPayload,
+                // disabled: forDisabledCheck.length === 0,
               },
             ],
 

package/src/components/store.ts

@@ -41,6 +41,16 @@ const newPayload = atom<any>([]);
 
 const grpPayload = atom<any>([]);
 
+const statusOfOrder = atom<any>([]);
+
+const selectedLocationConfirm = atom<any[]>([]);
+
+const selectAll = atom<boolean>(false);
+
+const postLoading = atom<boolean>(false);
+
+const final = atom<any[]>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -105,6 +115,26 @@ function useGroupedPayload() {
   return useAtom(grpPayload);
 }
 
+function useStatusOrderData() {
+  return useAtom(statusOfOrder);
+}
+
+function useSelectedConfirmLoc() {
+  return useAtom(selectedLocationConfirm);
+}
+
+function useSelectAll() {
+  return useAtom(selectAll);
+}
+
+function usePostLoading() {
+  return useAtom(postLoading);
+}
+
+function useFinalPayload() {
+  return useAtom(final);
+}
+
 export {
   useAtom,
   useFilter,
@@ -122,4 +152,9 @@ export {
   useReturnPayload,
   useNewReturnPayload,
   useGroupedPayload,
+  useStatusOrderData,
+  useSelectedConfirmLoc,
+  useSelectAll,
+  usePostLoading,
+  useFinalPayload,
 };