feat(condo): DOMA-9367 added ServiceProblemsAlert component (#4917)

* feat(condo): DOMA-9367 added NotWorkingAlert component * feat(condo): DOMA-9367 added pages config prop * feat(condo): DOMA-9367 rename to ServiceProblemsAlert * fix(condo): DOMA-9367 remove close alert logic * fix(condo): DOMA-9367 change prop to serviceProblemsAlert * feat(condo): DOMA-9367 added banner prop to alert component
open-condo-software · Jul 8, 2024 · 32fe13d · 32fe13d
1 parent c188f04
commit 32fe13d
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 43 deletions.
diff --git a/apps/condo/domains/common/components/LayoutContext.tsx b/apps/condo/domains/common/components/LayoutContext.tsx
@@ -24,14 +24,19 @@ const LayoutContext = createContext<ILayoutContext>({})
 
 export const useLayoutContext = (): ILayoutContext => useContext<ILayoutContext>(LayoutContext)
 
-export const LayoutContextProvider: React.FC = (props) => {
+type LayoutContextProviderProps = {
+    children: React.ReactNode
+    serviceProblemsAlert?: React.ReactNode
+}
+
+export const LayoutContextProvider: React.FC<LayoutContextProviderProps> = (props) => {
     const breakpoints = useBreakpoints()
     const [isCollapsed, setIsCollapsed] = useState(false)
 
     const {
         TopNotificationComponent,
         addNotification,
-    } = useTopNotificationsHook()
+    } = useTopNotificationsHook(props.serviceProblemsAlert)
 
     const toggleCollapsed = () => {
         localStorage && localStorage.setItem('isCollapsed', String(!isCollapsed))

diff --git a/apps/condo/domains/common/components/ServiceProblemsAlert.tsx b/apps/condo/domains/common/components/ServiceProblemsAlert.tsx
@@ -0,0 +1,38 @@
+import get from 'lodash/get'
+import { useRouter } from 'next/router'
+import {  useMemo } from 'react'
+
+import { useFeatureFlags } from '@open-condo/featureflags/FeatureFlagsContext'
+import { Alert } from '@open-condo/ui'
+
+import { SERVICE_PROBLEMS_ALERT } from '@condo/domains/common/constants/featureflags'
+
+
+export const ServiceProblemsAlert = () => {
+    const router = useRouter()
+
+    const { useFlagValue } = useFeatureFlags()
+    const serviceProblemsAlertConfig = useFlagValue(SERVICE_PROBLEMS_ALERT)
+
+    const title = useMemo(() => get(serviceProblemsAlertConfig, 'title'), [serviceProblemsAlertConfig])
+    const description = useMemo(() => get(serviceProblemsAlertConfig, 'description'), [serviceProblemsAlertConfig])
+    const pages = useMemo(() => get(serviceProblemsAlertConfig, 'pages', []), [serviceProblemsAlertConfig])
+
+    const showOnPage = useMemo(() => pages.length === 0 || pages.some(page => router.pathname.includes(page)),
+        [pages, router.pathname])
+    const isEmptyAlert = !title && !description
+
+    if (isEmptyAlert || !showOnPage) {
+        return null
+    }
+
+    return (
+        <Alert
+            type='warning'
+            message={title}
+            description={description}
+            banner
+            showIcon={false}
+        />
+    )
+}
diff --git a/apps/condo/domains/common/components/TopNotifications.tsx b/apps/condo/domains/common/components/TopNotifications.tsx
@@ -51,7 +51,7 @@ interface ITopNotificationHookResult {
     addNotification: (notification: ITopNotification) => void,
 }
 
-export const useTopNotificationsHook = (): ITopNotificationHookResult => {
+export const useTopNotificationsHook = (serviceProblemsAlert?: React.ReactNode): ITopNotificationHookResult => {
     const [topNotifications, setTopNotifications] = useState<ITopNotification[]>([])
     const addNotification = (notification: ITopNotification) => {
         if (!topNotifications.find(existedNotification => existedNotification.id === notification.id)) {
@@ -64,42 +64,47 @@ export const useTopNotificationsHook = (): ITopNotificationHookResult => {
 
     const TopNotificationComponent: React.FC = () => {
         const { breakpoints } = useLayoutContext()
-        if (topNotifications.length === 0) return null
+
+        if (topNotifications.length === 0 && !serviceProblemsAlert) return null
+
         return (
             <>
-                <Affix>{
-                    topNotifications.map(notification => {
-                        return (
-                            <Alert
-                                showIcon
-                                icon={(<InfoCircleFilled />)}
-                                message={notification.message}
-                                type={notification.type}
-                                key={notification.id}
-                                css={notificationAlert({ isSmall: !breakpoints.TABLET_LARGE })}
-                                action={<Space size={20}>
-                                    {
-                                        notification.actions.map((action, idx) => {
-                                            return (
-                                                <Button
-                                                    onClick={async () => {
-                                                        await action.action()
-                                                        removeNotification(notification.id)
-                                                    }}
-                                                    size={!breakpoints.TABLET_LARGE ? 'middle' : 'large'}
-                                                    type='sberPrimary'
-                                                    secondary={action.secondary}
-                                                    key={idx}
-                                                >
-                                                    {action.title}
-                                                </Button>
-                                            )
-                                        })}
-                                </Space>}
-                            />
-                        )
-                    })
-                }
+                <Affix>
+                    {serviceProblemsAlert}
+                    {
+                        topNotifications.map(notification => {
+                            return (
+                                <Alert
+                                    banner
+                                    showIcon
+                                    icon={(<InfoCircleFilled />)}
+                                    message={notification.message}
+                                    type={notification.type}
+                                    key={notification.id}
+                                    css={notificationAlert({ isSmall: !breakpoints.TABLET_LARGE })}
+                                    action={<Space size={20}>
+                                        {
+                                            notification.actions.map((action, idx) => {
+                                                return (
+                                                    <Button
+                                                        onClick={async () => {
+                                                            await action.action()
+                                                            removeNotification(notification.id)
+                                                        }}
+                                                        size={!breakpoints.TABLET_LARGE ? 'middle' : 'large'}
+                                                        type='sberPrimary'
+                                                        secondary={action.secondary}
+                                                        key={idx}
+                                                    >
+                                                        {action.title}
+                                                    </Button>
+                                                )
+                                            })}
+                                    </Space>}
+                                />
+                            )
+                        })
+                    }
                 </Affix>
             </>
         )

diff --git a/apps/condo/domains/common/constants/featureflags.js b/apps/condo/domains/common/constants/featureflags.js
@@ -26,6 +26,7 @@ const SEND_DAILY_STATISTICS_TASK = 'send-daily-statistics-task'
 const RETENTION_LOOPS_ENABLED = 'retention-loops-enabled'
 const NEWS_SHARING = 'news-sharing'
 const TICKET_DOCUMENT_GENERATION = 'ticket-document-generation'
+const SERVICE_PROBLEMS_ALERT = 'service-problems-alert'
 
 module.exports = {
     SMS_AFTER_TICKET_CREATION,
@@ -55,4 +56,5 @@ module.exports = {
     SEND_DAILY_STATISTICS_TASK,
     NEWS_SHARING,
     TICKET_DOCUMENT_GENERATION,
+    SERVICE_PROBLEMS_ALERT,
 }
diff --git a/apps/condo/pages/_app.tsx b/apps/condo/pages/_app.tsx
@@ -33,6 +33,7 @@ import { Loader } from '@condo/domains/common/components/Loader'
 import { MenuItem } from '@condo/domains/common/components/MenuItem'
 import PopupSmart from '@condo/domains/common/components/PopupSmart'
 import { PostMessageProvider } from '@condo/domains/common/components/PostMessageProvider'
+import { ServiceProblemsAlert } from '@condo/domains/common/components/ServiceProblemsAlert'
 import { SetupTelegramNotificationsBanner } from '@condo/domains/common/components/SetupTelegramNotificationsBanner'
 import { TASK_STATUS } from '@condo/domains/common/components/tasks'
 import { TasksContextProvider } from '@condo/domains/common/components/tasks/TasksContextProvider'
@@ -466,7 +467,7 @@ const MyApp = ({ Component, pageProps }) => {
                     <SetupTelegramNotificationsBanner />
                     <GlobalStyle/>
                     {shouldDisplayCookieAgreement && <CookieAgreement/>}
-                    <LayoutContextProvider>
+                    <LayoutContextProvider serviceProblemsAlert={<ServiceProblemsAlert />}>
                         <TasksProvider>
                             <PostMessageProvider>
                                 <TrackingProvider>

diff --git a/packages/ui/src/components/Alert/alert.tsx b/packages/ui/src/components/Alert/alert.tsx
@@ -7,7 +7,7 @@ type CondoAlertProps = {
 
 const ALERT_CLASS_PREFIX = 'condo-alert'
 
-export type AlertProps = Pick<DefaultAlertProps, 'message' | 'showIcon' | 'description'> & CondoAlertProps
+export type AlertProps = Pick<DefaultAlertProps, 'message' | 'showIcon' | 'description' | 'banner'> & CondoAlertProps
 
 const Alert: React.FC<AlertProps> = (props) => {
     return (

diff --git a/packages/ui/src/components/Alert/style.less b/packages/ui/src/components/Alert/style.less
@@ -17,10 +17,10 @@
     .condo-typography-text-medium();
   }
 
-  &-success,
-  &-info,
-  &-warning,
-  &-error {
+  &-success:not(.condo-alert-banner),
+  &-info:not(.condo-alert-banner),
+  &-warning:not(.condo-alert-banner),
+  &-error:not(.condo-alert-banner) {
     .condo-alert-border();
   }