@bjsdistribution/dms-client-return 0.1.21-dev → 0.1.21-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.21-dev",
+  "version": "0.1.21-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -56,6 +56,51 @@ const overviewFilterReducer = (
       };
     }
 
+    //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,

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

@@ -123,12 +123,13 @@ const OutstandingTable = () => {
     }
   };
 
+  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, ...filters];
+  const modifiedFilters = [...baseFilters, ...cleanedFilters];
   const {
     data: fetchedOrderData,
     loading: returnDataLoad,
@@ -145,7 +146,7 @@ const OutstandingTable = () => {
     if (clientPortal && debouncedSearchText === '') {
       fetchData();
     }
-  }, [JSON.stringify(filters), debouncedSearchText]);
+  }, [JSON.stringify(modifiedFilters), debouncedSearchText]);
 
   useEffect(() => {
     setLoading(returnDataLoad);

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

@@ -90,6 +90,7 @@ function ReturnAfterSearchBar() {
       setSearchText('');
     }
   }, [debouncedSearchText]);
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
 
   const { fetchData: fetchStatsData } = useAxios<{
     data: returnCountType[];
@@ -97,7 +98,7 @@ function ReturnAfterSearchBar() {
     endpoint: `v1/portal/return/stats/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: filters,
+    filters: [...cleanedFilters],
   });
 
   useEffect(() => {

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

@@ -9,9 +9,9 @@ import {
 } from '../order-daily-overview/store/store';
 import { useClientPortal } from '../store';
 import { useParams } from 'react-router-dom';
-import RouterHeader from '../order-daily-overview/header/route-header/RouterHeader';
 import OutstandingTable from './OutstandingTable';
 import ConfirmedMain from './return-confirm/ConfirmedMain';
+import ClientRouterHeader from '../order-daily-overview/header/route-header/ClientRouterHeader';
 
 const ReturnOverview = () => {
   const [paginationObj] = UsePaginationData();
@@ -32,9 +32,18 @@ const ReturnOverview = () => {
   const shouldShowReturnAfterTable =
     (clientPortal && status === 'scheduled_for_return') ||
     (clientPortal && status === 'return_completed');
+
+  const validStatuses = [
+    'outstanding_return',
+    'scheduled_for_return',
+    'return_completed',
+  ];
+
   return (
     <>
-      <RouterHeader />
+      {clientPortal &&
+        typeof status === 'string' &&
+        validStatuses.includes(status) && <ClientRouterHeader />}
       <div>
         <DashBoardWrapper>
           <div className="Tableconatiner">

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

@@ -1,25 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import {
-  useAtom,
-  useReturnAfterOrderData,
-  useReturnData,
-} from '../order-view/store';
-import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
-import { ExportButton, useAxios } from '@bjsdistribution/dms-component-library';
+import { useAtom } from '../order-view/store';
+import { useAxios } from '@bjsdistribution/dms-component-library';
 import { useParams } from 'react-router-dom';
-import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
-import { notification } from 'antd';
+// import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import { notification, Spin } from 'antd';
 import {
+  useClientOutstandingReturnData,
+  useReturnConfirmedOrderData,
   useSelectedClientAfterOrders,
   useSelectedClientPortOrders,
 } from '../store';
+import { dateFilterCPReducer } from './DateFilterStore';
 
 const ReturnRTFilters = () => {
-  const [returnData] = useReturnData();
-  const [pendingState] = useAtom(filtersReducerAtom);
-  const [state] = useAtom(filtersReducerReturnAtom);
-  const [returnAfterOrder] = useReturnAfterOrderData();
+  const [outstandingReturnData] = useClientOutstandingReturnData();
+  const [returnConfirmedData] = useReturnConfirmedOrderData();
   const [
     selectedOrderIds,
     setSelectedOrderIds,
@@ -29,32 +25,102 @@ const ReturnRTFilters = () => {
     setSelectedPendingOrderIds,
   ] = useSelectedClientPortOrders();
   const { status } = useParams<{ status: any }>();
-  const { 'x-filters': pendingFilters } = pendingState;
-
-  let moduleInfo: any | null = null;
-  if (status === 'outstanding_return') {
-    moduleInfo = {
-      isExportedData: returnData?.length > 0,
-      moduleName: 'return',
-      filter: pendingFilters,
-      file_type: 'csv',
-      apiUrlEndPoint: `v1/return/product/pending/`,
-      reference: 'return_export',
-      feature_name: 'return',
-    };
-  } else if (['scheduled_for_return', 'return_completed'].includes(status)) {
-    const { 'x-filters': orderFilters } = state;
-
-    moduleInfo = {
-      isExportedData: returnAfterOrder?.length > 0,
-      moduleName: 'return',
-      filter: orderFilters,
-      file_type: 'csv',
-      apiUrlEndPoint: `v1/return/orders/`,
-      reference: 'return_overview_export',
-      feature_name: 'return',
-    };
-  }
+  const [spinLoading, setSpinLoading] = useState<boolean>(false);
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+
+  //export csv
+  const { fetchData: callExportCSV } = useAxios<{
+    data: any[];
+    message: string;
+  }>({
+    endpoint: `/v1/export/generate/`,
+    method: 'POST',
+  });
+  const { fetchData: downloadFile } = useAxios({
+    endpoint: '/v1/export/download/',
+    method: 'POST',
+  });
+  const download: any = (response: any) => {
+    downloadFile({
+      endPointQuery: `${response?.data?.file_reference}`,
+    })
+      .then((response: any) => {
+        if (response?.data?.url) {
+          window.open(response?.data?.url, '_blank');
+        }
+        setSpinLoading(false);
+      })
+      .catch((err: any) => {
+        notification.error({
+          message: 'Failed to download file',
+          description: err,
+        });
+        setSpinLoading(false);
+      });
+  };
+
+  const handleExportCSV = () => {
+    let moduleInfo: any | null = null;
+    const url =
+      process.env.REACT_APP_API_PATH ||
+      'https://development.dmsbackend.bjshomedelivery.com';
+    if (status === 'outstanding_return') {
+      moduleInfo = {
+        isExportedData: outstandingReturnData?.length > 0,
+        file_type: 'csv',
+        moduleName: 'return',
+        filter: [
+          { field: 'isdeleted', op: '=', value: 0 },
+          { field: 'product_return_action_id', op: '=', value: 'RTS' },
+        ],
+        url: `${url}/v1/return/product/pending/`,
+        reference: 'return_outstanding_export',
+        feature_name: 'return',
+      };
+    } else if (['scheduled_for_return', 'return_completed'].includes(status)) {
+      moduleInfo = {
+        isExportedData: returnConfirmedData?.length > 0,
+        file_type: 'csv',
+        moduleName: 'return',
+        url: `${url}/v1/return/orders/`,
+
+        reference:
+          status === 'scheduled_for_return'
+            ? 'return_scheduled_export'
+            : 'return_completed_export',
+        feature_name: 'return',
+        filter: filters,
+      };
+    }
+
+    if (moduleInfo?.isExportedData) {
+      setSpinLoading(true);
+
+      callExportCSV({
+        payload: {
+          file_type: moduleInfo?.file_type,
+          url: moduleInfo?.url,
+          reference: moduleInfo?.reference,
+          feature_name: moduleInfo?.feature_name,
+          filter: moduleInfo?.filter,
+        },
+      })
+        .then((res: any) => {
+          setTimeout(() => download(res), 10000);
+        })
+        .catch(err => {
+          notification.error({
+            message: 'Failed to export csv',
+            description: err,
+          });
+          setSpinLoading(false);
+        });
+    } else {
+      notification.warning({ message: 'No data to Export' });
+    }
+  };
+
   //Export Manifest
   const isExportEnabled =
     status === 'outstanding_return'
@@ -133,7 +199,12 @@ const ReturnRTFilters = () => {
 
   return (
     <StyledBulkFilterCover className="dmsBulkFilter">
-      <ExportButton moduleInfoModule={moduleInfo} />
+      {/* <ExportButton moduleInfoModule={moduleInfo} /> */}
+      <ExportCSVButton type="left" onClick={handleExportCSV}>
+        <div className="label">
+          Export CSV <Spin spinning={spinLoading} />
+        </div>
+      </ExportCSVButton>
       <StyledBulkItem
         onClick={handleExportManifest}
         style={{
@@ -223,4 +294,32 @@ export const StyledBulkItem = styled.div`
     padding: 0;
   }
 `;
+
+export const ExportCSVButton = styled.div<{
+  type: 'left' | 'right' | 'middle';
+}>`
+  display: flex;
+  background: #fff;
+  min-height: 40px;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border-radius: ${props =>
+    props?.type === 'left'
+      ? '50px 0px 0px 50px'
+      : props?.type === 'right'
+      ? ' 0px 50px 50px 0px'
+      : ''};
+  border-right: ${props => (props.type === 'right' ? '' : '1px solid #d0d5dd')};
+  .label {
+    color: #6a7378;
+    text-align: center;
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+  }
+`;
 export default ReturnRTFilters;

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

@@ -37,8 +37,9 @@ function ReturnSearchBar() {
     { field: 'isdeleted', op: '=', value: 0 },
     { field: 'product_return_action_id', op: '=', value: 'RTS' },
   ];
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
 
-  const modifiedFilters = [...baseFilters, ...filters];
+  const modifiedFilters = [...baseFilters, ...cleanedFilters];
   const { paginationData, fetchData: getPendingData } = useAxios<ApiResponse>({
     endpoint: '/v1/return/product/pending/',
     method: 'GET',
@@ -89,7 +90,6 @@ function ReturnSearchBar() {
       setSearchText('');
     }
   }, [debouncedSearchText]);
-
   //
   const { fetchData: fetchStatsData } = useAxios<{
     data: returnCountType[];
@@ -97,7 +97,7 @@ function ReturnSearchBar() {
     endpoint: `v1/portal/return/stats/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: filters,
+    filters: [...cleanedFilters],
   });
 
   useEffect(() => {

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

@@ -37,6 +37,9 @@ const ReturnStatus = () => {
   const [count, setCount] = useStatsCPCount();
   const [clientPortal] = useClientPortal();
   const [debouncedSearchText, setOutstandingSearch] = useSearchText();
+
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
+
   const [
     debouncedSearchAfterText,
     setDebouncedSearchText,
@@ -48,7 +51,7 @@ const ReturnStatus = () => {
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
-    filters: filters,
+    filters: cleanedFilters,
   });
 
   useEffect(() => {
@@ -68,7 +71,6 @@ const ReturnStatus = () => {
         status == 'scheduled_for_return') ||
       status == 'return_completed'
     ) {
-      console.log('CALL');
       fetchData();
     }
   }, [debouncedSearchAfterText, debouncedSearchText, JSON.stringify(filters)]);

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

@@ -252,7 +252,7 @@ const ReturnConfirmedTable = () => {
                             paddingLeft: 0,
                           }}
                         >
-                          <NavLink to={`../${item.id}`}>
+                          <NavLink to={`/return/view/${item.id}`}>
                             {displayValueOrNA(item?.recipient_name)}
                           </NavLink>
                         </li>

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

@@ -0,0 +1,166 @@
+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 ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
+import { useParams } from 'react-router-dom';
+import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
+import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
+
+interface RouterHeaderProps {
+  breadcrumbTitle?: string;
+  breadcrumbSubtitle?: string;
+  breadcrumbSubPart?: string;
+  showDateFilter?: boolean;
+}
+
+const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
+  breadcrumbTitle = 'Clients >', // Default value
+  breadcrumbSubtitle = ' Return', // Default value
+  breadcrumbSubPart, // Optional
+}) => {
+  const [clientPortal] = useClientPortal();
+  const [, dispatch] = useAtom(dateFilterCPReducer);
+  //CP
+  const [startDate, setStartDate] = useStartDate();
+  const [endDate, setEndDate] = useEndDate();
+  const { status } = useParams();
+
+  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,
+      //   };
+
+      if (formattedStart || formattedEnd) {
+        dispatch({
+          type: 'SET_CP_DATE_FILTER',
+          payload: {
+            startDate: formattedStart,
+            endDate: formattedEnd,
+          },
+        });
+      }
+    }
+  }, [startDate, endDate]);
+
+  const handleStartDateChange: DatePickerProps['onChange'] = date => {
+    setStartDate(date ?? null);
+  };
+
+  const handleEndDateChange: DatePickerProps['onChange'] = date => {
+    setEndDate(date);
+  };
+
+  const validStatuses = [
+    'outstanding_return',
+    'scheduled_for_return',
+    'return_completed',
+  ];
+
+  return (
+    <>
+      <HeaderWrapper className="headerWrap">
+        <StyledFlex>
+          <div>
+            <HeaderTitle title={'Return'} />
+            <Breadcrumb
+              title={breadcrumbTitle}
+              subtitle={breadcrumbSubtitle}
+              subPart={breadcrumbSubPart}
+            />
+          </div>
+        </StyledFlex>
+
+        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
+
+        {clientPortal &&
+          (status === 'scheduled_for_return' ||
+            status === 'return_completed') && <ReturnAfterSearchBar />}
+
+        {clientPortal &&
+          typeof status === 'string' &&
+          validStatuses.includes(status) && (
+            <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: #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 ClientRouterHeader;

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

@@ -1,21 +1,9 @@
-import React, { useEffect } from 'react';
+import React 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 ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
-import { useParams } from 'react-router-dom';
-import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
-import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -29,43 +17,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubtitle = ' Return', // Default value
   breadcrumbSubPart, // Optional
 }) => {
-  const [clientPortal] = useClientPortal();
-  const [, dispatch] = useAtom(dateFilterCPReducer);
-  //CP
-  const [startDate, setStartDate] = useStartDate();
-  const [endDate, setEndDate] = useEndDate();
-  const { status } = useParams();
-
-  useEffect(() => {
-    if (clientPortal) {
-      const formattedStart = startDate?.format('YYYY-MM-DD');
-      const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
-      console.log(formattedStart, 'syart', formattedEnd, 'end');
-      const payload = {
-        startDate: formattedStart,
-        endDate: formattedEnd,
-      };
-
-      console.log(payload, 'PAYLOAD');
-      if (formattedStart || formattedEnd) {
-        dispatch({
-          type: 'SET_CP_DATE_FILTER',
-          payload: {
-            startDate: formattedStart,
-            endDate: formattedEnd,
-          },
-        });
-      }
-    }
-  }, [startDate, endDate]);
-
-  const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? null);
-  };
-
-  const handleEndDateChange: DatePickerProps['onChange'] = date => {
-    setEndDate(date);
-  };
   return (
     <>
       <HeaderWrapper className="headerWrap">
@@ -79,34 +30,6 @@ 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>
     </>
   );