@bjsdistribution/dms-client-return 0.0.83 → 0.0.85

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/confirm-order/index.tsx

@@ -9,6 +9,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
   useCurrentAction,
   useCustomerInfo,
+  useGlobalStateHitOrder,
   useLiveRecalling,
   useOrderDetails,
   useOrderId,
@@ -19,8 +20,7 @@ import {
   useErrorConfirmOrder,
   useOrderDetailsConfirmOrder,
 } from '../../store';
-import { ApiResponse, OrdersType } from '../../../types';
-import { useLoading } from '../../../../order-daily-overview/store/store';
+import { ApiResponse } from '../../../types';
 import { notification } from 'antd';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
 import useUpdateOrder from '../../../hooks/useUpdateOrder';
@@ -35,14 +35,14 @@ function ConfirmOrder() {
     orderDetailsConfirmOrder,
     setOrderDetailsConfirmOrder,
   ] = useOrderDetailsConfirmOrder();
-  const [, setLoading] = useLoading();
   const [customerInfo] = useCustomerInfo();
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
   const [deliveryDate, setDeliveryDate] = useConfirmOrderDate();
-  const [liveRecalling, setRecalling] = useLiveRecalling();
+  const [, setRecalling] = useLiveRecalling();
   const [orderId] = useOrderId();
   const [errorState] = useErrorConfirmOrder();
   const updateOrder = useUpdateOrder();
+  const [, setRecallOrders] = useGlobalStateHitOrder();
 
   const onClose = () => {
     setCurrentAction(undefined);
@@ -69,30 +69,6 @@ function ConfirmOrder() {
     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, liveRecalling]);
-
   useEffect(() => {
     if (response) {
       //@ts-ignore
@@ -102,14 +78,11 @@ function ConfirmOrder() {
           // @ts-ignore
           description: response?.message || 'Order confirmed successfully',
         });
-        setShouldPerformAction(true);
         setRecalling(true);
         setTimeout(() => {
           setRecalling(false);
         }, 2000);
       } else {
-        setShouldPerformAction(false);
-
         notification.error({
           message: 'Error',
           description:
@@ -128,6 +101,7 @@ function ConfirmOrder() {
 
   const ConfirmOrder = async () => {
     setRecalling(false);
+    setRecallOrders(false);
 
     const keysToRemovefromOrders = [
       'order_locked',
@@ -159,6 +133,7 @@ function ConfirmOrder() {
       if (response && response?.data?.length > 0) {
         setOrderDetails(response?.data[0]);
         setPrevOrderDetails(response?.data[0]);
+        setRecallOrders(true);
       } else {
         setOrderDetails(prevOrderDetails);
       }

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/order-lock/index.tsx

@@ -4,13 +4,21 @@ import {
 } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import { useCurrentAction, useOrderDetails } from '../../../store';
+import {
+  useCurrentAction,
+  useGlobalStateHitAuditLog,
+  useGlobalStateHitOrder,
+  useOrderDetails,
+} from '../../../store';
 import useUpdateOrder from '../../../hooks/useUpdateOrder';
 
 function OrderLock() {
   const [, setCurrentAction] = useCurrentAction();
   const [orderDetails, setOrderdetails] = useOrderDetails();
   const lockOrder = useUpdateOrder();
+  const [, setRecallOrders] = useGlobalStateHitOrder();
+  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
+
   const title =
     orderDetails?.order_locked === true ? 'Unlocking Order' : 'Locking Order';
   const action = orderDetails?.order_locked === true ? 'Unlock' : 'Lock';
@@ -20,12 +28,16 @@ function OrderLock() {
   };
 
   const onComplete = async () => {
+    setRecallOrders(false);
     const isLocked =
       orderDetails?.order_locked === null ? false : orderDetails?.order_locked;
     const payload = [{ id: orderDetails?.id, order_locked: !isLocked }];
     const response = await lockOrder(payload);
     if (response.data) {
       setOrderdetails(response.data[0]);
+      setOrderdetails(response?.data[0]);
+      setRecallAuditLog(true);
+      setRecallOrders(true);
     }
     onClose();
   };

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/actions/split-order/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import styled from 'styled-components';
 import SplitOrderTable from './SplitOrderTable';
@@ -37,28 +37,23 @@ function SplitOrder() {
   const onSubmitSplitOrder = () => {
     if (orderId) {
       setPerformAction(true);
-      //@ts-ignore
-      if (response?.data && response?.code === 200) {
-        notification.success({
-          message: 'Success',
-          description:
-            //@ts-ignore
-            response?.message || 'Sucess',
-        });
-      } else {
-        // alert(response?.error_traceback);
-        notification.error({
-          message: 'Error',
-          description:
-            //@ts-ignore
-            response?.message ||
-            'An error has occurred. Please try again later.',
-        });
-      }
-      setSelectedSplit([]);
     }
   };
 
+  useEffect(() => {
+    //@ts-ignore
+    if (response?.code === 200) {
+      notification.success({
+        message: 'Success',
+        description:
+          //@ts-ignore
+          response?.message || 'Sucess',
+      });
+      setCurrentAction(undefined);
+      setSelectedSplit([]);
+    }
+  }, [response]);
+
   const isSubmitDisabled = () => {
     if (seledtedSplitOrder?.length > 0) {
       return !seledtedSplitOrder;

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

@@ -259,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);
 }

package/src/components/order-view/order-details/expanded-content/footer/index.tsx

@@ -11,6 +11,7 @@ import {
   useUpdateApiCall,
   useLiveRecalling,
   useGlobalStateHitAuditLog,
+  useGlobalStateHitOrder,
 } from '../../../store';
 import useUpdateOrder from '../../../hooks/useUpdateOrder';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
@@ -25,6 +26,8 @@ function OrderDetailsFooter() {
   const [, setCallApi] = useUpdateApiCall(); //single detail
   const [, setRecalling] = useLiveRecalling();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
+  const [, setRecallOrders] = useGlobalStateHitOrder();
+
   const errorFound = () => {
     const isError =
       errorState?.w3wError.length > 0 ||
@@ -77,9 +80,12 @@ function OrderDetailsFooter() {
   };
 
   const onSave = async () => {
+    setRecallAuditLog(false);
+    setRecallOrders(false);
     const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
     const response = await updateOrder([payload]);
     setCallApi(false);
+    setRecallOrders(true);
     // setLogsCallAPi(prev => !prev);
     if (response && response?.data?.length > 0) {
       setOrderDetails(response?.data[0]);