[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

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 = () => {

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,
 })