@bjsdistribution/dms-client-return 0.1.7-prod → 0.1.8-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7-prod",
+  "version": "0.1.8-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -82,7 +82,8 @@
     "styled-components": "^6.1.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/uuid": "^10.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -95,6 +96,7 @@
     "jotai": "^2.6.3",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-redux": "^9.2.0",
-    "react-switch-selector": "^2.2.1"
+    "react-switch-selector": "^2.2.1",
+    "uuid": "^10.0.0"
   }
 }

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -26,11 +26,13 @@ import styled from 'styled-components';
 import { Select } from 'antd';
 import { useLocationOptions } from '../../order-view/store';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../common/interface';
 
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  const [customers] = useCustomerData();
+  const [customers, setCustomers] = useCustomerData();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
@@ -47,6 +49,25 @@ function SelectionFilter() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
+  //API for client data
+  const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
+    ApiResponse
+  >({
+    endpoint: `/v1/return/product/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading]);
   //new codee
   const urlCustomerId = searchParams.get('customerId');
   const urlActiontype = searchParams.get('type');
@@ -54,7 +75,6 @@ function SelectionFilter() {
   const selectedCustomer = customers?.find(
     (customer: any) => customer?.customer_id?.toString() === urlCustomerId
   );
-
   const accountNumber = selectedCustomer?.account_number;
 
   //customer name
@@ -91,10 +111,14 @@ function SelectionFilter() {
       setActionTypeOptions(mappedActions);
 
       const mappedLocations = Array.isArray(filteredClient?.return_locations)
-        ? filteredClient?.return_locations?.map((location: any) => ({
-            label: location?.location_name,
-            value: location?.token,
-          }))
+        ? filteredClient.return_locations
+            .filter(
+              (location: any) => location?.location_name && location?.token
+            )
+            .map((location: any) => ({
+              label: location.location_name,
+              value: location.token,
+            }))
         : [];
 
       setLocationOptions(mappedLocations);
@@ -135,10 +159,16 @@ function SelectionFilter() {
         setActionTypeOptions(mappedActions);
 
         const mappedLocations = Array.isArray(filteredClient?.return_locations)
-          ? filteredClient?.return_locations?.map((location: any) => ({
-              label: location?.location_name,
-              value: location?.token,
-            }))
+          ? filteredClient.return_locations
+              .filter((location: any) => {
+                const name = location?.location_name;
+                const token = location?.token;
+                return name && name !== 'null' && token && token !== 'null';
+              })
+              .map((location: any) => ({
+                label: location?.location_name,
+                value: location?.token,
+              }))
           : [];
 
         setLocationOptions(mappedLocations);
@@ -166,9 +196,7 @@ function SelectionFilter() {
       console.log(currentSearch, 'currentSearch');
 
       if (!currentSearch.includes('filter')) {
-        console.log('inside include');
         // for dev
-        //navigate(`filter?${queryParams.toString()}`);
         navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
         // for local
@@ -328,7 +356,7 @@ function SelectionFilter() {
                 options={clientOptions}
                 placeholder="Select Client Name"
                 onChange={handleClientChange}
-                style={{ minWidth: '150px' }}
+                style={{ minWidth: '250px' }}
                 value={selectedClient}
                 allowClear
                 onClear={handleClear}
@@ -349,7 +377,7 @@ function SelectionFilter() {
                     placeholder="Select Action Type"
                     value={selectedFilterValue}
                     onChange={handleActionClick}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     onClear={handleClearAction}
                   />
@@ -362,7 +390,7 @@ function SelectionFilter() {
                     value={selectedLocationValue}
                     placeholder="Select Location"
                     onChange={handleLocationChange}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     mode="multiple"
                   />

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-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/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);
@@ -256,6 +258,7 @@ function OrderView() {
   useEffect(() => {
     if (orderId) {
       callCLientApi();
+      callEscalationApi();
     }
   }, [orderId]);
 
@@ -418,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

@@ -34,7 +34,7 @@ function AddNote() {
     endpoint: `audit_logs/order/type`,
     method: 'GET',
   });
-  console.log(selectedNoteType, 'selectedNoteType');
+
   useEffect(() => {
     getNoteType();
   }, []);
@@ -63,16 +63,18 @@ function AddNote() {
     method: 'POST',
   });
 
-  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() || !isValidFormat() || !selectedAssignee;
+  // `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);
     if (!noteText) return;
@@ -124,29 +126,7 @@ function AddNote() {
     }
   };
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = e.target.value;
-    const lines = val.split('\n');
-
-    while (lines.length < 3) {
-      if (lines.length === 0) lines.push('REASON- ');
-      else if (lines.length === 1) lines.push('STC- ');
-      else if (lines.length === 2) lines.push('ACTION- ');
-    }
-
-    const enforcedLines = lines.map((line, idx) => {
-      if (idx === 0) {
-        if (!line.startsWith('REASON-')) return 'REASON- ';
-      }
-      if (idx === 1) {
-        if (!line.startsWith('STC-')) return 'STC- ';
-      }
-      if (idx === 2) {
-        if (!line.startsWith('ACTION-')) return 'ACTION- ';
-      }
-      return line;
-    });
-
-    setNoteText(enforcedLines.join('\n'));
+    setNoteText(e.target.value);
   };
 
   return (

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -8,12 +8,13 @@ import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
+export const selectedOrderId = atom<any>(null);
 
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
-  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [selectedId, setSelectedOrderId] = useAtom(selectedOrderId);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
   const [, setPayload] = useAtom(payloadAtom);
@@ -67,14 +68,14 @@ const NewReturnDropdown = () => {
   }, [fetchedReturnOrderData, id]);
 
   useEffect(() => {
-    if (selectedOrderId && selectedProducts?.length > 0) {
+    if (selectedId && selectedProducts?.length > 0) {
       const newPayload = {
-        new_return_order: selectedOrderId,
+        new_return_order: selectedId,
         products: selectedProducts,
       };
       setPayload(newPayload);
     }
-  }, [selectedOrderId, selectedProducts, setPayload]);
+  }, [selectedId, selectedProducts, setPayload]);
 
   const handleDropdownChange = (value: string) => {
     setSelectedOrderId(value);
@@ -83,23 +84,20 @@ const NewReturnDropdown = () => {
     label: `${order?.recipient_name} - ${order?.postcode}`,
     value: order?.id,
   }));
-
   return (
     <Container>
       <Text>New Return Order:</Text>
       <StyledAntSelect
         options={dropdownOptions}
-        value={selectedOrderId}
+        value={selectedId}
         placeholder="Select"
         // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
         showSearch
-        dropdownStyle={{ minWidth: '150px', width: 'auto' }}
+        dropdownStyle={{ width: '250px' }}
         popupClassName={defaultPopupClassName}
-        status={
-          dropdownOptions.length === 0 ? '' : selectedOrderId ? '' : 'error'
-        }
+        status={dropdownOptions.length === 0 ? '' : selectedId ? '' : 'error'}
         notFoundContent="No orders found with a similar postcode"
       />
     </Container>

package/src/components/order-view/order-actions/actions/force-debrief/BaseChargeConfirmationModal.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  BackgroundModal,
+  CancelAndCompleteAction,
+  WarningIcon,
+} from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { getBaseUrlSymbol } from '../../../utils';
+
+interface IProps {
+  setConfirmationModal: React.Dispatch<React.SetStateAction<boolean>>;
+  onProceed: any;
+}
+
+const BaseChargeConfirmationModal = (props: IProps) => {
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const onCancel = () => {
+    // window.scrollTo({ top: 0, behavior: 'smooth' });
+    props?.setConfirmationModal(false);
+  };
+
+  const onComplete = () => {
+    props?.setConfirmationModal(false);
+    props?.onProceed();
+  };
+
+  return (
+    <BackgroundModal {...props}>
+      <MainContainer>
+        <Container>
+          <IconContainer>
+            <WarningIcon />
+          </IconContainer>
+          <Title>{`Base Charge Exceeds ${baseUrlSymbol}200`}</Title>
+        </Container>
+        <CustomCancelAndCompleteAction
+          cancelLabel="Amend"
+          completeLabel="Proceed"
+          onCancel={onCancel}
+          onComplete={onComplete}
+        />
+      </MainContainer>
+    </BackgroundModal>
+  );
+};
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+`;
+
+const Title = styled.span`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 32px;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+`;
+
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 54px;
+  height: 54px;
+  padding: 14px;
+  border-radius: 50%;
+  background: #feba301a;
+  border: 10px solid #feba305e;
+`;
+
+const MainContainer = styled.div`
+  width: 400px;
+  min-height: 248px;
+  padding: 24px;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0px 20px 24px -4px #10182814;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+`;
+
+export default BaseChargeConfirmationModal;