@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

package/src/common/scrollbar/index.tsx

@@ -1,39 +0,0 @@
-import Scrollbars from 'react-custom-scrollbars-2';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  children: React.ReactNode;
-  thumbHeight?: number;
-}
-
-function CustomScrollBar(props: IProps) {
-  const { children, thumbHeight = 66 } = props;
-  return (
-    <Scrollbars
-      thumbSize={thumbHeight}
-      renderTrackHorizontal={props => <TrackHorizontal {...props} />}
-      renderView={props => <View {...props} />}
-      renderThumbVertical={props => <ThumbVertical {...props} />}
-    >
-      {children}
-    </Scrollbars>
-  );
-}
-
-const ThumbVertical = styled.div`
-  background-color: #586164;
-  border-radius: 66px;
-  width: 2px !important; // to overide styles
-  margin-top: 60px;
-`;
-
-const View = styled.div`
-  overflow-x: hidden;
-`;
-
-const TrackHorizontal = styled.div`
-  display: none;
-`;
-
-export default CustomScrollBar;

package/src/common/services-slider/ServiceSlider.tsx

@@ -1,59 +0,0 @@
-import { Switch } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { getIcon } from './helper';
-
-interface SliderProps {
-  serviceName: string;
-  serviceId: number;
-  isSelected: boolean;
-  toggle: (id: number) => void;
-  disabled: boolean;
-}
-
-function ServiceSlider(props: SliderProps) {
-  // const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
-  //   event.preventDefault();
-  //   props.toggle(props.serviceId);
-  // };
-
-  return (
-    <Container>
-      <ServiceIcon src={getIcon(props.serviceId)} />
-      <ServiceName>{props.serviceName}</ServiceName>
-      {/* to stop event propagation */}
-      <div className="hidden">
-        <Switch
-          checked={props.isSelected}
-          name={props.serviceName}
-          onChange={() => {}}
-          disabled={props?.disabled}
-        />
-      </div>
-    </Container>
-  );
-}
-
-const ServiceName = styled.span`
-  color: #6a7378;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  text-transform: capitalize;
-`;
-
-const ServiceIcon = styled.img`
-  min-width: 28px;
-  height: 28px;
-`;
-
-const Container = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  /* cursor: not-allowed; */
-  flex: 1;
-`;
-
-export default ServiceSlider;

package/src/common/services-slider/helper.ts

@@ -1,26 +0,0 @@
-const baseURL = "/assets/images/";
-
-// export type ServiceOffered =
-//   | "Assemble"
-//   | "Take Packaging Away"
-//   | "Disassemble"
-//   | "Collect Disposal"
-//   | "Unpack Items";
-
-export const paths: Record<number, string> = {
-  1: 'assembly.svg', //1
-  2: 'disassembly.svg', //2
-  3: 'unpack_items.svg', //3
-  4: 'packaging_removal.svg', //4
-  5: 'collect_disposal.svg', //5
-};
-
-export const getSubPath = (input: number): string => {
-  const result = paths[input];
-  return result;
-};
-
-export const getIcon = (input: number): string => {
-  const subPath = getSubPath(input);
-  return `${baseURL}${subPath}`;
-};

package/src/common/style.ts

@@ -1,24 +0,0 @@
-
-//   const Left = styled.div`
-//     font-family: 'lato', sans-serif;
-//     font-size: 14px;
-//     font-weight: 500;
-//     line-height: 20px;
-//     color: #8e8a85;
-//   `;
-
-//   const Right = styled.div`
-//     display: flex;
-//     gap: 10px;
-//     align-items: center;
-//   `;
-
-//   const TableFooter = styled.div`
-//     padding: 18px 24px;
-//     background: #ffffff;
-//     display: flex;
-//     justify-content: space-between;
-//     align-items: center;
-//     border-bottom-left-radius: 25px;
-//     border-bottom-right-radius: 25px;
-//   `;

package/src/common/utils.ts

@@ -1,9 +0,0 @@
-import { getProjectEnv } from '@bjsdistribution/dms-component-library';
-
-const basedEnv = getProjectEnv();
-
-export const POSTCODE_LABEL = basedEnv === 'release_us' ? 'Zipcode' : 'Postcode';
-export const CURRENCY_SYMBOL = basedEnv === 'release_us' ? '$' : '£';
-export const WEIGHT_UNIT = basedEnv === 'release_us' ? 'LBS' : 'KG';
-
-export const getEnvironment = () => basedEnv;

package/src/components/client-portal/DateFilterStore.ts

@@ -1,187 +0,0 @@
-import dayjs from 'dayjs';
-import { atom } from 'jotai';
-
-interface Filter {
-  field: string;
-  op: string;
-  value: any;
-}
-
-interface Pagination {
-  page: number;
-  per_page: number;
-}
-
-interface FilterState {
-  'x-filters': Filter[];
-  'x-pagination': Pagination;
-}
-
-const initialState: FilterState = {
-  'x-filters': [{ field: 'order_status', op: '=', value: 'complete' }],
-  'x-pagination': { page: 1, per_page: 50 },
-};
-
-const overviewFilterReducer = (
-  state: FilterState,
-  action: any
-): FilterState => {
-  switch (action.type) {
-    case 'SET_CP_DATE_FILTER': {
-      const { startDate, endDate, status } = action.payload;
-
-      let fieldName = 'created_at';
-      if (status === 'return_completed') {
-        fieldName = 'action_date';
-      }
-
-      const filters: Filter[] = [];
-
-      if (startDate && endDate && startDate === endDate) {
-        filters.push({
-          field: fieldName,
-          op: '>=',
-          value: `${startDate}T00:00:00+00:00`,
-        });
-        filters.push({
-          field: fieldName,
-          op: '<=',
-          value: `${startDate}T23:59:59+00:00`,
-        });
-      } else if (startDate && !endDate) {
-        const nextDay = dayjs(startDate)
-          .add(1, 'day')
-          .format('YYYY-MM-DD');
-
-        filters.push({
-          field: fieldName,
-          op: '>=',
-          value: `${startDate}T00:00:00+00:00`,
-        });
-        filters.push({
-          field: fieldName,
-          op: '<=',
-          value: `${nextDay}T00:00:00+00:00`,
-        });
-      } else {
-        if (startDate) {
-          filters.push({
-            field: fieldName,
-            op: '>=',
-            value: `${startDate}T00:00:00+00:00`,
-          });
-        }
-
-        if (endDate) {
-          filters.push({
-            field: fieldName,
-            op: '<=',
-            value: `${endDate}T23:59:59+00:00`,
-          });
-        }
-      }
-
-      return {
-        ...state,
-        'x-filters': [
-          ...state['x-filters'].filter(
-            f => f.field !== 'created_at' && f.field !== 'action_date'
-          ),
-          ...filters,
-        ],
-      };
-    }
-
-    case 'CLEAR_CP_DATE_FILTER': {
-      console.log('Before clearing:', state['x-filters']);
-      const updatedFilters = state['x-filters'].filter(
-        f => f.field !== 'created_at' && f.field !== 'action_date'
-      );
-
-      return {
-        ...state,
-        'x-filters': updatedFilters,
-      };
-    }
-
-    //client portal
-    case 'SET_SCHEDULED_RETURN_FILTER':
-      if (action.payload) {
-        return {
-          ...state,
-          'x-filters': [
-            ...state['x-filters'].filter(f => f.field !== 'order_status'),
-            {
-              field: 'order_status',
-              op: '=',
-              value: action.payload,
-            },
-          ],
-        };
-      } else {
-        return {
-          ...state,
-          'x-filters': state['x-filters'].filter(
-            f => f.field !== 'order_status'
-          ),
-        };
-      }
-
-    case 'SET_RETURN_COMPLETED_FILTER':
-      if (action.payload) {
-        return {
-          ...state,
-          'x-filters': [
-            ...state['x-filters'].filter(f => f.field !== 'order_status'),
-            {
-              field: 'order_status',
-              op: '=',
-              value: action.payload,
-            },
-          ],
-        };
-      } else {
-        return {
-          ...state,
-          'x-filters': state['x-filters'].filter(
-            f => f.field !== 'order_status'
-          ),
-        };
-      }
-
-    case 'SET_PAGE':
-      return {
-        ...state,
-        'x-pagination': {
-          ...state['x-pagination'],
-          page: action.payload,
-        },
-      };
-
-    case 'SET_PERPAGE':
-      return {
-        ...state,
-        'x-pagination': {
-          ...state['x-pagination'],
-          per_page: action.payload,
-        },
-      };
-    case 'CLEAR_FILTERS':
-      return {
-        ...state,
-      };
-    default:
-      return state;
-  }
-};
-
-const overviewfiltersStateAtom = atom(initialState);
-
-export const dateFilterCPReducer = atom(
-  get => get(overviewfiltersStateAtom),
-  (get, set, action) =>
-    set(
-      overviewfiltersStateAtom,
-      overviewFilterReducer(get(overviewfiltersStateAtom), action)
-    )
-);

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

@@ -1,357 +0,0 @@
-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 } from 'react-router-dom';
-import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
-import {
-  useClientOutstandingReturnData,
-  useClientPortal,
-  useLocationData,
-  useSearchText,
-  useSelectedClientPortOrders,
-} 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';
-import { dateFilterCPReducer } from './DateFilterStore';
-import { WEIGHT_UNIT } from '../../common/utils';
-
-const OutstandingTable = () => {
-  const [statePagination] = useAtom(filtersReducerAtom);
-  const { 'x-pagination': pagination } = statePagination;
-  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 [selectedOrderIds, setSelectedOrderIds] = useSelectedClientPortOrders();
-  const [selectClientAll, setSelectClientAll] = useState(false);
-  const [debouncedSearchText] = useSearchText();
-
-  const [state] = useAtom(dateFilterCPReducer);
-  const { 'x-filters': filters } = state;
-
-  //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);
-    }
-  };
-
-  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
-  const baseFilters = [
-    { field: 'isdeleted', op: '=', value: 0 },
-    { field: 'product_return_action_id', op: '=', value: 'RTS' },
-  ];
-
-  const modifiedFilters = [...baseFilters, ...cleanedFilters];
-  const {
-    data: fetchedOrderData,
-    loading: returnDataLoad,
-    paginationData,
-    fetchData,
-  } = useAxios<ApiResponse>({
-    endpoint: '/v1/return/product/pending/',
-    method: 'GET',
-    filters: modifiedFilters,
-    pagination: pagination,
-  });
-
-  useEffect(() => {
-    if (clientPortal && debouncedSearchText === '') {
-      fetchData();
-    }
-  }, [JSON.stringify(modifiedFilters), debouncedSearchText, pagination]);
-
-  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]);
-
-  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 ({WEIGHT_UNIT}) {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 ? WEIGHT_UNIT : ''}
-                  </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;