@bjsdistribution/dms-client-return 0.1.9-prod → 0.1.10-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.9-prod",
+  "version": "0.1.10-prod",
   "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.3.19-dev",
+    "@bjsdistribution/dms-component-library": "0.3.42-prod",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",
@@ -82,7 +82,8 @@
     "styled-components": "^6.1.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/uuid": "^10.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -95,6 +96,7 @@
     "jotai": "^2.6.3",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-redux": "^9.2.0",
-    "react-switch-selector": "^2.2.1"
+    "react-switch-selector": "^2.2.1",
+    "uuid": "^10.0.0"
   }
 }

package/src/assets/icons/ActionIcon.tsx

@@ -11,7 +11,7 @@ const ActionIcon = () => (
     <path
       d="M0.5 12.2432C0.5 5.61581 5.87258 0.243225 12.5 0.243225C19.1274 0.243225 24.5 5.61581 24.5 12.2432C24.5 18.8706 19.1274 24.2432 12.5 24.2432C5.87258 24.2432 0.5 18.8706 0.5 12.2432Z"
       fill="#E95252"
-      fill-opacity="0.5"
+      fillOpacity="0.5"
     />
     <path
       d="M16.566 9.23825C16.6377 9.16909 16.6948 9.08636 16.7342 8.99488C16.7735 8.90339 16.7943 8.80499 16.7952 8.70541C16.7961 8.60582 16.7772 8.50705 16.7395 8.41486C16.7018 8.32267 16.6462 8.23891 16.5758 8.16846C16.5054 8.098 16.4217 8.04228 16.3295 8.00452C16.2374 7.96677 16.1386 7.94774 16.0391 7.94856C15.9395 7.94938 15.841 7.97002 15.7495 8.00929C15.658 8.04855 15.5752 8.10565 15.506 8.17725L12.5 11.1822L9.495 8.17725C9.42634 8.10356 9.34354 8.04446 9.25154 8.00347C9.15954 7.96247 9.06022 7.94043 8.95952 7.93865C8.85882 7.93688 8.75879 7.9554 8.6654 7.99312C8.57201 8.03084 8.48718 8.08699 8.41596 8.15821C8.34474 8.22943 8.2886 8.31426 8.25087 8.40765C8.21315 8.50104 8.19463 8.60107 8.19641 8.70177C8.19818 8.80247 8.22022 8.90178 8.26122 8.99378C8.30221 9.08578 8.36131 9.16858 8.435 9.23725L11.438 12.2432L8.433 15.2482C8.30052 15.3904 8.22839 15.5785 8.23182 15.7728C8.23525 15.9671 8.31396 16.1525 8.45138 16.2899C8.58879 16.4273 8.77417 16.506 8.96847 16.5094C9.16278 16.5128 9.35082 16.4407 9.493 16.3082L12.5 13.3032L15.505 16.3092C15.6472 16.4417 15.8352 16.5139 16.0295 16.5104C16.2238 16.507 16.4092 16.4283 16.5466 16.2909C16.684 16.1535 16.7627 15.9681 16.7662 15.7738C16.7696 15.5795 16.6975 15.3914 16.565 15.2492L13.562 12.2432L16.566 9.23825Z"

package/src/assets/icons/ArrowDownIcon.tsx

@@ -16,8 +16,8 @@ const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({ fill = '#3A3630' }) => {
       <rect width="24" height="24" fill={fill} />
       <path
         opacity="0.4"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.69104 9.8912C6.82604 9.75637 7.00903 9.68063 7.19984 9.68063C7.39064 9.68063 7.57363 9.75637 7.70864 9.8912L11.9998 14.1824L16.291 9.8912C16.4275 9.76402 16.608 9.69478 16.7946 9.69807C16.9811 9.70136 17.1591 9.77693 17.291 9.90884C17.4229 10.0408 17.4985 10.2187 17.5018 10.4053C17.5051 10.5918 17.4358 10.7723 17.3086 10.9088L12.5086 15.7088C12.3736 15.8436 12.1906 15.9194 11.9998 15.9194C11.809 15.9194 11.626 15.8436 11.491 15.7088L6.69104 10.9088C6.5562 10.7738 6.48047 10.5908 6.48047 10.4C6.48047 10.2092 6.5562 10.0262 6.69104 9.8912Z"
         fill="#3A3630"
       />

package/src/components/client-portal/OutstandingTable.tsx

@@ -0,0 +1,412 @@
+import {
+  Checkbox,
+  displayValueOrNA,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
+import { Empty, notification, Skeleton } from 'antd';
+import { format } from 'date-fns';
+import { useAtom } from 'jotai';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { NavLink, useParams } from 'react-router-dom';
+import dayjs from 'dayjs';
+import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
+import {
+  useClientOutstandingReturnData,
+  useClientPortal,
+  useEndDate,
+  useLocationData,
+  useSearchText,
+  useSelectedClientPortOrders,
+  useStartDate,
+} from '../store';
+import { usefetchAgain } from '../order-view/store';
+import {
+  useLoading,
+  UsePaginationData,
+  usePrintOptionTOggle,
+} from '../order-daily-overview/store/store';
+import SortIcon from '../../common/SortIcon';
+import CaretDownFilledIcon from '../../common/CaretDownFilledIcon';
+import { ApiResponse } from '../types';
+import {
+  CustomDrop,
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from '../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
+import PrinterIcon from '../../assets/icons/PrinterIcon';
+import DownIcon from '../../assets/icons/DownIcon';
+import PrintDropDownReturn from '../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
+
+const OutstandingTable = () => {
+  const [state] = useAtom(filtersReducerAtom);
+  const { 'x-pagination': pagination } = state;
+  const [
+    outstandingReturnData,
+    setOutstandingReturnData,
+  ] = useClientOutstandingReturnData();
+  const [load, setLoading] = useLoading();
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+  const [locationData] = useLocationData();
+  const [, setPaginationObject] = UsePaginationData();
+  const [callForFetch] = usefetchAgain();
+  const [clientPortal] = useClientPortal();
+  const { status } = useParams();
+  const [selectedOrderIds, setSelectedOrderIds] = useSelectedClientPortOrders();
+  const [selectClientAll, setSelectClientAll] = useState(false);
+  const [debouncedSearchText] = useSearchText();
+
+  //sorting
+  const [sortConfig, setSortConfig] = useState<{
+    key: string;
+    direction: 'asc' | 'desc';
+  } | null>(null);
+
+  const handleSort = (key: string) => {
+    setSortConfig((prev: any) => {
+      if (prev?.key === key && prev.direction === 'asc') {
+        return { key, direction: 'desc' };
+      }
+      return { key, direction: 'asc' };
+    });
+  };
+
+  const sortedData = useMemo(() => {
+    if (!outstandingReturnData || !sortConfig) return outstandingReturnData;
+
+    const { key, direction } = sortConfig;
+    return [...outstandingReturnData].sort((a, b) => {
+      const valueA = a[key];
+      const valueB = b[key];
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      }
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc'
+          ? valueA.localeCompare(valueB)
+          : valueB.localeCompare(valueA);
+      }
+      return 0;
+    });
+  }, [outstandingReturnData, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle(prevIndex => (prevIndex === index ? null : index));
+  };
+  // Close dropdown outside click
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setPrintToggle(null);
+    }
+  };
+
+  //CP
+  const [startDate] = useStartDate();
+  const [endDate] = useEndDate();
+
+  const filters = useMemo(() => {
+    if (!clientPortal) return [];
+
+    const stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+
+    const sDate = startDate?.isValid?.() ? startDate : dayjs(stored?.startDate);
+    const eDate = endDate?.isValid?.()
+      ? endDate
+      : stored?.endDate
+      ? dayjs(stored?.endDate)
+      : null;
+
+    if (!sDate?.isValid?.()) return [];
+
+    let dateFilters: any[] = [];
+
+    if (eDate && eDate.isValid()) {
+      dateFilters = [
+        { field: 'created_at', op: '>=', value: sDate.format('YYYY-MM-DD') },
+        {
+          field: 'created_at',
+          op: '<=',
+          value: eDate.add(1, 'day').format('YYYY-MM-DD'),
+        },
+      ];
+    } else {
+      dateFilters = [
+        {
+          field: 'created_at',
+          op: '=',
+          value: sDate.format('YYYY-MM-DD'),
+        },
+      ];
+    }
+
+    const baseFilters: any[] =
+      status === 'outstanding_return'
+        ? [
+            { field: 'isdeleted', op: '=', value: 0 },
+            { field: 'product_return_action_id', op: '=', value: 'RTS' },
+          ]
+        : [];
+
+    return [...baseFilters, ...dateFilters];
+  }, [startDate, endDate, status]);
+
+  const {
+    data: fetchedOrderData,
+    loading: returnDataLoad,
+    paginationData,
+    fetchData,
+  } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/product/pending/',
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+  });
+  console.log(filters, 'outstanding filters');
+  const hasFetchedRef = useRef(false);
+
+  useEffect(() => {
+    const shouldFetch =
+      clientPortal &&
+      debouncedSearchText === '' &&
+      filters?.length > 0 &&
+      !hasFetchedRef.current;
+
+    if (shouldFetch) {
+      fetchData();
+      hasFetchedRef.current = true;
+    }
+  }, [debouncedSearchText, filters, clientPortal]);
+  useEffect(() => {
+    hasFetchedRef.current = false;
+  }, [debouncedSearchText, filters]);
+
+  useEffect(() => {
+    setLoading(returnDataLoad);
+    if (fetchedOrderData && fetchedOrderData?.data) {
+      setOutstandingReturnData(fetchedOrderData?.data);
+      if (paginationData) {
+        try {
+          const { count, ...rest } = JSON.parse(paginationData);
+          setPaginationObject(rest);
+        } catch (error) {
+          console.error('Error parsing paginationData:', error);
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data',
+          });
+        }
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null or undefined',
+        });
+      }
+    }
+  }, [fetchedOrderData, returnDataLoad]);
+
+  // console.log(modifiedFilters, 'modifiedFilters');
+  useEffect(() => {
+    setLoading(returnDataLoad);
+    if (fetchedOrderData && fetchedOrderData?.data && locationData) {
+      const updatedReturnData = fetchedOrderData.data.map(returnItem => {
+        const matchingLocation = locationData.find(
+          (location: any) => location?.token === returnItem?.return_location
+        );
+        return {
+          ...returnItem,
+          new_location: matchingLocation
+            ? matchingLocation?.location_name
+            : null,
+        };
+      });
+
+      setOutstandingReturnData(updatedReturnData);
+    }
+  }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+
+  //Client Portal
+  const handleSelectOrderId = (id: string | number) => {
+    setSelectedOrderIds(prev =>
+      prev.includes(id) ? prev.filter(orderId => orderId !== id) : [...prev, id]
+    );
+  };
+
+  const handleClientSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    setSelectClientAll(isChecked);
+
+    if (isChecked) {
+      setSelectedOrderIds(
+        outstandingReturnData?.map((item: any) => item?.order_id) || []
+      );
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+  return (
+    <>
+      <StyledTableWrapper className="fortables">
+        <StyledTable>
+          <thead>
+            <tr>
+              {/* <th className="emailInvoiceCheckbox">
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+              </th> */}
+              <th className="emailInvoiceCheckbox">
+                <Checkbox
+                  checked={selectClientAll}
+                  onChange={handleClientSelectAll}
+                />
+              </th>
+              <th onClick={() => handleSort('return_location_name')}>
+                <div className="sortIconClass">
+                  Return Location {renderSortIcon('return_location_name')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('recipient_name')}>
+                <div className="sortIconClass">
+                  Recipient {renderSortIcon('recipient_name')}
+                </div>
+              </th>
+              <th>Return Action</th>
+              <th>Code</th>
+              <th>Description</th>
+              <th>Part</th>
+              <th onClick={() => handleSort('weight')}>
+                <div className="sortIconClass">
+                  Weight {renderSortIcon('weight')}
+                </div>
+              </th>
+              <th>CBM</th>
+              <th onClick={() => handleSort('return_reason')}>
+                <div className="sortIconClass">
+                  Return Reason {renderSortIcon('return_reason')}
+                </div>
+              </th>
+              <th>Collected</th>
+              <th onClick={() => handleSort('collection_reason')}>
+                <div className="sortIconClass">
+                  Collection Reason {renderSortIcon('collection_reason')}
+                </div>
+              </th>
+              <th className="emailInvoiceShare">Labels</th>
+            </tr>
+          </thead>
+          <tbody>
+            {load ? (
+              <tr>
+                <td colSpan={14}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : sortedData?.length === 0 ? (
+              <tr>
+                <td colSpan={14}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              sortedData?.map((item: any, index: any) => (
+                <tr key={item.id}>
+                  <td>
+                    <Checkbox
+                      checked={selectedOrderIds.includes(item?.order_id)}
+                      onChange={() => handleSelectOrderId(item?.order_id)}
+                    />
+                  </td>
+                  <td> {displayValueOrNA(item?.return_location_name)}</td>
+                  <td>
+                    <ul style={{ listStyleType: 'none', padding: 0 }}>
+                      <li
+                        style={{
+                          color: '#0099ff',
+                          fontWeight: 600,
+                          paddingLeft: 0,
+                        }}
+                      >
+                        <NavLink to={`/orders/view/${item?.order_id}`}>
+                          {displayValueOrNA(item?.recipient_name)}
+                        </NavLink>
+                      </li>
+                      <li style={{ color: '#888075' }}>
+                        {displayValueOrNA(item?.postcode)}
+                      </li>
+                    </ul>
+                  </td>
+                  <td>{displayValueOrNA(item?.product_return_action)}</td>
+                  <td>{displayValueOrNA(item?.code)}</td>
+                  <td>{displayValueOrNA(item?.description)}</td>
+                  <td>{displayValueOrNA(item?.part)}</td>
+                  <td>
+                    {displayValueOrNA(item?.weight)}{' '}
+                    {item?.weight && item?.weight !== null ? 'KG' : ''}
+                  </td>
+                  <td>{displayValueOrNA(item?.cube)}</td>
+                  <td>{displayValueOrNA(item?.return_reason)}</td>
+                  <td>
+                    {item?.collected_at
+                      ? format(new Date(item?.collected_at), 'dd/MM/yyyy')
+                      : 'UNKNOWN'}
+                  </td>
+
+                  <td>{displayValueOrNA(item?.collection_reason)}</td>
+                  <td>
+                    <ul className="actionbox">
+                      <CustomDrop
+                        ref={dropdownRefParent}
+                        className={printToogle === index ? 'active' : ''}
+                      >
+                        <li
+                          className="shareIconContainer"
+                          onClick={() => OpenDropDown(index)}
+                        >
+                          <PrinterIcon />
+                          <DownIcon />
+                          {printToogle === index && (
+                            <div ref={dropdownRef}>
+                              <PrintDropDownReturn
+                                legacyURL={item?.return_order_product_label}
+                                legacyProductID={item?.legacy_product_id}
+                              />
+                            </div>
+                          )}
+                        </li>
+                      </CustomDrop>
+                    </ul>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
+  );
+};
+
+export default OutstandingTable;