@bjsdistribution/dms-client-return 0.1.21-dev → 0.1.21-prod

package/src/components/order-view/order-details/expanded-content/services-section/OrderServices.tsx

@@ -4,16 +4,12 @@ import ServiceSlider from '../../../../../common/services-slider/ServiceSlider';
 import {
   useOrderDetails,
   useOrderStaticData,
-  usePrevOrderDetails,
 } from '../../../store';
-import { OrderServiceType } from '../../../types';
+import { OrdersType } from '../../../types';
 
 function OrderServices() {
   const [orderStaticData] = useOrderStaticData();
   const [orderDetails, setOrderDetails] = useOrderDetails();
-  const [prevOrderDetails] = usePrevOrderDetails();
-  const orderServices = orderDetails?.order_services;
-  const prevOrderServices = prevOrderDetails?.order_services;
 
   const orderServicesOptions = orderStaticData?.order_service_list;
 
@@ -30,190 +26,22 @@ function OrderServices() {
   });
 
   const toggleServices = (id: number) => {
-    const clone = [...orderServices];
-    const selectedService = clone?.find(
-      (s: OrderServiceType) => s?.order_service_list_id === id
+    const selectedService = orderServicesOptions?.find(
+      (item: any) => item.id === id
     );
-    const assembleOrderService = orderStaticData?.order_service_list?.find(
-      (x: any) => x?.type?.toLowerCase() === 'assemble'
-    );
-    const disassembleOrderService = orderStaticData?.order_service_list?.find(
-      (x: any) => x?.type?.toLowerCase() === 'disassemble'
-    );
-
-    const assemblyTypeService = clone?.find(
-      (x: any) => x?.order_service_list_id === assembleOrderService?.id
-    );
-
-    const disassemblyTypeService = clone?.find(
-      (x: any) => x?.order_service_list_id === disassembleOrderService?.id
-    );
-
-    if (selectedService !== undefined) {
-      const isAssembleService =
-        assembleOrderService?.id === selectedService?.order_service_list_id;
-
-      const isDisassembleService =
-        disassembleOrderService?.id === selectedService?.order_service_list_id;
-
-      if (selectedService.new_id) {
-        const updatedOrderServices = clone.filter(
-          (service: OrderServiceType) => service.id !== selectedService.id
-        );
-        const newData = {
-          ...orderDetails,
-          order_services: updatedOrderServices,
-        };
-        setOrderDetails(newData);
-      } else {
-        let updatedSelectedService = {
-          ...selectedService,
-          is_deleted: !selectedService.is_deleted,
-        };
-
-        let updatedOrderServices = [];
-        let newUpdatedOrderServices: any = [];
-
-        updatedOrderServices = clone.filter(
-          (service: OrderServiceType) => service.id !== selectedService.id
-        );
-
-        updatedOrderServices.push(updatedSelectedService);
-        if (
-          (isAssembleService &&
-            updatedSelectedService?.is_deleted === true &&
-            (disassemblyTypeService?.is_deleted === true ||
-              disassemblyTypeService === undefined ||
-              disassemblyTypeService === null)) ||
-          (isDisassembleService &&
-            updatedSelectedService?.is_deleted === true &&
-            (assemblyTypeService?.is_deleted === true ||
-              assemblyTypeService === undefined ||
-              assemblyTypeService === null))
-        ) {
-          const prevSelectedService = prevOrderServices?.find(
-            (s: OrderServiceType) => s?.order_service_list_id === id
-          );
-          updatedSelectedService = {
-            ...selectedService,
-            is_deleted: true,
-            service_category_id: prevSelectedService?.service_category_id,
-          };
-          updatedOrderServices = clone.filter(
-            (service: OrderServiceType) => service.id !== selectedService.id
-          );
-
-          updatedOrderServices.push(updatedSelectedService);
-          // new cases
-          if (
-            isAssembleService &&
-            disassemblyTypeService?.is_deleted === true &&
-            disassemblyTypeService !== undefined &&
-            disassemblyTypeService !== null
-          ) {
-            const newUpdatedSelectedService = {
-              ...disassemblyTypeService,
-              is_deleted: true,
-              service_category_id: prevSelectedService?.service_category_id,
-            };
-            newUpdatedOrderServices = updatedOrderServices?.filter(
-              (service: OrderServiceType) =>
-                service.id !== disassemblyTypeService.id
-            );
-            newUpdatedOrderServices?.push(newUpdatedSelectedService);
-          }
-          // new cases
-          if (
-            isDisassembleService &&
-            assemblyTypeService?.is_deleted === true &&
-            assemblyTypeService !== undefined &&
-            assemblyTypeService !== null
-          ) {
-            const newUpdatedSelectedService = {
-              ...assemblyTypeService,
-              is_deleted: true,
-              service_category_id: prevSelectedService?.service_category_id,
-            };
-            newUpdatedOrderServices = updatedOrderServices?.filter(
-              (service: OrderServiceType) =>
-                service.id !== assemblyTypeService.id
-            );
-            newUpdatedOrderServices?.push(newUpdatedSelectedService);
-          }
-        }
-
-        const newData = {
-          ...orderDetails,
-          order_services:
-            newUpdatedOrderServices.length > 0
-              ? newUpdatedOrderServices
-              : updatedOrderServices,
-        };
-        setOrderDetails(newData);
-      }
-    } else {
-      // service not exist case
-      // if not matched then treat it as an new service
-      let largestId: number;
-      if (clone === undefined || clone.length === 0) {
-        largestId = 0;
-      } else {
-        largestId = Math.max(
-          ...clone?.map((o: OrderServiceType) => +o?.order_service_list_id!)
-        );
-      }
-
-      let service: OrderServiceType = {};
-      // Normal service addition
-      service = {
-        is_deleted: false,
-        order_service_list_id: id,
-        new_id:
-          largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-        id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-      };
-      // special case if assembly already exist and we are adding disassemble service and vice-versa
-      if (
-        assemblyTypeService?.is_deleted === false &&
-        disassembleOrderService?.id === id
-      ) {
-        service = {
-          is_deleted: false,
-          order_service_list_id: id,
-          new_id:
-            largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-          service_category_id: assemblyTypeService?.service_category_id,
-        };
-      }
-
-      if (
-        disassemblyTypeService?.is_deleted === false &&
-        assembleOrderService?.id === id
-      ) {
-        service = {
-          is_deleted: false,
-          order_service_list_id: id,
-          new_id:
-            largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
-          service_category_id: disassemblyTypeService?.service_category_id,
-        };
-      }
-      clone.push(service);
-      const newData = { ...orderDetails, order_services: clone };
-      setOrderDetails(newData);
-    }
+    const key = selectedService?.type;
+    const value = !orderDetails[key as keyof OrdersType];
+    setOrderDetails(prev => ({
+      ...prev,
+      [key]: value,
+    }));
   };
   const isDisabled = true;
 
   return (
     <Container disabled={isDisabled}>
       {sortedServices?.map((service: any) => {
-        const selected = !!orderServices?.find(
-          (s: OrderServiceType) =>
-            s?.order_service_list_id === service?.id && s.is_deleted === false
-        );
+        const selected = orderDetails[service?.type as keyof OrdersType];
         return (
           <ServiceSlider
             serviceName={service?.type?.replaceAll('_', ' ')}

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

@@ -113,6 +113,12 @@ export const ordersInitialValue: OrdersType = {
   order_type: {
     type: null,
   },
+  assemble: false,
+  disassemble: false,
+  unpack_items: false,
+  take_packaging_away: false,
+  collect_disposal: false,
+  assembly_type: null,
 };
 
 export const orderProductInitialvalue: CreateProduct = {

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

@@ -174,6 +174,12 @@ export interface OrdersType {
   postcode: any;
   carrier_id: number | null;
   order_type: orderType;
+  assemble: boolean;
+  disassemble: boolean;
+  unpack_items: boolean;
+  take_packaging_away: boolean;
+  collect_disposal: boolean;
+  assembly_type: string | null;
 }
 
 export type DeleteProds = {

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

@@ -2,7 +2,6 @@ import {
   OrderRecipientType,
   OrderRouteType,
   OrderServicesDetailType,
-  OrderServiceType,
   OrdersType,
 } from './types';
 
@@ -146,6 +145,18 @@ export const getCookie = (name: string): string | null => {
 };
 
 export const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  // Allow common shortcuts like Ctrl+V, Ctrl+C, Ctrl+A, etc.
+  if (e.ctrlKey || e.metaKey) {
+    if (
+      e.key.toLowerCase() === 'v' || // Paste
+      e.key.toLowerCase() === 'c' || // Copy
+      e.key.toLowerCase() === 'x' || // Cut
+      e.key.toLowerCase() === 'a' // Select All
+    ) {
+      return;
+    }
+  }
+
   // Allowed keys: numbers (0-9), '.', '-', '+'
   const allowedKeys = [
     '0',
@@ -277,14 +288,12 @@ export const compareOrderDetailsStates = (
     order_recipient: oldOrderRecipient,
     order_routes: oldOrderRoutes,
     order_services_detail: oldOrderServicesDetail,
-    order_services: oldOrderServices,
     ...oldRequiredData
   } = oldData;
   const {
     order_recipient: newOrderRecipient,
     order_routes: newOrderRoutes,
     order_services_detail: newOrderServicesDetail,
-    order_services: newOrderServices,
     ...newRequiredData
   } = newData;
 
@@ -307,33 +316,6 @@ export const compareOrderDetailsStates = (
     newOrderServicesDetail
   );
 
-  // need to remove id and new_id from new order_services
-  const filteredNewOrderServices = newOrderServices?.map((item: any) => {
-    if (item.new_id) {
-      const { id, new_id, ...newItem } = item;
-      return newItem;
-    } else {
-      return item;
-    }
-  });
-
-  const newOrderServicesWithoutId = filteredNewOrderServices.filter(
-    (service: OrderServiceType) => !service.id
-  );
-  const newOrderServicesWithId = filteredNewOrderServices.filter(
-    (service: OrderServiceType) => service.id
-  );
-
-  const payloadOrderServices: OrderServiceType[] = compareArrays(
-    oldOrderServices,
-    newOrderServicesWithId
-  );
-
-  const finalPayloadOrderServices = [
-    ...payloadOrderServices,
-    ...newOrderServicesWithoutId,
-  ];
-
   const finalPayload = {
     ...payloadWithId,
     ...(!isObjectEmpty(payloadOrderRecipient) && {
@@ -345,9 +327,6 @@ export const compareOrderDetailsStates = (
     ...(!isObjectEmpty(payloadOrderServicesDetail) && {
       order_services_detail: payloadOrderServicesDetail,
     }),
-    ...(finalPayloadOrderServices.length > 0 && {
-      order_services: finalPayloadOrderServices,
-    }),
   };
 
   return finalPayload;

package/src/components/order-view/view-reminder/ViewReminder.tsx

@@ -30,8 +30,6 @@ import { useReminderData } from '../../store';
 
 export interface IProps {
   callReminderApi: any;
-  callReminderForCount: any;
-  callReminderTableApi: any;
 }
 
 const ViewReminderModal = (props: IProps) => {

package/src/components/store.ts

@@ -263,7 +263,7 @@ export function useNewReturnOrderData() {
   return useAtom(newReturnOrderData);
 }
 
-const isClientPortalAtom = atom<boolean>(false);
+const isClientPortalAtom = atom<boolean | undefined>(undefined);
 function useClientPortal() {
   return useAtom(isClientPortalAtom);
 }

package/src/index.tsx

@@ -1,5 +1,11 @@
 import React, { Suspense, useEffect } from 'react';
-import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
 import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
 import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
 import {
@@ -28,6 +34,7 @@ import OrderViewQueryHandler from './OrderViewQueryHandler';
 import OrderView from './components/order-view';
 import ReturnOverview from './components/client-portal/ReturnOverview';
 import RouterHeader from './components/order-daily-overview/header/route-header/RouterHeader';
+import ClientRouterHeader from './components/order-daily-overview/header/route-header/ClientRouterHeader';
 function ReturnClient() {
   notification.config({
     top: 80,
@@ -46,7 +53,7 @@ function ReturnClient() {
   const [, setVisibilityData] = useVisibilityData();
   const [, setOrderStaticData] = useOrderStaticData();
   const [clientPortal, setClientPortal] = useClientPortal();
-
+  const location = useLocation();
   const userType = JSON.parse(localStorage.getItem('user_type')!);
 
   useEffect(() => {
@@ -117,14 +124,22 @@ function ReturnClient() {
     }
   }, [locationloading]);
 
+  const pathname = location.pathname;
+  const isViewPath = /^\/return\/view\/\d+$/.test(pathname);
+
   return (
     <>
+      {clientPortal && isViewPath && <ClientRouterHeader />}{' '}
       {!clientPortal && <RouterHeader />}
       <Suspense fallback={<LoadingMessage />}>
         {clientPortal ? (
           <Routes>
             <Route path="" element={<Navigate to={'outstanding_return'} />} />
             <Route path=":status" element={<ReturnOverview />} />
+            <Route
+              path="view/:id"
+              element={<OrderView locationloading={locationloading} />}
+            />
           </Routes>
         ) : (
           <Routes>

package/dist/components/order-view/order-actions/actions/log-service-refusal/DeliveryPoint.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    refusedDelPointService: any;
-    setRefusedDelPointService: React.Dispatch<React.SetStateAction<any>>;
-}
-declare function DeliveryPoint(props: IProps): React.JSX.Element;
-export default DeliveryPoint;

package/dist/components/order-view/order-actions/actions/log-service-refusal/Notes.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    refusedReason: string;
-    setRefusedReason: React.Dispatch<React.SetStateAction<string>>;
-}
-declare function Notes(props: IProps): React.JSX.Element;
-export default Notes;

package/dist/components/order-view/order-actions/actions/log-service-refusal/OrderServices.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    refusedServices: string[];
-    setRefusedServices: React.Dispatch<React.SetStateAction<string[]>>;
-}
-declare function OrderServices(props: IProps): React.JSX.Element;
-export default OrderServices;

package/dist/components/order-view/order-actions/actions/log-service-refusal/helper.d.ts

@@ -1,3 +0,0 @@
-export declare const paths: Record<number, string>;
-export declare const getSubPath: (input: number) => string;
-export declare const getIcon: (input: number) => string;

package/dist/components/order-view/order-actions/actions/log-service-refusal/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function LogServiceRefusal(props: any): React.JSX.Element;
-export default LogServiceRefusal;

package/src/components/order-view/order-actions/actions/log-service-refusal/DeliveryPoint.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
-import { StandardOptionsType } from '@bjsdistribution/dms-component-library';
-
-interface IProps {
-  refusedDelPointService: any;
-  setRefusedDelPointService: React.Dispatch<React.SetStateAction<any>>;
-}
-
-const deliveryPoints: StandardOptionsType[] = [
-  {
-    label: 'Hallway',
-    value: 'hallway',
-  },
-  {
-    label: 'ROC',
-    value: 'room_of_choice',
-  },
-];
-
-function DeliveryPoint(props: IProps) {
-  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const service = event.target.value;
-    props?.setRefusedDelPointService(service);
-  };
-
-  return (
-    <Container>
-      <RadioButtonGroup
-        heading="Delivery Point"
-        options={deliveryPoints || []}
-        onChange={radioGroupHandler}
-        direction="horizontal"
-        selectedValue={props?.refusedDelPointService}
-        required={false}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  /* height: 30px; */
-  padding: 1px;
-  align-items: flex-start;
-  align-self: stretch;
-`;
-
-export default DeliveryPoint;

package/src/components/order-view/order-actions/actions/log-service-refusal/Notes.tsx

@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import { TextArea } from '@bjsdistribution/dms-component-library';
-
-interface IProps {
-  refusedReason: string;
-  setRefusedReason: React.Dispatch<React.SetStateAction<string>>;
-}
-
-function Notes(props: IProps) {
-  const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    props?.setRefusedReason(event.target.value);
-  };
-
-  return (
-    <Container>
-      <div style={{ display: 'flex', flexDirection: 'row' }}>
-        <Label>Notes</Label> <RequiredAsterisk>*</RequiredAsterisk>
-      </div>
-      <TextArea
-        rows={15}
-        onChange={handleTextChange}
-        placeholder="Why did the customer refuse the selected service(s)? Add notes..."
-        value={props?.refusedReason}
-      />
-    </Container>
-  );
-}
-
-const RequiredAsterisk = styled.span`
-  color: red;
-  margin-left: 2px;
-  font-size: x-small;
-`;
-const Label = styled.span`
-  color: #6a7378;
-  font-family: 'Lato', sans-serif;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-`;
-
-const Container = styled.div`
-  display: flex;
-  gap: 5px;
-  flex-direction: column;
-  width: 100%;
-`;
-
-export default Notes;

package/src/components/order-view/order-actions/actions/log-service-refusal/OrderServices.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Checkbox from '../../../../../common/checkbox';
-import { getIcon } from './helper';
-import { useOrderDetails, useOrderStaticData } from '../../../store';
-import { OrderServiceType } from '../../../types';
-interface IProps {
-  refusedServices: string[];
-  setRefusedServices: React.Dispatch<React.SetStateAction<string[]>>;
-}
-
-function OrderServices(props: IProps) {
-  const [orderStaticData] = useOrderStaticData();
-  const [orderDetails] = useOrderDetails();
-  const orderServices = orderDetails?.order_services;
-  const orderServicesOptions = orderStaticData?.order_service_list;
-
-  const onClick = (service: string) => {
-    if (props?.refusedServices?.includes(service)) {
-      const filteredServices = props?.refusedServices?.filter(
-        (item: string) => item !== service
-      );
-      props?.setRefusedServices(filteredServices);
-    } else {
-      props?.setRefusedServices((prev: string[]) => [...prev, service]);
-    }
-  };
-
-  return (
-    <Container>
-      {orderServicesOptions.map((service: any) => {
-        const selected = !!orderServices?.find(
-          (s: OrderServiceType) =>
-            s?.order_service_list_id === service?.id && s.is_deleted === false
-        );
-        const isRefused = props?.refusedServices?.includes(service?.type);
-        return (
-          <Checkbox
-            checked={isRefused}
-            label={service?.type}
-            imageSrc={getIcon(service?.id)}
-            enabled={selected}
-            onClickCheckbox={onClick}
-          />
-        );
-      })}
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  gap: 15px;
-  flex-wrap: wrap;
-`;
-
-export default OrderServices;

package/src/components/order-view/order-actions/actions/log-service-refusal/helper.ts

@@ -1,26 +0,0 @@
-const baseURL = "/assets/images/";
-
-// export type ServiceOffered =
-//   | "Assemble"
-//   | "Take Packaging Away"
-//   | "Disassemble"
-//   | "Collect Disposal"
-//   | "Unpack Items";
-
-export const paths: Record<number, string> = {
-  1: 'assembly.svg', //1
-  2: 'disassembly.svg', //2
-  3: 'unpack_items.svg', //3
-  4: 'packaging_removal.svg', //4
-  5: 'collect_disposal.svg', //5
-};
-
-export const getSubPath = (input: number): string => {
-  const result = paths[input];
-  return result;
-};
-
-export const getIcon = (input: number): string => {
-  const subPath = getSubPath(input);
-  return `${baseURL}${subPath}`;
-};