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

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

@@ -70,12 +70,15 @@ const ViewReminderModal = (props: IProps) => {
   const handleDateChange = (date: any | null) => {
     if (date && date.isValid()) {
       const selectedDate = date.toISOString();
-
       setReminderPayload({
         ...reminderPayload,
         due_datetime: selectedDate,
       });
     } else {
+      setReminderPayload({
+        ...reminderPayload,
+        due_datetime: null,
+      });
     }
   };
 
@@ -177,12 +180,24 @@ const ViewReminderModal = (props: IProps) => {
     }
   };
 
+  const arraysEqual = (a: any = [], b: any = []) => {
+    if (a.length !== b.length) return false;
+    return a.every((val: any, index: any) => val === b[index]);
+  };
+
+  const isSameDate = (d1: any, d2: any) => {
+    if (!d1 || !d2) return d1 === d2; // both null/undefined
+    const date1 = new Date(d1).toISOString();
+    const date2 = new Date(d2).toISOString();
+    return date1 === date2;
+  };
+
   const hasReminderChanged = () => {
     if (!reminderDataById || !reminderPayload) return false;
 
     const original = {
       due_datetime: reminderDataById?.due_datetime,
-      assigned_to: reminderDataById?.assigned_to,
+      assigned_to: reminderDataById?.assigned_to || [],
       description: reminderDataById?.description?.trim(),
       department: reminderDataById?.department,
       status: reminderDataById?.status,
@@ -190,23 +205,23 @@ const ViewReminderModal = (props: IProps) => {
 
     const updated = {
       due_datetime: reminderPayload?.due_datetime,
-      assigned_to: reminderPayload?.assigned_to,
+      assigned_to: reminderPayload?.assigned_to || [],
       description: reminderPayload?.description?.trim(),
       department: reminderPayload?.department,
       status: reminderPayload?.status,
     };
 
     const baseChanged =
-      original?.due_datetime !== updated?.due_datetime ||
-      original?.assigned_to !== updated?.assigned_to ||
+      !isSameDate(original?.due_datetime, updated?.due_datetime) ||
+      !arraysEqual(original?.assigned_to, updated?.assigned_to) ||
       original?.description !== updated?.description ||
       original?.status !== updated?.status;
 
     const shouldCompareDept =
-      original.department !== undefined && updated?.department !== undefined;
+      original?.department !== undefined && updated?.department !== undefined;
 
     const departmentChanged = shouldCompareDept
-      ? original.department !== updated?.department
+      ? original?.department !== updated?.department
       : false;
 
     return baseChanged || departmentChanged;
@@ -290,10 +305,12 @@ const ViewReminderModal = (props: IProps) => {
                       <DatePicker
                         format="DD/MM/YYYY HH:mm A"
                         value={
-                          reminderPayload?.due_datetime
-                            ? dayjs(reminderPayload?.due_datetime)
+                          reminderPayload?.due_datetime !== undefined
+                            ? reminderPayload.due_datetime
+                              ? dayjs(reminderPayload.due_datetime)
+                              : null
                             : reminderDataById?.due_datetime
-                            ? dayjs(reminderDataById?.due_datetime)
+                            ? dayjs(reminderDataById.due_datetime)
                             : null
                         }
                         onChange={handleDateChange}
@@ -318,13 +335,13 @@ const ViewReminderModal = (props: IProps) => {
                 name="text"
                 required
                 value={
-                  reminderPayload?.description ||
-                  reminderDataById?.description ||
-                  ''
+                  reminderPayload?.description !== undefined
+                    ? reminderPayload.description
+                    : reminderDataById?.description || ''
                 }
                 disabled={disabled}
                 onChange={onChangeDetails}
-              ></DetailedContainer>
+              />
             </Right>
           </ContentsContainer>
         </OrderActionModal>

package/src/components/store.ts

@@ -132,7 +132,7 @@ function useSelectedClientAfterOrders() {
 }
 
 //start date and end date
-const startCPDate = atom<dayjs.Dayjs | null>(dayjs());
+const startCPDate = atom<dayjs.Dayjs | null>(null);
 
 function useStartDate() {
   return useAtom(startCPDate);
@@ -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(() => {
@@ -70,7 +77,7 @@ function ReturnClient() {
   }, [location.pathname, searchParams]);
 
   //API for action type
-  const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
+  const { data: fetchedStaticData, loading: staticLoading } = useApiHook<
     ApiResponse
   >({
     endpoint: `/orders/getStaticData/all/`,
@@ -110,21 +117,29 @@ function ReturnClient() {
         fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)
       );
     }
-  }, [actionLoading]);
+  }, [staticLoading]);
   useEffect(() => {
     if (fetchedLocationData && fetchedLocationData?.data) {
       setLocationData(fetchedLocationData?.data);
     }
   }, [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>
@@ -136,7 +151,10 @@ function ReturnClient() {
             {/* for dev */}
             <Route path="" element={<OrderViewQueryHandler />} />
             <Route path="overview" element={<ReturnAfterTable />} />
-            <Route path="/:id" element={<OrderView />} />
+            <Route
+              path="/:id"
+              element={<OrderView locationloading={locationloading} />}
+            />
             {/* for local */}
             {/* <Route path="/orders/view/return/filter" element={<ReturnTable />} /> */}
             {/* for dev */}

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}`;
-};

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

@@ -1,130 +0,0 @@
-import React, { useState } from 'react';
-import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import styled from 'styled-components';
-import DeliveryPoint from './DeliveryPoint';
-import OrderServices from './OrderServices';
-import Notes from './Notes';
-import {
-  useCurrentAction,
-  useCustomerInfo,
-  useOrderDetails,
-} from '../../../store';
-import { useAxios } from '@bjsdistribution/dms-component-library';
-import { ApiResponse } from '../../../types';
-import { notification } from 'antd';
-
-function LogServiceRefusal(props: any) {
-  const [, setCurrentAction] = useCurrentAction();
-  // Local States for handling service refusal
-  const [refusedReason, setRefusedReason] = useState<string>('');
-  const [refusedServices, setRefusedServices] = useState<string[]>([]);
-  const [refusedDelPointService, setRefusedDelPointService] = useState<any>('');
-  const [customerInfo] = useCustomerInfo();
-  const [orderDetails] = useOrderDetails();
-  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
-
-  const { fetchData: callLogRefusalApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/v1/orders/log-refusal/`,
-    method: 'POST',
-  });
-
-  const onClose = () => {
-    setCurrentAction(undefined);
-  };
-
-  const onSubmit = async () => {
-    const allServices =
-      refusedDelPointService?.length > 0
-        ? [...refusedServices, refusedDelPointService]
-        : refusedServices;
-    const finalPayload = {
-      order_id: orderDetails?.id,
-      route_id: orderDetails?.order_routes?.route_id,
-      refused_reason: refusedReason,
-      service_name: allServices,
-    };
-    try {
-      let response = (await callLogRefusalApi({
-        payload: finalPayload,
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (response.code == 200) {
-        notification.success({
-          message: 'Success',
-          description: `${response?.message}`,
-        });
-        props?.callOrdersApi();
-      } else {
-        notification.error({
-          message: 'Error',
-          description: `${response?.error}`,
-        });
-        onClose();
-      }
-    } catch (error) {}
-  };
-
-  const disableSubmitBtn =
-    refusedReason?.length === 0 ||
-    (refusedServices?.length === 0 && refusedDelPointService?.length === 0);
-
-  return (
-    <OrderActionModal
-      headerTitle="Service Refusal"
-      showAdditionalInfo
-      infoText={infoText}
-      submitBtnTitle="Log Refusal"
-      onCloseHeader={onClose}
-      onSubmit={onSubmit}
-      isSubmitDisabled={disableSubmitBtn}
-    >
-      <ContentContainer>
-        <Left>
-          <DeliveryPoint
-            refusedDelPointService={refusedDelPointService}
-            setRefusedDelPointService={setRefusedDelPointService}
-          />
-          <OrderServices
-            refusedServices={refusedServices}
-            setRefusedServices={setRefusedServices}
-          />
-        </Left>
-        <Right>
-          <Notes
-            refusedReason={refusedReason}
-            setRefusedReason={setRefusedReason}
-          />
-        </Right>
-      </ContentContainer>
-    </OrderActionModal>
-  );
-}
-
-const ContentContainer = styled.div`
-  display: flex;
-  padding: 0px 15px;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-`;
-
-const Left = styled.div`
-  display: flex;
-  padding: 15px 12px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 15px;
-  flex: 1 0 0;
-  border-radius: 15px;
-  background: #f8fafc;
-`;
-
-const Right = styled(Left)``;
-
-export default LogServiceRefusal;