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

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

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  useCategoryData,
   useCreateReminderPayload,
-  useDepartmentData,
-  useTaskTypeExtended,
+  useDeptData,
+  useStaticData,
 } from '../../store';
-import { priorityData, transformOption } from '../../utils';
+import { priorityData } from '../../utils';
 import {
   DoubleDropdownContainer,
   FormRow,
@@ -15,69 +14,81 @@ import {
 import { DatePickerWrap } from '../modalstyle';
 import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
 import styled from 'styled-components';
-import { TextArea } from '@bjsdistribution/dms-component-library';
-import { DatePicker, Select } from 'antd';
-import { StandardOptionsType } from '../../../../../common/radio-group/types';
+import { TextArea, useAxios } from '@bjsdistribution/dms-component-library';
+import { DatePicker, notification, Select } from 'antd';
 import dayjs from 'dayjs';
 import { isValid } from 'date-fns';
 import utc from 'dayjs/plugin/utc';
-import { useOrderId } from '../../../store';
+import { ApiResponse } from '../../../types';
 dayjs.extend(utc);
 dayjs.extend(isValid);
 
 function CreateReminderModal() {
-  const [CategoryData] = useCategoryData();
-  const [SelectedPriority, setPriority] = useState(1);
-  const [departmentData] = useDepartmentData();
-  const [subCategoryOptions, setSubCategoryOptions] = useState([]);
-  const [, setSelectedCategory] = useState(null);
-  const [subCategory] = useTaskTypeExtended();
-  const [createReminder, setPayload] = useCreateReminderPayload();
-  const [displayDate, setDisplayDate] = useState<any | null>();
-  const [orderId] = useOrderId();
-
-  const handleSelectChange = () => console.log('testing log');
-
-  //options for department
-  const departmentOptions = departmentData.map((option: any) =>
-    transformOption(option, 'name')
-  );
-
-  //options for priority
-  const priorityOptions: StandardOptionsType[] = priorityData.map(
-    (option: any) => ({
-      label: option.name,
-      value: option.id,
-      color: option.color,
-    })
-  );
+  const [selectedPriority, setPriority] = useState(null);
+  const [reminderPayload, setReminderPayload] = useCreateReminderPayload();
+  const [displayDate, setDisplayDate] = useState<Date | null>();
+  const [staticData] = useStaticData();
+  const [departmentData, setDepartmentData] = useDeptData();
+  const [selectedDeptId, setSelectedDeptId] = useState<any | null>(null);
+  const [allUsers, setAllUsers] = useState<
+    {
+      fName: string;
+      lName: string;
+      id: string;
+      username: string;
+      deptId: number | null;
+    }[]
+  >([]);
+  const [, setFilteredUsers] = useState<typeof allUsers>([]);
 
-  //subcategory change
-  const handleDepartmentChange = (event: any) => {
-    setPayload(prevState => ({
+  const handleSelectUser = (value: string[]) => {
+    setReminderPayload((prevState: any) => ({
       ...prevState,
-      department_id: event,
+      assigned_to: value,
     }));
   };
 
-  const handleDateChange = (date: any | null, dateString: any | null) => {
-    if (dateString && date && isValid(date?.$d)) {
-      setDisplayDate(date?.$d?.toISOString());
+  const deptData =
+    departmentData?.map((item: any) => ({
+      label: item?.label,
+      value: item?.value,
+    })) || [];
 
-      const localDate = dayjs(dateString, 'DD/MM/YYYY HH:mm A');
+  const getPriorityOptions = (staticData: any) => {
+    return staticData?.[0]?.priorities?.map((option: any) => {
+      const colorMatch = priorityData?.find(p => p.id === option.id);
+      return {
+        label: option.name,
+        value: option.id,
+        color: colorMatch?.color || '#ccc',
+      };
+    });
+  };
+  const priorityOptions = getPriorityOptions(staticData);
 
-      const formattedDateTime = localDate
-        .format('YYYY-MM-DDTHH:mm:ss.SSS')
-        .concat('Z');
+  //subcategory change
+  const handleDepartmentChange = (value: string, option: { label: string }) => {
+    setSelectedDeptId(value);
+    setReminderPayload((prevState: any) => ({
+      ...prevState,
+      department: option?.label,
+      assigned_to: null,
+    }));
+  };
 
-      setPayload((prevState: any) => ({
+  const handleDateChange = (date: any | null) => {
+    if (date && isValid(date?.$d)) {
+      const formattedDateTime = dayjs(date).toISOString();
+      setDisplayDate(date?.$d?.toISOString());
+      setReminderPayload((prevState: any) => ({
         ...prevState,
-        due: formattedDateTime,
+        due_datetime: formattedDateTime,
       }));
     } else {
-      setPayload((prevState: any) => ({
+      setDisplayDate(null);
+      setReminderPayload((prevState: any) => ({
         ...prevState,
-        due: undefined,
+        due_datetime: null,
       }));
     }
   };
@@ -86,110 +97,195 @@ function CreateReminderModal() {
   const handlePriorityChange = (event: any) => {
     const newValue = event.target.value;
     setPriority(newValue);
-    setPayload(prevState => ({
+    setReminderPayload(prevState => ({
       ...prevState,
-      task_priority_id: +newValue,
+      priority: +newValue,
     }));
   };
 
   //description change
   const handleChange = (event: any) => {
     const desc = event.target.value;
-    setPayload(prevState => ({
+    setReminderPayload(prevState => ({
       ...prevState,
-      details: desc,
-      order_id: +orderId,
+      description: desc,
     }));
   };
 
-  // Options for category types
-  const categoryOptions = CategoryData.map((option: any) =>
-    transformOption(option, 'category')
-  );
+  // sso Data get
+  const { fetchData: getSSOData, data: fetchData } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/sso/departments/`,
+    method: 'GET',
+  });
 
-  //handling dependent subcategory dropdown
-  const handleCategoryChange = (value: any) => {
-    setSelectedCategory(value);
-    setPayload((prevstate: any) => ({
-      ...prevstate,
-      task_categories_id: value,
-    }));
-    const filteredSubCategories = subCategory
-      .filter((subCat: any) => subCat.category_id == value)
-      .map((subCat: any) => ({
-        label: subCat.sub_category,
-        value: subCat.id,
-      }));
-    setSubCategoryOptions(filteredSubCategories);
-  };
+  useEffect(() => {
+    const fetchAllSSOData = async () => {
+      try {
+        getSSOData();
+      } catch (error) {
+        console.error('Error fetching SSO data:', error);
+      }
+    };
+    fetchAllSSOData();
+  }, []);
 
-  //subcategory change
-  const handleTypeChange = (event: any) => {
-    setPayload(prevState => ({
+  const { fetchData: getUsersData } = useAxios<{ data: any }>({
+    endpoint: `/sso/users/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    const fetchAllPages = async () => {
+      try {
+        let page = 0;
+        let usersList: any[] = [];
+        let totalPages = 1;
+
+        while (page < totalPages) {
+          const res = (await getUsersData({
+            endPointQuery: `?page=${page}&limit=500`,
+          })) as { data: any };
+
+          const data = res?.data;
+
+          if (data) {
+            usersList = [...usersList, ...(data?.users || [])];
+            totalPages = data.pages || 1;
+            page += 1;
+          } else {
+            break;
+          }
+        }
+
+        setAllUsers(
+          usersList?.map(user => ({
+            id: user?.id,
+            username: user?.username,
+            deptId: user?.department_id,
+            fName: user?.first_names,
+            lName: user?.last_name,
+            // userId: user?.user_id,
+          }))
+        );
+      } catch (error) {
+        console.error('Error fetching paginated SSO data:', error);
+      }
+    };
+
+    fetchAllPages();
+  }, []);
+
+  useEffect(() => {
+    if (selectedDeptId !== null && allUsers?.length > 0) {
+      const matchedUsers = allUsers?.filter(
+        user => user?.deptId?.toString() === selectedDeptId?.toString()
+      );
+      setFilteredUsers(matchedUsers);
+    } else {
+      setFilteredUsers([]);
+    }
+  }, [selectedDeptId, allUsers]);
+
+  useEffect(() => {
+    if (fetchData && fetchData?.data) {
+      const deptList =
+        fetchData?.data?.map((item: any) => ({
+          label: item?.name,
+          value: item?.id,
+        })) || [];
+      setDepartmentData(deptList);
+    } else {
+      setDepartmentData([]);
+    }
+  }, [fetchData]);
+
+  const userOptions = allUsers?.map((user: any) => ({
+    label: `${user.fName} ${user.lName}`,
+    value: user.id,
+  }));
+
+  const handleAssignToMe = () => {
+    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);
+      }
+    }
+
+    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 deptMatched =
+      departmentData?.find((dept: any) => dept.value === matchedUser?.deptId)
+        ?.label || null;
+
+    if (!deptMatched) {
+      notification.info({
+        message: 'Info',
+        description: `Department is not assigned to the user`,
+      });
+      return;
+    }
+
+    setReminderPayload((prevState: any) => ({
       ...prevState,
-      task_subcategories_id: event,
+      assigned_to: [matchedUser?.id],
+      department: deptMatched,
     }));
+
+    matchedUser && setSelectedDeptId(matchedUser?.department_id);
   };
 
   return (
     <Wrapper>
       <SplitContainer>
-        <FormRow label="Assigned To">
+        <FormRow label="Department" required>
           <DoubleDropdownContainer>
             <StyledAntSelect
-              options={[]}
-              placeholder="IND"
-              onChange={handleSelectChange}
-              style={{ width: '8vw' }}
-            />
-            <StyledAntSelect
-              options={departmentOptions}
+              options={deptData}
+              style={{ width: '10vw' }}
               placeholder="Select Department"
               onChange={handleDepartmentChange}
-              style={{ width: '18vw' }}
-              value={createReminder.department_id}
+              value={reminderPayload?.department || undefined}
+              showSearch
             />
           </DoubleDropdownContainer>
+        </FormRow>
+        <FormRow label="Assigned To" required>
           <StyledAntSelect
-            options={[]}
+            options={userOptions}
             placeholder="Select User"
-            onChange={handleSelectChange}
-            style={{ width: '100%' }}
+            onChange={handleSelectUser}
+            style={{ width: 'max-content' }}
+            value={reminderPayload?.assigned_to || []}
+            showSearch
+            mode="multiple"
+            filterOption={(input: string, option?: { label: string }) =>
+              option?.label.toLowerCase().includes(input.toLowerCase())
+            }
           />
-          <StyledLink>Assign to me</StyledLink>
         </FormRow>
 
-        {(createReminder.department_id === 1 ||
-          createReminder.department_id === 2) && (
-          <>
-            <FormRow label="Category">
-              <StyledAntSelect
-                style={{ minWidth: '20vw' }}
-                options={categoryOptions}
-                placeholder="Select Category"
-                onChange={handleCategoryChange}
-                value={createReminder.task_categories_id}
-              />
-            </FormRow>
-            <FormRow label="Type">
-              <StyledAntSelect
-                options={subCategoryOptions}
-                placeholder="Select Type"
-                onChange={handleTypeChange}
-                style={{ minWidth: '20vw' }}
-                value={createReminder.task_subcategories_id}
-              />
-            </FormRow>
-          </>
-        )}
+        <StyledLink onClick={handleAssignToMe}>Assign to me</StyledLink>
 
-        <FormRow label="Priority">
+        <FormRow label="Priority" required>
           <RadioButtonGroup
             heading=""
             options={priorityOptions}
             onChange={handlePriorityChange}
             direction="horizontal"
-            selectedValue={SelectedPriority}
+            selectedValue={selectedPriority || 3}
             required={false}
           />
         </FormRow>
@@ -257,7 +353,7 @@ const Label = styled.label`
   font-weight: 500;
 `;
 
-export const StyledAntSelect = styled(Select)`
+export const StyledAntSelect: any = styled(Select)`
   .ant-select-selector {
     width: 20vw;
     border-radius: 22px;