@bjsdistribution/dms-client-return 0.0.85 → 0.0.87

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.85",
+  "version": "0.0.87",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -38,7 +38,7 @@ import DetailsFilters from './details-filters/DetailsFilters';
 import { useSubContracterData, useVisibilityData } from '../store';
 import Notification from './notification';
 import Order from './order-resources/expanded-content';
-import { setResourcesCall } from './order-actions/store';
+import { setResourcesCall, useAllOrderStatus } from './order-actions/store';
 
 interface ApiResponse {
   message: string;
@@ -75,6 +75,11 @@ function OrderView() {
   const [, setVisibilityData] = useVisibilityData();
   const [, setSubContracterData] = useSubContracterData();
   const [recallOrders] = useGlobalStateHitOrder();
+  const [, setStatusVal] = useAllOrderStatus();
+
+  useEffect(() => {
+    setStatusVal(orderDetails?.status_value);
+  }, [orderDetails?.status_value]);
 
   // query param
   const location = useLocation();

package/src/components/order-view/notification/OrderTemplate.tsx

@@ -0,0 +1,349 @@
+import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  useAllOrderStatus,
+  useOrderNotify,
+  useRouteDetails,
+} from '../order-actions/store';
+import { format } from 'date-fns';
+import { useOrderStaticData } from '../store';
+
+function OrderTemplate({ orderDetails }: any) {
+  const [routeData] = useRouteDetails();
+  const [, setOrderCount] = useOrderNotify();
+  const [statusVal] = useAllOrderStatus();
+  const precall = false;
+  const [orderStaticData] = useOrderStaticData();
+
+  const unholdReasons = orderStaticData?.cancellation_reasons?.map(
+    (x: any) => ({
+      id: x?.id,
+      reason: x?.reason,
+    })
+  );
+
+  const getReasonById = (id: number) => {
+    if (!unholdReasons || unholdReasons?.length === 0) {
+      return 'Reason not found';
+    }
+    const match = unholdReasons?.find((item: any) => item?.id === id);
+    return match ? match?.reason : 'Reason not found';
+  };
+
+  const reason = getReasonById(orderDetails?.order_cancellations?.reason_id);
+
+  const [alertVisibility, setAlertVisibility] = useState({
+    isHoldVisible: true,
+    isCompleted: true,
+    isOutstanding: true,
+    isAwaitingConfirmation: true,
+    isAwaitingRoute: true,
+    isCancelled: true,
+    isEnroute: true,
+    isPreCall: true,
+    isConfirmed: true,
+  });
+
+  const crewDetails =
+    routeData?.route_crew_info?.crew1_id +
+    ' ' +
+    routeData?.route_crew_info?.crew1 +
+    ' ' +
+    routeData?.route_crew_info?.crew2_id +
+    ' ' +
+    routeData?.route_crew_info?.crew2 +
+    ' ';
+
+  useEffect(() => {
+    if (precall) {
+      setOrderCount(prevCount => prevCount + 1);
+    }
+  }, [precall]);
+
+  //on close alert functionality
+  const onCloseAlert = (alertType: string) => {
+    setAlertVisibility(prev => ({
+      ...prev,
+      [alertType]: false,
+    }));
+    setOrderCount(0);
+  };
+
+  return (
+    <>
+      {statusVal == 'on hold' && alertVisibility?.isHoldVisible && (
+        <StyledAlert>
+          <FlagAlert
+            type="warn"
+            title={
+              <>
+                {orderDetails?.order_on_hold?.hold_indefinitely === false ? (
+                  <HoldText>
+                    on hold until:{' '}
+                    {orderDetails?.order_on_hold?.hold_untill
+                      ? format(
+                          new Date(orderDetails?.order_on_hold?.hold_untill),
+                          'dd/MM/yyyy'
+                        )
+                      : ''}
+                  </HoldText>
+                ) : (
+                  <HoldText>On Hold Until: Indefinitely</HoldText>
+                )}
+              </>
+            }
+            description={''}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isHoldVisible')}
+          />
+        </StyledAlert>
+      )}
+      {orderDetails.status == 'SD' && alertVisibility.isCompleted && (
+        <StyledAlert>
+          <FlagAlert
+            type="success"
+            title={
+              <TitleText>
+                Completed: {orderDetails?.order_routes?.complete_time}, Signee:{' '}
+                {orderDetails?.order_routes?.signee} Notes :
+                {orderDetails?.order_routes?.complete_notes}
+              </TitleText>
+            }
+            description={
+              <SubtitleText>
+                Route: {routeData?.route_name}
+                {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
+                {routeData?.route_detail?.vehicle_number} | Crew : {crewDetails}
+                | {routeData?.route_date}
+              </SubtitleText>
+            }
+            showOkButton={false}
+            onClose={() => onCloseAlert('isCompleted')}
+          />
+        </StyledAlert>
+      )}
+
+      {precall && alertVisibility.isPreCall && (
+        <StyledAlert>
+          <FlagAlert
+            type="success"
+            title={`Order Pre-Call Slot Time : ${orderDetails?.order_eta_updates?.map(
+              (i: any) => i?.slot_start
+            )} - ${orderDetails?.order_eta_updates?.map(
+              (i: any) => i?.slot_end
+            )}`}
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isPreCall')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'outstanding' && alertVisibility.isOutstanding && (
+        <StyledAlert>
+          <FlagAlert
+            type="release"
+            title={`Outstanding`}
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isOutstanding')}
+          />
+        </StyledAlert>
+      )}
+      {statusVal == 'awaiting confirmation' &&
+        alertVisibility.isAwaitingConfirmation && (
+          <StyledAlert>
+            <FlagAlert
+              type="info"
+              title={
+                <>
+                  <ScheduledText>
+                    Scheduled For :{' '}
+                    {orderDetails?.action_date
+                      ? format(
+                          new Date(orderDetails?.action_date),
+                          'dd/MM/yyyy'
+                        )
+                      : ''}{' '}
+                    <span>, Awaiting Confirmation</span>
+                  </ScheduledText>
+                </>
+              }
+              description={``}
+              showOkButton={false}
+              onClose={() => onCloseAlert('isAwaitingConfirmation')}
+            />
+          </StyledAlert>
+        )}
+      {statusVal == 'awaiting route' && alertVisibility.isAwaitingRoute && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <>
+                <ScheduledText>
+                  Scheduled For :{' '}
+                  {orderDetails?.action_date
+                    ? format(new Date(orderDetails?.action_date), 'dd/MM/yyyy')
+                    : ''}{' '}
+                  ,<span> Awaiting Route</span>
+                </ScheduledText>
+              </>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isAwaitingRoute')}
+          />
+        </StyledAlert>
+      )}
+      {statusVal == 'cancelled' && alertVisibility.isCancelled && (
+        <StyledAlert>
+          <FlagAlert
+            type="error"
+            title={`This order has been cancelled`}
+            description={reason}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isCancelled')}
+          />
+        </StyledAlert>
+      )}
+      {statusVal == 'enroute' && alertVisibility.isEnroute && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <>
+                <EnRouteText>
+                  Allocated to Route :{' '}
+                  <span>
+                    {routeData?.route_name}
+                    {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
+                    {routeData?.route_detail?.vehicle_number} | Crew :{' '}
+                    {crewDetails}|{' '}
+                    {routeData?.route_date
+                      ? format(new Date(routeData?.route_date), 'dd/MM/yyyy')
+                      : ''}{' '}
+                  </span>
+                  <span>
+                    {' '}
+                    , Confirmed: <span className="no">NO</span>
+                  </span>
+                </EnRouteText>
+              </>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isEnroute')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <>
+                <EnRouteText>
+                  Allocated to Route :{' '}
+                  <span>
+                    {routeData?.route_name}
+                    {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
+                    {routeData?.route_detail?.vehicle_number} | Crew :{' '}
+                    {crewDetails}|{' '}
+                    {routeData?.route_date
+                      ? format(new Date(routeData?.route_date), 'dd/MM/yyyy')
+                      : ''}{' '}
+                  </span>
+                  <span>
+                    {' '}
+                    , Confirmed: <span className="yes">YES</span>
+                  </span>
+                </EnRouteText>
+              </>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isConfirmed')}
+          />
+        </StyledAlert>
+      )}
+    </>
+  );
+}
+
+const StyledAlert = styled.div`
+  margin-bottom: 5px;
+`;
+
+const SubtitleText = styled.div`
+  color: #36a053;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+`;
+
+const TitleText = styled.div`
+  color: #3a3630;
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+`;
+
+const ScheduledText = styled.div`
+  color: #6396e5;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  span {
+    color: #36a053;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+  }
+`;
+
+const HoldText = styled.div`
+  color: #feba30;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  span {
+    color: #6a7378;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+  }
+`;
+
+const EnRouteText = styled.div`
+  color: #36a053;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  span {
+    color: #6396e5;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    .yes {
+      color: #36a053;
+    }
+    .no {
+      color: #e95252;
+    }
+  }
+`;
+
+export default OrderTemplate;

package/src/components/order-view/notification/Tabs.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useTabType } from '../store';
+import { useOrderDetails, useTabType } from '../store';
 import FlagTemplate from './FlagTemplate';
 import ReminderTemplate from './ReminderTemplate';
+import OrderTemplate from './OrderTemplate';
 
 function Tabs({
   activeNotifications,
@@ -13,12 +14,13 @@ function Tabs({
   dismissFlags,
 }: any) {
   const [activeTab] = useTabType();
+  const [orderDetails] = useOrderDetails();
 
-  const initialNotifications = activeNotifications.slice(0, 3);
-  const additionalNotifications = activeNotifications.slice(3);
+  const initialNotifications = activeNotifications?.slice(0, 3);
+  const additionalNotifications = activeNotifications?.slice(3);
 
-  const initialReminders = activeReminders.slice(0, 3);
-  const additionalReminders = activeReminders.slice(3);
+  const initialReminders = activeReminders?.slice(0, 3);
+  const additionalReminders = activeReminders?.slice(3);
 
   return (
     <>
@@ -26,7 +28,9 @@ function Tabs({
         <Container className="tab-content">
           {activeTab === 'active' && (
             <>
-              {initialReminders.map((item: any, index: any) => (
+              <OrderTemplate orderDetails={orderDetails} />
+
+              {initialReminders?.map((item: any, index: any) => (
                 <ReminderTemplate
                   key={index}
                   data={item}

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

@@ -147,30 +147,6 @@ function ConfirmOrder() {
     }
   };
 
-  // const isDifferent = () => {
-  //   const keysToRemovefromOrders = [
-  //     'order_locked',
-  //     'order_communications',
-  //     'updated_at',
-  //     'updated_by',
-  //     'order_services',
-  //   ];
-  //   const filteredOrderDetails = filterObject(
-  //     orderDetailsConfirmOrder,
-  //     keysToRemovefromOrders
-  //   );
-  //   const filteredPrevOrderDetails = filterObject(
-  //     prevOrderDetails,
-  //     keysToRemovefromOrders
-  //   );
-
-  //   const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
-  //   const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
-  //   const isSame = orderDetailsSorted === prevOrderDetailsSorted;
-  //   // newOrderServicesSorted === prevOrderServicesSorted;
-  //   return !isSame;
-  // };
-
   const errorFound = () => {
     const isError =
       errorState.emailError.length > 0 ||
@@ -192,14 +168,6 @@ function ConfirmOrder() {
       isSubmitDisabled={errorFound()}
     >
       <ContentContainer>
-        {/* <Alert
-          description=""
-          onClose={() => {}}
-          type="info"
-          title="There is Orders with identical postcodes that are yet to be delivered.View Orders"
-          showOkButton={false}
-          showCloseIcon={false}
-        /> */}
         <Wrapper>
           <CustomerInformation />
           <SlotAndInstructions />

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

@@ -7,6 +7,7 @@ import {
 import {
   useCurrentAction,
   useCustomerInfo,
+  useLiveRecalling,
   useOrderDetails,
   useOrderId,
   useOrderStaticData,
@@ -34,6 +35,8 @@ function HoldOrderModal() {
   const [, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
   const [customerInfo] = useCustomerInfo();
+  const [, setRecalling] = useLiveRecalling();
+
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
 
   const onHoldReasonOptions = orderStaticData?.onhold_reasons?.map(
@@ -90,6 +93,10 @@ function HoldOrderModal() {
       //@ts-ignore
       if (response?.data && response?.code === 200) {
         setShouldPerformAction(true);
+        setRecalling(true);
+        setTimeout(() => {
+          setRecalling(false);
+        }, 1000);
       } else {
         notification.error({
           message: 'Error',

package/src/components/order-view/order-actions/actions/uncancel-order/UncancelOrder.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   AntSelect,
+  Label,
   TextArea,
   useApiHook,
 } from '@bjsdistribution/dms-component-library';
@@ -13,7 +14,7 @@ import {
   usePrevOrderDetails,
 } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import { HoldContentContainer, HoldRow, Label, SplitText } from '../modalstyle';
+import { HoldContentContainer, HoldRow, SplitText } from '../modalstyle';
 import { ApiResponse, OrdersType } from '../../../types';
 import styled from 'styled-components';
 import { useLoading } from '../../../../order-daily-overview/store/store';
@@ -136,7 +137,7 @@ function UncancelOrder() {
       <HoldContentContainer>
         <SplitText>
           <HoldRow>
-            <Label>Un-cancel Reason</Label>
+            <Label label="Un-cancel Reason" required></Label>
             <AntSelect
               options={unCancelReasonOptions || []}
               placeholder="Select un-cancel Reason"
@@ -150,7 +151,7 @@ function UncancelOrder() {
             />
           </HoldRow>
           <HoldRow>
-            <Label>Un-cancel Note</Label>
+            <Label label="Un-cancel Note"></Label>
             <CustomTextArea rows={5} onChange={onChange} />
           </HoldRow>
         </SplitText>

package/src/components/order-view/order-actions/actions/unhold-order/UnholdOrder.tsx

@@ -28,7 +28,7 @@ const UnholdOrder = () => {
   } = useApiHook<{
     data: ApiResponse[];
   }>({
-    endpoint: `orders/${orderId}/unhold/?unhold_reason="unhold"`,
+    endpoint: `orders/${orderId}/unhold/`,
     method: 'POST',
     performAction: false,
   });

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

@@ -0,0 +1,56 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { useFlagsLoading, useReminderRefId } from '../store';
+import { getCookie } from '../../utils';
+import { notification } from 'antd';
+
+function useFetchSingleReminderData() {
+  const [reminderRefId] = useReminderRefId();
+
+  const [, setLoading] = useFlagsLoading();
+  const ssoToken = getCookie('id_token');
+
+  const res = async () => {
+    const endpoint = `${getBaseEndpoint()}/tasks/reminder/${reminderRefId}`;
+    setLoading(true);
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        notification.error({
+          message: 'Error',
+          description: msg || 'An error has occurred. Please try again later.',
+        });
+        setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        setLoading(false);
+
+        return { ...json.data[0] };
+      }
+      return [];
+    } catch (err) {
+      //setloading(false);
+      notification.error({
+        message: 'Error',
+        description:
+          `${err}` || 'An error has occurred. Please try again later.',
+      });
+      return [];
+    }
+  };
+  return res;
+}
+
+export default useFetchSingleReminderData;

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

@@ -0,0 +1,52 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { useFlagsLoading } from '../store';
+import { UpdateReminderPayload } from '../types';
+import { getCookie } from '../../utils';
+import { notification } from 'antd';
+
+function useUpdateReminder() {
+  const ssoToken = getCookie('id_token');
+  const [, setLoading] = useFlagsLoading();
+
+  const update = async (data: UpdateReminderPayload[]) => {
+    const endpoint = `${getBaseEndpoint()}/tasks/reminder/update/`;
+    setLoading(true);
+
+    try {
+      const requestOptions = {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${ssoToken}`,
+        },
+        method: 'PUT',
+        body: JSON.stringify(data),
+      };
+
+      const response = await fetch(endpoint, requestOptions);
+
+      if (!response.ok) {
+        throw new Error('response is not ok');
+      }
+
+      const json = await response.json();
+      notification.success({
+        message: 'Success',
+        description: 'Reminder has been updated.',
+      });
+      return json;
+    } catch (err) {
+      notification.error({
+        message: 'Error',
+        description:
+          `${err}` || 'An error has occurred. Please try again later.',
+      });
+    } finally {
+      setLoading(false);
+    }
+    setLoading(false);
+  };
+
+  return update;
+}
+
+export default useUpdateReminder;

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

@@ -20,6 +20,7 @@ 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';
+import ViewReminderModal from '../view-reminder/ViewReminder';
 
 function OrderActions() {
   const [currentAction] = useCurrentAction();
@@ -54,6 +55,8 @@ function OrderActions() {
         return <TaskReminderModal />;
       case 'create-task':
         return <TaskModal />;
+      case 'view-reminder':
+        return <ViewReminderModal />;
       case 'log-feedback':
         return <LogFeedback />;
       case 'unhold-order':

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

@@ -258,6 +258,12 @@ export function useUpdateReminderData() {
 export function useRouteDetails() {
   return useAtom(routeDetails);
 }
+const allOrderStatus = atom<string | null>(null);
+
+export function useAllOrderStatus() {
+  return useAtom(allOrderStatus);
+}
+
 
 export const selectedCategoryIdAtom = atom<any>(null);
 export const selectedDocumentTypeAtom = atom<any>(null);

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

@@ -38,7 +38,7 @@ export function formatDate(dateString: any) {
     const date = new Date(dateString);
 
     if (!isNaN(date.getTime())) {
-      return format(date, 'MM/dd/yyyy HH:mm:ss');
+      return format(date, 'dd/MM/yyyy HH:mm:ss');
     }
   }
   return 'Invalid date';