@bjsdistribution/dms-client-return 0.0.15 → 0.0.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.15",
+  "version": "0.0.17",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "^0.1.3",
+    "@bjsdistribution/dms-component-library": "0.1.3",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -37,14 +37,14 @@ function SelectionFilter() {
   const [actionType] = useActionType();
   const [locationData] = useLocationData();
   const [filteredLocationOptions, setFilteredLocationOptions] = useState([]);
-  const [getUuid, setUuid] = useState<any>();
+  const [, setUuid] = useState<any>();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
     selectedLocationValue,
     setSelectedLocationValue,
   ] = useSelectedLocation();
-  const [selectedClientId, setSelectedClient] = useSelectedClient();
+  const [, setSelectedClient] = useSelectedClient();
   const [, setClientLabel] = useTableName();
   const [, setName] = useState<any>();
   const [isButtonEnabled, setIsButtonEnabled] = useState(false);
@@ -92,19 +92,22 @@ function SelectionFilter() {
     localStorage.setItem('clientName', selectedLabel);
     localStorage.setItem('clientId', selectedValue.toString());
     localStorage.setItem('account_number', selectAccountNumber);
+    localStorage.setItem('uuid', selectedUuids);
     localStorage.setItem('customer_id', selectedCustomerId.toString());
     const storedAccNo = localStorage.getItem('account_number');
     const storedCustomerId = localStorage.getItem('customer_id');
+    const storedUuid = localStorage.getItem('uuid');
+    setUuid(storedUuid);
     setReturnPayload((prevState: any) => ({
       ...prevState,
       account_number: storedAccNo,
       customer_id: storedCustomerId,
     }));
     const filteredSubLocations = locationData
-      ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
+      ?.filter((subCat: any) => subCat?.customer_id === storedUuid)
       .map((subCat: any) => ({
         label: subCat?.location_name,
-        value: subCat?.customer_id,
+        value: subCat?.token,
       }));
 
     setFilteredLocationOptions(filteredSubLocations);
@@ -133,7 +136,20 @@ function SelectionFilter() {
     }
   }, [storedAccNumber, storedCustomerId]);
 
-  useEffect(() => {}, [getUuid, filteredLocationOptions]);
+  const storedUuid = localStorage.getItem('uuid');
+
+  useEffect(() => {
+    if (storedUuid && locationData) {
+      const filteredSubLocations = locationData
+        .filter((subCat: any) => subCat?.customer_id === storedUuid)
+        .map((subCat: any) => ({
+          label: subCat?.location_name,
+          value: subCat?.token,
+        }));
+
+      setFilteredLocationOptions(filteredSubLocations);
+    }
+  }, [storedUuid, locationData]);
 
   //location change
   const handleLocationChange = (value: any, option: DefaultOptionType) => {
@@ -164,10 +180,10 @@ function SelectionFilter() {
     if (storedName) {
       setClientLabel(storedName);
     }
-    if (selectedClientId) {
+    if (storedClientId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: selectedClientId,
+        payload: storedClientId,
       });
     }
     if (selectedFilterValue) {
@@ -195,7 +211,8 @@ function SelectionFilter() {
         payload: storedClientId,
       });
     }
-  }, [storedClientId]);
+  }, []);
+
   useEffect(() => {
     if (storedName || selectedFilterValue || selectedLocationValue) {
       setIsButtonEnabled(true);
@@ -204,9 +221,6 @@ function SelectionFilter() {
     }
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
-  // console.log(filteredLocationOptions, 'filteredLocationOptions');
-
-  // console.log('check', storedName, selectedFilterValue, selectedLocationValue);
   return (
     <Wrapper>
       <FilterRow>

package/src/components/order-daily-overview/index.tsx

@@ -61,6 +61,7 @@ function ReturnMainTable() {
   }>({
     endpoint: `/return_orders/get/client-returns/`,
     method: 'GET',
+    pagination: { page: 1, per_page: 50 },
   });
   // console.log('fetchedClientData', fetchedClientData?.data);
 

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -1,8 +1,8 @@
 import { AntSelect, Checkbox } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
-import { useSelectedOrders } from '../../../store';
+// import { useSelectedOrders } from '../../../store';
 import { useOrderId, useReturnAfterOrderData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
@@ -14,14 +14,14 @@ import {
 } from '../../return-order-table/return-orders-filters/returnstyles';
 import LoadIcon from '../../../../assets/icons/LoadIcon';
 import { usePrintOptionTOggle } from '../../store/store';
-import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { NavLink } from 'react-router-dom';
 import { displayValueOrNA, formatDate } from '../../shared/utlis';
+import PrintDropDown from '../../shared/elements/PrintDropDown';
 
 const OrderTable = ({ loadingskeleton }: any) => {
-  const [selectedOrders, setSelectedReturnOrder] = useSelectedOrders();
-  const [selectAll, setSelectAll] = useState(false);
-  const defaultSelectStyle = { width: '100%' };
+  // const [, setSelectedReturnOrder] = useSelectedOrders();
+  // const [selectAll, setSelectAll] = useState(false);
+  // const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const defaultSelectWrapperClass = 'rounded';
   const dropdownRefParent = useRef<HTMLDivElement>(null);
@@ -50,33 +50,33 @@ const OrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const handleSelectAll = (e: any) => {
-    setSelectAll(e.target.checked);
-    if (e.target.checked) {
-      setSelectedReturnOrder(
-        returnAfterOrder.map((e: any) => ({
-          id: e.id,
-          status_id: 3,
-        }))
-      );
-    } else {
-      setSelectedReturnOrder([]);
-    }
-  };
+  // const handleSelectAll = (e: any) => {
+  //   setSelectAll(e.target.checked);
+  //   if (e.target.checked) {
+  //     setSelectedReturnOrder(
+  //       returnAfterOrder.map((e: any) => ({
+  //         id: e.id,
+  //         status_id: 3,
+  //       }))
+  //     );
+  //   } else {
+  //     setSelectedReturnOrder([]);
+  //   }
+  // };
 
-  const handleSelectInvoice = (id: any) => {
-    setSelectedReturnOrder((prevSelectedInvoices: any) => {
-      const isSelected = prevSelectedInvoices?.some(
-        (item: any) => item.id === id
-      );
+  // const handleSelectInvoice = (id: any) => {
+  //   setSelectedReturnOrder((prevSelectedInvoices: any) => {
+  //     const isSelected = prevSelectedInvoices?.some(
+  //       (item: any) => item.id === id
+  //     );
 
-      if (isSelected) {
-        return prevSelectedInvoices.filter((items: any) => items.id !== id);
-      } else {
-        return [...prevSelectedInvoices, { id, status_id: 3 }];
-      }
-    });
-  };
+  //     if (isSelected) {
+  //       return prevSelectedInvoices.filter((items: any) => items.id !== id);
+  //     } else {
+  //       return [...prevSelectedInvoices, { id, status_id: 3 }];
+  //     }
+  //   });
+  // };
   console.log('', returnAfterOrder);
 
   const assigneOptions = [
@@ -105,16 +105,16 @@ const OrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const [id, setOrderId] = useOrderId();
-  console.log(id, 'idid');
+  const [, setOrderId] = useOrderId();
+  // console.log(id, 'idid');
   return (
     <>
-      <StyledTableWrapper id="tableScrolling">
+      <StyledTableWrapper>
         <StyledTable>
           <thead>
             <tr>
               <th className="emailInvoiceCheckbox">
-                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                <Checkbox checked={false} />
               </th>
               <th className="emailInvoiceNo">Created</th>
               <th>Return Location</th>
@@ -163,11 +163,8 @@ const OrderTable = ({ loadingskeleton }: any) => {
                   <tr key={item.id}>
                     <td>
                       <Checkbox
-                        checked={selectedOrders?.some(
-                          (selectedInvoice: any) =>
-                            selectedInvoice?.id === item.id
-                        )}
-                        onChange={() => handleSelectInvoice(item.id)}
+                        checked={false}
+                        // onChange={() => handleSelectInvoice(item.id)}
                       />
                     </td>
                     <td>{formatDate(new Date(item?.created_at))}</td>
@@ -211,8 +208,8 @@ const OrderTable = ({ loadingskeleton }: any) => {
                         placeholder="Select"
                         onChange={() => {}}
                         // defaultValue={item?.assign || ''}
-                        style={defaultSelectStyle}
-                        disabled={false}
+                        // style={defaultSelectStyle}
+                        // disabled={false}
                         // onSearch={handleSearch}
                         showSearch
                         popupClassName={defaultPopupClassName}
@@ -244,7 +241,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
 
                             {printToogle == index && (
                               <div ref={dropdownRef}>
-                                <PrintDropDown />
+                                <PrintDropDown legacyProductId={item.id} />
                               </div>
                             )}
                           </li>

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnFilterStore.ts

@@ -80,19 +80,6 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
-    // case 'SET_LOCATION_FILTER':
-    //   return {
-    //     ...state,
-    //     'x-filters': [
-    //       ...state['x-filters'].filter(f => f.field !== 'return_location'),
-    //       {
-    //         field: 'return_location',
-    //         op: 'in',
-    //         value: action.payload,
-    //       },
-    //     ],
-    //   };
-
     case 'SET_PAGE':
       return {
         ...state,
@@ -114,6 +101,11 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       return {
         ...state,
       };
+    case 'CLEAR_ALL_FILTER':
+      return {
+        ...state,
+        'x-filters': [],
+      };
     default:
       return state;
   }

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnOrderFilter.tsx

@@ -18,19 +18,27 @@ import dayjs from 'dayjs';
 import { useCustomerData, useStatusOrderData } from '../../../store';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
 import AssigneIcon from '../../../../assets/icons/AssigneIcon';
+import {
+  ClearAll,
+  StyledFilterBtnIcon,
+  StyledFilterBtnLabel,
+} from '../../table/table-data/styles';
 
 const ReturnOrderFilter = () => {
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [customers] = useCustomerData();
-  const [selectedDate, setSelectedDate] = useState();
+  const [selectedDate, setSelectedDate] = useState<any | null>();
   const [statusOfOrder] = useStatusOrderData();
-  // const zoneOptions = [
-  //   { label: 'Zone 1', value: 'zone1' },
-  //   { label: 'Zone 2', value: 'zone2' },
-  //   { label: 'Zone 3', value: 'zone3' },
-  //   { label: 'Zone 4', value: 'zone4' },
-  //   { label: 'Zone 5', value: 'zone5' },
-  // ];
+  const [selectedClient, setSelectedClient] = useState<any | null>();
+  const [statusOrder, setStatusOfOrder] = useState<any | null>();
+
+  const zoneOptions = [
+    { label: 'Zone 1', value: 'zone1' },
+    { label: 'Zone 2', value: 'zone2' },
+    { label: 'Zone 3', value: 'zone3' },
+    { label: 'Zone 4', value: 'zone4' },
+    { label: 'Zone 5', value: 'zone5' },
+  ];
 
   // date change here
   const handleDateChange = (date: any | null) => {
@@ -65,20 +73,29 @@ const ReturnOrderFilter = () => {
 
   const handleClientChange = (value: any) => {
     console.log(value, 'value');
+    setSelectedClient(value);
     dispatch({
       type: 'SET_CLIENT_FILTER',
-      payload: value,
+      payload: selectedClient,
     });
   };
 
   const handleStatusOfOrder = (value: any) => {
     console.log(value, 'value');
+    setStatusOfOrder(value);
     dispatch({
       type: 'SET_STATUS_ORDER_FILTER',
       payload: value,
     });
   };
 
+  const handleClearAll = () => {
+    setSelectedDate(null);
+    setSelectedClient(null);
+    setStatusOfOrder(null);
+    dispatch({ type: 'CLEAR_ALL_FILTER' });
+  };
+
   return (
     <>
       <StyledFiter>
@@ -106,7 +123,6 @@ const ReturnOrderFilter = () => {
                 />
               </StyledDatePicker>
             </div>
-
             <div className="datefilter">
               <div className="dateiconcontainer">
                 <StatusIcon />
@@ -118,6 +134,7 @@ const ReturnOrderFilter = () => {
                   placeholder="Status of Order"
                   onChange={handleStatusOfOrder}
                   style={{ minWidth: '130px' }}
+                  value={statusOrder}
                   allowClear
                 />
               </StyledAntSelect>
@@ -132,36 +149,40 @@ const ReturnOrderFilter = () => {
                   className="custom-select"
                   placeholder="Client"
                   onChange={handleClientChange}
+                  value={selectedClient}
                   style={{ width: '125px', border: 'none' }}
                   allowClear
                 />
               </StyledAntSelect>
             </div>
-            <div className="datefilter">
+            <div
+              className="datefilter"
+              style={{ pointerEvents: 'none', opacity: 0.5 }}
+            >
               <div className="dateiconcontainer">
                 <AssigneIcon />
               </div>
-              {/* <StyledAntSelect>
+              <StyledAntSelect>
                 <Select
                   options={zoneOptions}
                   className="custom-select"
                   placeholder="Asignee"
                   onChange={() => {}}
                   style={{ minWidth: '100px' }}
-                  maxTagCount={0}
-                  maxTagPlaceholder={(omittedValues: any) => (
-                    <Tooltip
-                      overlayStyle={{ pointerEvents: 'none' }}
-                      title={omittedValues
-                        .map(({ label }: any) => label)
-                        .join(', ')}
-                    >
-                      <span>{`${omittedValues.length} selected`}</span>
-                    </Tooltip>
-                  )}
+                  disabled
                 />
-              </StyledAntSelect> */}
+              </StyledAntSelect>
             </div>
+            {selectedDate ? (
+              <>
+                <ClearAll onClick={handleClearAll}>
+                  <StyledFilterBtnIcon>
+                    <i className="cross"></i>
+                  </StyledFilterBtnIcon>
+                  <StyledFilterBtnLabel>Clear all</StyledFilterBtnLabel>
+                </ClearAll>
+              </>
+            ) : null}
           </LeftSideConatiner>
         </StyledFIlterELements>
         <TableFilters />

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -21,6 +21,7 @@ import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
 import { displayValueOrNA } from '../../shared/utlis';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
+import { format } from 'date-fns';
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
 
@@ -288,7 +289,6 @@ const ReturnOrderTable = () => {
                       }
                     />
                   </td>
-
                   <td>
                     {item?.orders_products_stock?.location !== null &&
                     item?.orders_products_stock?.location !== undefined ? (
@@ -297,9 +297,7 @@ const ReturnOrderTable = () => {
                       <div className="awaiting">Awaiting</div>
                     )}
                   </td>
-
                   <td> {displayValueOrNA(item?.new_location)}</td>
-
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
                       <li
@@ -323,13 +321,20 @@ const ReturnOrderTable = () => {
                   <td>{displayValueOrNA(item?.code)}</td>
                   <td>{displayValueOrNA(item?.description)}</td>
                   <td>{displayValueOrNA(item?.parts_count)}</td>
-                  <td>{displayValueOrNA(item?.weight)}KG</td>
+                  <td>
+                    {displayValueOrNA(item?.weight)}{' '}
+                    {item?.weight && item?.weight !== null ? 'KG' : ''}
+                  </td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
                   <td>
-                    {displayValueOrNA(
-                      item?.order_product_returns?.collected_at
-                    )}
+                    {item?.order_product_returns?.length > 0
+                      ? item.order_product_returns.map((ret: any) =>
+                          ret?.collected_at
+                            ? format(new Date(ret.collected_at), 'dd/MM/yyyy')
+                            : 'UNKNOWN'
+                        )
+                      : 'UNKNOWN'}
                   </td>
                   <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
                   <td>
@@ -346,7 +351,9 @@ const ReturnOrderTable = () => {
                           <DownIcon />
                           {printToogle == index && (
                             <div ref={dropdownRef}>
-                              <PrintDropDownReturn />
+                              <PrintDropDownReturn
+                                legacyProductId={item.legacy_product_id}
+                              />
                             </div>
                           )}
                         </li>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -238,6 +238,7 @@ export const StyledTable = styled.table`
     tr {
       border-radius: 40px;
       border-spacing: 0 10px;
+      position: relative;
       .emailInvoiceCheckbox {
         padding-right: 0px;
         width: 0;
@@ -246,7 +247,7 @@ export const StyledTable = styled.table`
         }
       }
       .custom-check {
-        position: relative;
+        position: absloute;
       }
       .emailInvoiceNo {
         padding-left: 0px;
@@ -513,7 +514,7 @@ export const StyledTable = styled.table`
 // Styled components
 export const StyledTableWrapper = styled.div`
   overflow-x: auto;
-  max-height: 300px;
+  max-height: 60vh;
   scrollbar-width: none;
   /* height: 600px; */
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */

package/src/components/order-daily-overview/shared/elements/PrintDropDown.tsx

@@ -1,22 +1,54 @@
 import React from 'react';
 import styled from 'styled-components';
-import { PrintData } from '../interface';
 import { optionsPrint } from '../../common/fakedata';
 import { PrintIconMap } from '../utlis';
 
-const options: PrintData[] = optionsPrint;
+const PrintDropDown = ({
+  legacyProductId,
+}: {
+  legacyProductId: Record<string, any>;
+}) => {
+  const downloadFiles = (label: string) => {
+    const url =
+      legacyProductId?.[
+        `${label
+          .replace('Print ', '')
+          .toLowerCase()
+          .replace(' ', '_')}_url`
+      ];
+
+    if (url) {
+      window.open(url, '_blank');
+    } else {
+      console.log('URL not available for', label);
+    }
+  };
+
+  const isOptionDisabled = (label: string) => {
+    const url =
+      legacyProductId?.[
+        `${label
+          .replace('Print ', '')
+          .toLowerCase()
+          .replace(' ', '_')}_url`
+      ];
+    return !url;
+  };
 
-const PrintDropDown = () => {
-  const downloadFiles = () => {};
   return (
     <OptionsList>
-      {options.map((item, index) => {
+      {optionsPrint.map((item, index) => {
         const IconComponent = PrintIconMap[item.icon];
-        console.log(IconComponent);
+        const isDisabled = isOptionDisabled(item.label);
 
         return (
-          <OptionsListLi key={index} onClick={downloadFiles}>
-            {/* {IconComponent && <IconComponent />} {item.label} */}
+          <OptionsListLi
+            key={index}
+            onClick={() => !isDisabled && downloadFiles(item.label)}
+            disabled={isDisabled}
+          >
+            {IconComponent && <IconComponent />}
+            {item.label}
           </OptionsListLi>
         );
       })}
@@ -44,15 +76,20 @@ export const OptionsList = styled.ul`
   min-width: 194px;
 `;
 
-export const OptionsListLi = styled.li`
+export const OptionsListLi = styled.li<{ disabled?: boolean }>`
   border-bottom: 1px solid #f0f2f2;
   padding: 8px 10px;
   display: flex;
   gap: 12px;
   align-items: center;
   font-size: 13px;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  color: ${({ disabled }) => (disabled ? '#d3d3d3' : 'inherit')};
   &:last-child {
     border: none;
   }
+  &:hover {
+    background-color: ${({ disabled }) =>
+      disabled ? 'transparent' : '#f0f0f0'};
+  }
 `;

package/src/components/order-daily-overview/table/table-data/styles.ts

@@ -576,3 +576,50 @@ export const EmptyDataContainer = styled.div`
   display: flex;
   justify-content: center;
 `;
+
+export const ClearAll = styled.div`
+  border-radius: 20px;
+  border: 1px solid #edebe8;
+  background: #fff;
+  display: flex;
+  padding: 6px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  &.active {
+    background: #313130;
+    & > div {
+      color: #fff;
+    }
+  }
+`;
+export const StyledFilterBtnIcon = styled.div`
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #f1f5f6;
+  .cross {
+    position: relative;
+    &:after {
+      display: inline-block;
+      content: 'X';
+      font-style: normal;
+      font-size: 14px;
+      color: #000;
+    }
+  }
+`;
+export const StyledFilterBtnLabel = styled.div`
+  color: #6a7378;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  white-space: nowrap;
+`;