@bjsdistribution/dms-client-return 0.1.6-prod → 0.1.7-prod

package/package.json

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

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;