@bjsdistribution/dms-client-return 0.0.18 → 0.0.19

package/src/components/order-daily-overview/table-view/ReturnPagination.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  StyledContainer,
+  StyledContentWrapper,
+  // StyledDropdown,
+  StyledInfoBox,
+  StyledLabel,
+  StyledPaginationItem,
+  StyledPaginationWrapper,
+  // StyledDropdownData,
+} from './PaginationStyle';
+import PrevIcon from '../../../assets/icons/PrevIcon';
+import NextIcon from '../../../assets/icons/NextIcon';
+import { useAtom } from 'jotai';
+import { Select } from 'antd';
+import { filtersReducerReturnAtom } from '../return-after-table/table-filters/ReturnFilterStore';
+
+const PAGE_SIZE_OPTIONS = [50, 100, 150];
+const MAX_PAGES_TO_SHOW = 5;
+
+const ReturnPagination: React.FC<any> = ({
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  onItemsPerPageChange,
+}) => {
+  const [, dispatch] = useAtom(filtersReducerReturnAtom);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      dispatch({
+        type: 'SET_PAGE',
+        payload: page,
+      });
+
+      onPageChange(page);
+    }
+  };
+
+  const handleItemsPerPageChange = (value: number) => {
+    const newItemsPerPage = value;
+    dispatch({
+      type: 'SET_PERPAGE',
+      payload: newItemsPerPage,
+    });
+
+    // Reset to the first page
+    dispatch({
+      type: 'SET_PAGE',
+      payload: 1,
+    });
+
+    onPageChange(1);
+    onItemsPerPageChange(newItemsPerPage);
+  };
+
+  const getPageNumbers = (
+    currentPage: number,
+    totalPages: number
+  ): number[] => {
+    const pageNumbers: number[] = [1]; // Always show the first page
+
+    if (currentPage > MAX_PAGES_TO_SHOW / 2 + 1) {
+      pageNumbers.push(-1); // Ellipsis
+    }
+
+    const startPage = Math.max(
+      2,
+      Math.min(currentPage - 1, totalPages - MAX_PAGES_TO_SHOW + 2)
+    );
+    const endPage = Math.min(startPage + MAX_PAGES_TO_SHOW - 3, totalPages - 1);
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(i);
+    }
+
+    if (currentPage < totalPages - MAX_PAGES_TO_SHOW / 2 - 1) {
+      pageNumbers.push(-1); // Ellipsis
+    }
+
+    if (totalPages > 1) {
+      pageNumbers.push(totalPages); // Always show the last page
+    }
+
+    return pageNumbers;
+  };
+
+  return (
+    <StyledContainer>
+      <StyledContentWrapper>
+        <StyledInfoBox>
+          Showing {startItem}-{endItem} from {totalItems}
+        </StyledInfoBox>
+        <StyledLabel>Row on Page</StyledLabel>
+        <Select
+          value={itemsPerPage}
+          onChange={handleItemsPerPageChange}
+          style={{ width: 75 }}
+        >
+          {PAGE_SIZE_OPTIONS.map(option => (
+            <Select.Option key={option} value={option}>
+              {option}
+            </Select.Option>
+          ))}
+        </Select>
+        <StyledPaginationWrapper>
+          <StyledPaginationItem
+            onClick={() => handlePageChange(currentPage - 1)}
+          >
+            <PrevIcon />
+          </StyledPaginationItem>
+          {getPageNumbers(currentPage, totalPages).map((pageNumber, index) => (
+            <StyledPaginationItem
+              key={index}
+              active={pageNumber === currentPage}
+              onClick={() => handlePageChange(pageNumber)}
+            >
+              {pageNumber === -1 ? '...' : pageNumber}
+            </StyledPaginationItem>
+          ))}
+          <StyledPaginationItem
+            onClick={() => handlePageChange(currentPage + 1)}
+          >
+            <NextIcon />
+          </StyledPaginationItem>
+        </StyledPaginationWrapper>
+      </StyledContentWrapper>
+    </StyledContainer>
+  );
+};
+
+export default ReturnPagination;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -4,31 +4,43 @@ import { DropDownContainer } from './DropdownStyles';
 import DropDownMenu from './DropDownMenu';
 import DropDownItem from './DropDownItem';
 import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
+import { useCurrentAction, useIsOnHoldOrder } from '../../../store';
 
 const Options = [
-  { label: 'Create Reminder', value: 'create-reminder' },
-  { label: 'Confirm', value: 'confirm' },
-  { label: 'Force Debrief', value: 'force-debrief' },
-  { label: 'Clear Booking Status', value: 'booking-status' },
-  { label: 'Remove From Route', value: 'remove-route' },
-  { label: 'Hold', value: 'hold' },
-  { label: 'Flag', value: 'flag' },
-  { label: 'Cancel', value: 'cancel' },
+  { label: 'Create Reminder', value: 'create-task' },
+  { label: 'Confirm', value: 'confirm-order' },
+  // { label: 'Force Debrief', value: 'force-debrief' },
+  // { label: 'Clear Booking Status', value: 'booking-status' },
+  // { label: 'Remove From Route', value: 'remove-route' },
+  { label: 'Hold', value: 'hold-order' },
+  // { label: 'Flag', value: 'view-flag' },
+  { label: 'Cancel', value: 'cancel-order' },
   { label: 'Charge Log', value: 'charge-log' },
 ];
 
 const OptionsDropDown: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-
+  const [action, setCurrentAction] = useCurrentAction();
+  const [hold] = useIsOnHoldOrder();
+  console.log(action, 'action');
   const handleClick = () => {
     setIsOpen(prev => !prev);
   };
 
-  const handleSelect = (value: string) => {
-    console.log(`Selected: ${value}`);
+  const filteredOptions = Options?.filter(option => {
+    if (hold) {
+      return option.value !== 'hold-order';
+    } else {
+      return option.value !== 'unhold-order';
+    }
+  });
+  const handleSelect = (selectedOption: any) => {
+    console.log(selectedOption);
+    setCurrentAction(selectedOption);
     setIsOpen(false);
   };
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -51,7 +63,9 @@ const OptionsDropDown: React.FC = () => {
         icon={<DropDownLarge />}
         onClick={handleClick}
       />
-      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
+      {isOpen && (
+        <DropDownMenu options={filteredOptions} onSelect={handleSelect} />
+      )}
     </DropDownContainer>
   );
 };

package/src/components/order-view/details-filters/right-side-filters/Details.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useOrderDetails } from '../../store';
 
 const Details = () => {
+  const [orderDetails] = useOrderDetails();
+  const recipient = orderDetails?.order_recipient?.recipient_name || '';
+  const postcodeShow = orderDetails?.order_recipient?.postcode || '';
+
   return (
     <DetailsContainer>
-      <Typo>CUSTOMER RETURN - BJS DEV TEST COMPANY, WS10 8RR</Typo>
+      <Typo>
+        CUSTOMER RETURN - {recipient} , {postcodeShow}
+      </Typo>
     </DetailsContainer>
   );
 };

package/src/components/order-view/fakedata.ts

@@ -1,11 +1,11 @@
 import { ChargeLogData } from './types';
 
 
-export const BJSMenu = [
-  {
-    label: 'Add Order Resources',
-    value: 'add-resources',
-  },
+export const bjsMenu = [
+  // {
+  //   label: 'Add Order Resources',
+  //   value: 'add-resources',
+  // },
   {
     label: 'Split Order',
     value: 'split-order',
@@ -18,10 +18,6 @@ export const BJSMenu = [
     label: 'Release Order',
     value: 'release-order',
   },
-  {
-    label: 'Restore Products',
-    value: 'restore-products',
-  }
 ];
 
 export const OptionsMenu = [

package/src/components/order-view/general-information/dropdowns/BjsMenu.tsx

@@ -4,21 +4,32 @@ import {
   filterDropdownStyles,
 } from '@bjsdistribution/dms-component-library';
 import React from 'react';
-import { BJSMenu } from '../../fakedata';
-import { useCurrentAction } from '../../store';
+import { bjsMenu } from '../../fakedata';
+import { useCurrentAction, useStatusDetails } from '../../store';
 
 function BjsMenu() {
   const [, setCurrentAction] = useCurrentAction();
   const handleSelectChange = (selectedOption: any) => {
-    console.log(selectedOption, 'selectedOption')
     setCurrentAction(selectedOption.value);
   };
 
+  const [orderStatus] = useStatusDetails();
+
+  const isReleased = orderStatus[0]?.released;
+
+  const filteredOptions = bjsMenu?.filter(option => {
+    if (isReleased) {
+      return option.value !== 'release-order';
+    } else {
+      return option;
+    }
+  });
+
   return (
     <SelectDropdown
       placeholder="BJS MENU"
       inputId="bjsmenu"
-      options={BJSMenu}
+      options={filteredOptions}
       onChange={handleSelectChange}
       isSearchable={false}
       styles={{

package/src/components/order-view/general-information/dropdowns/Print.tsx

@@ -1,48 +1,88 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
+import React, { useRef, useState } from 'react';
 import { PrintMenu } from '../../fakedata';
+import { useOrderDetails } from '../../store';
+import { DropDownContainer } from '../../details-filters/left-side-filters/dropdowns/DropdownStyles';
+import DropDownItem from '../../details-filters/left-side-filters/dropdowns/DropDownItem';
+import DropDownLarge from '../../../../assets/icons/DropDownLarge';
+import DropDownMenu from '../../details-filters/left-side-filters/dropdowns/DropDownMenu';
 
 function Print() {
+  const [orderDetails] = useOrderDetails();
+  const gsitId = orderDetails?.gsit_order_id;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  console.log(gsitId, 'gsitId');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const getEnvironment = (): 'development' | 'us' => {
+    console.log('project env', process.env.REACT_APP_API_PATH);
+    return process.env.REACT_APP_API_PATH ===
+      'https://us.dms.api.bjshomedelivery.com'
+      ? 'us'
+      : 'development';
+  };
+
+  const getBaseUrl = (): string => {
+    const environment = getEnvironment();
+    return environment === 'us'
+      ? 'https://us.toolbox.bjshomedelivery.com/api/v1/gsit'
+      : 'https://staging.toolbox.bjshomedelivery.com/api/v1/gsit';
+  };
+
+  const getUrl = (option: string) => {
+    const val = option?.toLowerCase()?.replaceAll(' ', '');
+    const baseUrl = getBaseUrl();
+
+    if (val === 'Proof Of Delivery') {
+      return '';
+    }
+    if (val === 'Proof Of Delivery(DOC)') {
+      return '';
+    }
+    if (val === 'Order Delivery labels') {
+      return `${baseUrl}/generate_labels?pdf=true&product_type=Deliver&order_id=${gsitId}`;
+    }
+    // if (val === 'ordercollectionlabels') {
+    //   return `${baseUrl}/generate_labels?pdf=true&product_type=Collect&order_id=${gsitId}`;
+    // }
+    // if (val === 'orderreturnlabels') {
+    //   return `${baseUrl}/generate_labels?pdf=true&product_type=Return&order_id=${gsitId}`;
+    // }
+    // if (val === 'returnscovernote') {
+    //   return '';
+    // }
+    else {
+      return '';
+    }
+  };
+
+  const handleSelectChange = (selectedOption: any) => {
+    const selectedValue = selectedOption?.value;
+
+    console.log(selectedValue, 'erf');
+    if (selectedValue) {
+      console.log(selectedValue);
+      const url = getUrl(selectedValue);
+      console.log('Generated URL:', url);
+      window.open(url, '_blank');
+    }
+  };
+
   return (
-    <Container>
-      <SelectDropdown
-        placeholder="PRINT"
-        options={PrintMenu}
-        styles={{
-          ...dropdownStyles,
-          ...filterDropdownStyles,
-          container: styles => ({
-            ...styles,
-            cursor: 'pointer',
-          }),
-          menu: styles => ({
-            ...styles,
-            top: '113%',
-            borderRadius: '5px',
-            width: 'max-content',
-            cursor: 'pointer',
-          }),
-          control: styles => ({
-            ...styles,
-            width: '90px',
-            boxShadow: 'none',
-            borderColor: 'transparent',
-            cursor: 'pointer',
-            '&:hover': {
-              boxShadow: 'none',
-              borderColor: 'transparent',
-            },
-          }),
-        }}
+    <DropDownContainer ref={dropdownRef}>
+      <DropDownItem
+        label="PRINT"
+        icon={<DropDownLarge />}
+        onClick={handleClick}
       />
-    </Container>
+      {isOpen && (
+        <DropDownMenu options={PrintMenu} onSelect={handleSelectChange} />
+      )}
+    </DropDownContainer>
   );
 }
-const Container = styled.div``;
 
 export default Print;

package/src/components/order-view/general-information/dropdowns/index.tsx

@@ -1,27 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import BjsMenu from './BjsMenu';
-import CreateTask from './CreateTask';
 import Options from './Options';
 import Print from './Print';
-import ViewEpod from './ViewEpod';
-import SendSms from './SendSms';
-import Tasks from './Tasks';
-import Videos from './Videos';
-import SendEmail from './SendEmail';
-
 function DropDownOptions() {
   return (
     <Container>
-      <CreateTask />
       <BjsMenu />
       <Options />
       <Print />
-      <ViewEpod />
-      <Tasks />
-      <Videos />
-      <SendEmail />
-      <SendSms />
     </Container>
   );
 }

package/src/components/order-view/general-information/index.tsx

@@ -1,33 +1,17 @@
 import React from 'react';
 import Status from './Status';
-// import LockOrder from './LockOrder';
-// import DropDownOptions from './dropdowns';
 import styled from 'styled-components';
-// import LockOrder from './LockOrder';
+// import DropDownOptions from './dropdowns';
 
 function GeneralHeader() {
   return (
     <Section>
       <Status />
-      {/* <LockOrder /> */}
-
-      {/* <LockOrder />
-
-      
-      <DropDownOptions /> */}
+      {/* <DropDownOptions /> */}
     </Section>
   );
 }
 
-const Section = styled.div`
-  /* display: flex;
-  background: #ffffff;
-  // padding: 15px;
-  flex-direction: column;
-  gap: 14px;
-  border-radius: 12px;
-  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-  border: 1px solid #e0e0e0; */
-`;
+const Section = styled.div``;
 
 export default GeneralHeader;

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import React from 'react';
 import { Skeleton } from 'antd';
 import { formatDateTime } from '@bjsdistribution/dms-component-library';
-import { usegetNotes, UseNotesLoading } from '../store';
+import { usegetNotes } from '../store';
 import { NotesTableData } from '../notes/logs/fakeData';
 import {
   IconCover,
@@ -14,7 +14,9 @@ import {
 const GenericAuditLogsTable = () => {
   const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
-  const [isLoading] = UseNotesLoading();
+
+  // const [isLoading] = UseNotesLoading();
+  // console.log(getNotes,'getNotesgetNotes');
 
   return (
     <ScrollableTableWrapper>
@@ -34,14 +36,14 @@ const GenericAuditLogsTable = () => {
         </StickyHeaderWrapper>
         <StyledTable>
           <tbody>
-            {isLoading ? (
+            {getNotes?.loading ? (
               <tr>
                 <td className="noBoder" colSpan={tableHeadData?.length}>
                   <Skeleton />
                 </td>
               </tr>
-            ) : getNotes && getNotes?.length > 0 ? (
-              getNotes?.map((note: any) => (
+            ) : getNotes?.data && getNotes?.data?.length > 0 ? (
+              getNotes?.data?.map((note: any) => (
                 <StyledTr key={note?.id}>
                   <DateTd>
                     <CreatedBy title={note?.created_by}>

package/src/components/order-view/index.tsx

@@ -73,7 +73,6 @@ function OrderView() {
   const paths = splitPath(location.pathname);
   const [, setLocationOptions] = useLocationOptions();
   const [apiCalling] = useApiCalling();
-  console.log(paths, 'paths');
   const [orderResources, setOrderResources] = useOrderProductsResources();
   const [orderToolbox, setOrderToolbox] = useOrderProductsToolbox();
   const [GsitCUstomerId, setGsitCUstomerId] = useGsitCUstomerId();
@@ -142,7 +141,7 @@ function OrderView() {
     }
     // for local
     // if (paths.length >= 0) {
-    //   setOrderId(paths[0]);
+    //   setOrderId(paths[1]);
     // }
   }, [paths]);