@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

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

@@ -1,447 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  useCreateReminderPayload,
-  useDeptData,
-  useStaticData,
-} from '../../store';
-import { priorityData } from '../../utils';
-import {
-  DoubleDropdownContainer,
-  FormRow,
-  SplitContainer,
-  Wrapper,
-} from './SharedComponents';
-import { DatePickerWrap } from '../modalstyle';
-import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
-import styled from 'styled-components';
-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 { ApiResponse } from '../../../types';
-dayjs.extend(utc);
-dayjs.extend(isValid);
-
-function CreateReminderModal() {
-  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<string[]>([]);
-  const [allUsers, setAllUsers] = useState<
-    {
-      fName: string;
-      lName: string;
-      id: string;
-      username: string;
-      deptId: number | null;
-    }[]
-  >([]);
-  const [filteredUsers, setFilteredUsers] = useState<typeof allUsers>([]);
-
-  const handleSelectUser = (value: string[]) => {
-    setReminderPayload((prevState: any) => ({
-      ...prevState,
-      assigned_to: value,
-    }));
-  };
-
-  const deptData =
-    departmentData?.map((item: any) => ({
-      label: item?.label,
-      value: item?.value,
-    })) || [];
-
-  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 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(', '),
-    }));
-  };
-
-  const handleDateChange = (date: any | null) => {
-    if (date && isValid(date?.$d)) {
-      const formattedDateTime = dayjs(date).toISOString();
-      setDisplayDate(date?.$d?.toISOString());
-      setReminderPayload((prevState: any) => ({
-        ...prevState,
-        due_datetime: formattedDateTime,
-      }));
-    } else {
-      setDisplayDate(null);
-      setReminderPayload((prevState: any) => ({
-        ...prevState,
-        due_datetime: null,
-      }));
-    }
-  };
-
-  //handlePriority change
-  const handlePriorityChange = (event: any) => {
-    const newValue = event.target.value;
-    setPriority(newValue);
-    setReminderPayload(prevState => ({
-      ...prevState,
-      priority: +newValue,
-    }));
-  };
-
-  //description change
-  const handleChange = (event: any) => {
-    const desc = event.target.value;
-    setReminderPayload(prevState => ({
-      ...prevState,
-      description: desc,
-    }));
-  };
-
-  // sso Data get
-  const {
-    fetchData: getSSOData,
-    data: fetchData,
-    loading: deptLoading,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/sso/departments/`,
-    method: 'GET',
-    showLoader: false,
-  });
-
-  useEffect(() => {
-    const fetchAllSSOData = async () => {
-      try {
-        getSSOData();
-      } catch (error) {
-        console.error('Error fetching SSO data:', error);
-      }
-    };
-    fetchAllSSOData();
-  }, []);
-
-  const { fetchData: getUsersData, loading: userDataLoading } = useAxios<{
-    data: any;
-  }>({
-    endpoint: `/sso/users/`,
-    method: 'GET',
-    showLoader: false,
-  });
-
-  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 =
-    selectedDeptId?.length > 0
-      ? 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;
-
-    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;
-
-    const matchedUser: any = allUsers?.find(user => user?.id === storedUserID);
-
-    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,
-      assigned_to: [matchedUser?.id],
-      department: deptMatched,
-    }));
-
-    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>
-        <FormRow label="Department" required>
-          <DoubleDropdownContainer>
-            <StyledAntSelect
-              options={deptData}
-              style={{ width: '20vw' }}
-              placeholder="Select Department(s)"
-              onChange={handleDepartmentChange}
-              value={selectedDeptId || []}
-              loading={deptLoading}
-              showSearch
-              mode="multiple"
-            />
-          </DoubleDropdownContainer>
-        </FormRow>
-        <FormRow label="Assigned To" required>
-          <StyledAntSelect
-            options={userOptions}
-            placeholder="Select User"
-            onChange={handleSelectUser}
-            style={{ width: 'max-content' }}
-            value={reminderPayload?.assigned_to || []}
-            showSearch
-            mode="multiple"
-            loading={userDataLoading}
-            filterOption={(input: string, option?: { label: string }) =>
-              option?.label.toLowerCase().includes(input.toLowerCase())
-            }
-          />
-        </FormRow>
-
-        <StyledLink onClick={handleAssignToMe}>Assign to me</StyledLink>
-
-        <FormRow label="Priority" required>
-          <RadioButtonGroup
-            heading=""
-            options={priorityOptions}
-            onChange={handlePriorityChange}
-            direction="horizontal"
-            selectedValue={selectedPriority || 3}
-            required={false}
-          />
-        </FormRow>
-        <FormRow label="Due Date & Time" required>
-          <StyleContainer>
-            <DatePickerWrap>
-              <DatePicker
-                format="DD/MM/YYYY HH:mm A"
-                value={displayDate ? dayjs(displayDate) : null}
-                onChange={handleDateChange}
-                placeholder="Select Date & Time"
-                showTime={{ defaultValue: dayjs('00:00', 'HH:mm') }}
-                disabledDate={current =>
-                  current && current < dayjs().startOf('day')
-                }
-                disabledTime={date => {
-                  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 => {
-                        if (selectedHour === currentHour) {
-                          return Array.from({ length: 60 }, (_, i) => i).filter(
-                            minute => minute < currentMinute
-                          );
-                        }
-                        return [];
-                      },
-                    };
-                  }
-                  return {};
-                }}
-              />
-            </DatePickerWrap>
-          </StyleContainer>
-        </FormRow>
-      </SplitContainer>
-      <SplitContainer>
-        <Label>
-          Description{' '}
-          <span style={{ color: 'red', fontSize: '20px' }}> * </span>
-        </Label>
-        <StyledTextArea
-          placeholder="Add Description"
-          required
-          onChange={handleChange}
-        />
-      </SplitContainer>
-    </Wrapper>
-  );
-}
-
-const StyleContainer = styled.div`
-  border-radius: 20px;
-  background: var(--Flowkit-White, #fff);
-`;
-const Label = styled.label`
-  color: #6a7378;
-  font-family: 'Lato', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-export const StyledAntSelect: any = styled(Select)`
-  .ant-select-selector {
-    width: 20vw;
-    border-radius: 22px;
-  }
-`;
-
-const StyledTextArea = styled(TextArea)`
-  display: flex;
-  padding: 12px;
-  align-items: flex-start;
-  gap: 4px;
-  align-self: stretch;
-  border-radius: 10px;
-  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-  background: var(--Flowkit-White, #fff);
-  resize: none;
-  height: 100px;
-`;
-
-const StyledLink = styled.div`
-  color: var(--contextual-blue, #6396e5);
-  font-family: Lato;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-  cursor: pointer;
-`;
-
-export default CreateReminderModal;

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

@@ -1,198 +0,0 @@
-import React from 'react';
-import { useCreateTaskPayload, useStaticData } from '../../store';
-import {
-  FormRow,
-  SplitContainer,
-  StyledAntSelect,
-  Wrapper,
-} from './SharedComponents';
-import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
-import styled from 'styled-components';
-import { isValid } from 'date-fns';
-import { TextArea } from '@bjsdistribution/dms-component-library';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import { DatePickerWrap } from '../modalstyle';
-import { priorityData } from '../../utils';
-
-function CreateTaskModal() {
-  const [staticData] = useStaticData();
-  const [apiPayload, setApiPayload] = useCreateTaskPayload();
-  const taskTypeOptions = getTaskTypeOptions(staticData);
-  const priorityOptions = getPriorityOptions(staticData);
-
-  const handleTaskTypeChange = (value: any) => {
-    const selectedType = staticData?.[0]?.order_flag_types?.find(
-      (type: any) => type.id === value
-    )?.type;
-
-    setApiPayload(prev => ({
-      ...prev,
-      flag_type: selectedType || '',
-    }));
-  };
-
-  const handlePriorityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    setApiPayload((prev: any) => ({
-      ...prev,
-      priority: value,
-    }));
-  };
-
-  const handleDescriptionChange = (
-    e: React.ChangeEvent<HTMLTextAreaElement>
-  ) => {
-    const val = e.target.value;
-    setApiPayload(prev => ({
-      ...prev,
-      description: val,
-    }));
-  };
-
-  const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      const formatted = date.$d.toISOString();
-      setApiPayload(prev => ({
-        ...prev,
-        due_datetime: formatted,
-      }));
-    } else {
-      setApiPayload(prev => ({
-        ...prev,
-        due_datetime: '',
-      }));
-    }
-  };
-  return (
-    <Wrapper>
-      <SplitContainer>
-        <FormRow label="Task Type" required>
-          <StyledAntSelect
-            options={taskTypeOptions}
-            placeholder="Select Type"
-            onChange={handleTaskTypeChange}
-            value={apiPayload?.flag_type || null}
-          />
-        </FormRow>
-
-        <FormRow label="Priority" required>
-          <RadioButtonGroup
-            heading=""
-            options={priorityOptions || []}
-            onChange={handlePriorityChange}
-            direction="horizontal"
-            selectedValue={apiPayload?.priority || 3}
-            required={false}
-          />
-        </FormRow>
-
-        <FormRow label="Due Date & Time">
-          <StyleContainer>
-            <DatePickerWrap>
-              <DatePicker
-                format="DD/MM/YYYY HH:mm A"
-                value={
-                  apiPayload?.due_datetime
-                    ? dayjs(apiPayload?.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)}
-              />
-            </DatePickerWrap>
-          </StyleContainer>
-        </FormRow>
-      </SplitContainer>
-
-      <SplitContainer>
-        <Label>
-          Description
-          <span style={{ color: 'red', fontSize: '20px' }}> * </span>
-        </Label>
-        <StyledTextArea
-          placeholder="Add Description"
-          required
-          onChange={handleDescriptionChange}
-          value={apiPayload?.description || ''}
-        />
-      </SplitContainer>
-    </Wrapper>
-  );
-}
-
-const getTaskTypeOptions = (staticData: any) => {
-  return (
-    staticData?.[0]?.order_flag_types?.map((item: any) => ({
-      label: item?.type
-        ?.replace(/_/g, ' ')
-        ?.replace(/\b\w/g, (char: any) => char.toUpperCase()),
-      value: item?.id,
-    })) || []
-  );
-};
-
-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 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 {};
-};
-
-const StyleContainer = styled.div`
-  border-radius: 20px;
-  background: #fff;
-`;
-
-const Label = styled.label`
-  color: #6a7378;
-  font-family: 'Lato', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-const StyledTextArea = styled(TextArea)`
-  display: flex;
-  padding: 12px;
-  align-items: flex-start;
-  gap: 4px;
-  align-self: stretch;
-  border-radius: 10px;
-  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-  background: var(--Flowkit-White, #fff);
-  resize: none;
-  height: 50%;
-`;
-
-export default CreateTaskModal;