@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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

@@ -1,64 +1,26 @@
 import React from 'react';
-import { StyledFIlterELements, StyledFiter, StyledTableFilter, Text } from '../../filters/FilterStyle';
+import {
+  StyledFIlterELements,
+  StyledFiter,
+  StyledTableFilter,
+  Text,
+} from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
-
+import { useParams } from 'react-router-dom';
 
 const ReturnFilter = () => {
- 
-
-
+  const { selectedClient } = useParams();
   return (
     <>
       <StyledFiter>
+        <Text> {selectedClient}</Text>
         <StyledFIlterELements>
-          <Text>Client Return</Text>
-          {/* <em>
-            <IconContainer>
-              <ButtonCon
-                className={DataView ? 'active' : ''}
-                onClick={() => ToggleView()}
-              >
-                <TableIcon />
-              </ButtonCon>
-              <ButtonCon
-                className={!DataView ? 'active' : ''}
-                onClick={() => ToggleView()}
-              >
-                <CardsIcon />
-              </ButtonCon>
-            </IconContainer>
-          </em> */}
           <StyledTableFilter />
         </StyledFIlterELements>
         <RightFilters />
       </StyledFiter>
-
-      {/* {DataView ? (
-        <MyTable TableData={TableData} data={data} apiLoading={apiLoading}/>
-      ) : (
-        <CardTable />
-      )} */}
     </>
   );
 };
 
-// const IconContainer = styled.div`
-//   display: flex;
-//   gap: 10px;
-//   cursor: pointer;
-// `;
-
-// const ButtonCon = styled.div`
-//   border-radius: 6px;
-//   width: 24px;
-//   height: 24px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   padding: 2px;
-//   &.active {
-//     background: #ecf1fc;
-//   }
-// `;
-
 export default ReturnFilter;

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

@@ -1,164 +1,87 @@
-// import React, { useEffect } from 'react';
-
-// import { useApiHook } from '@bjsdistribution/dms-component-library';
-// // import { useInQueueData } from '../readyforinvoice/store';
-// // import { useStaticData } from './store';
-// // import useInfiniteScroll from '../readyforinvoice/InfiniteScrolling';
-// import { useAtom } from 'jotai';
-// import { ApiResponse, Column } from '../../../types';
-// import MyTable from '../../table/table-data/MyTable';
-// import { overviewFiltersReducerAtom } from '../FilterStore';
-// import { useInQueueData, useStaticData } from '../../../store';
-// import useInfiniteScroll from '../../../../common/infiniteScrolling';
-// import { data } from '../../table/table-data/Fakedata';
-// // import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
-
-// const ReturnOrderTable: React.FC = () => {
-//   const getStatusId = (data: any) => {
-//     console.log(data, 'datadatadatadata');
-//   };
-
-//   const columns: Column[] = [
-//     { Header: 'Date', accessor: 'name' },
-//     { Header: 'Client', accessor: 'customer_name' },
-//     { Header: 'Account No', accessor: 'account_number' },
-//     { Header: 'Total Orders', accessor: 'total_orders' },
-//     { Header: 'Total Items', accessor: 'total_items' },
-//     { Header: 'Discount', accessor: 'discount' },
-//     { Header: 'Amount', accessor: 'amount' },
-//     { Header: 'VAT', accessor: 'vat_rate' },
-//     { Header: 'Total', accessor: 'total_amount' },
-//     { Header: 'Update Status', accessor: 'status_id', callback: getStatusId },
-//   ];
-
-//   const [filterState, dispatchOverviewFilter] = useAtom(
-//     overviewFiltersReducerAtom
-//   );
-//   const { 'x-pagination': pagination } = filterState;
-
-//   const [, setQueueData] = useInQueueData();  //data
-//   const [, setStaticData] = useStaticData();
-
-//   const {
-//     data: fetchedInvoiceData,
-//     // loadingskeleton,
-//     paginationData,
-//     setShouldPerformAction,
-//   } = useApiHook<ApiResponse>({
-//     endpoint: `/invoices/`,
-//     method: 'GET',
-//     performAction: true,
-//     pagination: pagination,
-//     filters: [
-//       { field: 'invoice_discount_queues.status_id', op: '=', value: 1 },
-//     ],
-//   });
-
-//   // infinite scrolling code start here
-//   const { page, scrollActivated } = useInfiniteScroll(
-//     paginationData,
-//     setShouldPerformAction,
-//     'tableScrolling'
-//   );
-
-//   useEffect(() => {
-//     dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
-//   }, [page]);
-
-//   useEffect(() => {
-//     if (fetchedInvoiceData && fetchedInvoiceData?.data) {
-//       const invoiceData = fetchedInvoiceData?.data;
-
-//       if (scrollActivated) {
-//         setQueueData((prev: any) => {
-//           const newData = invoiceData?.filter(
-//             (newItem: any) =>
-//               !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
-//           );
-//           return [...prev, ...newData];
-//         });
-//       } else {
-//         setQueueData(invoiceData);
-//       }
-//     }
-//   }, [fetchedInvoiceData, scrollActivated, setQueueData]);
-
-//   //for static data
-//   const { data: fetchedStaticData } = useApiHook<any>({
-//     endpoint: `/invoices/getStaticData/all/`,
-//     method: 'GET',
-//   });
-
-//   useEffect(() => {
-//     if (fetchedStaticData && fetchedStaticData?.data) {
-//       const staticData = fetchedStaticData?.data[0];
-//       setStaticData(staticData);
-//     }
-//   }, [fetchedStaticData, setStaticData]);
-
-//   return (
-//     <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
-//       <MyTable
-//         columns={columns}
-//         data={data}
-//         loading={false}
-//         // loadingskeleton={loadingskeleton}
-//       />
-//     </div>
-//   );
-// };
-
-// export default ReturnOrderTable;
-import { Checkbox } from '@bjsdistribution/dms-component-library';
+import {
+  Checkbox,
+  displayValueOrNA,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import { useAtom } from 'jotai';
-import React, { useState } from 'react';
-// import EmailIcon from '../../assets/EmailIcon';
-// import ExcelIcon from '../../assets/ExcelIcon';
-// import PdfIcon from '../../assets/PdfIcon';
-// import { countReducerAtom } from '../invoice-actions/store';
-// import { FormattedDate, getStringValue } from '../utils';
-// import { IconContainers, TdWrapper } from './emailStyles';
-// import { useEmailInvoice, useSelectedEmail } from './store';
-// import Popup from './Popup';
+import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
-// import { StyledTable, StyledTableWrapper } from '../styles';
-// import { EmptyDataContainer } from './emailStyles';
-// import ShareIcon from '../../assets/ShareIcon';
-import { data } from '../../table/table-data/Fakedata';
-// import { StyledTable, StyledTableWrapper } from '../../table-view/TableStyle';
-import { useEmailInvoice, useSelectedEmail } from '../../../store';
-import { countReducerAtom } from '../../../order-view/store';
+import { useSelectedOrders } from '../../../store';
+import { useReturnData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
-import { FormattedDate, getStringValue } from '../../../utils';
-import { StyledTable, StyledTableWrapper } from './returnstyles';
-// import ExportIcon from '../../../../assets/icons/ExportIcon';
-// import ArrivalIcon from '../../../../assets/icons/ArrivalIcon';
+import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../../assets/icons/DownIcon';
+import { useLoading, usePrintOptionTOggle } from '../../store/store';
+import { ApiResponse } from '../../../types';
+import { filtersReducerAtom } from '../../header-filters/filterStore';
+import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
 
 const ReturnOrderTable = ({ loadingskeleton }: any) => {
-  const [emailInvoiceData] = useEmailInvoice();
-  const [,] = useAtom(countReducerAtom);
-  const [selectedInvoices, setSelectedInvoices] = useSelectedEmail();
+  const [state] = useAtom(filtersReducerAtom);
+
+  const [selectedReturnOrder, setSelectedReturnOrder] = useSelectedOrders();
   const [selectAll, setSelectAll] = useState(false);
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const [returnData, setReturnData] = useReturnData();
+  const [, setLoading] = useLoading();
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+
+  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 { data: fetchedOrderData, loading: staticDataLoading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: '/return_order_products/',
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedOrderData && fetchedOrderData?.data) {
+      setReturnData(fetchedOrderData?.data);
+    }
+  }, [fetchedOrderData, staticDataLoading]);
 
   const handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
-      setSelectedInvoices(
-        data.map((invoice: any) => ({
+      setSelectedReturnOrder(
+        returnData.map((invoice: any) => ({
           id: invoice.id,
           status_id: 3,
         }))
       );
     } else {
-      setSelectedInvoices([]);
+      setSelectedReturnOrder([]);
     }
   };
 
   const handleSelectInvoice = (id: any) => {
-    setSelectedInvoices((prevSelectedInvoices: any) => {
+    setSelectedReturnOrder((prevSelectedInvoices: any) => {
       const isSelected = prevSelectedInvoices?.some(
         (invoice: any) => invoice.id === id
       );
@@ -170,7 +93,6 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
       }
     });
   };
-
   return (
     <>
       <StyledTableWrapper id="tableScrolling">
@@ -203,30 +125,32 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                 </td>
                 <td colSpan={6}></td>
               </tr>
-            ) : emailInvoiceData?.length === 0 ? (
+            ) : returnData?.length === 0 ? (
               <tr>
-                <td colSpan={7}>
+                <td colSpan={14}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>
                 </td>
               </tr>
             ) : (
-              data?.map((invoice: any) => (
-                <tr key={invoice.id}>
+              returnData?.map((item: any, index: any) => (
+                <tr key={item.id}>
                   <td>
                     <Checkbox
-                      checked={selectedInvoices?.some(
+                      checked={selectedReturnOrder?.some(
                         (selectedInvoice: any) =>
-                          selectedInvoice?.id === invoice.id
+                          selectedInvoice?.id === item.id
                       )}
-                      onChange={() => handleSelectInvoice(invoice.id)}
+                      onChange={() => handleSelectInvoice(item.id)}
                     />
                   </td>
 
-                  <td>{invoice?.customer_name}</td>
+                  <td>
+                    {displayValueOrNA(item?.orders_products_stock?.location)}
+                  </td>
 
-                  <td>{invoice?.customer_name}</td>
+                  <td> {displayValueOrNA(item?.return_location)}</td>
 
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -237,53 +161,45 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           paddingLeft: 0,
                         }}
                       >
-                        {' '}
-                        {getStringValue(invoice?.account_number)}
+                        {displayValueOrNA(
+                          item?.order_data?.order_recipient?.recipient_name
+                        )}
                       </li>
                       <li style={{ color: '#888075' }}>
-                        {invoice?.customer_name}
+                        {displayValueOrNA(
+                          item?.order_data?.order_recipient?.postcode
+                        )}
                       </li>
                     </ul>
                   </td>
-                  <td>{FormattedDate({ date: invoice?.date })}</td>
+                  <td>{displayValueOrNA(item?.code)}</td>
+                  <td>{displayValueOrNA(item?.description)}</td>
+                  <td>N/A</td>
+                  <td>{displayValueOrNA(item?.weight)}KG</td>
+                  <td>{displayValueOrNA(item?.cube)}</td>
+                  <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
+                  <td>N/A</td>
+                  <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
                   <td>
-                    {/* <TdWrapper>{invoice?.account_number}</TdWrapper> */}
-                    {invoice?.vat_rate_amount}
-                  </td>
-                  <td>{invoice?.customer_name}</td>
-                  <td>{invoice?.customer_name}</td>
-
-                  <td>{invoice?.customer_name}</td>
-                  <td>{invoice?.customer_name}</td>
-                  <td>{invoice?.customer_name}</td>
-                  {/* <td>{invoice?.customer_name}</td> */}
-                  <td>{invoice?.customer_name}</td>
-
-                  {/* <td onClick={() => dispatch({ type: 'email-sent' })}>
-                    <IconContainers>
-                      <i>
-                        <ExportIcon />
-                      </i>
-                    </IconContainers>
-                  </td>
-                  <td>
-                    <IconContainers>
-                      <i>
-                        <PdfIcon />
-                      </i>
-                      <i>
-                        <ArrivalIcon />
-                      </i>
-                      <i>
-                        <PdfIcon />
-                      </i>
-                    </IconContainers>
-                  </td> */}
-                  <td>
-                    <div className="shareIconContainer">
-                      <PrinterIcon />
-                      <DownIcon />
-                    </div>
+                    <ul className="actionbox">
+                      <CustomDrop
+                        ref={dropdownRefParent}
+                        className={printToogle === index ? 'active' : ''}
+                      >
+                        <li
+                          className="shareIconContainer"
+                          onClick={() => OpenDropDown(index)}
+                        >
+                          <PrinterIcon />
+                          <DownIcon />
+                          {printToogle == index && (
+                            <div ref={dropdownRef}>
+                              <PrintDropDown />
+                            </div>
+                          )}
+                        </li>
+                      </CustomDrop>
+                    </ul>
                   </td>
                 </tr>
               ))

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

@@ -4,49 +4,39 @@ import { StyledBulkItem } from '../../filters/BulkFilterStyle';
 import SearchType from '../../header/route-header/search/SearchType';
 import styled from 'styled-components';
 import DownloadIcon from '../../../../assets/icons/DownloadIcon';
+import { countReducerAtom, useAtom } from '../../../order-view/store';
+import { useSelectedOrders } from '../../../store';
 
 const RightFilters = () => {
+  const [, dispatch] = useAtom(countReducerAtom);
+  const [selectedReturnOrder] = useSelectedOrders();
+
   return (
     <Container>
-      <TextConatiner>
-        <Text>Create Return</Text>
-      </TextConatiner>
-      
+      <ButtonText
+        onClick={() => dispatch({ type: 'create-return' })}
+        disabled={selectedReturnOrder?.length === 0}
+      >
+        Create Return
+      </ButtonText>
       <StyledBulkItem>
         <SearchType />
       </StyledBulkItem>
       <IconConatiner>
         <Mid>
           <IconText>Export</IconText>
-          <DownloadIcon/>
+          <DownloadIcon />
         </Mid>
       </IconConatiner>
-     
     </Container>
   );
-
-
-  //   return (
-  //     // <StyledBulkFilterCover>
-
-  //       <StyledBulkItem>
-  //       <SearchType />
-  //       </StyledBulkItem>
-  //       /* {showTableFilter && (
-  //         <StyledBulkItem>
-  //           <TableFilter tableData={TableData[0].tableHead} />
-  //         </StyledBulkItem>
-  //       )} */
-  //     // </StyledBulkFilterCover>
-  //   );
 };
 const Container = styled.div`
   display: flex;
-/* align-items: flex-start; */
-gap: 16px;
-align-items: center;
-
-`
+  /* align-items: flex-start; */
+  gap: 16px;
+  align-items: center;
+`;
 const Mid = styled.div`
   display: flex;
   padding: 4px 10px;
@@ -55,24 +45,31 @@ const Mid = styled.div`
   align-self: stretch;
   border-radius: 15px 0px 0px 15px;
 `;
-const TextConatiner = styled.div`
+
+const ButtonText = styled.button`
+  color: white;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+
   display: flex;
   padding: 7px 12px;
   justify-content: center;
   align-items: center;
   gap: 2px;
   border-radius: 15px;
-  background: rgba(136, 128, 117, 0.35);
-`;
-const Text = styled.div`
-  color: #888075;
-  font-family: "'Lato";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px;
-`;
+  background: #3a3630;
+  font-family: 'Lato';
+  cursor: pointer;
+  border: none;
 
+  &:disabled {
+    border-radius: 15px;
+    background: rgba(136, 128, 117, 0.35);
+    color: #888075;
+    cursor: not-allowed;
+  }
+`;
 
 const IconConatiner = styled.div`
   /* display: flex;
@@ -82,7 +79,7 @@ const IconConatiner = styled.div`
   border-radius: 8px 8px 8px 8px; */
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   background: #f0f2f2;
-  border: 1px solid  #e2e0db;
+  border: 1px solid #e2e0db;
   display: flex;
   padding: 7px 12px;
   justify-content: center;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -232,7 +232,7 @@ export const EmptyDataContainer = styled.div`
 export const StyledTable = styled.table`
   border-spacing: 0 10px;
   width: 100%;
-  min-width: 1600px;
+  /* min-width: 1600px; */
   thead {
     white-space: nowrap;
     tr {
@@ -305,6 +305,55 @@ export const StyledTable = styled.table`
           /* fontWeight: 600,
           paddingLeft: 0, */
           cursor: pointer;
+          position: relative;
+        }
+        .statusCancelled {
+          color: #e95252;
+          /* background: rgba(233, 82, 82, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusOnHold {
+          color: #f4a503;
+          /* background: #fff1d6; */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusSubContracted {
+          color: #845adf;
+          /* background: rgba(132, 90, 223, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusAwaiting {
+          color: #845adf;
+          /* background: rgba(132, 90, 223, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusCompleted {
+          color: #1f9254;
+          /* background: rgba(41, 204, 106, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusOutstanding {
+          color: #f4a503;
+          /* background: #fff1d6; */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusUnknown {
+          color: #000;
+          /* background: #fff; */
+          padding: 4px 8px;
+          border-radius: 4px;
         }
         .statustext {
           color: #1f9254;
@@ -337,6 +386,10 @@ export const StyledTable = styled.table`
           border-radius: 22px;
           background: rgba(41, 204, 106, 0.15);
         }
+        ul > li > a {
+          text-decoration: none !important;
+          color: #0099ff;
+        }
       }
       &:nth-child(even) td {
         background: #f6fbff;
@@ -445,6 +498,7 @@ export const StyledTableWrapper = styled.div`
   overflow-x: auto;
   max-height: calc(100vh - 396px);
   scrollbar-width: none;
+  height: 400px;
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
   &::-webkit-scrollbar {
     width: 5px;
@@ -466,3 +520,17 @@ export const StyledTableWrapper = styled.div`
     background: #7b61ff;
   }
 `;
+
+export const CustomDrop = styled.div`
+  /* border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #fff;
+  display: flex;
+  padding: 4px 8px;
+  gap: 8px;
+  align-items: center; */
+  cursor: pointer;
+  &.active .drop {
+    transform: rotate(180deg);
+  }
+`;