@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

package/src/components/order-view/order-actions/actions/add-resources/index.tsx

@@ -1,43 +1,132 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import DocumentTypeDropdown from './DocumentTypeDropdown';
 import styled from 'styled-components';
 import CategoryDropdown from './CategoryDropdown';
 import VisibilityRadioButtons from './Visibility';
-import DocFileUpload from './DocFileUpload';
-import { useCurrentAction } from '../../../store';
-// import DocFileUpload from './DocFileUpload';
+import DocFileUpload, { uploadedFilesAtom } from './DocFileUpload';
+import {
+  useAtom,
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderStaticData,
+} from '../../../store';
+import {
+  selectedCategoryIdAtom,
+  selectedDocumentTypeAtom,
+  selectedTypeAtom,
+  setResourcesCall,
+} from '../../store';
+import OrderActionsDropdown from '../../Dropdown';
+import { notification } from 'antd';
+import useUploadFiles from '../../../hooks/AddResources';
 
 function AddResources() {
   const [, setCurrentAction] = useCurrentAction();
+  const [staticOrderData] = useOrderStaticData();
+  const [, setSelectedType] = useAtom(selectedTypeAtom);
+  const [uploadedFiles, setUploadedFiles] = useAtom(uploadedFilesAtom);
+  const uploadFiles = useUploadFiles();
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [selectedCategoryId] = useAtom(selectedCategoryIdAtom);
+  const [selectedDocumentType] = useAtom(selectedDocumentTypeAtom);
+  const [selectedType] = useAtom(selectedTypeAtom);
+  const [, setResources] = useAtom(setResourcesCall);
 
   const onClose = () => {
     setCurrentAction(undefined);
+    setUploadedFiles([]);
   };
 
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+  const typeOptions = staticOrderData?.resource_type?.map((x: any) => ({
+    id: x?.id,
+    type: x?.type,
+    value: x?.value,
+  }));
+
+  const onSelectCancelReason = (selectedValue: any) => {
+    const selectedOption = typeOptions?.find(
+      (option: any) => option?.value === selectedValue
+    );
+    if (selectedOption) {
+      setSelectedType(selectedOption.value);
+    }
+  };
+  const handleSubmit = async () => {
+    if (!uploadedFiles) {
+      notification.error({ message: 'No files selected' });
+      return;
+    }
+
+    const formData = new FormData();
+    if (uploadedFiles) {
+      Array.from(uploadedFiles).forEach(uploadedFiles => {
+        formData.append('files', uploadedFiles); // Adjust the key as per your API requirement
+      });
+    }
+
+    try {
+      const response = await uploadFiles(formData);
+      console.log('Upload successful:', response);
+      notification.success({ message: 'Files uploaded successfully' });
+      onClose(); // Close modal after successful upload
+      setResources(false);
+
+      setTimeout(() => {
+        setResources(true);
+      }, 1000);
+    } catch (error) {
+      console.error('Upload failed:', error);
+    }
+  };
+
+  useEffect(() => {
+    setIsFormValid(
+      !!selectedType &&
+        !!selectedDocumentType &&
+        !!selectedCategoryId &&
+        uploadedFiles?.length > 0
+    );
+  }, [selectedDocumentType, selectedCategoryId, uploadedFiles]);
+
   return (
     <OrderActionModal
-      headerTitle="Add New Resource"
+      headerTitle="ADD RESOURCE"
       showAdditionalInfo
-      infoText="NICK OLIVER, YO42 2ST"
+      infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={handleSubmit}
+      isSubmitDisabled={!isFormValid}
     >
       <ContentContainer>
         <Top>
           <DocumentTypeDropdown />
+
+          <OrderActionsDropdown
+            label="Type"
+            required
+            placeholder="Select Type"
+            options={typeOptions}
+            onSelect={onSelectCancelReason}
+          />
+
           <CategoryDropdown />
           <VisibilityRadioButtons />
         </Top>
         <Bottom>
-          <Label>File</Label>
-          <DocFileUpload />
+          <Label>File</Label> <RequiredAsterisk>*</RequiredAsterisk>
+          <DocFileUpload />{' '}
         </Bottom>
       </ContentContainer>
     </OrderActionModal>
   );
 }
-
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+`;
 const Label = styled.label`
   color: #6a7378;
   font-family: 'Lato', sans-serif;
@@ -59,7 +148,6 @@ const Top = styled.div`
 `;
 
 const ContentContainer = styled.div`
-  /* display: flex; */
   padding: 15px 12px;
   flex: 1 0 0;
   border-radius: 15px;

package/src/components/order-view/order-actions/actions/cancel-order/index.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import ReturnAction from './ReturnAction';
 import ReturnReason from './ReturnReason';
-// import CancelOrderTable from './CancelOrderTable';
 import {
   useCurrentAction,
   useCustomerInfo,
@@ -165,9 +164,6 @@ function CancelOrder() {
             </Container>
           </TopRight>
         </Top>
-        {/* <Bottom>
-          <CancelOrderTable />
-        </Bottom> */}
       </ContentContainer>
     </OrderActionModal>
   );

package/src/components/order-view/order-actions/actions/clear-booking-status/ClearBookingStatus.tsx

@@ -0,0 +1,113 @@
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  useCurrentAction,
+  useLiveRecalling,
+  useOrderDetails,
+  useOrderId,
+  usePrevOrderDetails,
+} from '../../../store';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
+
+const ClearBookingStatus = () => {
+  const [orderId] = useOrderId();
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+  const [, setCurrentAction] = useCurrentAction();
+  const [liveRecalling, setRecalling] = useLiveRecalling();
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/clear-date/`,
+    method: 'POST',
+    performAction: false,
+  });
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData?.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+      setCurrentAction(undefined);
+    }
+    if (
+      (fetchedData && fetchedData?.data === null) ||
+      fetchedData?.data?.length === 0
+    ) {
+      setCurrentAction(undefined);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        setShouldPerformAction(true);
+        setRecalling(true);
+        setTimeout(() => {
+          setRecalling(false);
+        }, 2000);
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response, liveRecalling]);
+
+  const saveButton = () => {
+    if (orderId) {
+      setRecalling(false);
+      setPerformAction(true);
+    }
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <CancelationModal
+      title="Clear Booking Status"
+      description="Are you sure, you want to clear booking status of the Order?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+};
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default ClearBookingStatus;

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

@@ -21,6 +21,7 @@ import { StandardOptionsType } from '../../../../../common/radio-group/types';
 import dayjs from 'dayjs';
 import { isValid } from 'date-fns';
 import utc from 'dayjs/plugin/utc';
+import { useOrderId } from '../../../store';
 dayjs.extend(utc);
 dayjs.extend(isValid);
 
@@ -33,6 +34,7 @@ function CreateReminderModal() {
   const [subCategory] = useTaskTypeExtended();
   const [createReminder, setPayload] = useCreateReminderPayload();
   const [displayDate, setDisplayDate] = useState<any | null>();
+  const [orderId] = useOrderId();
 
   const handleSelectChange = () => console.log('testing log');
 
@@ -96,6 +98,7 @@ function CreateReminderModal() {
     setPayload(prevState => ({
       ...prevState,
       details: desc,
+      order_id: +orderId,
     }));
   };
 

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

@@ -115,8 +115,8 @@ function CreateTaskModal() {
 
   // date change here
   const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      const formattedDateTime = date.$d.toISOString();
+    if (date && isValid(date?.$d)) {
+      const formattedDateTime = date?.$d?.toISOString();
 
       setPayload((prevState: any) => ({
         ...prevState,
@@ -166,7 +166,7 @@ function CreateTaskModal() {
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
-                format="YYYY-MM-DD HH:mm"
+                format="DD/MM/YYYY HH:mm"
                 value={
                   createTask?.due_datetime
                     ? dayjs(createTask.due_datetime)

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

@@ -0,0 +1,149 @@
+import React, { useEffect } from 'react';
+import {
+  RadioButtonGroup,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import 'react-datepicker/dist/react-datepicker.css';
+import {
+  initialPayload,
+  useAllStaticData,
+  useCategoryData,
+  useCreateTaskPayload,
+  useDepartmentData,
+  useNotiifcationLabel,
+  useTaskLoading,
+  useTaskPriority,
+  useTaskTypeData,
+  useTaskTypeExtended,
+} from '../../store';
+import Loader from '../../../../order-daily-overview/header/loader/Loader';
+import { allTypes } from '../../types';
+import { ContentContainer } from './SharedComponents';
+import { useCurrentAction, useOrderDetails } from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import useFetchUnresolvedTasks from '../../hooks/useAllTaskData';
+import CreateTaskModal from './CreateTaskModal';
+import useCreateTask from '../../hooks/useCreateTask';
+import { CustomOptions } from '../../../../fakeData';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: allTypes[];
+}
+
+function TaskModal() {
+  const createTaskAPI = useCreateTask();
+  const [, setCurrentAction] = useCurrentAction();
+  const [createTask, setPayload] = useCreateTaskPayload();
+  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 [, setLabel] = useNotiifcationLabel();
+  const [orderDetails] = useOrderDetails();
+
+  // 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);
+    setPayload(initialPayload);
+    setLabel('');
+  };
+
+  const handleTaskSubmit = async () => {
+    setLoading(true);
+    await createTaskAPI([createTask]);
+    fetchData();
+    closeModal();
+  };
+
+  const isSubmitDisabled = () => {
+    const { description, due_datetime, task_type_id } = createTask;
+    return !description || !due_datetime || !task_type_id;
+  };
+
+  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 (
+    <>
+      {loading && <Loader />}
+      <OrderModal
+        headerTitle={'CREATE TASK'}
+        onCloseHeader={closeModal}
+        onSubmit={handleTaskSubmit}
+        submitBtnTitle={'Save Task'}
+        isSubmitDisabled={isSubmitDisabled()}
+        footerActions={
+          <RadioButtonGroup
+            selectedValue={
+              createTask?.is_private == true ? 'private' : 'public'
+            }
+            options={CustomOptions}
+            onChange={handleRadioButtonChange}
+            heading={''}
+            required={false}
+          />
+        }
+      >
+        <ContentContainer>{<CreateTaskModal />}</ContentContainer>
+      </OrderModal>
+    </>
+  );
+}
+
+const OrderModal = styled(OrderActionModal)`
+  width: 70%;
+`;
+
+export default TaskModal;

package/src/components/order-view/order-actions/actions/remove-from-route/RemoveFromRoute.tsx

@@ -0,0 +1,91 @@
+// import { Alert } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import {
+  useCurrentAction,
+  useGlobalStateHitAuditLog,
+  useLiveRecalling,
+  useOrderId,
+} from '../../../store';
+import { notification } from 'antd';
+
+function RemoveFromRoute() {
+  const [orderId] = useOrderId();
+  const [, setCurrentAction] = useCurrentAction();
+  const [, setRecalling] = useLiveRecalling();
+  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
+
+  const { data: response, setShouldPerformAction: setAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/${orderId}/remove_from_route/`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (response && response?.data) {
+      notification.success({
+        message: 'Success',
+        description:
+          //@ts-ignore
+          response?.message || 'Order has been removed successfully',
+      });
+      setCurrentAction(undefined);
+      setRecalling(true);
+      setRecallAuditLog(true);
+    }
+    if (response?.data === null) {
+      notification.error({
+        message: 'Error',
+        description:
+          //@ts-ignore
+          response?.error_traceback ||
+          'An error has occurred. Please try again later.',
+      });
+      setCurrentAction(undefined);
+    }
+  }, [response]);
+
+  const saveButton = () => {
+    if (orderId) {
+      setAction(true);
+    }
+
+    setTimeout(() => {
+      setRecalling(false);
+      setRecallAuditLog(false);
+    }, 2000);
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <CancelationModal
+      title="Remove from Route"
+      description="Are you sure, you want to remove Order from the route?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+}
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default RemoveFromRoute;

package/src/components/order-view/order-actions/hooks/useCreateReminder.ts

@@ -26,14 +26,11 @@ function useCreateReminder() {
 
       if (!response.ok) {
         setLoading(false);
-        // alert('response is not ok');
         notification.error({
           message: 'Error',
           description: 'response is not ok',
         });
       }
-      // alert('Reminder Created Successfully');
-
       notification.success({
         message: 'Success',
         description: 'Reminder Created Successfully',
@@ -43,8 +40,6 @@ function useCreateReminder() {
       return json;
     } catch (err) {
       setLoading(false);
-      // alert(err);
-      // console.error('Error:', err);
 
       notification.error({
         message: 'Error',

package/src/components/order-view/order-actions/index.tsx

@@ -11,14 +11,15 @@ import SendEmailModal from './actions/send-email/SendEmailModal';
 import ChangeCustomerAccModal from './actions/change-customer-account/ChangeCustomerAccModal';
 import HoldOrderModal from './actions/hold-order/HoldOrderModal';
 import LogFeedback from './actions/log-feedback/LogFeedback';
-import ChargeLog from './actions/charge-log';
 import UnholdOrder from './actions/unhold-order/UnholdOrder';
-import ViewReminderModal from '../view-reminder/ViewReminder';
 import TaskReminderModal from './actions/create-task-reminder';
 import OrderLock from './actions/order-lock';
 import ViewFlag from '../flags-action-modal/index';
 import ReleaseOrder from './actions/release-order/ReleaseOrder';
 import UncancelOrder from './actions/uncancel-order/UncancelOrder';
+import ClearBookingStatus from './actions/clear-booking-status/ClearBookingStatus';
+import RemoveFromRoute from './actions/remove-from-route/RemoveFromRoute';
+import TaskModal from './actions/create-task-reminder/TaskModal';
 
 function OrderActions() {
   const [currentAction] = useCurrentAction();
@@ -49,22 +50,22 @@ function OrderActions() {
         return <ChangeCustomerAccModal />;
       case 'hold-order':
         return <HoldOrderModal />;
-      case 'create-task':
+      case 'create-reminder':
         return <TaskReminderModal />;
+      case 'create-task':
+        return <TaskModal />;
       case 'log-feedback':
         return <LogFeedback />;
-      case 'charge-log':
-        return <ChargeLog />;
       case 'unhold-order':
         return <UnholdOrder />;
-      case 'view-reminder':
-        return <ViewReminderModal />;
       case 'order-lock':
         return <OrderLock />;
       case 'view-flag':
         return <ViewFlag />;
-      // case 'clear-date':
-      //   return <ClearBookingStatus />;
+      case 'clear-date':
+        return <ClearBookingStatus />;
+      case 'remove-from-route':
+        return <RemoveFromRoute />;
       default:
         return null;
     }

package/src/components/order-view/order-actions/store.ts

@@ -107,7 +107,7 @@ const resolvedModalPayload = atom<SingleResolvedPayload>(resolvedValue);
 
 const routeDetails = atom<any>({});
 
-const orderNotifyCount = atom<number>(2);
+const orderNotifyCount = atom<number>(0);
 
 //errors
 const errorMessage = atom<any>({
@@ -178,7 +178,6 @@ export function useSelectedSplit() {
   return useAtom(selectedSplitList);
 }
 
-
 export function useLoadingText() {
   return useAtom(loadingText);
 }
@@ -260,6 +259,12 @@ export function useRouteDetails() {
   return useAtom(routeDetails);
 }
 
+export const selectedCategoryIdAtom = atom<any>(null);
+export const selectedDocumentTypeAtom = atom<any>(null);
+export const selectedTypeAtom = atom<any>(null);
+export const selectedVisibilityAtom = atom<any>(null);
+export const setResourcesCall = atom<boolean>(false);
+
 export function useOrderNotify() {
   return useAtom(orderNotifyCount);
 }