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

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

@@ -1,12 +1,5 @@
-import React, { useState } from 'react';
-import {
-  useCategoryData,
-  useCreateTaskPayload,
-  useNotiifcationLabel,
-  useTaskTypeData,
-  useTaskTypeExtended,
-} from '../../store';
-import { priorityData, transformOption } from '../../utils';
+import React from 'react';
+import { useCreateTaskPayload, useStaticData } from '../../store';
 import {
   FormRow,
   SplitContainer,
@@ -17,188 +10,106 @@ 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 { StandardOptionsType } from '../../../../../common/radio-group/types';
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import { DatePickerWrap } from '../modalstyle';
+import { priorityData } from '../../utils';
 
 function CreateTaskModal() {
-  const [taskTypes] = useTaskTypeData();
-  const [CategoryData] = useCategoryData();
-  const [SelectedPriority, setPriority] = useState(1);
-  const [, setSelectedCategory] = useState(null);
-  const [subCategoryOptions, setSubCategoryOptions] = useState([]);
-  const [subCategory] = useTaskTypeExtended();
-  const [createTask, setPayload] = useCreateTaskPayload();
-  const [, setLabel] = useNotiifcationLabel();
-
-  const handleSelectChange = () => console.log('');
-
-  //options for priority
-  const priorityOptions: StandardOptionsType[] = priorityData.map(
-    (option: any) => ({
-      label: option.name,
-      value: option.id,
-      color: option.color,
-    })
-  );
-
-  // Options for task types
-  const selectTaskTypeOptions = taskTypes.map((option: any) =>
-    transformOption(option, 'type')
-  );
-
-  // Options for category types
-  const categoryOptions = CategoryData.map((option: any) =>
-    transformOption(option, 'category')
-  );
-
-  //handlePriority change
-  const handlePriorityChange = (event: any) => {
-    const newValue = event.target.value;
-    setPriority(newValue);
-    setPayload(prevState => ({
-      ...prevState,
-      task_priority_id: newValue,
+  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 || '',
     }));
   };
 
-  //handling dependent subcategory dropdown
-  const handleCategoryChange = (value: any) => {
-    setSelectedCategory(value);
-    setPayload((prevstate: any) => ({
-      ...prevstate,
-      task_categories_id: value,
+  const handlePriorityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+    setApiPayload((prev: any) => ({
+      ...prev,
+      priority: value,
     }));
-    const filteredSubCategories = subCategory
-      .filter((subCat: any) => subCat.category_id == value)
-      .map((subCat: any) => ({
-        label: subCat.sub_category,
-        value: subCat.id,
-      }));
-    setSubCategoryOptions(filteredSubCategories);
   };
 
-  //subcategory change
-  const handleTypeChange = (event: any) => {
-    setPayload(prevState => ({
-      ...prevState,
-      task_subcategories_id: event,
+  const handleDescriptionChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const val = e.target.value;
+    setApiPayload(prev => ({
+      ...prev,
+      description: val,
     }));
   };
 
-  //task type change
-  const handleTaskType = (event: any) => {
-    const selectedOption = selectTaskTypeOptions.find(
-      (option: any) => option.value === event
-    );
-    const label = selectedOption ? selectedOption.label : '';
-
-    setLabel(label);
-    setPayload(prevState => ({
-      ...prevState,
-      task_type_id: event,
-    }));
-  };
-
-  //description change
-  const handleChange = (event: any) => {
-    const desc = event.target.value;
-    setPayload(prevState => ({
-      ...prevState,
-      description: desc,
-    }));
-  };
-
-  // date change here
   const handleDateChange = (date: any | null) => {
-    if (date && isValid(date?.$d)) {
-      const formattedDateTime = date?.$d?.toISOString();
-
-      setPayload((prevState: any) => ({
-        ...prevState,
-        due_datetime: formattedDateTime,
+    if (date && isValid(date.$d)) {
+      const formatted = date.$d.toISOString();
+      setApiPayload(prev => ({
+        ...prev,
+        due_datetime: formatted,
       }));
     } else {
-      setPayload((prevState: any) => ({
-        ...prevState,
-        due_datetime: undefined,
+      setApiPayload(prev => ({
+        ...prev,
+        due_datetime: '',
       }));
     }
   };
-
   return (
     <Wrapper>
       <SplitContainer>
         <FormRow label="Task Type" required>
           <StyledAntSelect
-            options={selectTaskTypeOptions}
+            options={taskTypeOptions}
             placeholder="Select Type"
-            onChange={handleTaskType}
-            value={createTask?.task_type_id}
+            onChange={handleTaskTypeChange}
+            value={apiPayload?.flag_type || null}
           />
         </FormRow>
 
-        <FormRow label="Assignee">
-          <StyledAntSelect
-            options={[]}
-            placeholder="Select User"
-            onChange={handleSelectChange}
-            style={{ minWidth: '20vw' }}
-          />
-          <StyledLink>Assign to me</StyledLink>
-        </FormRow>
-        <FormRow label="Priority">
+        <FormRow label="Priority" required>
           <RadioButtonGroup
             heading=""
-            options={priorityOptions}
+            options={priorityOptions || []}
             onChange={handlePriorityChange}
             direction="horizontal"
-            selectedValue={SelectedPriority}
+            selectedValue={apiPayload?.priority || 3}
             required={false}
           />
         </FormRow>
+
         <FormRow label="Due Date & Time" required>
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
-                format="DD/MM/YYYY HH:mm"
+                format="DD/MM/YYYY HH:mm A"
                 value={
-                  createTask?.due_datetime
-                    ? dayjs(createTask.due_datetime)
+                  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>
-
-        {createTask?.task_type_id !== 11 && (
-          <>
-            <FormRow label="Category">
-              <StyledAntSelect
-                style={{ minWidth: '20vw' }}
-                options={categoryOptions}
-                placeholder="Select Category"
-                onChange={handleCategoryChange}
-                value={createTask?.task_categories_id}
-              />
-            </FormRow>
-            <FormRow label="Type">
-              <StyledAntSelect
-                options={subCategoryOptions}
-                placeholder="Select Type"
-                onChange={handleTypeChange}
-                style={{ minWidth: '20vw' }}
-                value={createTask?.task_subcategories_id}
-              />
-            </FormRow>
-          </>
-        )}
       </SplitContainer>
+
       <SplitContainer>
         <Label>
           Description
@@ -207,25 +118,59 @@ function CreateTaskModal() {
         <StyledTextArea
           placeholder="Add Description"
           required
-          onChange={handleChange}
-          value={createTask?.description}
+          onChange={handleDescriptionChange}
+          value={apiPayload?.description || ''}
         />
       </SplitContainer>
     </Wrapper>
   );
 }
+
+const getTaskTypeOptions = (staticData: any) => {
+  return (
+    staticData?.[0]?.order_flag_types?.map((item: any) => ({
+      label: item?.type,
+      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: var(--Flowkit-White, #fff);
-`;
-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;
+  background: #fff;
 `;
 
 const Label = styled.label`

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

@@ -1,30 +1,25 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useEffect } from 'react';
 import {
   RadioButtonGroup,
   useApiHook,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
 import 'react-datepicker/dist/react-datepicker.css';
+import { CustomOptions } from '../../../../fakeData';
 import {
   initialPayload,
-  useAllStaticData,
-  useCategoryData,
+  useStaticData,
   useCreateTaskPayload,
-  useDepartmentData,
-  useNotificationData,
   useNotiifcationLabel,
-  useTaskPriority,
-  useTaskTypeData,
-  useTaskTypeExtended,
 } from '../../store';
 import { allTypes } from '../../types';
-import { ContentContainer } from './SharedComponents';
-import { useCurrentAction, useOrderDetails } from '../../../store';
+import { useCurrentAction } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import styled from 'styled-components';
-import CreateTaskModal from './CreateTaskModal';
-import { CustomOptions } from '../../../../fakeData';
 import { notification } from 'antd';
+import { ContentContainer } from '../modalstyle';
+import CreateTaskModal from './CreateTaskModal';
 
 interface ApiResponse {
   message: string;
@@ -33,98 +28,65 @@ interface ApiResponse {
   error_traceback: string | null;
   data: allTypes[];
 }
+interface IProps {
+  callReminderApi: any;
+  callUnresolvedTaskApi: any;
+}
 
-function TaskModal() {
+function TaskModal(props: IProps) {
   const [, setCurrentAction] = useCurrentAction();
-  const [createTask, setPayload] = useCreateTaskPayload();
-  const [staticData, setStaticData] = useAllStaticData();
-  const [, setPriority] = useTaskPriority();
-  const [, setTaskCategory] = useCategoryData();
-  const [, setTaskTypes] = useTaskTypeData();
-  const [, setTaskTypeExtended] = useTaskTypeExtended();
-  const [, setDepartmentData] = useDepartmentData();
-  const [, setNotififcationData] = useNotificationData();
+  const [taskPayload, setTaskPayload] = useCreateTaskPayload();
   const [, setLabel] = useNotiifcationLabel();
-  const [orderDetails] = useOrderDetails();
-
-  // API Call
-  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
-    endpoint: `/tasks/getStaticData/all/`,
-    method: 'GET',
-  });
+  const [, setStaticData] = useStaticData();
 
-  //create task API
   const { fetchData: createFlagAPI } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/`,
+    endpoint: `/v1/task/`,
     method: 'POST',
   });
 
-  //Unresolved API
-  const {
-    fetchData: callUnresolvedTaskApi,
-    data: fetchedUnresolvedData,
-    loading: unresolvedLoading,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/tasks/`,
+  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
+    endpoint: `/v1/task/getStaticData/all/`,
     method: 'GET',
-    pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: orderDetails?.id }],
   });
 
   useEffect(() => {
     if (fetchedStaticData) {
-      setStaticData(fetchedStaticData.data);
+      setStaticData(fetchedStaticData?.data);
     }
   }, [fetchedStaticData]);
 
-  //extracted types from whole static data
-  useEffect(() => {
-    if (staticData) {
-      setPriority(staticData?.map(data => data.tasks_priority).flat());
-      setTaskTypes(staticData?.map(data => data.tasks_types).flat());
-      setTaskCategory(staticData?.map(data => data.task_categories).flat());
-      setTaskTypeExtended(
-        staticData?.map(data => data.task_sub_categories).flat()
-      );
-      setDepartmentData(staticData?.map(data => data.department).flat());
-    }
-  }, [staticData]);
-
   const handleRadioButtonChange = (event: any) => {
     const selectedValue = event.target.value;
     const isPrivateValue = selectedValue === 'private';
-    setPayload(prevState => ({
+    setTaskPayload(prevState => ({
       ...prevState,
       is_private: isPrivateValue,
     }));
   };
+
   const closeModal = () => {
     setCurrentAction(undefined);
-    setPayload(initialPayload);
+    setTaskPayload(initialPayload);
     setLabel('');
   };
 
   const handleTaskSubmit = async () => {
-    let response = (await createFlagAPI({
-      payload: { flags: [createTask] },
-    })) as {
+    let response = (await createFlagAPI({ payload: [taskPayload] })) as {
       code: number | null;
       error?: string | null | undefined;
       [key: string]: any;
     };
-    if (response?.code == 200 && response?.data) {
+    if (response.code == 200 && response?.data) {
+      closeModal();
       notification.success({
         message: 'Success',
         description: `${response.message}`,
       });
-      callUnresolvedTaskApi();
-      closeModal();
+      await props?.callUnresolvedTaskApi();
     }
-    if (response?.code == null && response.error) {
+    if (response?.code == null && response?.error) {
       return notification.error({
         message: 'Failure',
         description: `${response.error}`,
@@ -132,42 +94,23 @@ function TaskModal() {
     }
   };
 
-  //flags data set
-  useEffect(() => {
-    if (fetchedUnresolvedData && fetchedUnresolvedData.data) {
-      setNotififcationData(fetchedUnresolvedData?.data);
-    }
-  }, [unresolvedLoading]);
-
   const isSubmitDisabled = () => {
-    const { description, due_datetime, task_type_id } = createTask;
-    return !description || !due_datetime || !task_type_id;
+    const { description, due_datetime, flag_type, priority } = taskPayload;
+    return !description || !due_datetime || !flag_type || !priority;
   };
 
-  useEffect(() => {
-    if (orderDetails && orderDetails?.id && orderDetails?.customer_id) {
-      setPayload((prevState: any) => ({
-        ...prevState,
-        order_id: orderDetails?.id,
-        customer_id: orderDetails?.customer_id,
-        associated_object_id: 1,
-        associated_object_name: 'orders',
-      }));
-    }
-  }, []);
-
   return (
     <>
       <OrderModal
         headerTitle={'CREATE TASK'}
         onCloseHeader={closeModal}
         onSubmit={handleTaskSubmit}
-        submitBtnTitle={'Save Task'}
+        submitBtnTitle={'Save Details'}
         isSubmitDisabled={isSubmitDisabled()}
         footerActions={
           <RadioButtonGroup
             selectedValue={
-              createTask?.is_private == true ? 'private' : 'public'
+              taskPayload?.is_private == true ? 'private' : 'public'
             }
             options={CustomOptions}
             onChange={handleRadioButtonChange}