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

package/src/components/order-daily-overview/header/route-header/RouterHeader.tsx

@@ -1,8 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
 import HeaderTitle from './title/HeaderTitle';
 import Breadcrumb from './breadCrumb/BreadCrumb';
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+import { DatePicker, DatePickerProps } from 'antd';
+import {
+  useAtom,
+  useClientPortal,
+  useEndDate,
+  useStartDate,
+} from '../../../store';
+import { filtersReducerReturnAtom } from '../../return-after-table/table-filters/ReturnFilterStore';
+import ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
+import { useParams } from 'react-router-dom';
+import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -16,6 +29,50 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubtitle = ' Return', // Default value
   breadcrumbSubPart, // Optional
 }) => {
+  const [clientPortal] = useClientPortal();
+  const [, dispatch] = useAtom(filtersReducerReturnAtom);
+  //CP
+  const [startDate, setStartDate] = useStartDate();
+  const [endDate, setEndDate] = useEndDate();
+  const { status } = useParams();
+
+  useEffect(() => {
+    const storedDates = JSON.parse(localStorage.getItem('returnDate') || '{}');
+    const initialStart = storedDates?.startDate
+      ? dayjs(storedDates.startDate)
+      : null;
+    const initialEnd = storedDates?.endDate ? dayjs(storedDates.endDate) : null;
+
+    if (initialStart) setStartDate(initialStart);
+    if (initialEnd) setEndDate(initialEnd);
+  }, []);
+
+  useEffect(() => {
+    if (clientPortal) {
+      const formattedStart = startDate?.format('YYYY-MM-DD');
+      const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
+
+      const payload = {
+        startDate: formattedStart,
+        endDate: formattedEnd,
+      };
+      localStorage.setItem('returnDate', JSON.stringify(payload));
+      if (formattedStart || formattedEnd) {
+        dispatch({
+          type: 'SET_CP_DATE_FILTER',
+          payload,
+        });
+      }
+    }
+  }, [startDate, endDate]);
+
+  const handleStartDateChange: DatePickerProps['onChange'] = date => {
+    setStartDate(date ?? dayjs());
+  };
+
+  const handleEndDateChange: DatePickerProps['onChange'] = date => {
+    setEndDate(date);
+  };
   return (
     <>
       <HeaderWrapper className="headerWrap">
@@ -29,9 +86,81 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
             />
           </div>
         </StyledFlex>
+
+        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
+
+        {clientPortal &&
+          (status === 'scheduled_for_return' ||
+            status === 'return_completed') && <ReturnAfterSearchBar />}
+
+        {clientPortal && (
+          <DatePickerWrap>
+            <DatePicker
+              value={startDate ? dayjs(startDate) : null}
+              onChange={handleStartDateChange}
+              format={'MMMM D, YYYY'}
+              allowClear={false}
+              disabledDate={current =>
+                !!endDate && current.isAfter(dayjs(endDate), 'day')
+              }
+            />
+            <DatePicker
+              value={endDate ? dayjs(endDate) : null}
+              onChange={handleEndDateChange}
+              format={'MMMM D, YYYY'}
+              disabledDate={current =>
+                !!startDate && current.isBefore(dayjs(startDate), 'day')
+              }
+            />
+          </DatePickerWrap>
+        )}
       </HeaderWrapper>
     </>
   );
 };
+export const DatePickerWrap = styled.div`
+  display: flex;
+  padding-right: 10px;
+  padding-left: 7px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 20px;
+  border: 1px solid #e0e2e7;
+  background: var(--Neutral-White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  min-width: 22vw;
+  height: 35px;
+  input[type='text'] {
+    border-radius: 20px;
+    background: var(--Flowkit-White, #fff);
+    border: none;
+    color: #6a7378;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 8px 0;
+    padding-left: 10px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .ant-picker-outlined {
+    border-style: none !important;
+  }
+
+  .ant-picker-focused {
+    box-shadow: none;
+  }
 
+  /* .ant-picker {
+    .ant-picker-input {
+      width: 150px;
+    }
+  } */
+  .ant-btn {
+    background-color: #3348ff !important;
+  }
+`;
 export default RouterHeader;

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

@@ -1,12 +1,24 @@
 import React from 'react';
 import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
+import { useClientPortal } from '../../store';
+import ReturnStatus from '../../client-portal/ReturnStatus';
 
 function HeaderFilter() {
+  const [clientPortal] = useClientPortal();
+
   return (
-    <CoverPage>
-      <SelectionFilter />
-    </CoverPage>
+    <>
+      {clientPortal ? (
+        <ReturnStatus />
+      ) : (
+        <>
+          <CoverPage>
+            <SelectionFilter />
+          </CoverPage>
+        </>
+      )}
+    </>
   );
 }
 export default HeaderFilter;

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

@@ -26,11 +26,13 @@ import styled from 'styled-components';
 import { Select } from 'antd';
 import { useLocationOptions } from '../../order-view/store';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../common/interface';
 
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  const [customers] = useCustomerData();
+  const [customers, setCustomers] = useCustomerData();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
@@ -47,6 +49,25 @@ function SelectionFilter() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
+  //API for client data
+  const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
+    ApiResponse
+  >({
+    endpoint: `/v1/return/product/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading]);
   //new codee
   const urlCustomerId = searchParams.get('customerId');
   const urlActiontype = searchParams.get('type');
@@ -54,7 +75,6 @@ function SelectionFilter() {
   const selectedCustomer = customers?.find(
     (customer: any) => customer?.customer_id?.toString() === urlCustomerId
   );
-
   const accountNumber = selectedCustomer?.account_number;
 
   //customer name
@@ -91,10 +111,14 @@ function SelectionFilter() {
       setActionTypeOptions(mappedActions);
 
       const mappedLocations = Array.isArray(filteredClient?.return_locations)
-        ? filteredClient?.return_locations?.map((location: any) => ({
-            label: location?.location_name,
-            value: location?.token,
-          }))
+        ? filteredClient.return_locations
+            .filter(
+              (location: any) => location?.location_name && location?.token
+            )
+            .map((location: any) => ({
+              label: location.location_name,
+              value: location.token,
+            }))
         : [];
 
       setLocationOptions(mappedLocations);
@@ -135,10 +159,16 @@ function SelectionFilter() {
         setActionTypeOptions(mappedActions);
 
         const mappedLocations = Array.isArray(filteredClient?.return_locations)
-          ? filteredClient?.return_locations?.map((location: any) => ({
-              label: location?.location_name,
-              value: location?.token,
-            }))
+          ? filteredClient.return_locations
+              .filter((location: any) => {
+                const name = location?.location_name;
+                const token = location?.token;
+                return name && name !== 'null' && token && token !== 'null';
+              })
+              .map((location: any) => ({
+                label: location?.location_name,
+                value: location?.token,
+              }))
           : [];
 
         setLocationOptions(mappedLocations);
@@ -166,9 +196,7 @@ function SelectionFilter() {
       console.log(currentSearch, 'currentSearch');
 
       if (!currentSearch.includes('filter')) {
-        console.log('inside include');
         // for dev
-        //navigate(`filter?${queryParams.toString()}`);
         navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
         // for local
@@ -318,64 +346,66 @@ function SelectionFilter() {
   };
 
   return (
-    <Wrapper>
-      <FilterRow>
-        <LeftColumn>
-          <FilterColumn>
-            <Label>Clients</Label>
-            <StyledAntSelect
-              options={clientOptions}
-              placeholder="Select Client Name"
-              onChange={handleClientChange}
-              style={{ minWidth: '150px' }}
-              value={selectedClient}
-              allowClear
-              onClear={handleClear}
-              filterOption={(input: any, option: any) =>
-                (option?.label ?? '')
-                  .toLowerCase()
-                  .includes(input.toLowerCase())
-              }
-              showSearch
-            />
-          </FilterColumn>
-          {selectedClient && (
-            <>
-              <FilterColumn>
-                <Label>Action Type</Label>
-                <StyledAntSelect
-                  options={actionTypeOptions}
-                  placeholder="Select Action Type"
-                  value={selectedFilterValue}
-                  onChange={handleActionClick}
-                  style={{ minWidth: '150px' }}
-                  allowClear
-                  onClear={handleClearAction}
-                />
-              </FilterColumn>
-
-              <FilterColumn>
-                <Label>Location </Label>
-                <StyledAntSelect
-                  options={locationOptions}
-                  value={selectedLocationValue}
-                  placeholder="Select Location"
-                  onChange={handleLocationChange}
-                  style={{ minWidth: '150px' }}
-                  allowClear
-                  mode="multiple"
-                />
-              </FilterColumn>
-            </>
-          )}
-        </LeftColumn>
-        <RightColumn>
-          <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>
-            Apply
-          </ApplyButton>
-        </RightColumn>
-      </FilterRow>
-    </Wrapper>
+    <>
+      <Wrapper>
+        <FilterRow>
+          <LeftColumn>
+            <FilterColumn>
+              <Label>Clients</Label>
+              <StyledAntSelect
+                options={clientOptions}
+                placeholder="Select Client Name"
+                onChange={handleClientChange}
+                style={{ minWidth: '250px' }}
+                value={selectedClient}
+                allowClear
+                onClear={handleClear}
+                filterOption={(input: any, option: any) =>
+                  (option?.label ?? '')
+                    .toLowerCase()
+                    .includes(input.toLowerCase())
+                }
+                showSearch
+              />
+            </FilterColumn>
+            {selectedClient && (
+              <>
+                <FilterColumn>
+                  <Label>Action Type</Label>
+                  <StyledAntSelect
+                    options={actionTypeOptions}
+                    placeholder="Select Action Type"
+                    value={selectedFilterValue}
+                    onChange={handleActionClick}
+                    style={{ minWidth: '200px' }}
+                    allowClear
+                    onClear={handleClearAction}
+                  />
+                </FilterColumn>
+
+                <FilterColumn>
+                  <Label>Location </Label>
+                  <StyledAntSelect
+                    options={locationOptions}
+                    value={selectedLocationValue}
+                    placeholder="Select Location"
+                    onChange={handleLocationChange}
+                    style={{ minWidth: '200px' }}
+                    allowClear
+                    mode="multiple"
+                  />
+                </FilterColumn>
+              </>
+            )}
+          </LeftColumn>
+          <RightColumn>
+            <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>
+              Apply
+            </ApplyButton>
+          </RightColumn>
+        </FilterRow>
+      </Wrapper>
+    </>
   );
 }
 

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

@@ -285,6 +285,7 @@ const OrderTable = () => {
                 };
                 const status = statusMapping[item?.status_value] || 'Unknown';
                 const statusClass = getStatusClass(status);
+
                 return (
                   <tr key={item.id}>
                     {/* <td>
@@ -295,6 +296,7 @@ const OrderTable = () => {
                     </td> */}
                     <td>{formatDate(new Date(item?.created_at))}</td>
                     <td>{displayValueOrNA(item?.return_location_name)}</td>
+
                     <td>
                       {item?.locations?.length
                         ? item?.locations.join(', ')
@@ -332,6 +334,7 @@ const OrderTable = () => {
                     </td>
 
                     <td>{displayValueOrNA(item?.cube)}</td>
+
                     <td key={item.id}>
                       <StyledAntSelect
                         options={assignOptions}
@@ -343,6 +346,7 @@ const OrderTable = () => {
                         value={item?.bjs_delivery}
                       />
                     </td>
+
                     <td>
                       <ul
                         className="statuscontainer"

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

@@ -125,6 +125,92 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         'x-filters': state['x-filters'].filter(f => f.field !== 'status_id'),
       };
 
+    //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'
+          ),
+        };
+      }
+
+    //client portal
+    case 'SET_CP_DATE_FILTER': {
+      let { startDate, endDate } = action.payload;
+
+      if (!startDate || !endDate) {
+        const storedDates = JSON.parse(
+          localStorage.getItem('returnDate') || '{}'
+        );
+        startDate = startDate ?? storedDates?.startDate;
+        endDate = endDate ?? storedDates?.endDate ?? startDate;
+      }
+
+      const filters = state['x-filters'].filter(f => f.field !== 'created_at');
+
+      if (startDate === endDate) {
+        filters.push({
+          field: 'created_at',
+          op: '=',
+          value: format(new Date(startDate), 'yyyy-MM-dd'),
+        });
+      } else if (startDate && endDate) {
+        filters.push(
+          {
+            field: 'created_at',
+            op: '>=',
+            value: format(new Date(startDate), 'yyyy-MM-dd'),
+          },
+          {
+            field: 'created_at',
+            op: '<=',
+            value: format(new Date(endDate), 'yyyy-MM-dd'),
+          }
+        );
+      }
+
+      return {
+        ...state,
+        'x-filters': filters,
+        'x-pagination': { ...state['x-pagination'], page: 1 },
+      };
+    }
     // case 'CLEAR_CLIENT':
     //   return {
     //     ...state,

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

@@ -209,7 +209,7 @@ const ReturnOrderFilter = () => {
                   className="custom-select"
                   placeholder="Status of Order"
                   onChange={handleStatusOfOrder}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{ minWidth: '250px', maxWidth: '300px' }}
                   value={statusOrder}
                   onClear={handleClear}
                   allowClear
@@ -227,9 +227,19 @@ const ReturnOrderFilter = () => {
                   placeholder="Clients"
                   onChange={handleClientChange}
                   value={selectedClient}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{
+                    minWidth: '150px',
+                    width: 'auto',
+                    cursor: 'pointer',
+                  }}
                   allowClear
                   onClear={handleClearClient}
+                  filterOption={(input: any, option: any) =>
+                    (option?.label ?? '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                  }
+                  showSearch
                 />
               </StyledAntSelect>
             </div>

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

@@ -1,8 +1,29 @@
+import { ExportButton } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
+import { useAtom, useReturnAfterOrderData } from '../../../order-view/store';
+import { filtersReducerReturnAtom } from './ReturnFilterStore';
 
 const TableFilters = () => {
-  return <Container></Container>;
+  const [state] = useAtom(filtersReducerReturnAtom);
+  const [returnAfterOrder] = useReturnAfterOrderData();
+
+  const { 'x-filters': filters } = state;
+  const moduleInfo = {
+    isExportedData: returnAfterOrder?.length <= 0 ? false : true,
+    moduleName: 'return',
+    filter: filters,
+    file_type: 'csv',
+    apiUrlEndPoint: `v1/return/orders/`,
+    reference: 'return_overview_export',
+    feature_name: 'return',
+  };
+  return (
+    <Container>
+      {' '}
+      <ExportButton moduleInfoModule={moduleInfo} />
+    </Container>
+  );
 };
 const Container = styled.div`
   display: flex;

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

@@ -6,10 +6,14 @@ import {
   Text,
 } from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
-import { useCustomerData } from '../../../store';
+import { useClientPortal, useCustomerData } from '../../../store';
+import { useParams } from 'react-router-dom';
+import ReturnRTFilters from '../../../client-portal/ReturnRTFilters';
 
 const ReturnFilter = () => {
   const [customers] = useCustomerData();
+  const [clientPortal] = useClientPortal();
+  const { status } = useParams();
 
   const queryParams = new URLSearchParams(location.search);
   const customerId = queryParams.get('customerId');
@@ -21,14 +25,38 @@ const ReturnFilter = () => {
   const customerName = selectedCustomer?.customer_name;
   // const accountNumber = selectedCustomer?.account_number;
 
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'outstanding_return':
+        return 'Outstanding Return';
+      case 'scheduled_for_return':
+        return 'All Scheduled Orders';
+      case 'return_completed':
+        return 'View Return Order';
+      default:
+        return status
+          .replace(/_/g, ' ')
+          .replace(/\b\w/g, char => char.toUpperCase());
+    }
+  };
+
   return (
     <>
       <StyledFiter>
-        <Text>{customerName}</Text>
-        <StyledFIlterELements>
-          <StyledTableFilter />
-        </StyledFIlterELements>
-        <RightFilters />
+        {!clientPortal ? (
+          <>
+            <Text>{customerName}</Text>
+            <StyledFIlterELements>
+              <StyledTableFilter />
+            </StyledFIlterELements>
+            <RightFilters />
+          </>
+        ) : (
+          <>
+            <Text>{status ? getStatusLabel(status) : ''}</Text>
+            <ReturnRTFilters />
+          </>
+        )}
       </StyledFiter>
     </>
   );