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

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

@@ -10,6 +10,7 @@ import SortIcon from '../../../../common/SortIcon';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { usefetchAgain, useReturnData } from '../../../order-view/store';
 import {
+  useCustomerData,
   useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
@@ -27,7 +28,7 @@ import {
 } from '../../store/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -39,13 +40,14 @@ const ReturnOrderTable = () => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
-  const [createReturn, setReturnPayload] = useReturnPayload();
+  const [, setReturnPayload] = useReturnPayload();
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
   const [locationData] = useLocationData();
   const [, setPaginationObject] = UsePaginationData();
   const [callForFetch] = usefetchAgain();
-
+  const [searchParams] = useSearchParams();
+  const urlCustomerId = searchParams.get('customerId');
   //sorting
   const [sortConfig, setSortConfig] = useState<{
     key: string;
@@ -168,7 +170,15 @@ const ReturnOrderTable = () => {
     }
     // setShouldPerformAction(false);
   }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+  const [customers] = useCustomerData();
+
+  const selectedCustomer = customers?.find((customer: any) => {
+    const customerId = customer?.customer_id?.toString();
+    return customerId && customerId === urlCustomerId;
+  });
 
+  const accountNumber = selectedCustomer?.account_number;
+  console.log(selectedCustomer, 'selectedCustomer');
   const handleSelectAll = (e: any) => {
     const isChecked = e.target.checked;
     setSelectAll(isChecked);
@@ -187,8 +197,8 @@ const ReturnOrderTable = () => {
       }));
       const newPayload = filteredData.map((loc: any) => ({
         id: loc.id,
-        account_number: createReturn?.account_number,
-        customer_id: +createReturn?.customer_id,
+        account_number: accountNumber,
+        customer_id: Number(urlCustomerId),
         products: [loc?.legacy_product_id],
         return_action: loc?.product_return_action,
         return_location_token: loc?.return_location || null,
@@ -214,7 +224,6 @@ const ReturnOrderTable = () => {
       const isSelected = prevSelectedLocations?.some(
         (loc: any) => loc.id === id
       );
-
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id
@@ -237,8 +246,8 @@ const ReturnOrderTable = () => {
       } else {
         const newReturnPayload = {
           id,
-          account_number: createReturn?.account_number,
-          customer_id: +createReturn?.customer_id,
+          account_number: accountNumber,
+          customer_id: Number(urlCustomerId),
           products: [legacy_product_id],
           return_action: product_return_action || null,
           return_location_token: return_location || null,
@@ -299,7 +308,6 @@ const ReturnOrderTable = () => {
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-
   return (
     <>
       <StyledTableWrapper className="fortables">
@@ -310,7 +318,10 @@ const ReturnOrderTable = () => {
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th> */}
               {returnData?.some(
-                (item: any) => item?.product_return_action === 'RTS'
+                (item: any) =>
+                  item?.product_return_action === 'RTS' &&
+                  item?.return_location !== 'null' &&
+                  item?.return_location !== null
               ) ? (
                 <th className="emailInvoiceCheckbox">
                   <Checkbox checked={selectAll} onChange={handleSelectAll} />
@@ -376,7 +387,9 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {item?.product_return_action === 'RTS' ? (
+                    {item?.product_return_action === 'RTS' &&
+                    item?.return_location !== 'null' &&
+                    item?.return_location !== null ? (
                       <Checkbox
                         className="custom-check"
                         checked={selectedReturnOrder.some(

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

@@ -1,14 +1,34 @@
 import React from 'react';
 import styled from 'styled-components';
-import { countReducerAtom, useAtom } from '../../../order-view/store';
+import {
+  countReducerAtom,
+  useAtom,
+  useReturnData,
+} from '../../../order-view/store';
 import { useSelectedOrders } from '../../../store';
 // import { StyledBulkItem } from '../../filters/BulkFilterStyle';
 // import SearchType from '../../header/route-header/search/SearchType';
 // import DownloadIcon from '../../../../assets/icons/DownloadIcon';
+import { ExportButton } from '@bjsdistribution/dms-component-library';
+import { filtersReducerAtom } from '../../header-filters/filterStore';
+// import { FilterIconConatiner } from '../../filters/FilterStyle';
 
 const RightFilters = () => {
   const [, dispatch] = useAtom(countReducerAtom);
   const [selectedReturnOrder] = useSelectedOrders();
+  const [returnData] = useReturnData();
+  const [state] = useAtom(filtersReducerAtom);
+
+  const { 'x-filters': filters } = state;
+  const moduleInfo = {
+    isExportedData: returnData?.length <= 0 ? false : true,
+    moduleName: 'return',
+    filter: filters,
+    file_type: 'csv',
+    apiUrlEndPoint: `v1/return/product/pending/`,
+    reference: 'return_export',
+    feature_name: 'return',
+  };
 
   return (
     <Container>
@@ -22,11 +42,11 @@ const RightFilters = () => {
         <SearchType />
       </StyledBulkItem> */}
       {/* <IconConatiner>
-        <Mid>
-          <IconText>Export</IconText>
-          <DownloadIcon />
-        </Mid>
-      </IconConatiner> */}
+        <Mid> */}
+      <ExportButton moduleInfoModule={moduleInfo} />
+      {/* <DownloadIcon />
+        </Mid> */}
+      {/* </IconConatiner> */}
     </Container>
   );
 };

package/src/components/order-daily-overview/shared/elements/PrintDropDown.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { optionsPrint } from '../../common/fakedata';
+import { optionsClientPortPrint, optionsPrint } from '../../common/fakedata';
 import { PrintIconMap } from '../utlis';
+import { useClientPortal } from '../../../store';
 
 const PrintDropDown = ({
   legacyProductId,
@@ -21,10 +22,11 @@ const PrintDropDown = ({
       console.log('URL not available for', type);
     }
   };
-
+  const [clientPortal] = useClientPortal();
+  const printOptions = clientPortal ? optionsClientPortPrint : optionsPrint;
   return (
     <OptionsList>
-      {optionsPrint?.map((item, index) => {
+      {printOptions?.map((item: any, index: any) => {
         const IconComponent = PrintIconMap[item.icon];
         const isDisabled = !legacyProductId[item.type];
 

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

@@ -40,6 +40,7 @@ function Options() {
   };
 
   const isReleased = orderStatus[0]?.released;
+  // const routedValue = orderStatus[0]?.routed;
   const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
   const isOrderOnHold = orderDetails?.status === 'OO';
   const isOrderCancelled = orderDetails?.status === 'CO';
@@ -73,6 +74,10 @@ function Options() {
       shouldExclude = true;
     }
 
+    // if (routedValue && option.value === 'remove-from-route') {
+    //   shouldExclude = true;
+    // }
+
     return !shouldExclude;
   });
 

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

@@ -1,17 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useCustomerInfo } from '../../store';
+import { useCustomerInfo, useGlobalEscData } from '../../store';
 
 const Details = () => {
   // const [orderDetails] = useOrderDetails();
   const [customerInfo] = useCustomerInfo();
   const recipient = customerInfo?.recipient_name || '';
   const postcodeShow = customerInfo?.postcode || '';
+  const [globalEscData] = useGlobalEscData();
 
   return (
     <DetailsContainer>
       <Typo>
-        CUSTOMER RETURN - {recipient} , {postcodeShow}
+        CUSTOMER RETURN - {recipient} , {postcodeShow} {}
+        {globalEscData?.length > 0 && (
+          <EscInfo>
+            {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}
+          </EscInfo>
+        )}
       </Typo>
     </DetailsContainer>
   );
@@ -27,10 +33,14 @@ const DetailsContainer = styled.div`
 `;
 
 const Typo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 32px; /* 160% */
+  line-height: 32px;
   text-transform: uppercase;
   margin: 0;
   padding: 0;
@@ -40,4 +50,19 @@ const Typo = styled.div`
   }
 `;
 
+const Name = styled.div`
+  /* heading/h3-subHeader */
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 32px; /* 160% */
+  text-transform: uppercase;
+`;
+
+const EscInfo = styled(Name)`
+  color: #6396e5;
+  font-size: 16px;
+`;
+
 export default Details;

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

@@ -1,12 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
+
 import { Skeleton } from 'antd';
-import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
-import { useAuditLogLoadingState, usegetNotes } from '../store';
+import {
+  PrivateIcon,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import { NotesTableData } from '../notes/logs/fakeData';
+import { useAuditLogLoadingState, usegetNotes } from '../store';
 
 const GenericAuditLogsTable = () => {
-  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const tableHeadData = NotesTableData[0]?.tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
   const [auditLogLoadingStatus] = useAuditLogLoadingState();
 
@@ -35,9 +39,23 @@ const GenericAuditLogsTable = () => {
                     <div className="bold" title={note?.created_by}>
                       {note?.created_by}
                     </div>
-                    <div>{`${formatUtcToLocal(note?.created_at).date} @ ${
-                      formatUtcToLocal(note?.created_at).time
-                    }`}</div>
+                    <div className="notesIcon">
+                      {note?.is_private ? (
+                        <>
+                          <PrivateIcon />{' '}
+                          <span className="datetime">{`${
+                            formatUtcToLocal(note?.created_at).date
+                          } @ ${
+                            formatUtcToLocal(note?.created_at).time
+                          }`}</span>
+                        </>
+                      ) : (
+                        <span className="datetime">{`${
+                          formatUtcToLocal(note?.created_at).date
+                        } @ ${formatUtcToLocal(note?.created_at).time}`}</span>
+                      )}
+                    </div>
+                    <div>{note?.note_type || 'N/A'}</div>
                   </td>
                   <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
@@ -56,6 +74,8 @@ const GenericAuditLogsTable = () => {
   );
 };
 
+const ScrollableTableWrapper = styled.div``;
+
 export const AuditTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
@@ -82,22 +102,29 @@ export const AuditTableWrapper = styled.div`
         color: #667085;
         font-family: Lato;
         font-size: 13px;
-        font-style: normal;
         font-weight: 400;
         line-height: 16px;
         padding: 10px;
+        border-bottom: 1px solid #efe8e8;
+        word-break: break-word;
+        vertical-align: top;
+
         .bold {
           font-weight: 500;
           font-size: 14px;
         }
+        .notesIcon {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .datetime {
+            min-width: 155px;
+          }
+        }
       }
     }
   }
 `;
 
-const ScrollableTableWrapper = styled.div`
-  height: 550px;
-  overflow: auto;
-`;
-
 export default GenericAuditLogsTable;

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

@@ -27,6 +27,7 @@ import {
   useGlobalStateHitOrder,
   useAtom,
   usegetClientData,
+  useGlobalEscData,
 } from './store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
@@ -73,6 +74,7 @@ function OrderView() {
   const order_id = orderDetails?.id;
   const [getResources] = useAtom(setResourcesCall);
   const [, setClientData] = usegetClientData();
+  const [, setGlobalEscData] = useGlobalEscData();
 
   useEffect(() => {
     setStatusVal(orderDetails?.status_value);
@@ -211,7 +213,23 @@ function OrderView() {
       });
 
       setPrevOrderDetails(requiredData[0]);
+
+      //dbSync Api call
+      if (fetchedData?.data[0]?.gsit_order_id) {
+        localStorage.setItem(
+          'dbSyncAPICall',
+          JSON.stringify({
+            status: true,
+            gsit_orderId: fetchedData?.data[0]?.gsit_order_id,
+          })
+        );
+      } else {
+        localStorage.setItem('dbSyncAPICall', JSON.stringify({}));
+      }
     }
+    return () => {
+      localStorage.removeItem('dbSyncAPICall');
+    };
   }, [loading]);
 
   useEffect(() => {
@@ -240,6 +258,7 @@ function OrderView() {
   useEffect(() => {
     if (orderId) {
       callCLientApi();
+      callEscalationApi();
     }
   }, [orderId]);
 
@@ -402,6 +421,32 @@ function OrderView() {
       setSubContracterData(formattedData);
     }
   }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
+
+  // ESCALATIONS API
+
+  const {
+    data: fetchedEscalationData,
+    fetchData: callEscalationApi,
+    loading: escalationDataLoading,
+  } = useAxios<{
+    data: any;
+  }>({
+    endpoint: `/orders/escalations/${orderId}`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (fetchedEscalationData?.data) {
+      const escalationData = fetchedEscalationData?.data;
+      const sortedEscData = escalationData?.sort(
+        (a: any, b: any) =>
+          new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime()
+      );
+      const showEsc = sortedEscData != null && sortedEscData.length > 0;
+      showEsc ? setGlobalEscData(sortedEscData) : setGlobalEscData([]);
+    }
+  }, [escalationDataLoading]);
+
   return (
     <MainContainer>
       <GeneralHeader />

package/src/components/order-view/notes/AddNote.tsx

@@ -1,41 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import {
   Button,
   Label,
   useAxios,
-  // SelectDropdown,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { Select, notification } from 'antd';
 import { useGlobalStateHitAuditLog, usemoduleIds, useOrderId } from '../store';
-import { notification } from 'antd';
+import { useLocation } from 'react-router-dom';
+import { useClientPortal, useSelectedData } from '../../store';
 import NoteType from './NoteType';
-import { useSelectedData } from '../../store';
 import { ApiResponse } from '../types';
+const template = `REASON- \nSTC- \nACTION- `;
 
 function AddNote() {
-  const [noteText, setNoteText] = useState('');
+  const [noteText, setNoteText] = useState(template);
+  const [noteOptions, setNoteOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  const [selectedNoteType, setSelectedNoteType] = useState<string | null>(
+    'standard'
+  );
   const [orderId] = useOrderId();
   const location = useLocation();
   const pathname = location.pathname;
   const orderIdLocaation = pathname.split('/')[1];
+  const [isClientPortal] = useClientPortal();
   const [moduleIds] = usemoduleIds();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [selected] = useSelectedData();
+  const [selectedAssignee] = useSelectedData();
+
+  const { fetchData: getNoteType, data: fetchedData } = useAxios<any>({
+    endpoint: `audit_logs/order/type`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    getNoteType();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedData?.data) {
+      const options = fetchedData?.data?.map((item: any) => ({
+        label: item?.name,
+        value: item?.name,
+      }));
+      setNoteOptions(options);
+
+      const standardOption = options?.find(
+        (opt: any) => opt?.value?.toLowerCase() === 'standard'
+      );
+      if (standardOption) {
+        setSelectedNoteType(standardOption?.value);
+      } else if (options?.length > 0) {
+        setSelectedNoteType(options[0]?.value);
+      }
+    }
+  }, [fetchedData]);
 
-  // Save New Note
-  const { fetchData: callAuditLogs } = useAxios<{
-    data: ApiResponse[];
-  }>({
+  const { fetchData: callAuditLogs } = useAxios<{ data: ApiResponse[] }>({
     endpoint: `/audit_logs/orders/`,
     method: 'POST',
   });
 
-  const [notificationData, setNotificationData] = useState<{
-    type: 'success' | 'error';
-    message: string;
-    description: string;
-  } | null>(null);
+  // `const isValidFormat = () => {
+  // const lines = noteText.split('\n');
+  // if (lines.length < 3) return false;
+  // return (
+  // lines[0].startsWith('REASON-') &&
+  // lines[1].startsWith('STC-') &&
+  // lines[2].startsWith('ACTION-')
+  // );
+  // };
+
+  const isDisabled = !noteText.trim() || !selectedAssignee;
 
   const saveNote = async () => {
     setRecallAuditLog(false);
@@ -46,34 +84,38 @@ function AddNote() {
           parent_object_id: orderId || orderIdLocaation,
           parent_module_id: moduleIds?.parentId,
           module_id: moduleIds?.id,
+          note_type: selectedNoteType,
           module_object_id: orderId || orderIdLocaation,
           action: 'create',
           description: noteText,
           data_dump: '{}',
           manual: 1,
-          is_private: selected,
+          is_private: isClientPortal
+            ? false
+            : selectedAssignee === '0'
+            ? true
+            : false,
         },
       ],
     };
     try {
-      let response = (await callAuditLogs({
-        payload: payload,
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (response.code == 200 && response?.data) {
+      const response = await callAuditLogs({ payload });
+      //@ts-ignore
+      if (response?.code === 200 && response?.data) {
         notification.success({
           message: 'Success',
-          description: `${response?.message}`,
+          //@ts-ignore
+          description: response?.message || 'Note saved successfully',
         });
-        setNoteText('');
+
+        setNoteText(template);
+        setSelectedNoteType('Standard');
         setRecallAuditLog(true);
       } else {
         notification.error({
           message: 'Error',
-          description: `${response?.error}`,
+          //@ts-ignore
+          description: response?.error || 'Failed to save note',
         });
       }
     } catch (error) {
@@ -83,38 +125,25 @@ function AddNote() {
       });
     }
   };
-
-  useEffect(() => {
-    if (notificationData) {
-      const { type, message, description } = notificationData;
-      notification[type]({
-        message,
-        description,
-        duration: 5,
-      });
-      setNotificationData(null); // Clear notification data after showing
-    }
-
-    // Set top position for notifications
-    notification.config({
-      top: 80,
-    });
-  }, [notificationData]);
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setNoteText(e.target.value);
+  };
 
   return (
     <Container>
-      <Label label="Add New Note" />
-      <StyledTextArea
-        name="description"
-        placeholder="Enter your note here..."
-        value={noteText}
-        onChange={(e: any) => setNoteText(e.target.value)}
+      <Label label="Add New Note" required style={{ color: 'black' }} />
+      <StyledAntSelect
+        options={noteOptions}
+        placeholder="Select Note Type"
+        onChange={(value: string) => setSelectedNoteType(value)}
+        value={selectedNoteType}
       />
+      <StyledTextArea value={noteText} onChange={handleChange} rows={3} />
       <SaveNoteContainer>
-        <Button disabled={!noteText} onClick={saveNote}>
+        <Button disabled={isDisabled} onClick={saveNote}>
           SAVE NOTE
         </Button>
-        <NoteType />
+        {!isClientPortal && <NoteType />}
       </SaveNoteContainer>
     </Container>
   );
@@ -137,20 +166,20 @@ const SaveNoteContainer = styled.div`
 `;
 
 const StyledTextArea = styled.textarea`
-  height: 57px;
-  border-radius: 12px;
-  background: #fff;
-  resize: none;
+  height: 65px;
   border-radius: 8px;
-  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-  background: var(--Flowkit-White, #fff);
+  background: #fff;
+  resize: vertical;
+  border: 1px solid #e0e2e7;
   padding: 8px 12px;
+  font-family: monospace;
+  white-space: pre-wrap;
 `;
 
-// const StyledSelectDropdown = styled(SelectDropdown)`
-//   border-color: #e0e2e7 !important;
-//   width: 8vw;
-//   margin-bottom: 5px;
-// `;
+export const StyledAntSelect: any = styled(Select)`
+  .ant-select-selector {
+    border-radius: 8px;
+  }
+`;
 
 export default AddNote;