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

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

@@ -5,38 +5,50 @@ import {
 } from '@bjsdistribution/dms-component-library';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useAtom, useSearchAfterText } from '../store';
+import {
+  useAtom,
+  useClientPortal,
+  useReturnConfirmedOrderData,
+  useSearchAfterText,
+  useStatsCPCount,
+} from '../store';
 
 import { ApiResponse } from '../types';
 import { javascriptStringDumpToJSON } from '../utils';
 import { UsePaginationData } from '../order-daily-overview/store/store';
 import { notification } from 'antd';
-import { useReturnAfterOrderData } from '../order-view/store';
 import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import { returnCountType } from './ReturnStatus';
+import { useParams } from 'react-router-dom';
+import { dateFilterCPReducer } from './DateFilterStore';
 
 function ReturnAfterSearchBar() {
   const [searchText, setSearchText] = useState('');
   const [debouncedSearchText, setDebouncedSearchText] = useSearchAfterText();
-  const [, setReturnOrderData] = useReturnAfterOrderData();
-  //condition on client view
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
   const [, setPaginationObject] = UsePaginationData();
+
+  const [statePagination] = useAtom(filtersReducerReturnAtom);
+  const { 'x-pagination': pagination } = statePagination;
+  const [, setCount] = useStatsCPCount();
+  const [clientPortal] = useClientPortal();
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+  const { status } = useParams();
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
   };
-  //CP
-
-  const [state] = useAtom(filtersReducerReturnAtom);
-  const { 'x-filters': filters, 'x-pagination': pagination } = state;
 
   const { paginationData, fetchData: returnAfterCall } = useAxios<ApiResponse>({
     endpoint: '/v1/return/orders/',
     method: 'GET',
-    filters: filters && filters?.length > 0 ? filters : undefined,
+    filters: filters,
     pagination: pagination,
   });
 
   useEffect(() => {
-    if (debouncedSearchText.length > 1) {
+    if (debouncedSearchText?.length > 2) {
       returnAfterCall({
         endPointQuery: `?search_term=${debouncedSearchText}`,
       }).then((response: any) => {
@@ -48,20 +60,21 @@ function ReturnAfterSearchBar() {
           setPaginationObject(rest);
         }
         if (response?.data) {
-          setReturnOrderData(response?.data);
+          setReturnConfirmedData(response?.data);
         } else {
-          setReturnOrderData([]);
+          setReturnConfirmedData([]);
         }
       });
     } else if (
-      debouncedSearchText.length > 0 &&
-      debouncedSearchText.length <= 2
+      debouncedSearchText?.length > 0 &&
+      debouncedSearchText?.length <= 2
     ) {
       notification.warning({
         message: 'Search Phrase cannot be less than 3 characters',
       });
     }
-  }, [debouncedSearchText]);
+  }, [debouncedSearchText, JSON.stringify(filters)]);
+
   // Debouncing effect
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -73,14 +86,61 @@ function ReturnAfterSearchBar() {
   }, [searchText]);
 
   useEffect(() => {
-    if (debouncedSearchText.length === 0) {
+    if (debouncedSearchText?.length === 0) {
       setSearchText('');
     }
   }, [debouncedSearchText]);
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
+
+  const { fetchData: fetchStatsData } = useAxios<{
+    data: returnCountType[];
+  }>({
+    endpoint: `v1/portal/return/stats/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: [...cleanedFilters],
+  });
+
+  useEffect(() => {
+    const validStatuses = ['scheduled_for_return', 'return_completed'];
+    const isClientView = clientPortal && validStatuses.includes(status || '');
+
+    if (!isClientView) return;
+
+    const trimmedText = debouncedSearchText?.trim() || '';
+    if (trimmedText.length > 0 && trimmedText.length <= 2) {
+      notification.warning({
+        message: 'Search phrase cannot be less than 2 characters',
+      });
+      return;
+    }
+    if (trimmedText.length === 0) return;
+    const statusTypeMap: Record<string, string> = {
+      scheduled_for_return: 'scheduled',
+      return_completed: 'complete',
+    };
+
+    const type = statusTypeMap[status as keyof typeof statusTypeMap];
+
+    fetchStatsData({
+      endPointQuery: `?search_term=${trimmedText}&type=${type}`,
+    })
+      .then((response: any) => {
+        if (response?.data) {
+          console.log('inside response', response);
+          setCount(response.data);
+        } else {
+          setCount(null);
+        }
+      })
+      .catch((error: any) => {
+        console.error('Error fetching stats:', error);
+        setCount(null);
+      });
+  }, [debouncedSearchText, status]);
 
   const handleClear = () => {
     setSearchText('');
-    setDebouncedSearchText('');
   };
   return (
     <Search>

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

@@ -2,8 +2,6 @@ import React, { useState } from 'react';
 import HeaderFilter from '../order-daily-overview/header-filters/HeaderFilter';
 import styled from 'styled-components';
 import ReturnFilter from '../order-daily-overview/return-order-table/return-orders-filters/ReturnFilter';
-import ReturnOrderTable from '../order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable';
-import ReturnAfterTable from '../order-daily-overview/return-after-table/ReturnAfterTable';
 import Pagination from '../order-daily-overview/table-view/Pagination';
 import {
   useItemsPerPage,
@@ -11,7 +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">
@@ -43,7 +52,7 @@ const ReturnOverview = () => {
               <ReturnFilter />
               {clientPortal && status === 'outstanding_return' && (
                 <>
-                  <ReturnOrderTable />
+                  <OutstandingTable />
                   {total > 0 && (
                     <Pagination
                       currentPage={page}
@@ -57,7 +66,7 @@ const ReturnOverview = () => {
               )}
               {shouldShowReturnAfterTable && (
                 <>
-                  <ReturnAfterTable />
+                  <ConfirmedMain />
                 </>
               )}
             </Container>

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

@@ -1,55 +1,133 @@
-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 { useSelectedClientPortOrders } from '../store';
+// 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 [selectedReturnOrder] = useSelectedClientPortOrders();
-
+  const [outstandingReturnData] = useClientOutstandingReturnData();
+  const [returnConfirmedData] = useReturnConfirmedOrderData();
+  const [
+    selectedOrderIds,
+    setSelectedOrderIds,
+  ] = useSelectedClientAfterOrders();
+  const [
+    selectedPendingOrderIds,
+    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',
-    };
-  }
-  // console.log(selectedReturnOrder, 'selectedReturnOrder');
+  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 onlyIds = selectedReturnOrder?.map(item => item.id);
-  const isExportEnabled = onlyIds?.length > 0;
+  const isExportEnabled =
+    status === 'outstanding_return'
+      ? selectedPendingOrderIds?.length > 0
+      : status === 'scheduled_for_return' || status === 'return_completed'
+      ? selectedOrderIds?.length > 0
+      : false;
   const { fetchData: callExportApi } = useAxios<{
     data: any[];
     message: string;
@@ -58,12 +136,19 @@ const ReturnRTFilters = () => {
     method: 'POST',
   });
 
-  const handleExport = async () => {
+  const handleExportManifest = async () => {
     if (!isExportEnabled) return;
 
+    const exportOrderIds =
+      status === 'outstanding_return'
+        ? selectedPendingOrderIds
+        : status === 'scheduled_for_return' || status === 'return_completed'
+        ? selectedOrderIds
+        : [];
+
     try {
       const response = (await callExportApi({
-        payload: { order_ids: onlyIds },
+        payload: { order_ids: exportOrderIds },
       })) as {
         code: number | null;
         error?: string | null;
@@ -78,38 +163,16 @@ const ReturnRTFilters = () => {
           message: 'Success',
           description: response?.message || 'Export completed.',
         });
+        window.open(response?.data?.url, '_blank');
 
-        // setSelectedIds([]);
-        const resourceUrl = response.data.url;
-        const downloadResponse = await fetch(resourceUrl);
-
-        if (!downloadResponse.ok) {
-          throw new Error('Failed to fetch the export file.');
+        if (status === 'outstanding_return') {
+          setSelectedPendingOrderIds([]);
+        } else if (
+          status === 'scheduled_for_return' ||
+          status === 'return_completed'
+        ) {
+          setSelectedOrderIds([]);
         }
-
-        const blob = await downloadResponse.blob();
-
-        const urlObject = window.URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = urlObject;
-
-        // You can customize the filename or extract it from headers
-        const contentDisposition = downloadResponse.headers.get(
-          'Content-Disposition'
-        );
-        const filenameMatch = contentDisposition?.match(/filename="?(.+)"?/);
-        const filename = filenameMatch?.[1] || 'download.csv';
-
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        window.URL.revokeObjectURL(urlObject);
-
-        notification.success({
-          message: 'Downloaded',
-          description: 'File downloaded successfully.',
-        });
       } else {
         notification.error({
           message: 'No File URL',
@@ -122,13 +185,33 @@ const ReturnRTFilters = () => {
         message: 'Export Failed',
         description: 'Something went wrong during export.',
       });
+
+      if (status === 'outstanding_return') {
+        setSelectedPendingOrderIds([]);
+      } else if (
+        status === 'scheduled_for_return' ||
+        status === 'return_completed'
+      ) {
+        setSelectedOrderIds([]);
+      }
     }
   };
 
   return (
     <StyledBulkFilterCover className="dmsBulkFilter">
-      <ExportButton moduleInfoModule={moduleInfo} />
-      <StyledBulkItem onClick={handleExport}>
+      {/* <ExportButton moduleInfoModule={moduleInfo} /> */}
+      <ExportCSVButton type="left" onClick={handleExportCSV}>
+        <div className="label">
+          Export CSV <Spin spinning={spinLoading} />
+        </div>
+      </ExportCSVButton>
+      <StyledBulkItem
+        onClick={handleExportManifest}
+        style={{
+          pointerEvents: isExportEnabled ? 'auto' : 'none',
+          opacity: isExportEnabled ? 1 : 0.5,
+        }}
+      >
         <Text>Export Manifest</Text>
       </StyledBulkItem>
     </StyledBulkFilterCover>
@@ -174,6 +257,11 @@ export const StyledBulkItem = styled.div`
       }
     }
   }
+  &:hover:not(:disabled) {
+    background: #f0f0f0;
+    cursor: pointer;
+  }
+
   @media screen and (max-width: 1030px) {
     padding: 6px 4px;
   }
@@ -206,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;