@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

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

@@ -1,222 +1,276 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import OrderActionModal from '../../../common/modals/order-action-modal/OrderActionModal';
+import AssigneeDropdown from './AssigneeDropdown';
 import { useCurrentAction } from '../store';
-import { DatePickerWrap, Label } from '../order-actions/actions/modalstyle';
-import {
-  useReminderRefId,
-  useSingleReminderData,
-  useUpdateReminderData,
-} from '../order-actions/store';
-import StatusIndicator from '../flags-action-modal/StatusIndicator';
-import styled from 'styled-components';
-import { format, isValid } from 'date-fns';
-import { DatePicker, notification } from 'antd';
-import dayjs from 'dayjs';
+import { DatePickerWrap } from '../order-actions/actions/modalstyle';
 import {
   ReferenceContainer,
-  StyledText,
-  StyledTime,
   InnerContainer,
   ContentsContainer,
   Left,
-  Right,
   DateTimeContainer,
   Row,
   DetailedContainer,
   MiniContainer,
-  TimeWrapper,
 } from './reminder-styles';
-import AssigneeDropdown from './AssigneeDropdown';
-import { useAxios } from '@bjsdistribution/dms-component-library';
+import {
+  useReminderRefId,
+  useReminderById,
+  useUpdateReminderData,
+  useReminderNotiData,
+} from '../order-actions/store';
+import StatusIndicator from '../flags-action-modal/StatusIndicator';
+import styled from 'styled-components';
+// import { isValid } from 'date-fns';
+import { DatePicker, notification } from 'antd';
+import dayjs from 'dayjs';
 import { ApiResponse } from '../types';
+import { Label, useAxios } from '@bjsdistribution/dms-component-library';
+import { useReminderData } from '../../store';
 
-const ViewReminderModal = () => {
+export interface IProps {
+  callReminderApi: any;
+}
+
+const ViewReminderModal = (props: IProps) => {
   const [, setCurrentAction] = useCurrentAction();
-  const [, setDueDate] = useState<any | null>(null);
-  const [reminderData, setReminderData] = useSingleReminderData();
+  const [reminderDataById, setReminderByIdData] = useReminderById();
+  const [reminderPayload, setReminderPayload] = useUpdateReminderData();
   const [reminderRefId] = useReminderRefId();
-  const [reminderPayload, setPayload] = useUpdateReminderData();
+  const [, setReminderUpdatedData] = useReminderNotiData();
+  const [, setReminderData] = useReminderData();
 
-  //reminder get
   const {
-    data: fetchedReminderData,
-    loading: reminderLoading,
-    fetchData: callReminderApi,
+    data: fetchedReminderInitialData,
+    fetchData: callReminderApiInitial,
+    loading,
   } = useAxios<{
-    data: ApiResponse[];
+    data: any;
   }>({
-    endpoint: `/tasks/reminder/${reminderRefId}`,
+    endpoint: `/v1/task/reminder/${reminderRefId}`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: reminderRefId }],
+    // filters: [{ field: 'order_id', op: '=', value: reminderRefId }],
   });
 
-  //use Axios Reminder
-  const { fetchData: callReminderEditAPI } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/tasks/reminder/update/`,
-    method: 'PUT',
-  });
-
-  const closeModal = () => {
-    setCurrentAction(undefined);
-  };
-
   useEffect(() => {
-    if (fetchedReminderData && fetchedReminderData?.data) {
-      setReminderData(fetchedReminderData?.data);
+    if (fetchedReminderInitialData && fetchedReminderInitialData?.data) {
+      const data = fetchedReminderInitialData?.data[0];
+      setReminderByIdData(data);
+      setReminderPayload(data);
     }
-  }, [reminderLoading]);
+  }, [fetchedReminderInitialData, loading]);
 
   useEffect(() => {
     if (reminderRefId) {
-      callReminderApi();
+      callReminderApiInitial();
     }
   }, [reminderRefId]);
 
-  useEffect(() => {
-    if (reminderData) {
-      setPayload({
+  const handleDateChange = (date: any | null) => {
+    if (date && date.isValid()) {
+      const selectedDate = date.toISOString();
+
+      setReminderPayload({
         ...reminderPayload,
-        details: reminderData?.details,
-        id: reminderData?.id,
-        assigned_to: reminderData?.assigned_to,
-        due_date: reminderData?.due_date,
-        due_time: reminderData?.due_time,
-        status_id: reminderData?.status_id,
+        due_datetime: selectedDate,
       });
-      setDueDate(reminderData?.due_date);
-    }
-  }, [reminderData]);
-
-  const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      setDueDate(date);
-      const formattedDate = format(new Date(date.$d), 'yyyy-MM-dd');
-
-      setPayload((prevState: any) => ({
-        ...prevState,
-        due_date: formattedDate,
-      }));
     } else {
-      setDueDate(null);
-      setPayload((prevState: any) => ({
-        ...prevState,
-        due_date: undefined,
-      }));
     }
   };
 
-  const handleTime = (event: any) => {
-    setPayload({
-      ...reminderPayload,
-      due_time: event.target.value,
-    });
+  const { fetchData: callReminderEditAPI } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/v1/task/reminder/update/`,
+    method: 'PUT',
+  });
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
   };
 
   const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setPayload({
+    const newDescription = event.target.value;
+
+    setReminderPayload({
       ...reminderPayload,
-      details: event.target.value,
+      description: newDescription,
     });
   };
 
-  //set mark as complete
-  const handleResolved = (event: any) => {
-    setPayload({
+  const handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = event.target.checked;
+    setReminderPayload({
       ...reminderPayload,
-      status_id: reminderPayload.status_id === event ? 0 : event,
+      status: isChecked,
     });
   };
 
   const handleEditReminder = async () => {
     try {
+      if (reminderDataById?.status === true) {
+        notification.info({
+          message: 'Info',
+          description:
+            'This flag has been set as resolved - changes are no longer permitted.',
+        });
+        return;
+      }
+
+      // Destructure to remove unwanted fields
+      const {
+        is_deleted,
+        legacy_reminder_id,
+        order_data,
+        priority,
+        reference,
+        completed_at,
+        completed_by,
+        ...cleanedPayload
+      } = reminderPayload;
+
+      cleanedPayload.id = reminderRefId;
+      cleanedPayload.order_id = reminderDataById?.order_id;
+
       const apiResponse = (await callReminderEditAPI({
-        payload: [reminderPayload],
+        payload: [cleanedPayload],
       })) as {
         code: number | null;
         error?: string | null | undefined;
+        data?: any;
         [key: string]: any;
       };
-      if (apiResponse?.code === 200 && apiResponse?.data) {
+
+      if (apiResponse?.code === 200) {
+        if (apiResponse && apiResponse?.data) {
+          setReminderUpdatedData(apiResponse?.data);
+          setReminderData(apiResponse?.data);
+          props?.callReminderApi();
+        }
+
+        closeModal();
         notification.success({
           message: 'Success',
           description: apiResponse.message,
         });
-        callReminderApi();
-        closeModal();
       } else {
         notification.error({
           message: 'Failure',
-          description: apiResponse?.error || 'An error occurred.',
+          description:
+            apiResponse?.error ||
+            'An error occurred while updating the reminder.',
         });
       }
     } catch (error) {
+      const err = error as any;
+      const errMsg =
+        err?.response?.data?.error ||
+        err?.response?.data?.message ||
+        err?.message ||
+        'An unexpected error occurred.';
+
       notification.error({
-        message: 'Error',
-        description: 'Failed to update the reminder. Please try again later.',
+        message: 'Request Failed',
+        description: errMsg,
       });
     }
   };
 
-  const isDisabled = reminderData?.reminder_status?.name_alias === 'resolved';
+  const hasReminderChanged = () => {
+    if (!reminderDataById || !reminderPayload) return false;
+
+    const original = {
+      due_datetime: reminderDataById?.due_datetime,
+      assigned_to: reminderDataById?.assigned_to,
+      description: reminderDataById?.description?.trim(),
+      department: reminderDataById?.department,
+      status: reminderDataById?.status,
+    };
+
+    const updated = {
+      due_datetime: reminderPayload?.due_datetime,
+      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 ||
+      original?.description !== updated?.description ||
+      original?.status !== updated?.status;
+
+    const shouldCompareDept =
+      original.department !== undefined && updated?.department !== undefined;
+
+    const departmentChanged = shouldCompareDept
+      ? original.department !== updated?.department
+      : false;
+
+    return baseChanged || departmentChanged;
+  };
+
+  const isDisabled =
+    !reminderPayload?.assigned_to?.length ||
+    !reminderPayload?.description?.trim() ||
+    !reminderPayload?.due_datetime ||
+    !hasReminderChanged() ||
+    reminderDataById?.status === true;
 
   const additional =
-    reminderData?.order_data?.order_recipient?.recipient_name +
+    reminderDataById?.order_data?.order_recipient?.recipient_name +
     ' ' +
-    reminderData?.order_data?.order_recipient?.postcode;
+    reminderDataById?.order_data?.order_recipient?.postcode;
+
+  const disabled = reminderDataById?.status === true;
 
   return (
     <>
-      {reminderData && (
+      {reminderDataById && (
         <OrderActionModal
           headerTitle="View Reminder"
           onCloseHeader={closeModal}
           onSubmit={handleEditReminder}
           submitBtnTitle="Save Details"
-          isSubmitDisabled={isDisabled}
-          showAdditionalInfo
           infoText={additional || 'NA'}
+          isSubmitDisabled={isDisabled || disabled}
           headerActions={
             <OuterDiv>
-              {reminderData?.reminder_status?.name_alias === 'pending' ||
-              reminderData?.reminder_status?.name_alias === 'unresolved' ? (
-                <>
-                  <StyledWrapper>
-                    <StyledLabel>
-                      <StyledCheckbox>
-                        <input
-                          type="checkbox"
-                          onChange={() => handleResolved(2)}
-                        />
-                        <RoundCheckbox />
-                      </StyledCheckbox>
-                      <StyledSpan>Mark As Complete</StyledSpan>
-                    </StyledLabel>
-                  </StyledWrapper>
-                </>
-              ) : null}
+              {reminderDataById?.status === false && (
+                <StyledWrapper>
+                  <StyledLabel>
+                    <StyledCheckbox>
+                      <input
+                        type="checkbox"
+                        onChange={handleStatusChange}
+                        checked={reminderPayload?.status || false}
+                        disabled={disabled}
+                      />
+                      <RoundCheckbox />
+                    </StyledCheckbox>
+                    <StyledSpan>Mark As Complete</StyledSpan>
+                  </StyledLabel>
+                </StyledWrapper>
+              )}
             </OuterDiv>
           }
         >
-          <ReferenceContainer style={{ marginTop: '20px' }}>
+          <ReferenceContainer>
             <InnerContainer>
               <MiniContainer>
-                {' '}
-                <Label>Reference {} </Label>
-                <LabelText>{reminderData?.reference || 'N/A'}</LabelText>
+                <Label label="Reference" required />
+                <LabelText>{reminderDataById?.reference || 'N/A'}</LabelText>
               </MiniContainer>
               <MiniContainer>
-                {' '}
-                <Label>Status </Label>
+                <Label label="Status" />
                 <LabelText>
-                  {reminderData?.reminder_status?.name_alias === 'pending' ||
-                  reminderData?.reminder_status?.name_alias === 'unresolved' ? (
+                  {reminderDataById?.status === false ? (
                     <StatusIndicator text="Incomplete" status="AD" />
                   ) : (
                     <StatusIndicator
-                      text={`Completed on ${reminderData?.completed} by ${reminderData?.completed_by}`}
+                      text={`Completed on ${reminderDataById?.completed_at} by ${reminderDataById?.completed_by}`}
                       status="SD"
                     />
                   )}
@@ -224,46 +278,53 @@ const ViewReminderModal = () => {
               </MiniContainer>
             </InnerContainer>
           </ReferenceContainer>
+
           <ContentsContainer>
             <Left>
               <AssigneeDropdown />
               <DateTimeContainer>
-                <Label>Due </Label>
+                <Label label="Due Date & Time" required />
                 <Row>
                   <StyleContainer>
                     <DatePickerWrap>
                       <DatePicker
-                        format="DD/MM/YYYY"
+                        format="DD/MM/YYYY HH:mm A"
                         value={
-                          reminderPayload?.due_date
-                            ? dayjs(reminderPayload?.due_date)
+                          reminderPayload?.due_datetime
+                            ? dayjs(reminderPayload?.due_datetime)
+                            : reminderDataById?.due_datetime
+                            ? dayjs(reminderDataById?.due_datetime)
                             : null
                         }
                         onChange={handleDateChange}
+                        placeholder="Select Date & Time"
+                        showTime={{ defaultValue: dayjs('00:00', 'HH:mm') }}
+                        disabledDate={current =>
+                          current && current < dayjs().startOf('day')
+                        }
+                        disabledTime={date => getDisabledTime(date)}
+                        disabled={disabled}
                       />
                     </DatePickerWrap>
                   </StyleContainer>
-
-                  <TimeWrapper>
-                    <StyledTime
-                      onChange={handleTime}
-                      value={reminderPayload?.due_time}
-                      type="time"
-                    />
-                  </TimeWrapper>
                 </Row>
               </DateTimeContainer>
             </Left>
+
             <Right>
-              <DetailedContainer>
-                <Label>Details</Label>
-                <StyledText
-                  name="text"
-                  required
-                  value={reminderPayload?.details}
-                  onChange={onChangeDetails}
-                />
-              </DetailedContainer>
+              <Label label="Details" required />
+              <DetailedContainer
+                placeholder="Enter Description..."
+                name="text"
+                required
+                value={
+                  reminderPayload?.description ||
+                  reminderDataById?.description ||
+                  ''
+                }
+                disabled={disabled}
+                onChange={onChangeDetails}
+              ></DetailedContainer>
             </Right>
           </ContentsContainer>
         </OrderActionModal>
@@ -272,6 +333,35 @@ const ViewReminderModal = () => {
   );
 };
 
+const getDisabledTime = (date: any) => {
+  if (date && date.isSame(dayjs(), 'day')) {
+    const currentHour = dayjs().hour();
+    const currentMinute = dayjs().minute();
+    return {
+      disabledHours: () =>
+        Array.from({ length: 24 }, (_, i) => i).filter(
+          hour => hour < currentHour
+        ),
+      disabledMinutes: (selectedHour: number) => {
+        if (selectedHour === currentHour) {
+          return Array.from({ length: 60 }, (_, i) => i).filter(
+            minute => minute < currentMinute
+          );
+        }
+        return [];
+      },
+    };
+  }
+  return {};
+};
+
+export const Right = styled.div`
+  display: flex;
+  height: 100%;
+  gap: 15px;
+  flex-direction: column;
+  padding: 10px;
+`;
 const StyleContainer = styled.div`
   border-radius: 20px;
   background: #fff;
@@ -350,4 +440,5 @@ const LabelText = styled.span`
   font-weight: 400;
   line-height: 16px;
 `;
+
 export default ViewReminderModal;

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

@@ -2,19 +2,17 @@ import { TextArea, Input } from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 export const ReferenceContainer = styled.div`
   display: flex;
-  height: 52px;
   width: 770px;
-  padding: 10px 15px;
   align-items: center;
   flex: 1 0 0;
   border-radius: 40px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
+  margin-top: 15px;
 `;
 export const InnerContainer = styled.div`
   display: flex;
-  height: 52px;
-  padding: 10px 15px;
+  padding: 5px 15px;
   align-items: center;
   gap: 20px;
   flex: 1 0 0;
@@ -133,7 +131,7 @@ export const DateTimeContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 15px;
+  gap: 5px;
   align-self: stretch;
 `;
 export const AssigneeContainer = styled.div`
@@ -147,17 +145,25 @@ export const AssigneeContainer = styled.div`
   border-radius: 15px;
   background: #f8fafc;
 `;
-export const DetailedContainer = styled.div`
+export const DetailedContainer = styled.textarea<{ disabled?: boolean }>`
   display: flex;
   width: 416px;
   padding: 15px 12px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 15px;
+  gap: 5px;
   flex: 1 0 0;
-  border-radius: 66px;
+  border-radius: 14px;
   background: #f8fafc;
+  background: ${({ disabled }) => (disabled ? 'rgba(0, 0, 0, 0.04)' : '#fff')};
+  color: ${({ disabled }) => (disabled ? '#666' : '#000')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  font-family: 'Lato', sans-serif;
+  min-height: 170px;
+  &::placeholder {
+    color: #aaa;
+  }
 `;
 export const ContentsContainer = styled(Column)`
   display: flex;

package/src/components/store.ts

@@ -209,6 +209,11 @@ export function useNewReturnOrderData() {
   return useAtom(newReturnOrderData);
 }
 
+const isClientPortalAtom = atom<boolean>(false);
+function useClientPortal() {
+  return useAtom(isClientPortalAtom);
+}
+
 export {
   useAtom,
   useFilter,
@@ -239,4 +244,5 @@ export {
   useLocationOptions,
   useSelectedProducts,
   useVisibilityData,
+  useClientPortal,
 };

package/src/index.tsx

@@ -13,13 +13,17 @@ import {
   useActionType,
   useActionTypeOptions,
   useAssignData,
-  useCustomerData,
+  useClientPortal,
   useLocationData,
   useStatusOrderData,
+  useVisibilityData,
 } from './components/store';
 import { ApiResponse } from './components/types';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-import { useLocationOptions } from './components/order-view/store';
+import {
+  useLocationOptions,
+  useOrderStaticData,
+} from './components/order-view/store';
 import OrderViewQueryHandler from './OrderViewQueryHandler';
 import OrderView from './components/order-view';
 function ReturnClient() {
@@ -27,7 +31,6 @@ function ReturnClient() {
     top: 80,
   });
   const LoadingMessage = () => <div>Loading...</div>;
-  const [, setCustomers] = useCustomerData();
   const [, setActionType] = useActionType();
   const [, setLocationData] = useLocationData();
   const [, setStatusOfOrders] = useStatusOrderData();
@@ -38,6 +41,16 @@ function ReturnClient() {
   const [, setSelectedClient] = useSelectedClient();
   const [searchParams] = useSearchParams();
   const [, setSelectedLocationValue] = useSelectedLocation();
+  const [, setVisibilityData] = useVisibilityData();
+  const [, setOrderStaticData] = useOrderStaticData();
+  const [, setClientPortal] = useClientPortal();
+
+  const userType = JSON.parse(localStorage.getItem('user_type')!);
+
+  useEffect(() => {
+    setClientPortal(userType?.is_customer || false); // change it to false bydefault
+  }, []);
+
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
     return parts;
@@ -54,15 +67,6 @@ function ReturnClient() {
     }
   }, [location.pathname, searchParams]);
 
-  //API for client data
-  const { data: fetchedCustomerData, loading: loading } = useApiHook<
-    ApiResponse
-  >({
-    endpoint: `/return_orders/customers/`,
-    method: 'GET',
-    //@ts-ignore
-    pagination: { is_pagination: false },
-  });
   //API for action type
   const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
     ApiResponse
@@ -79,20 +83,26 @@ function ReturnClient() {
     //@ts-ignore
     pagination: { is_pagination: false },
   });
-  useEffect(() => {
-    if (fetchedCustomerData && fetchedCustomerData?.data) {
-      setCustomers(fetchedCustomerData?.data);
-    }
-  }, [loading]);
+
   useEffect(() => {
     if (fetchedStaticData && fetchedStaticData?.data) {
+      const result = fetchedStaticData?.data;
+      setOrderStaticData(result[0]);
+      setVisibilityData(
+        fetchedStaticData?.data?.flatMap(
+          (i: any) => i?.resource_visibility_type
+        )
+      );
+
       setActionType(
         fetchedStaticData?.data?.flatMap(
           (i: any) => i?.order_product_return_action
         )
       );
+
+      //for status of return orders key changes
       setStatusOfOrders(
-        fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
+        fetchedStaticData?.data?.flatMap((i: any) => i?.return_order_status)
       );
       setAssignData(
         fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)