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

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

@@ -0,0 +1,242 @@
+import {
+  CrossIcon,
+  SearchIcon,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  useAtom,
+  useClientPortal,
+  useEndDate,
+  useReturnConfirmedOrderData,
+  useSearchAfterText,
+  useStartDate,
+  useStatsCPCount,
+} from '../store';
+
+import { ApiResponse } from '../types';
+import { javascriptStringDumpToJSON } from '../utils';
+import { UsePaginationData } from '../order-daily-overview/store/store';
+import { notification } from 'antd';
+import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import dayjs from 'dayjs';
+import { returnCountType } from './ReturnStatus';
+import { useParams } from 'react-router-dom';
+
+function ReturnAfterSearchBar() {
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearchText, setDebouncedSearchText] = useSearchAfterText();
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
+  //condition on client view
+  const [, setPaginationObject] = UsePaginationData();
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+  //CP
+  const [modifiedStatsFilters, setModifiedStatsFilters] = useState<any[]>([]);
+  const [startDate] = useStartDate();
+  const [endDate] = useEndDate();
+  const [state] = useAtom(filtersReducerReturnAtom);
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const [count, setCount] = useStatsCPCount();
+  const [clientPortal] = useClientPortal();
+  const { status } = useParams();
+
+  const { paginationData, fetchData: returnAfterCall } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/orders/',
+    method: 'GET',
+    filters: filters && filters?.length > 0 ? filters : undefined,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    if (debouncedSearchText?.length > 1) {
+      returnAfterCall({
+        endPointQuery: `?search_term=${debouncedSearchText}`,
+      }).then((response: any) => {
+        if (paginationData) {
+          const formattedPagination = javascriptStringDumpToJSON(
+            paginationData
+          );
+          const { ...rest } = formattedPagination;
+          setPaginationObject(rest);
+        }
+        if (response?.data) {
+          setReturnConfirmedData(response?.data);
+        } else {
+          setReturnConfirmedData([]);
+        }
+      });
+    } else if (
+      debouncedSearchText?.length > 0 &&
+      debouncedSearchText?.length <= 2
+    ) {
+      notification.warning({
+        message: 'Search Phrase cannot be less than 3 characters',
+      });
+    }
+  }, [debouncedSearchText]);
+  // Debouncing effect
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchText(searchText);
+    }, 1000);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchText]);
+
+  useEffect(() => {
+    if (debouncedSearchText?.length === 0) {
+      setSearchText('');
+    }
+  }, [debouncedSearchText]);
+
+  //
+
+  const getDateFilters = (
+    startDate: dayjs.Dayjs | null,
+    endDate: dayjs.Dayjs | null
+  ) => {
+    const stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+
+    const sDate = startDate?.isValid?.() ? startDate : dayjs(stored?.startDate);
+    const eDate = endDate?.isValid?.()
+      ? endDate
+      : stored?.endDate
+      ? dayjs(stored?.endDate)
+      : null;
+
+    if (!sDate?.isValid?.()) return [];
+
+    let dateFilters = [];
+
+    if (eDate && eDate.isValid()) {
+      dateFilters = [
+        { field: 'created_at', op: '>=', value: sDate.format('YYYY-MM-DD') },
+        {
+          field: 'created_at',
+          op: '<=',
+          value: eDate.add(1, 'day').format('YYYY-MM-DD'),
+        },
+      ];
+    } else {
+      dateFilters = [
+        {
+          field: 'created_at',
+          op: '=',
+          value: sDate.format('YYYY-MM-DD'),
+        },
+      ];
+    }
+
+    return dateFilters;
+  };
+
+  useEffect(() => {
+    if (!clientPortal) return;
+
+    const dateFilters = getDateFilters(startDate, endDate);
+    setModifiedStatsFilters(dateFilters);
+  }, [startDate, endDate]);
+
+  const { data: statsData, fetchData: fetchStatsData } = useAxios<{
+    data: returnCountType[];
+  }>({
+    endpoint: `v1/portal/return/stats/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: modifiedStatsFilters,
+  });
+
+  useEffect(() => {
+    const validStatuses = ['scheduled_for_return', 'return_completed'];
+    const isClientView = clientPortal && validStatuses.includes(status || '');
+
+    if (!isClientView || debouncedSearchText?.length < 3) return;
+    console.log('IN after view entered');
+    const statusTypeMap: Record<string, string> = {
+      scheduled_for_return: 'scheduled',
+      return_completed: 'complete',
+    };
+
+    const type = statusTypeMap[status as keyof typeof statusTypeMap];
+
+    const fetchStats = async () => {
+      const response = await fetchStatsData({
+        endPointQuery: `?search_term=${debouncedSearchText}&type=${type}`,
+      });
+      //@ts-ignore
+      if (response?.data) {
+        console.log('inside response', response);
+        // @ts-ignore
+        setCount(response?.data);
+      } else {
+        setCount(null);
+      }
+    };
+
+    fetchStats();
+  }, [debouncedSearchText, status, clientPortal]);
+
+  console.log(statsData, 'statsData');
+
+  console.log(count, 'new count');
+
+  const handleClear = () => {
+    setSearchText('');
+  };
+  return (
+    <Search>
+      <SearchIcon />
+
+      <SearchInput
+        type="text"
+        placeholder="Search"
+        value={searchText}
+        onChange={handleInputChange}
+      />
+      {searchText ? (
+        <ClearButton className="clear" onClick={handleClear}>
+          <CrossIcon />
+        </ClearButton>
+      ) : null}
+    </Search>
+  );
+}
+
+const ClearButton = styled.button`
+  border: none;
+  background: none;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 0;
+  &:hover {
+    color: #000;
+  }
+`;
+
+const Search = styled.div`
+  display: flex;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 20px;
+  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
+  background-color: var(--Flowkit-White, #fff);
+  height: 35px;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+`;
+const SearchInput = styled.input`
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  width: 100%;
+  background: transparent;
+`;
+
+export default React.memo(ReturnAfterSearchBar);

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

@@ -0,0 +1,185 @@
+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 Pagination from '../order-daily-overview/table-view/Pagination';
+import {
+  useItemsPerPage,
+  UsePaginationData,
+} 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';
+
+const ReturnOverview = () => {
+  const [paginationObj] = UsePaginationData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+  const { page, total } = paginationObj;
+  const { status } = useParams();
+  const [clientPortal] = useClientPortal();
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+
+  console.log(status, 'status');
+  const shouldShowReturnAfterTable =
+    (clientPortal && status === 'scheduled_for_return') ||
+    (clientPortal && status === 'return_completed');
+  return (
+    <>
+      <RouterHeader />
+      <div>
+        <DashBoardWrapper>
+          <div className="Tableconatiner">
+            <HeaderFilter />
+            <Container>
+              <ReturnFilter />
+              {clientPortal && status === 'outstanding_return' && (
+                <>
+                  <OutstandingTable />
+                  {total > 0 && (
+                    <Pagination
+                      currentPage={page}
+                      totalItems={total}
+                      itemsPerPage={itemsPerPage}
+                      onPageChange={handlePageChange}
+                      onItemsPerPageChange={handleItemsPerPageChange}
+                    ></Pagination>
+                  )}
+                </>
+              )}
+              {shouldShowReturnAfterTable && (
+                <>
+                  <ConfirmedMain />
+                </>
+              )}
+            </Container>
+          </div>
+        </DashBoardWrapper>
+      </div>
+    </>
+  );
+};
+const Container = styled.div`
+  position: relative;
+  top: -16px;
+`;
+
+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 ReturnOverview;

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

@@ -0,0 +1,228 @@
+import React 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 { useParams } from 'react-router-dom';
+import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import { notification } from 'antd';
+import {
+  useSelectedClientAfterOrders,
+  useSelectedClientPortOrders,
+  // useSelectedClientPortOrders,
+} from '../store';
+
+const ReturnRTFilters = () => {
+  const [returnData] = useReturnData();
+  const [pendingState] = useAtom(filtersReducerAtom);
+  const [state] = useAtom(filtersReducerReturnAtom);
+  const [returnAfterOrder] = useReturnAfterOrderData();
+  // const [selectedReturnOrder] = useSelectedClientPortOrders();
+  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',
+    };
+  }
+  //Export Manifest
+  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;
+  }>({
+    endpoint: `/v1/orders/import/manifest/csv/`,
+    method: 'POST',
+  });
+
+  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: exportOrderIds },
+      })) as {
+        code: number | null;
+        error?: string | null;
+        data?: {
+          url?: string;
+        };
+        message?: string;
+      };
+
+      if (response?.data?.url) {
+        notification.success({
+          message: 'Success',
+          description: response?.message || 'Export completed.',
+        });
+        window.open(response?.data?.url, '_blank');
+
+        if (status === 'outstanding_return') {
+          setSelectedPendingOrderIds([]);
+        } else if (
+          status === 'scheduled_for_return' ||
+          status === 'return_completed'
+        ) {
+          setSelectedOrderIds([]);
+        }
+      } else {
+        notification.error({
+          message: 'No File URL',
+          description: 'Export succeeded but no download URL was returned.',
+        });
+      }
+    } catch (error) {
+      console.error('Error during export or download:', error);
+      notification.error({
+        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={handleExportManifest}
+        style={{
+          pointerEvents: isExportEnabled ? 'auto' : 'none',
+          opacity: isExportEnabled ? 1 : 0.5,
+        }}
+      >
+        <Text>Export Manifest</Text>
+      </StyledBulkItem>
+    </StyledBulkFilterCover>
+  );
+};
+
+const Text = styled.div`
+  color: #6a7378;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+`;
+export const StyledBulkFilterCover = styled.div`
+  border-radius: 100px;
+  border: 1px solid rgba(208, 213, 221, 0.5);
+  background: #fff;
+  display: flex;
+  min-height: 40px;
+  // gap: 8px;
+`;
+
+export const StyledBulkItem = styled.div`
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid #d0d5dd;
+  gap: 8px;
+  position: relative;
+  a {
+    text-decoration: none;
+  }
+  &.disabled {
+    /* opacity: 0.5; */
+    width: 150px;
+    cursor: default;
+    a {
+      cursor: default;
+
+      label {
+        cursor: default;
+      }
+    }
+  }
+  &:hover:not(:disabled) {
+    background: #f0f0f0;
+    cursor: pointer;
+  }
+
+  @media screen and (max-width: 1030px) {
+    padding: 6px 4px;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    box-sizing: border-box;
+    top: 54px;
+  }
+  &:last-child {
+    border-right: none;
+  }
+  &.active svg.arrowDown {
+    transform: rotate(180deg);
+  }
+  label {
+    color: #3a3630;
+    text-align: center;
+    font-family: 'Open Sans';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    cursor: pointer;
+  }
+
+  &.noPadding {
+    padding: 0;
+  }
+`;
+export default ReturnRTFilters;