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

package/src/components/client-portal/return-confirm/ConfirmedMain.tsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+// import OrderTable from './table/OrderTable';
+// import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
+// import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
+// import {
+//   useItemsPerReturnPage,
+//   useLoading,
+//   UsePaginationData,
+//   UsePaginationReturnData,
+// } from '../store/store';
+// import { ApiResponse } from '../common/interface';
+// import { useAxios } from '@bjsdistribution/dms-component-library';
+// import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
+// import { notification } from 'antd';
+// import ReturnPagination from '../table-view/ReturnPagination';
+import {
+  useAtom,
+  // useCallApiAgain,
+  useReturnConfirmedOrderData,
+  useSearchAfterText,
+} from '../../store';
+import ReturnConfirmedTable from './ReturnConfirmedTable';
+import {
+  useItemsPerReturnPage,
+  useLoading,
+  UsePaginationData,
+  UsePaginationReturnData,
+} from '../../order-daily-overview/store/store';
+import { filtersReducerReturnAtom } from '../../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../types';
+import { notification } from 'antd';
+import ReturnPagination from '../../order-daily-overview/table-view/ReturnPagination';
+import { useParams } from 'react-router-dom';
+
+const ConfirmedMain = () => {
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
+  const [, setLoading] = useLoading();
+  const [state] = useAtom(filtersReducerReturnAtom);
+  // const [callApi] = useCallApiAgain();
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const [paginationObj] = UsePaginationReturnData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
+  const [, setPaginationObject] = UsePaginationData();
+  const { page, total } = paginationObj;
+  const [debouncedSearchText] = useSearchAfterText();
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+  const { status } = useParams();
+
+  const {
+    data: fetchedReturnOrderData,
+    loading,
+    paginationData,
+    fetchData,
+  } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/orders/',
+    method: 'GET',
+    filters: filters && filters?.length > 0 ? filters : undefined,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    const shouldFetch = debouncedSearchText === '' && filters?.length > 0;
+
+    if (shouldFetch) {
+      fetchData();
+    }
+  }, [debouncedSearchText, status, JSON.stringify(filters)]);
+
+  useEffect(() => {
+    setLoading(loading);
+
+    if (fetchedReturnOrderData?.data) {
+      setReturnConfirmedData(fetchedReturnOrderData?.data);
+
+      if (paginationData) {
+        try {
+          const { count, ...rest } = JSON.parse(paginationData);
+          setPaginationObject(rest);
+        } catch (error) {
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data',
+          });
+        }
+      }
+    }
+  }, [fetchedReturnOrderData, loading]);
+
+  return (
+    <div>
+      <DashBoardWrapper>
+        {/* <RouterHeader /> */}
+        <div className="Tableconatiner">
+          {/* <HeaderFilter /> */}
+          <Container>
+            <ReturnConfirmedTable />
+            {total > 0 && (
+              <ReturnPagination
+                currentPage={page}
+                totalItems={total}
+                itemsPerPage={itemsPerPage}
+                onPageChange={handlePageChange}
+                onItemsPerPageChange={handleItemsPerPageChange}
+              ></ReturnPagination>
+            )}
+          </Container>
+        </div>
+      </DashBoardWrapper>
+    </div>
+  );
+};
+const Container = styled.div`
+  position: relative;
+  /* top: -30px; */
+`;
+const DashBoardWrapper = styled.section`
+  .Tableconatiner {
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    display: block;
+    padding: 15px 20px;
+  }
+  .headerWrap,
+  .tableData,
+  .styleCovered {
+    transition: all ease 0.5s;
+  }
+  &.stickyTableHead {
+    h2 {
+      font-size: 21px;
+    }
+    .headerWrap {
+      height: 84px;
+      padding: 10px;
+      border-radius: 0px 0px 15px 15px;
+      > div {
+        position: relative;
+        z-index: 10;
+      }
+    }
+    .styleCovered {
+      margin-top: -32px;
+      width: 67%;
+      float: right;
+      gap: 5px;
+      padding-right: 11px;
+
+      li {
+        padding: 4px 10px 5px 5px;
+        gap: 5px;
+        .svgCover {
+          width: 30px;
+          height: 30px;
+          svg {
+            height: auto;
+            width: 58%;
+          }
+        }
+        .countDigit {
+          font-size: 19px;
+        }
+      }
+      .countMess {
+        font-size: 13px;
+      }
+    }
+    .dmsBulkFilter {
+      min-height: unset;
+      gap: 4px;
+      > div {
+        padding: 4px 12px;
+        label {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .StyledFilterList {
+      gap: 4px;
+      li {
+        height: 29px;
+        padding: 3px 8px;
+        gap: 4px;
+        .StyledFilterBtnIcon {
+          width: 20px;
+          height: 20px;
+          svh {
+            width: 10px;
+            height: auto;
+          }
+        }
+        .StyledFilterBtnLabel {
+          font-size: 13px;
+        }
+      }
+    }
+    .StyledFilterLabel {
+      padding-left: 10px;
+      span {
+        font-size: 13px;
+      }
+    }
+    .cardcontainer.tableData {
+      max-height: calc(100vh - 310px);
+      min-height: calc(100vh - 310px);
+    }
+
+    .tableData {
+      max-height: calc(100vh - 320px);
+      min-height: calc(100vh - 320px);
+
+      margin-top: 8px;
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        th {
+          font-size: 13px;
+          padding: 2px 15px;
+        }
+      }
+    }
+  }
+`;
+
+export default ConfirmedMain;

package/src/components/client-portal/return-confirm/ReturnConfirmedTable.tsx

@@ -0,0 +1,404 @@
+import { Empty } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Skeleton } from 'antd';
+import { NavLink } from 'react-router-dom';
+import {
+  Checkbox,
+  displayValueOrNA,
+  // useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useLoading,
+  usePrintOptionTOggle,
+} from '../../order-daily-overview/store/store';
+import {
+  useReturnConfirmedOrderData,
+  useSelectedClientAfterOrders,
+} from '../../store';
+import { useOrderId } from '../../order-view/store';
+import SortIcon from '../../../common/SortIcon';
+import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
+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 PrintDropDown from '../../order-daily-overview/shared/elements/PrintDropDown';
+import { formatDate } from '../../order-daily-overview/shared/utlis';
+
+const ReturnConfirmedTable = () => {
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+  const [, setOrderId] = useOrderId();
+  const [returnConfirmedTable] = useReturnConfirmedOrderData();
+  const [loading] = useLoading();
+  const [selectClientAll, setSelectClientAll] = useState(false);
+  const [
+    selectedOrderIds,
+    setSelectedOrderIds,
+  ] = useSelectedClientAfterOrders();
+  //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 (!returnConfirmedTable || !sortConfig) return returnConfirmedTable;
+
+    const { key, direction } = sortConfig;
+    return [...returnConfirmedTable].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;
+    });
+  }, [returnConfirmedTable, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle((prevIndex: any) => (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);
+    }
+  };
+
+  // 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
+  //     );
+
+  //     if (isSelected) {
+  //       return prevSelectedInvoices.filter((items: any) => items.id !== id);
+  //     } else {
+  //       return [...prevSelectedInvoices, { id, status_id: 3 }];
+  //     }
+  //   });
+  // };
+
+  const getStatusClass = (status: string) => {
+    switch (status) {
+      case 'Cancelled':
+        return { color: '#E95252', background: 'rgba(233, 82, 82, 0.15)' };
+      case 'On Hold':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Sub-Contracted':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Awaiting route':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Awaiting':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Completed':
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)',
+        };
+      case 'Outstanding':
+        return { color: '#FF9900', background: 'rgba(255, 153, 0, 0.15)' };
+      case 'Routed':
+        return { color: '#6396E5', background: 'rgba(99, 150, 229, 0.15)' };
+      default:
+        return { color: '#000', background: '#fff' };
+    }
+  };
+
+  // API for Assign
+  // const {
+  //   data: actionResponse,
+  //   setShouldPerformAction: setAssignAction,
+  //   error: apiError,
+  // } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `return_orders/update/assign/`,
+  //   method: 'PUT',
+  //   body: [assignPayload],
+  //   performAction: false,
+  // });
+
+  //client options
+  // const assignOptions = assignData?.map((option: any) => ({
+  //   label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
+  //   value: option?.bjs_delivery,
+  // }));
+
+  // const handleAssignPayload = (Id: number, value: boolean) => {
+  //   setCallAPi(false);
+  //   setAssign(value);
+  //   setAssignPayload({
+  //     ...assignPayload,
+  //     return_order_id: Id,
+  //     bjs_delivery: value,
+  //   });
+  //   setAssignAction(true);
+  // };
+
+  // useEffect(() => {
+  //   //@ts-ignore
+  //   if (actionResponse?.code === 200) {
+  //     setCallAPi(true);
+  //     notification.success({
+  //       message: 'Success',
+  //       // @ts-ignore
+  //       description: `${actionResponse?.message}`,
+  //     });
+  //     // @ts-ignore
+  //   } else if (apiError?.detail) {
+  //     notification.error({
+  //       message: 'Failure',
+  //       // @ts-ignore
+  //       description: `${apiError?.detail[0]?.msg}`,
+  //     });
+  //   }
+  // }, [actionResponse, apiError]);
+
+  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(
+        returnConfirmedTable?.map((item: any) => item?.id) || []
+      );
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+  console.log('selectedOrderIds===>', selectedOrderIds);
+  console.log('returnConfirmedTable=====>', returnConfirmedTable);
+  return (
+    <>
+      <StyledTableWrapper className="fortables">
+        <StyledTable>
+          <thead>
+            <tr>
+              {/* <th className="emailInvoiceCheckbox">
+                <Checkbox checked={false} />
+              </th> */}
+              <th className="emailInvoiceCheckbox">
+                <Checkbox
+                  checked={selectClientAll}
+                  onChange={handleClientSelectAll}
+                />
+              </th>
+              <th onClick={() => handleSort('created_at')}>
+                <div className="sortIconClass">
+                  Created {renderSortIcon('created_at')}
+                </div>
+              </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> Client</th>
+              <th>Consignment</th>
+              <th>Return Order No</th>
+              <th> Total Parts</th>
+              <th onClick={() => handleSort('weight')}>
+                <div className="sortIconClass">
+                  Total Weight {renderSortIcon('weight')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('cube')}>
+                <div className="sortIconClass">
+                  Total CBM {renderSortIcon('cube')}
+                </div>
+              </th>
+              <th>Status</th>
+              <th className="emailInvoiceShare">Labels</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={16}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={16}></td>
+              </tr>
+            ) : sortedData?.length === 0 ? (
+              <tr>
+                <td colSpan={16}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              sortedData?.map((item: any, index: any) => {
+                const statusMapping: any = {
+                  cancelled: 'Cancelled',
+                  'on hold': 'On Hold',
+                  SC: 'Sub-Contracted',
+                  'awaiting route': 'Awaiting',
+                  'awaiting confirmation': 'Awaiting',
+                  complete: 'Completed',
+                  outstanding: 'Outstanding',
+                  routed: 'Routed',
+                  failed: 'Failed',
+                };
+                const status = statusMapping[item?.status_value] || 'Unknown';
+                const statusClass = getStatusClass(status);
+
+                return (
+                  <tr key={item.id}>
+                    <td>
+                      <Checkbox
+                        checked={selectedOrderIds.includes(item?.id)}
+                        onChange={() => handleSelectOrderId(item?.id)}
+                      />
+                    </td>
+                    <td>{formatDate(new Date(item?.created_at))}</td>
+                    <td>{displayValueOrNA(item?.return_location_name)}</td>
+                    <td onClick={() => setOrderId(item.id)}>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          <NavLink to={`../${item.id}`}>
+                            {displayValueOrNA(item?.recipient_name)}
+                          </NavLink>
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(item?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
+
+                    <td>{displayValueOrNA(item?.customer_name)}</td>
+
+                    <td>{displayValueOrNA(item?.consignment)}</td>
+                    <td>{displayValueOrNA(item?.order_number)}</td>
+
+                    <td>{displayValueOrNA(item?.total_products)}</td>
+                    <td>
+                      {displayValueOrNA(item?.weight)}{' '}
+                      {item?.weight && item?.weight > 0 ? 'KG' : ''}
+                    </td>
+
+                    <td>{displayValueOrNA(item?.cube)}</td>
+
+                    <td>
+                      <ul
+                        className="statuscontainer"
+                        style={{
+                          listStyleType: 'none',
+                          background: statusClass.background,
+                        }}
+                      >
+                        <li
+                          className="statustext"
+                          style={{ color: statusClass.color }}
+                        >
+                          {status}
+                        </li>
+                      </ul>
+                    </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}>
+                                <PrintDropDown legacyProductId={item} />
+                              </div>
+                            )}
+                          </li>
+                        </CustomDrop>
+                      </ul>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
+  );
+};
+
+export default ReturnConfirmedTable;

package/src/components/order-daily-overview/common/fakedata.tsx

@@ -119,6 +119,24 @@ export const optionsPrint: PrintOption[] = [
   },
 ];
 
+export const optionsClientPortPrint: PrintOption[] = [
+  {
+    icon: 'deliveryLables',
+    label: 'Print Delivery Labels',
+    type: 'delivery_label_url',
+  },
+  {
+    icon: 'customerLables',
+    label: 'Print Customer Labels',
+    type: 'customer_label_url',
+  },
+  {
+    icon: 'collectionLables',
+    label: 'Print Return Labels',
+    type: 'return_label_url',
+  },
+];
+
 export const optionsForReturnPrint = [
   { icon: 'deliveryLables', label: 'Print Return Labels' },
 ];