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

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateReminderModal.tsx

@@ -29,7 +29,7 @@ function CreateReminderModal() {
   const [displayDate, setDisplayDate] = useState<Date | null>();
   const [staticData] = useStaticData();
   const [departmentData, setDepartmentData] = useDeptData();
-  const [selectedDeptId, setSelectedDeptId] = useState<any | null>(null);
+  const [selectedDeptId, setSelectedDeptId] = useState<string[]>([]);
   const [allUsers, setAllUsers] = useState<
     {
       fName: string;
@@ -39,7 +39,7 @@ function CreateReminderModal() {
       deptId: number | null;
     }[]
   >([]);
-  const [, setFilteredUsers] = useState<typeof allUsers>([]);
+  const [filteredUsers, setFilteredUsers] = useState<typeof allUsers>([]);
 
   const handleSelectUser = (value: string[]) => {
     setReminderPayload((prevState: any) => ({
@@ -58,21 +58,40 @@ function CreateReminderModal() {
     return staticData?.[0]?.priorities?.map((option: any) => {
       const colorMatch = priorityData?.find(p => p.id === option.id);
       return {
-        label: option.name,
-        value: option.id,
+        label: option?.name,
+        value: option?.id,
         color: colorMatch?.color || '#ccc',
       };
     });
   };
   const priorityOptions = getPriorityOptions(staticData);
 
-  //subcategory change
-  const handleDepartmentChange = (value: string, option: { label: string }) => {
-    setSelectedDeptId(value);
-    setReminderPayload((prevState: any) => ({
-      ...prevState,
-      department: option?.label,
-      assigned_to: null,
+  const handleDepartmentChange = (
+    values: string[],
+    options: { label: string }[]
+  ) => {
+    setSelectedDeptId(values);
+
+    if (reminderPayload && reminderPayload?.assigned_to!?.length > 0) {
+      const matchedUsers = allUsers?.filter(
+        user => user?.deptId !== null && values?.includes(String(user?.deptId))
+      );
+
+      const filteredAssignedTo = reminderPayload?.assigned_to?.filter(
+        (id: any) => matchedUsers?.some(user => user.id === id)
+      );
+
+      setReminderPayload((prev: any) => ({
+        ...prev,
+        assigned_to: filteredAssignedTo,
+      }));
+    }
+
+    const deptLabels = options?.map(opt => opt.label);
+
+    setReminderPayload(prev => ({
+      ...prev,
+      department: deptLabels.join(', '),
     }));
   };
 
@@ -113,11 +132,16 @@ function CreateReminderModal() {
   };
 
   // sso Data get
-  const { fetchData: getSSOData, data: fetchData } = useAxios<{
+  const {
+    fetchData: getSSOData,
+    data: fetchData,
+    loading: deptLoading,
+  } = useAxios<{
     data: ApiResponse[];
   }>({
     endpoint: `/sso/departments/`,
     method: 'GET',
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -131,9 +155,12 @@ function CreateReminderModal() {
     fetchAllSSOData();
   }, []);
 
-  const { fetchData: getUsersData } = useAxios<{ data: any }>({
+  const { fetchData: getUsersData, loading: userDataLoading } = useAxios<{
+    data: any;
+  }>({
     endpoint: `/sso/users/`,
     method: 'GET',
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -201,30 +228,28 @@ function CreateReminderModal() {
     }
   }, [fetchData]);
 
-  const userOptions = allUsers?.map((user: any) => ({
+  const userOptions = filteredUsers?.map((user: any) => ({
     label: `${user.fName} ${user.lName}`,
     value: user.id,
   }));
 
   const handleAssignToMe = () => {
+    const storedUserJSON = localStorage.getItem('user_type');
+    if (!storedUserJSON) return;
+
     let storedUserID: string | null = null;
 
-    const storedUserJSON = localStorage.getItem('User_iD');
-    if (storedUserJSON) {
-      try {
-        const parsed = JSON.parse(storedUserJSON);
-        storedUserID = parsed.user_id || null;
-      } catch (e) {
-        console.error('Failed to parse stored user ID', e);
-      }
+    try {
+      const parsed = JSON.parse(storedUserJSON);
+      storedUserID = parsed?.user_id ?? null;
+    } catch (e) {
+      console.error('Failed to parse stored user_type from localStorage', e);
+      return;
     }
 
     if (!storedUserID) return;
-    console.log(allUsers, 'allUsersallUsersallUsers');
-    const matchedUser: any = allUsers?.find(user => user?.id === storedUserID);
 
-    console.log(storedUserID, 'storedUserID');
-    console.log(matchedUser, 'matchedUser');
+    const matchedUser: any = allUsers?.find(user => user?.id === storedUserID);
 
     const deptMatched =
       departmentData?.find((dept: any) => dept.value === matchedUser?.deptId)
@@ -244,9 +269,39 @@ function CreateReminderModal() {
       department: deptMatched,
     }));
 
-    matchedUser && setSelectedDeptId(matchedUser?.department_id);
+    if (matchedUser?.deptId) {
+      setSelectedDeptId(matchedUser.deptId.toString());
+    }
   };
 
+  useEffect(() => {
+    if (
+      Array.isArray(selectedDeptId) &&
+      selectedDeptId?.length > 0 &&
+      allUsers?.length > 0
+    ) {
+      const matchedUsers = allUsers?.filter(
+        user =>
+          user?.deptId !== null &&
+          selectedDeptId?.includes(String(user?.deptId))
+      );
+      const currentAssigned = (reminderPayload?.assigned_to || []) as string[];
+
+      const currentAssignedUsers = allUsers?.filter(user =>
+        currentAssigned?.includes(user?.id || '')
+      );
+
+      const mergedUsers = [...matchedUsers, ...currentAssignedUsers];
+      const uniqueUsers = Array.from(
+        new Map(mergedUsers?.map(u => [u?.id, u]))?.values()
+      );
+
+      setFilteredUsers(uniqueUsers);
+    } else {
+      setFilteredUsers(allUsers);
+    }
+  }, [selectedDeptId, allUsers]);
+
   return (
     <Wrapper>
       <SplitContainer>
@@ -254,11 +309,13 @@ function CreateReminderModal() {
           <DoubleDropdownContainer>
             <StyledAntSelect
               options={deptData}
-              style={{ width: '10vw' }}
-              placeholder="Select Department"
+              style={{ width: '20vw' }}
+              placeholder="Select Department(s)"
               onChange={handleDepartmentChange}
-              value={reminderPayload?.department || undefined}
+              value={selectedDeptId || []}
+              loading={deptLoading}
               showSearch
+              mode="multiple"
             />
           </DoubleDropdownContainer>
         </FormRow>
@@ -271,6 +328,7 @@ function CreateReminderModal() {
             value={reminderPayload?.assigned_to || []}
             showSearch
             mode="multiple"
+            loading={userDataLoading}
             filterOption={(input: string, option?: { label: string }) =>
               option?.label.toLowerCase().includes(input.toLowerCase())
             }

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateTaskModal.tsx

@@ -87,7 +87,7 @@ function CreateTaskModal() {
           />
         </FormRow>
 
-        <FormRow label="Due Date & Time" required>
+        <FormRow label="Due Date & Time">
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
@@ -129,7 +129,9 @@ function CreateTaskModal() {
 const getTaskTypeOptions = (staticData: any) => {
   return (
     staticData?.[0]?.order_flag_types?.map((item: any) => ({
-      label: item?.type,
+      label: item?.type
+        ?.replace(/_/g, ' ')
+        ?.replace(/\b\w/g, (char: any) => char.toUpperCase()),
       value: item?.id,
     })) || []
   );
@@ -190,7 +192,7 @@ const StyledTextArea = styled(TextArea)`
   border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
   background: var(--Flowkit-White, #fff);
   resize: none;
-  height: 25%;
+  height: 50%;
 `;
 
 export default CreateTaskModal;

package/src/components/order-view/order-actions/actions/create-task-reminder/TaskModal.tsx

@@ -95,8 +95,8 @@ function TaskModal(props: IProps) {
   };
 
   const isSubmitDisabled = () => {
-    const { description, due_datetime, flag_type, priority } = taskPayload;
-    return !description || !due_datetime || !flag_type || !priority;
+    const { description, flag_type, priority } = taskPayload;
+    return !description || !flag_type || !priority;
   };
 
   return (

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;