@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import {
+  useCategoryData,
+  useCreateTaskPayload,
+  useNotiifcationLabel,
+  useTaskLoading,
+  useTaskTypeData,
+  useTaskTypeExtended,
+} from '../../store';
+import { priorityData, transformOption } from '../../utils';
+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 Loader from '../../../../order-daily-overview/header/loader/Loader';
+import { StandardOptionsType } from '../../../../../common/radio-group/types';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { DatePickerWrap } from '../modalstyle';
+
+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 [loading] = useTaskLoading();
+
+  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,
+    }));
+  };
+
+  //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);
+  };
+
+  //subcategory change
+  const handleTypeChange = (event: any) => {
+    setPayload(prevState => ({
+      ...prevState,
+      task_subcategories_id: event,
+    }));
+  };
+
+  //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,
+      }));
+    } else {
+      setPayload((prevState: any) => ({
+        ...prevState,
+        due_datetime: undefined,
+      }));
+    }
+  };
+
+  return (
+    <Wrapper>
+      {loading && <Loader />}
+      <SplitContainer>
+        <FormRow label="Task Type" required>
+          <StyledAntSelect
+            options={selectTaskTypeOptions}
+            placeholder="Select Type"
+            onChange={handleTaskType}
+            value={createTask?.task_type_id}
+          />
+        </FormRow>
+
+        <FormRow label="Assignee">
+          <StyledAntSelect
+            options={[]}
+            placeholder="Select User"
+            onChange={handleSelectChange}
+            style={{ minWidth: '20vw' }}
+          />
+          <StyledLink>Assign to me</StyledLink>
+        </FormRow>
+        <FormRow label="Priority">
+          <RadioButtonGroup
+            heading=""
+            options={priorityOptions}
+            onChange={handlePriorityChange}
+            direction="horizontal"
+            selectedValue={SelectedPriority}
+            required={false}
+          />
+        </FormRow>
+        <FormRow label="Due Date & Time" required>
+          <StyleContainer>
+            <DatePickerWrap>
+              <DatePicker
+                format="YYYY-MM-DD HH:mm"
+                value={
+                  createTask?.due_datetime
+                    ? dayjs(createTask.due_datetime)
+                    : null
+                }
+                onChange={handleDateChange}
+                placeholder="Select Date & Time"
+                showTime={{ defaultValue: dayjs('00:00', 'HH:mm') }}
+              />
+            </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
+          <span style={{ color: 'red', fontSize: '20px' }}> * </span>
+        </Label>
+        <StyledTextArea
+          placeholder="Add Description"
+          required
+          onChange={handleChange}
+          value={createTask?.description}
+        />
+      </SplitContainer>
+    </Wrapper>
+  );
+}
+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;
+`;
+
+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: 25%;
+`;
+
+export default CreateTaskModal;

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

@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import { Select } from 'antd';
+
+// Shared styles and components
+export const Wrapper = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+export 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: 35%;
+`;
+
+export const SplitContainer = styled.div`
+  /* width: 95%; */
+  min-width: 25vw;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+`;
+
+export const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+export const DatePickerWrap = styled.div`
+  position: relative;
+  border-radius: 66px;
+  border: 1px solid #e0e2e7;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+
+  input[type='text'] {
+    border-radius: 20px;
+    background: #fff;
+    border: none;
+    color: #6a7378;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 10px 0;
+    padding-left: 33px;
+    min-width: 18vw;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  padding: 12px 12px;
+  margin: 5px 14px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  background: #f8fafc;
+  border-radius: 15px;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const DoubleDropdownContainer = styled.div`
+  display: flex;
+  gap: 10px;
+  width: 100%;
+`;
+
+// FormRow component
+interface FormRowProps {
+  label: string;
+  children: React.ReactNode;
+  required?: boolean;
+}
+
+export const FormRow: React.FC<FormRowProps> = ({
+  label,
+  children,
+  required = false,
+}) => (
+  <Row>
+    <Label>
+      {label}
+      {required && <span style={{ color: 'red', fontSize: '20px' }}> * </span>}
+    </Label>
+    {children}
+  </Row>
+);

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

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  RadioButtonGroup,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import 'react-datepicker/dist/react-datepicker.css';
+import CustomSwitchSelector from '../../../../../common/custom-switch';
+import { CustomOptions } from '../../../../fakeData';
+import CreateReminder from './CreateReminderModal';
+import CreateTask from './CreateTaskModal';
+import {
+  initialPayload,
+  initialValue,
+  useAllStaticData,
+  useCategoryData,
+  useCreateReminderPayload,
+  useCreateTaskPayload,
+  useDepartmentData,
+  useNotiifcationLabel,
+  useTaskLoading,
+  useTaskPriority,
+  useTaskTypeData,
+  useTaskTypeExtended,
+} from '../../store';
+import useCreateTask from '../../hooks/useCreateTask';
+import Loader from '../../../../order-daily-overview/header/loader/Loader';
+import useCreateReminder from '../../hooks/useCreateReminder';
+import { allTypes } from '../../types';
+
+import { ContentContainer } from './SharedComponents';
+import { useCurrentAction } from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import useFetchUnresolvedTasks from '../../hooks/useAllTaskData';
+import useFetchReminders from '../../hooks/useAllReminderData';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: allTypes[];
+}
+
+function TaskReminderModal() {
+  const createTaskAPI = useCreateTask();
+  const createReminderAPI = useCreateReminder();
+  const [, setCurrentAction] = useCurrentAction();
+  const [modalType, setModalTypeState] = useState<string>('task');
+  const handleSwitchChange = (newValue: any) => setModalTypeState(newValue);
+  const [createTask, setPayload] = useCreateTaskPayload();
+  const [createReminder, setReminderPayload] = useCreateReminderPayload();
+  const [label] = useNotiifcationLabel();
+  const [loading, setLoading] = useTaskLoading();
+  const [staticData, setStaticData] = useAllStaticData();
+  const [, setPriority] = useTaskPriority();
+  const [, setTaskCategory] = useCategoryData();
+  const [, setTaskTypes] = useTaskTypeData();
+  const [, setTaskTypeExtended] = useTaskTypeExtended();
+  const [, setDepartmentData] = useDepartmentData();
+  const fetchData = useFetchUnresolvedTasks();
+  const ReminderData = useFetchReminders();
+
+  // API Call
+  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
+    endpoint: `/tasks/getStaticData/all/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    setLoading(true);
+    if (fetchedStaticData) {
+      setStaticData(fetchedStaticData.data);
+    }
+    setLoading(false);
+  }, [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 => ({
+      ...prevState,
+      is_private: isPrivateValue,
+    }));
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+    if (modalType === 'task') {
+      setPayload(initialPayload);
+    } else {
+      setReminderPayload(initialValue);
+    }
+  };
+
+  const handleTaskSubmit = async () => {
+    setLoading(true);
+    await createTaskAPI([createTask]);
+    fetchData();
+    ReminderData();
+    closeModal();
+  };
+
+  const handleReminderSubmit = async () => {
+    setLoading(true);
+    await createReminderAPI([createReminder]);
+    ReminderData();
+    fetchData();
+    closeModal();
+  };
+
+  const isSubmitDisabled = () => {
+    if (modalType === 'task') {
+      const { description, due_datetime, task_type_id } = createTask;
+      return !description || !due_datetime || !task_type_id;
+    } else if (modalType === 'reminder') {
+      const { details, due } = createReminder;
+      return !details || !due;
+    }
+    return true;
+  };
+
+  return (
+    <>
+      {loading && <Loader />}
+      <OrderModal
+        headerTitle={modalType === 'task' ? 'CREATE TASK' : 'CREATE REMINDER'}
+        onCloseHeader={closeModal}
+        onSubmit={
+          modalType === 'task' ? handleTaskSubmit : handleReminderSubmit
+        }
+        submitBtnTitle={modalType === 'task' ? 'Save Details' : 'Save Reminder'}
+        headerActions={
+          <CustomSwitchSelector onSwitchChange={handleSwitchChange} />
+        }
+        isSubmitDisabled={isSubmitDisabled()}
+        footerActions={
+          modalType === 'task' && (
+            <RadioButtonGroup
+              selectedValue={
+                createTask.is_private == true ? 'private' : 'public'
+              }
+              options={CustomOptions}
+              onChange={handleRadioButtonChange}
+              heading={''}
+              required={false}
+            />
+          )
+        }
+      >
+        <ContentContainer>
+          {modalType == 'task' ? <CreateTask /> : <CreateReminder />}
+
+          {modalType == 'task' ? (
+            <Alert
+              type="info"
+              title={`A FLEX task will be raised for ${label} Team`}
+              description=""
+              showOkButton={false}
+              showCloseIcon={false}
+              onClose={() => {}}
+            />
+          ) : (
+            ''
+          )}
+        </ContentContainer>
+      </OrderModal>
+    </>
+  );
+}
+
+const OrderModal = styled(OrderActionModal)`
+  width: 70%;
+`;
+
+export default TaskReminderModal;

package/src/components/order-view/order-actions/actions/escalation/Dropdowns.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+// import {
+//   EscalationCategory,
+//   EscalationLevel,
+//   EscalationReason,
+//   EscalationStatus,
+// } from '../../utils';
+const FlexContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  justify-content: space-between;
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const InnerCont = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+`;
+const StyledAntSelect = styled(AntSelect)`
+  width: 100%;
+  height: 40px;
+`;
+const Dropdowns = () => {
+  const handleSelectChange = () => {
+    // alert('hello');
+  };
+  return (
+    <FlexContainer>
+      <InnerCont>
+        <Label label="Escalation Category" required />
+        <StyledAntSelect
+          options={[]}
+          placeholder="Select Category"
+          onChange={handleSelectChange}
+          disabled={false}
+          showSearch={true}
+          popupClassName={'dropDownStyle'}
+          selectWrapperClass={'rounded'}
+          style={{ width: '10vw' }}
+        />
+      </InnerCont>
+      <InnerCont>
+        <Label label="Level" required />
+        <StyledAntSelect
+          options={[]}
+          placeholder="Select Level"
+          onChange={handleSelectChange}
+          disabled={false}
+          showSearch={true}
+          popupClassName={'dropDownStyle'}
+          selectWrapperClass={'rounded'}
+          style={{ width: '10vw' }}
+        />
+      </InnerCont>
+      <InnerCont>
+        <Label label="Escalation Reason" required />
+        <StyledAntSelect
+          options={[]}
+          placeholder="Select Reason"
+          onChange={handleSelectChange}
+          disabled={false}
+          showSearch={true}
+          popupClassName={'dropDownStyle'}
+          selectWrapperClass={'rounded'}
+          style={{ width: '10vw' }}
+        />
+      </InnerCont>
+      <InnerCont>
+        <Label label="Escalation Status" required />
+        <StyledAntSelect
+          options={[]}
+          placeholder="Select Status"
+          onChange={handleSelectChange}
+          disabled={false}
+          showSearch={true}
+          popupClassName={'dropDownStyle'}
+          selectWrapperClass={'rounded'}
+          style={{ width: '10vw' }}
+        />
+      </InnerCont>
+    </FlexContainer>
+  );
+};
+export default Dropdowns;

package/src/components/order-view/order-actions/actions/escalation/EscalationModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { useCurrentAction } from '../../../store';
+import NewEscalation from '../escalation/NewEscalation';
+
+const EscalationModal: React.FC = () => {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <>
+      <OrderActionModal
+        headerTitle="Escalations"
+        onCloseHeader={closeModal}
+        onSubmit={() => {}}
+        infoText="NICK OLIVER, YO42ST"
+        showAdditionalInfo
+      >
+        <NewEscalation />
+      </OrderActionModal>
+    </>
+  );
+};
+
+export default EscalationModal;