From 0ea96959c72cde8752e39209825249f29eef9b0b Mon Sep 17 00:00:00 2001
From: Viktor <v.mozharovsky@gmail.com>
Date: Mon, 9 Dec 2024 03:40:44 -0800
Subject: [PATCH] [SALAD-23181] WebApp: Redirect to demand alerts on get
 notified click (#1234)

* ModalWithOverlay component - added

* temp

* GetNotifiedDemandChangesModal - added

* DemandMonitorPage: Get Notified - redirects to Demand Alerts  for authenticated users

* DemandMonitorPage: duplicated code - removed
---
 .../DemandMonitorPage/DemandMonitorPage.tsx     | 16 ++++++++++++----
 .../DemandMonitorPageContainer.tsx              | 17 +++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPage.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPage.tsx
index c9cf04238..9a5a98051 100644
--- a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPage.tsx
+++ b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPage.tsx
@@ -65,17 +65,21 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
 })
 export interface Props extends WithStyles<typeof styles> {
   demandedHardwarePerformanceList?: DemandedHardwarePerformance[]
+  isAuthenticated: boolean
   withGetNotifiedButton: boolean
+  navigateToDemandAlerts: () => void
   fetchDemandedHardwarePerformanceList: () => void
   onLoginClick: () => void
 }
 
 const _DemandMonitorPage: FunctionComponent<Props> = ({
-  fetchDemandedHardwarePerformanceList,
-  onLoginClick,
-  withGetNotifiedButton,
   demandedHardwarePerformanceList,
+  isAuthenticated,
+  withGetNotifiedButton,
   classes,
+  navigateToDemandAlerts,
+  fetchDemandedHardwarePerformanceList,
+  onLoginClick,
 }) => {
   const [isModalShown, setIsModalShown] = useState(false)
 
@@ -101,7 +105,11 @@ const _DemandMonitorPage: FunctionComponent<Props> = ({
   }
 
   const handleGetNotifiedButtonClick = () => {
-    setIsModalShown(true)
+    if (isAuthenticated) {
+      navigateToDemandAlerts()
+    } else {
+      setIsModalShown(true)
+    }
   }
 
   const getPageContent = () => {
diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPageContainer.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPageContainer.tsx
index c244c99bf..a5a4bd244 100644
--- a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPageContainer.tsx
+++ b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorPageContainer.tsx
@@ -4,16 +4,16 @@ import { FeatureFlags, useFeatureManager } from '../../../FeatureManager'
 import type { RootStore } from '../../../Store'
 import { DemandMonitorPage, type Props as DemandMonitorPageProps } from './DemandMonitorPage'
 
-interface Props extends DemandMonitorPageProps {
-  isAuthenticated: boolean
-}
-
-export const _DemandMonitorPageContainer: FC<Props> = ({ isAuthenticated, ...props }: Props) => {
+export const _DemandMonitorPageContainer: FC<DemandMonitorPageProps> = ({ isAuthenticated, ...props }) => {
   const featureManager = useFeatureManager()
   const isDemandNotificationsFeatureFlagEnabled = featureManager.isEnabled(FeatureFlags.DemandNotifications)
-  const withGetNotifiedButton = isDemandNotificationsFeatureFlagEnabled && !isAuthenticated
-
-  return <DemandMonitorPage {...props} withGetNotifiedButton={withGetNotifiedButton} />
+  return (
+    <DemandMonitorPage
+      {...props}
+      isAuthenticated={isAuthenticated}
+      withGetNotifiedButton={isDemandNotificationsFeatureFlagEnabled}
+    />
+  )
 }
 
 const mapStoreToProps = (store: RootStore): any => ({
@@ -22,6 +22,7 @@ const mapStoreToProps = (store: RootStore): any => ({
     store.auth.login()
   },
   fetchDemandedHardwarePerformanceList: store.demandMonitor.fetchDemandedHardwarePerformanceList,
+  navigateToDemandAlerts: () => store.routing.push('/account/alerts'),
   isAuthenticated: store.auth.isAuthenticated,
   demandedHardwarePerformanceList: store.demandMonitor.demandedHardwarePerformanceList,
 })