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

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

@@ -1,21 +1,16 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useApiHook, useAxios } from '@bjsdistribution/dms-component-library';
 import 'react-datepicker/dist/react-datepicker.css';
 import CreateReminder from './CreateReminderModal';
 import {
   initialValue,
-  useAllStaticData,
-  useCategoryData,
+  useStaticData,
   useCreateReminderPayload,
-  useDepartmentData,
-  useReminderNotiData,
-  useTaskPriority,
-  useTaskTypeData,
-  useTaskTypeExtended,
+  useNotiifcationLabel,
 } 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 { notification } from 'antd';
@@ -27,44 +22,27 @@ interface ApiResponse {
   error_traceback: string | null;
   data: allTypes[];
 }
-
-function TaskReminderModal() {
+interface IProps {
+  callReminderApi: any;
+  callUnresolvedTaskApi: any;
+}
+function ReminderModal(props: IProps) {
   const [, setCurrentAction] = useCurrentAction();
   const [createReminder, setReminderPayload] = useCreateReminderPayload();
-  const [staticData, setStaticData] = useAllStaticData();
-  const [, setPriority] = useTaskPriority();
-  const [, setTaskCategory] = useCategoryData();
-  const [, setTaskTypes] = useTaskTypeData();
-  const [, setTaskTypeExtended] = useTaskTypeExtended();
-  const [, setDepartmentData] = useDepartmentData();
-  const [, setReminderData] = useReminderNotiData();
-  const [OrderData] = useOrderDetails();
+  const [label] = useNotiifcationLabel();
+  const [, setStaticData] = useStaticData();
+  const [, setExtracted] = useState('');
 
-  //create reminder API
   const { fetchData: createReminderAPI } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/reminders/create/`,
+    endpoint: `/v1/task/reminders/create/`,
     method: 'POST',
   });
 
-  //reminder get
-  const {
-    fetchData: callReminderApi,
-    data: fetchedReminderData,
-    loading: reminderLoading,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/tasks/reminder/get/`,
-    method: 'GET',
-    pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: OrderData.id }],
-  });
-
   // API Call
   const { data: fetchedStaticData } = useApiHook<ApiResponse>({
-    endpoint: `/tasks/getStaticData/all/`,
+    endpoint: `/v1/task/getStaticData/all/`,
     method: 'GET',
   });
 
@@ -74,71 +52,87 @@ function TaskReminderModal() {
     }
   }, [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 closeModal = () => {
     setCurrentAction(undefined);
-
     setReminderPayload(initialValue);
   };
-
+  console.log(createReminder, 'createReminder');
   const handleReminderSubmit = async () => {
-    let response = (await createReminderAPI({
-      payload: { reminder: createReminder },
-    })) as {
-      code: number | null;
-      error?: string | null | undefined;
-      [key: string]: any;
-    };
-    if (response.code == 200 && response.data) {
-      notification.success({
-        message: 'Success',
-        description: `${response.message}`,
-      });
-      callReminderApi();
-      closeModal();
-    }
-    if (response?.code == null && response.error) {
-      return notification.error({
-        message: 'Failure',
-        description: `${response.error}`,
+    try {
+      const response = (await createReminderAPI({
+        payload: [createReminder],
+      })) as {
+        code: number | null;
+        message?: string;
+        error?: string | null;
+        error_traceback?: string;
+        data?: any;
+      };
+
+      if (response?.code === 200 && response?.data) {
+        notification.success({
+          message: 'Success',
+          description: response?.message || 'Reminder created successfully',
+        });
+        closeModal();
+        await props?.callReminderApi();
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            response?.error ||
+            'Something went wrong while creating the reminder.',
+        });
+      }
+    } catch (error) {
+      const err = error as any;
+
+      const errMsg =
+        err?.response?.data?.error ||
+        err?.response?.data?.message ||
+        err?.message ||
+        'An unexpected error occurred.';
+
+      notification.error({
+        message: 'Request Failed',
+        description: errMsg,
       });
     }
   };
-
-  //reminder data set
-  useEffect(() => {
-    if (fetchedReminderData && fetchedReminderData?.data) {
-      setReminderData(fetchedReminderData?.data);
-    }
-  }, [reminderLoading]);
-
   const isSubmitDisabled = () => {
-    const { details, due } = createReminder;
-    return !details || !due;
-
-    return true;
+    const {
+      department,
+      assigned_to,
+      priority,
+      due_datetime,
+      description,
+    } = createReminder;
+    return (
+      !department ||
+      !description ||
+      !due_datetime ||
+      !priority ||
+      assigned_to?.length === 0 ||
+      !assigned_to
+    );
   };
 
+  useEffect(() => {
+    const match = label.match(/\(([^)]+)\)/);
+    const extractedText = match ? match[1] : '';
+    setExtracted(extractedText);
+  }, [label]);
+
   return (
     <>
+      {/* {loading && <Loader />} */}
       <OrderModal
         headerTitle={'CREATE REMINDER'}
         onCloseHeader={closeModal}
         onSubmit={handleReminderSubmit}
         submitBtnTitle={'Save Reminder'}
         isSubmitDisabled={isSubmitDisabled()}
+        footerActions={''}
       >
         <ContentContainer>{<CreateReminder />}</ContentContainer>
       </OrderModal>
@@ -150,4 +144,4 @@ const OrderModal = styled(OrderActionModal)`
   width: 70%;
 `;
 
-export default TaskReminderModal;
+export default ReminderModal;

package/src/components/order-view/order-actions/actions/hold-order/HoldOrderModal.tsx

@@ -2,16 +2,13 @@ import React, { useEffect, useState } from 'react';
 import {
   AntSelect,
   Label,
-  useApiHook,
+  useAxios,
 } from '@bjsdistribution/dms-component-library';
 import {
   useCurrentAction,
   useCustomerInfo,
-  useLiveRecalling,
-  useOrderDetails,
   useOrderId,
   useOrderStaticData,
-  usePrevOrderDetails,
 } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import {
@@ -22,21 +19,23 @@ import {
 } from '../modalstyle';
 import { DatePicker, DatePickerProps, notification } from 'antd';
 import dayjs from 'dayjs';
-import { ApiResponse, OrdersType } from '../../../types';
-import { useLoading } from '../../../../order-daily-overview/store/store';
+import { ApiResponse } from '../../../types';
+import { useClientPortal } from '../../../../store';
 
-function HoldOrderModal() {
+interface IProps {
+  callOrderAlertsApi: any;
+  callOrdersApi?: any;
+  callUnresolvedTaskApi?: any;
+}
+
+function HoldOrderModal(props: IProps) {
   const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
-  const [, setLoading] = useLoading();
   const [orderStaticData] = useOrderStaticData();
   const [selectedDate, setDate] = useState<Date | string | null>(null);
   const [holdReason, setHoldReason] = useState<string | undefined>(undefined);
-  const [, setOrderDetails] = useOrderDetails();
-  const [, setPrevOrderDetails] = usePrevOrderDetails();
   const [customerInfo] = useCustomerInfo();
-  const [, setRecalling] = useLiveRecalling();
-
+  const [isClientPortal] = useClientPortal();
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
 
   const onHoldReasonOptions = orderStaticData?.onhold_reasons?.map(
@@ -53,63 +52,13 @@ function HoldOrderModal() {
     : `orders/${orderId}/hold/?hold_reason=${holdReason}
 `;
 
-  const {
-    data: response,
-    setShouldPerformAction: setPerformAction,
-  } = useApiHook<{
+  const { fetchData: callOnHoldApi, error } = useAxios<{
     data: ApiResponse[];
   }>({
     endpoint: dynamicUrl,
     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);
-        }, 1000);
-      } else {
-        notification.error({
-          message: 'Error',
-          description:
-            //@ts-ignore
-            response?.error_traceback ||
-            'An error has occurred. Please try again later.',
-        });
-        setCurrentAction(undefined);
-      }
-    }
-  }, [response]);
-
   const onClose = () => {
     setCurrentAction(undefined);
   };
@@ -127,16 +76,56 @@ function HoldOrderModal() {
     }
   };
 
-  const onSubmitHold = () => {
+  const onSubmitHold = async () => {
     if (orderId) {
-      setPerformAction(true);
+      const response = (await callOnHoldApi()) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+      if (response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description: `${response.message}`,
+        });
+        // call orders api to update status
+        if (isClientPortal) {
+          await props?.callUnresolvedTaskApi();
+        }
+        await props?.callOrderAlertsApi();
+        await props?.callOrdersApi();
+      }
+      if (response?.code !== 200) {
+        notification.error({
+          message: 'Error',
+          description: `${response.error}`,
+        });
+        setCurrentAction(undefined);
+      }
     }
   };
 
+  useEffect(() => {
+    //@ts-ignore
+    if (error !== null && error?.code !== 200) {
+      console.log('entered');
+      notification.error({
+        //@ts-ignore
+        message: `${error?.error}`,
+        description: (
+          //@ts-ignore
+          <span dangerouslySetInnerHTML={{ __html: error?.message }} />
+        ),
+      });
+      setCurrentAction(undefined);
+    }
+  }, [error]);
+
   const showSubmitBtn = holdReason !== undefined;
 
   return (
     <OrderActionModal
+      minWidth="24vw"
       headerTitle="Hold order"
       onCloseHeader={onClose}
       onSubmit={onSubmitHold}
@@ -157,6 +146,9 @@ function HoldOrderModal() {
                 value={
                   selectedDate === null ? selectedDate : dayjs(selectedDate)
                 }
+                disabledDate={current => {
+                  return current && current < dayjs().startOf('day');
+                }}
               />
             </HoldDatePickerWrap>
           </HoldRow>

package/src/components/order-view/order-actions/actions/log-service-refusal/DeliveryPoint.tsx

@@ -3,6 +3,11 @@ import styled from 'styled-components';
 import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
 import { StandardOptionsType } from '@bjsdistribution/dms-component-library';
 
+interface IProps {
+  refusedDelPointService: any;
+  setRefusedDelPointService: React.Dispatch<React.SetStateAction<any>>;
+}
+
 const deliveryPoints: StandardOptionsType[] = [
   {
     label: 'Hallway',
@@ -10,27 +15,16 @@ const deliveryPoints: StandardOptionsType[] = [
   },
   {
     label: 'ROC',
-    value: 'roc',
-  },
-  {
-    label: 'Front Door',
-    value: 'frontdoor',
-  },
-  {
-    label: 'Garden',
-    value: 'garden',
+    value: 'room_of_choice',
   },
 ];
 
-function DeliveryPoint() {
+function DeliveryPoint(props: IProps) {
   const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // console.log(typeof event.target.value, 'value...');
-    setSelectedValue(event.target.value);
+    const service = event.target.value;
+    props?.setRefusedDelPointService(service);
   };
 
-  const [selectedValue, setSelectedValue] = React.useState<any>(
-    deliveryPoints[0].value
-  );
   return (
     <Container>
       <RadioButtonGroup
@@ -38,7 +32,7 @@ function DeliveryPoint() {
         options={deliveryPoints || []}
         onChange={radioGroupHandler}
         direction="horizontal"
-        selectedValue={selectedValue}
+        selectedValue={props?.refusedDelPointService}
         required={false}
       />
     </Container>

package/src/components/order-view/order-actions/actions/log-service-refusal/Notes.tsx

@@ -2,19 +2,36 @@ import styled from 'styled-components';
 import React from 'react';
 import { TextArea } from '@bjsdistribution/dms-component-library';
 
-function Notes({ onNotesChange }: { onNotesChange: (notes: string) => void }) {
+interface IProps {
+  refusedReason: string;
+  setRefusedReason: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function Notes(props: IProps) {
   const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onNotesChange(event.target.value);
+    props?.setRefusedReason(event.target.value);
   };
 
   return (
     <Container>
-      <Label>Notes</Label>
-      <TextArea rows={15} onChange={handleTextChange} />
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <Label>Notes</Label> <RequiredAsterisk>*</RequiredAsterisk>
+      </div>
+      <TextArea
+        rows={15}
+        onChange={handleTextChange}
+        placeholder="Why did the customer refuse the selected service(s)? Add notes..."
+        value={props?.refusedReason}
+      />
     </Container>
   );
 }
 
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+  font-size: x-small;
+`;
 const Label = styled.span`
   color: #6a7378;
   font-family: 'Lato', sans-serif;

package/src/components/order-view/order-actions/actions/log-service-refusal/OrderServices.tsx

@@ -2,20 +2,48 @@ import React from 'react';
 import styled from 'styled-components';
 import Checkbox from '../../../../../common/checkbox';
 import { getIcon } from './helper';
+import { useOrderDetails, useOrderStaticData } from '../../../store';
+import { OrderServiceType } from '../../../types';
+interface IProps {
+  refusedServices: string[];
+  setRefusedServices: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+function OrderServices(props: IProps) {
+  const [orderStaticData] = useOrderStaticData();
+  const [orderDetails] = useOrderDetails();
+  const orderServices = orderDetails?.order_services;
+  const orderServicesOptions = orderStaticData?.order_service_list;
+
+  const onClick = (service: string) => {
+    if (props?.refusedServices?.includes(service)) {
+      const filteredServices = props?.refusedServices?.filter(
+        (item: string) => item !== service
+      );
+      props?.setRefusedServices(filteredServices);
+    } else {
+      props?.setRefusedServices((prev: string[]) => [...prev, service]);
+    }
+  };
 
-function OrderServices() {
-  // TO DO -> get services from static data
   return (
     <Container>
-      <Checkbox checked={false} label="Assemble" imageSrc={getIcon(1)} />
-      <Checkbox checked={false} label="Disassemble" imageSrc={getIcon(2)} />
-      <Checkbox checked label="Unpack Items" imageSrc={getIcon(3)} />
-      <Checkbox checked label="Collect Disposal" imageSrc={getIcon(5)} />
-      <Checkbox
-        checked={false}
-        label="Take Package Away"
-        imageSrc={getIcon(4)}
-      />
+      {orderServicesOptions.map((service: any) => {
+        const selected = !!orderServices?.find(
+          (s: OrderServiceType) =>
+            s?.order_service_list_id === service?.id && s.is_deleted === false
+        );
+        const isRefused = props?.refusedServices?.includes(service?.type);
+        return (
+          <Checkbox
+            checked={isRefused}
+            label={service?.type}
+            imageSrc={getIcon(service?.id)}
+            enabled={selected}
+            onClickCheckbox={onClick}
+          />
+        );
+      })}
     </Container>
   );
 }

package/src/components/order-view/order-actions/actions/log-service-refusal/index.tsx

@@ -1,33 +1,104 @@
-import React from 'react';
+import React, { useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import styled from 'styled-components';
 import DeliveryPoint from './DeliveryPoint';
 import OrderServices from './OrderServices';
 import Notes from './Notes';
-import { useCurrentAction } from '../../../store';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+} from '../../../store';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import { notification } from 'antd';
 
-function LogServiceRefusal() {
+function LogServiceRefusal(props: any) {
   const [, setCurrentAction] = useCurrentAction();
+  // Local States for handling service refusal
+  const [refusedReason, setRefusedReason] = useState<string>('');
+  const [refusedServices, setRefusedServices] = useState<string[]>([]);
+  const [refusedDelPointService, setRefusedDelPointService] = useState<any>('');
+  const [customerInfo] = useCustomerInfo();
+  const [orderDetails] = useOrderDetails();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  const { fetchData: callLogRefusalApi } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/v1/orders/log-refusal/`,
+    method: 'POST',
+  });
 
   const onClose = () => {
     setCurrentAction(undefined);
   };
+
+  const onSubmit = async () => {
+    const allServices =
+      refusedDelPointService?.length > 0
+        ? [...refusedServices, refusedDelPointService]
+        : refusedServices;
+    const finalPayload = {
+      order_id: orderDetails?.id,
+      route_id: orderDetails?.order_routes?.route_id,
+      refused_reason: refusedReason,
+      service_name: allServices,
+    };
+    try {
+      let response = (await callLogRefusalApi({
+        payload: finalPayload,
+      })) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+      if (response.code == 200) {
+        notification.success({
+          message: 'Success',
+          description: `${response?.message}`,
+        });
+        props?.callOrdersApi();
+      } else {
+        notification.error({
+          message: 'Error',
+          description: `${response?.error}`,
+        });
+        onClose();
+      }
+    } catch (error) {}
+  };
+
+  const disableSubmitBtn =
+    refusedReason?.length === 0 ||
+    (refusedServices?.length === 0 && refusedDelPointService?.length === 0);
+
   return (
     <OrderActionModal
       headerTitle="Service Refusal"
       showAdditionalInfo
-      infoText="CURTIS RADCLIFFE, PR5 5TD"
+      infoText={infoText}
       submitBtnTitle="Log Refusal"
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={onSubmit}
+      isSubmitDisabled={disableSubmitBtn}
     >
       <ContentContainer>
         <Left>
-          <DeliveryPoint />
-          <OrderServices />
+          <DeliveryPoint
+            refusedDelPointService={refusedDelPointService}
+            setRefusedDelPointService={setRefusedDelPointService}
+          />
+          <OrderServices
+            refusedServices={refusedServices}
+            setRefusedServices={setRefusedServices}
+          />
         </Left>
         <Right>
-          <Notes onNotesChange={() => console.log('object')} />
+          <Notes
+            refusedReason={refusedReason}
+            setRefusedReason={setRefusedReason}
+          />
         </Right>
       </ContentContainer>
     </OrderActionModal>