@bjsdistribution/dms-client-return 0.0.84 → 0.0.86

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.84",
+  "version": "0.0.86",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.1.58",
+    "@bjsdistribution/dms-component-library": "0.1.78",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

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

@@ -26,6 +26,8 @@ import {
   useGsitOrderId,
   useOrderProductId,
   useLiveRecalling,
+  useGlobalStateHitOrder,
+  useAtom,
 } from './store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
@@ -36,6 +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, useAllOrderStatus } from './order-actions/store';
 
 interface ApiResponse {
   message: string;
@@ -71,6 +74,12 @@ function OrderView() {
   const systemLogsData = useSystemLogs();
   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();
@@ -167,10 +176,10 @@ function OrderView() {
   });
   useEffect(() => {
     if (orderId) {
-      orderUpdate(true);
+      orderUpdate(recallOrders);
       liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
     }
-  }, [orderId, liveRecalling]);
+  }, [orderId, liveRecalling, recallOrders]);
 
   useEffect(() => {
     setLoading(staticDataLoading);
@@ -222,6 +231,8 @@ function OrderView() {
     };
   }, [statusDataLoading, fetchedStatusData]);
 
+  const [getResources] = useAtom(setResourcesCall);
+
   useEffect(() => {
     setLoading(depotDataLoading);
     if (fetchedDepotData && fetchedDepotData.data) {
@@ -255,6 +266,19 @@ function OrderView() {
     performAction: false,
   });
 
+  useEffect(() => {
+    if (orderId) {
+      if (getResources) {
+        setActions(false);
+        setTimeout(() => {
+          setActions(true);
+        }, 200);
+      } else {
+        setActions(true);
+      }
+    }
+  }, [orderId, setActions, getResources]);
+
   useEffect(() => {
     if (orderId) {
       setActions(true);

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

@@ -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);
       }
@@ -172,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 ||
@@ -217,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/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();
   };