@bjsdistribution/dms-client-return 0.1.19-dev → 0.1.19-prod

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

@@ -1,14 +1,17 @@
-import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import {
+  FlagAlert,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { useFlagRefId } from '../order-actions/store';
 import { useCurrentAction } from '../store';
-import { formatDate } from '../order-actions/utils';
-
+import { useClientPortal } from '../../store';
 function FlagTemplate({ data, dismissFlags }: any) {
   const [, setSelectedFlag] = useFlagRefId();
   const [, setCurrentAction] = useCurrentAction();
-
+  const [isCustomerPortal] = useClientPortal();
+  //
   const openModal = () => {
     setCurrentAction('view-flag');
   };
@@ -25,21 +28,30 @@ function FlagTemplate({ data, dismissFlags }: any) {
         title={
           <>
             <StyledTitle color={titleColor}>
-              Flag : {data?.is_private ? 'Private' : ''}{' '}
+              Flag : {data?.is_private ? 'Private' : 'Public'}{' '}
               <StyledLink onClick={() => handleClick(data.id)}>
                 {data?.id} - {data?.flag_type}{' '}
               </StyledLink>{' '}
               {data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
               {data?.status == 'SD' ? (
                 <>
-                  {formatDate(data?.resolved_at)} by {data?.resolved_by}{' '}
+                  {`${formatUtcToLocal(data?.resolved_at)?.date}  ${
+                    formatUtcToLocal(data?.resolved_at)?.time
+                  }`}{' '}
+                  by {data?.resolved_by}{' '}
                 </>
               ) : null}
             </StyledTitle>
           </>
         }
         subtitle=""
-        description={`${data?.description}`}
+        description={
+          isCustomerPortal ? (
+            <span dangerouslySetInnerHTML={{ __html: data?.description }} />
+          ) : (
+            `${data?.description}`
+          )
+        }
         showOkButton={false}
         onClose={() => dismissFlags(data?.id)}
       />
@@ -47,9 +59,7 @@ function FlagTemplate({ data, dismissFlags }: any) {
   );
 }
 
-const StyledAlert = styled.div`
-  margin-bottom: 10px;
-`;
+const StyledAlert = styled.div``;
 
 const StyledLink = styled.span`
   color: var(--contextual-blue, #6396e5);
@@ -57,6 +67,7 @@ const StyledLink = styled.span`
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
+  cursor: pointer;
 `;
 
 const StyledTitle = styled.span<{ color: string }>`

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;