@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.21-dev

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

@@ -1,15 +1,16 @@
 import { FlagAlert } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useOrderNotify } from '../order-actions/store';
 import { useOrderStaticData } from '../store';
+import { useClientPortal } from '../../store';
 
 function OrderTemplate({ orderDetails, routeInfoData }: any) {
   const [, setOrderCount] = useOrderNotify();
-  const precall = false;
+  // const precall = false;
   const [orderStaticData] = useOrderStaticData();
   const statusVal = routeInfoData?.status_value;
-
+  const [isClientPortal] = useClientPortal();
   const unholdReasons = orderStaticData?.cancellation_reasons?.map(
     (x: any) => ({
       id: x?.id,
@@ -38,13 +39,17 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
     isPreCall: true,
     isConfirmed: true,
     isPostcode: true,
+    isSubcontracted: true,
+    isRouted: true,
+    isOnSite: true,
+    isFailed: true,
   });
 
-  useEffect(() => {
-    if (precall) {
-      setOrderCount(prevCount => prevCount + 1);
-    }
-  }, [precall]);
+  // useEffect(() => {
+  //   if (precall) {
+  //     setOrderCount(prevCount => prevCount + 1);
+  //   }
+  // }, [precall]);
 
   //on close alert functionality
   const onCloseAlert = (alertType: string) => {
@@ -57,6 +62,28 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
 
   return (
     <>
+      {/* order_red_cross_alerts */}
+      {!isClientPortal && routeInfoData?.order_red_cross_alerts?.length > 0 && (
+        <FlagAlert
+          type="error"
+          title=""
+          description={
+            <FlagsStyle>
+              <div className="redCross">
+                <div
+                  className="spanStyle"
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData?.order_red_cross_alerts,
+                  }}
+                />
+              </div>
+            </FlagsStyle>
+          }
+          showOkButton={false}
+          onClose={() => onCloseAlert('isPostcode')}
+        />
+      )}
+
       {statusVal == 'on hold' && alertVisibility?.isHoldVisible && (
         <StyledAlert>
           <FlagAlert
@@ -64,7 +91,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -81,7 +108,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -92,24 +119,6 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
         </StyledAlert>
       )}
 
-      {precall && alertVisibility.isPreCall && (
-        <StyledAlert>
-          <FlagAlert
-            type="success"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isPreCall')}
-          />
-        </StyledAlert>
-      )}
-
       {statusVal == 'outstanding' && alertVisibility.isOutstanding && (
         <StyledAlert>
           <FlagAlert
@@ -117,7 +126,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -127,6 +136,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           />
         </StyledAlert>
       )}
+
       {statusVal == 'awaiting confirmation' &&
         alertVisibility.isAwaitingConfirmation && (
           <StyledAlert>
@@ -135,7 +145,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_alert,
+                    __html: routeInfoData?.order_info_alerts,
                   }}
                 ></div>
               }
@@ -152,7 +162,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -165,11 +175,11 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
       {statusVal == 'cancelled' && alertVisibility.isCancelled && (
         <StyledAlert>
           <FlagAlert
-            type="error"
+            type="info"
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -179,6 +189,43 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           />
         </StyledAlert>
       )}
+
+      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isConfirmed')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'subcontracted' && alertVisibility.isSubcontracted && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isRouted')}
+          />
+        </StyledAlert>
+      )}
+
       {statusVal == 'enroute' && alertVisibility.isEnroute && (
         <StyledAlert>
           <FlagAlert
@@ -186,7 +233,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -197,34 +244,89 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
         </StyledAlert>
       )}
 
-      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
+      {statusVal == 'routed' && alertVisibility.isRouted && (
         <StyledAlert>
           <FlagAlert
             type="info"
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
             description={``}
             showOkButton={false}
-            onClose={() => onCloseAlert('isConfirmed')}
+            onClose={() => onCloseAlert('isRouted')}
           />
         </StyledAlert>
       )}
 
-      {routeInfoData?.same_postcode_orders && alertVisibility.isPostcode && (
+      {statusVal == 'precalled' && alertVisibility.isPreCall && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isPreCall')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'on site' && alertVisibility.isOnSite && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isOnSite')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'failed' && alertVisibility.isFailed && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isFailed')}
+          />
+        </StyledAlert>
+      )}
+
+      {/* order_warnings_alerts */}
+      {!isClientPortal && routeInfoData?.order_warnings_alerts?.length > 0 && (
         <FlagAlert
-          type="info"
+          type="warn"
           title=""
           description={
             <FlagsStyle>
-              <div className="postcode-alert-content">
+              <div className="">
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: routeInfoData.same_postcode_orders,
+                    __html: routeInfoData?.order_warnings_alerts,
                   }}
                 />
               </div>
@@ -234,11 +336,58 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           onClose={() => onCloseAlert('isPostcode')}
         />
       )}
+
+      {/* order_green_check_alerts */}
+      {!isClientPortal && routeInfoData?.order_green_check_alerts?.length > 0 && (
+        <FlagAlert
+          type="success"
+          title=""
+          description={
+            <FlagsStyle>
+              <div className="">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData?.order_green_check_alerts,
+                  }}
+                />
+              </div>
+            </FlagsStyle>
+          }
+          showOkButton={false}
+          onClose={() => onCloseAlert('isPostcode')}
+        />
+      )}
+
+      {!isClientPortal &&
+        routeInfoData?.same_postcode_orders &&
+        alertVisibility.isPostcode && (
+          <FlagAlert
+            type="info"
+            title=""
+            description={
+              <FlagsStyle>
+                <div className="postcode-alert-content">
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: routeInfoData?.same_postcode_orders,
+                    }}
+                  />
+                </div>
+              </FlagsStyle>
+            }
+            showOkButton={false}
+            onClose={() => onCloseAlert('isPostcode')}
+          />
+        )}
     </>
   );
 }
 
 const FlagsStyle = styled.div`
+  .redCross {
+    font-size: 13px;
+    margin-top: 4px;
+  }
   .postcode-alert-content {
     > div {
       > h4 {
@@ -251,6 +400,7 @@ const FlagsStyle = styled.div`
       }
     }
     ul {
+      margin-bottom: 0;
     }
 
     li {
@@ -268,6 +418,7 @@ const FlagsStyle = styled.div`
       > strong {
         > a {
           color: #6396e5;
+
           font-family: Roboto;
           font-size: 14px;
           font-style: normal;

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

@@ -6,11 +6,12 @@ import {
 } from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { useReminderRefId } from '../order-actions/store';
-import { getDay } from '../order-actions/utils';
+import { useClientPortal } from '../../store';
 
 function ReminderTemplate({ data, dismissReminder }: any) {
   const [, setCurrentAction] = useCurrentAction();
   const [, setReminderRefId] = useReminderRefId();
+  const [isClientPortal] = useClientPortal();
   const openModal = () => {
     setCurrentAction('view-reminder');
   };
@@ -44,18 +45,30 @@ function ReminderTemplate({ data, dismissReminder }: any) {
             <>
               <StyledTitle color={titleColor}>
                 Reminder:
-                <StyledLink onClick={() => handleClick(data.id)}>
-                  {data?.reference || 'NA'}
-                </StyledLink>{' '}
-                (Due - {getDay(data?.due_datetime)},{' '}
-                {`${formatUtcToLocal(data?.due_datetime).date} ${
-                  formatUtcToLocal(data?.due_datetime).time
+                <StyledLink
+                  onClick={() => handleClick(data.id)}
+                  $disable={isClientPortal || false}
+                >
+                  {' '}
+                  {data?.reference || 'NA'}{' '}
+                </StyledLink>
+                (Due -{' '}
+                {`${formatUtcToLocal(data?.due_datetime)?.date}  ${
+                  formatUtcToLocal(data?.due_datetime)?.time
                 }`}
-                ), Assigned to: {data?.assigned_to} Completed On:{' '}
-                {getDay(data?.completed_at)},{' '}
-                {`${formatUtcToLocal(data?.completed_at).date} ${
-                  formatUtcToLocal(data?.completed_at).time
-                }`} By: {data?.completed_by}
+                )
+                {data?.assigned_to && (
+                  <div>Assigned to: {data.assigned_to}</div>
+                )}
+                {data?.completed_at && (
+                  <div>
+                    Completed On:{' '}
+                    {`${formatUtcToLocal(data.completed_at)?.date} ${
+                      formatUtcToLocal(data.completed_at)?.time
+                    }`}
+                  </div>
+                )}
+                {data?.completed_by && <div>By: {data.completed_by}</div>}
               </StyledTitle>
             </>
           }
@@ -79,12 +92,14 @@ const StyledTitle = styled.span<{ color: string }>`
   font-weight: 600;
 `;
 
-const StyledLink = styled.span`
+const StyledLink = styled.span<{ $disable: boolean }>`
   color: var(--contextual-blue, #6396e5);
   font-family: Roboto;
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
+  cursor: ${props => (props?.$disable ? 'auto' : 'pointer')};
+  ${props => props?.$disable && `pointer-events: none;`};
 `;
 
 export default ReminderTemplate;

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

@@ -22,7 +22,15 @@ import {
   useAllOrderStatus,
 } from '../order-actions/store';
 import { useParams, useSearchParams } from 'react-router-dom';
-
+import { useClientPortal } from '../../store';
+import { Skeleton } from 'antd';
+type ReminderResponse = {
+  data: ApiResponse[];
+  stats_count: {
+    pending: number;
+    overdue: number;
+  };
+};
 interface ApiResponse {
   message: string;
   code: number;
@@ -44,7 +52,7 @@ function Notification() {
   const [closedReminders, setCloseReminders] = useState([]);
   const [activeTasks, setActiveTasks] = useState([]);
   const [closedTasks, setCloseTasks] = useState([]);
-  const [idOfRoute, setRouteId] = useRouteId();
+  const [idOfRoute] = useRouteId();
   const [, setStatusVal] = useAllOrderStatus();
   const [searchParams] = useSearchParams();
   const [orderAlertsData, setOrderAlertsData] = useOrderAlertsData();
@@ -52,6 +60,7 @@ function Notification() {
   const { id } = useParams();
   const [orderId, setOrderId] = useOrderId();
   const routeId = orderData?.order_routes?.route_id;
+  const [isClientPortal] = useClientPortal();
 
   useEffect(() => {
     if (orderIdParams) {
@@ -73,7 +82,12 @@ function Notification() {
     endpoint: `/v1/task/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: orderId }],
+    filters: isClientPortal
+      ? [
+          { field: 'is_private', op: '=', value: 'false' },
+          { field: 'order_id', op: '=', value: orderId },
+        ]
+      : [{ field: 'order_id', op: '=', value: orderId }],
   });
 
   //reminder get
@@ -81,15 +95,20 @@ function Notification() {
     data: fetchedReminderData,
     loading: reminderLoading,
     fetchData: callReminderApi,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
+  } = useAxios<ReminderResponse>({
     endpoint: `/v1/task/reminder/get/`,
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
   });
 
+  //reminder data set
+  useEffect(() => {
+    if (fetchedReminderData && fetchedReminderData?.data) {
+      setReminderNotifyData(fetchedReminderData?.data);
+    }
+  }, [fetchedReminderData]);
+
   useEffect(() => {
     setStatusVal(orderData?.status_value);
   }, [orderData?.status_value]);
@@ -107,13 +126,6 @@ function Notification() {
     }
   }, [unresolvedLoading, fetchedUnresolvedData]);
 
-  //reminder data set
-  useEffect(() => {
-    if (fetchedReminderData && fetchedReminderData?.data) {
-      setReminderNotifyData(fetchedReminderData?.data);
-    }
-  }, [reminderLoading]);
-
   // Route API calling...
   const { data: fetchedData, fetchData: fetchRoute } = useAxios<{
     data: ApiResponse[];
@@ -126,9 +138,6 @@ function Notification() {
     if (idOfRoute !== null && idOfRoute !== undefined) {
       fetchRoute();
     }
-    return () => {
-      setRouteId(null);
-    };
   }, [idOfRoute]);
 
   const {
@@ -153,7 +162,7 @@ function Notification() {
       if (orderId == null) return;
 
       try {
-        await callReminderApi();
+        !isClientPortal && (await callReminderApi());
         await callUnresolvedTaskApi();
         await callOrderAlertsApi();
       } catch (error) {
@@ -245,11 +254,80 @@ function Notification() {
             </StyledTab>
           </TabsData>
         </Container>
-        {unresolvedLoading || reminderLoading ? (
-          <Loader>
-            <Spinner />
-            <Text>Fetching Notifications...</Text>
-          </Loader>
+        {unresolvedLoading || reminderLoading || alertsApiLoading ? (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+          </>
         ) : taskData?.length > 0 ||
           reminderNotifyData?.length > 0 ||
           orderData ? (
@@ -280,32 +358,6 @@ const Container = styled.div`
   border-bottom: 1px solid #ccc;
 `;
 
-const Loader = styled.div`
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const Spinner = styled.div`
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #3a3630;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
 const FlagContainer = styled.div`
   padding: 8px;
   background-color: #3a3630;
@@ -391,11 +443,4 @@ const TabsWrapper = styled.div`
   }
 `;
 
-const Text = styled.div`
-  color: var(--tonal-brown-651, #6a7378);
-  font-family: Lato;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 600;
-`;
 export default Notification;