Merge pull request #1265 from topcoder-platform/PM-2133_dismissable-banner

PM-2133 dismissable banner

Author: vas3a

src/apps/platform/src/PlatformApp.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
 
-import { useViewportUnitsFix } from '~/libs/shared'
+import { NotificationsContainer, useViewportUnitsFix } from '~/libs/shared'
 
 import { AppFooter } from './components/app-footer'
 import { AppHeader } from './components/app-header'
@@ -14,6 +14,7 @@ const PlatformApp: FC<{}> = () => {
     return (
         <Providers>
             <AppHeader />
+            <NotificationsContainer />
             <div className='root-container'>
                 <PlatformRouter />
             </div>

src/apps/platform/src/providers/Providers.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
 
 import { authUrlLogout, ProfileProvider } from '~/libs/core'
-import { ConfigContextProvider } from '~/libs/shared'
+import { ConfigContextProvider, NotificationProvider } from '~/libs/shared'
 
 import { PlatformRouterProvider } from './platform-router.provider'
 
@@ -13,7 +13,9 @@ const Providers: FC<ProvidersProps> = props => (
     <ConfigContextProvider logoutUrl={authUrlLogout}>
         <ProfileProvider>
             <PlatformRouterProvider>
-                {props.children}
+                <NotificationProvider>
+                    {props.children}
+                </NotificationProvider>
             </PlatformRouterProvider>
         </ProfileProvider>
     </ConfigContextProvider>

src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx

@@ -13,6 +13,7 @@ import { TableLoading } from '~/apps/admin/src/lib'
 import { handleError } from '~/apps/admin/src/lib/utils'
 import { EnvironmentConfig } from '~/config'
 import { BaseModal, Button, InputCheckbox, InputText } from '~/libs/ui'
+import { NotificationContextType, useNotification } from '~/libs/shared'
 
 import {
     useFetchScreeningReview,
@@ -226,6 +227,7 @@ const computePhaseCompletionFromScreenings = (
 
 // eslint-disable-next-line complexity
 export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
+    const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
     const [searchParams, setSearchParams] = useSearchParams()
     const location = useLocation()
     const navigate = useNavigate()
@@ -1323,6 +1325,16 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         : undefined
     const shouldShowChallengeMetaRow = Boolean(statusLabel) || trackTypePills.length > 0
 
+    useEffect(() => {
+        const notification = showBannerNotification({
+            id: 'ai-review-scores-warning',
+            message: `AI Review Scores are advisory only to provide immediate,
+                educational, and actionable feedback to members.
+                AI Review Scores do not influence winner selection.`,
+        })
+        return () => notification && removeNotification(notification.id)
+    }, [showBannerNotification])
+
     return (
         <PageWrapper
             pageTitle={challengeInfo?.name ?? ''}

src/libs/core/lib/profile/profile-context/index.ts

@@ -1,3 +1,3 @@
 export * from './profile-context-data.model'
-export { default as profileContext, defaultProfileContextData } from './profile.context'
+export { default as profileContext, defaultProfileContextData, useProfileContext } from './profile.context'
 export * from './profile.context-provider'

src/libs/core/lib/profile/profile-context/profile.context.tsx

@@ -1,4 +1,4 @@
-import { Context, createContext } from 'react'
+import { Context, createContext, useContext } from 'react'
 
 import { ProfileContextData } from './profile-context-data.model'
 
@@ -12,4 +12,6 @@ export const defaultProfileContextData: ProfileContextData = {
 
 const profileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
 
+export const useProfileContext = (): ProfileContextData => useContext(profileContext)
+
 export default profileContext

src/libs/shared/lib/components/index.ts

@@ -3,6 +3,7 @@ export * from './modals'
 export * from './profile-picture'
 export * from './input-skill-selector'
 export * from './member-skill-editor'
+export * from './notifications'
 export * from './skill-pill'
 export * from './expandable-list'
 export * from './grouped-skills-ui'

src/libs/shared/lib/components/notifications/Notifications.container.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+
+import { Notification } from '~/libs/ui'
+
+import { NotificationContextType, useNotification } from './Notifications.context'
+import styles from './NotificationsContainer.module.scss'
+
+const NotificationsContainer: FC = () => {
+    const { notifications, removeNotification }: NotificationContextType = useNotification()
+
+    return (
+        <div className={styles.wrap}>
+            {notifications.map(n => (
+                <Notification key={n.id} notification={n} onClose={removeNotification} />
+            ))}
+        </div>
+    )
+}
+
+export default NotificationsContainer

src/libs/shared/lib/components/notifications/Notifications.context.tsx

@@ -0,0 +1,92 @@
+import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
+
+import { useProfileContext } from '~/libs/core'
+
+import { dismiss, wasDismissed } from './localstorage.utils'
+
+export type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'banner';
+
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    icon?: ReactNode
+    message: string;
+    duration?: number; // in ms
+}
+
+type NotifyPayload = string | (Partial<Notification> & { message: string })
+
+export interface NotificationContextType {
+    notifications: Notification[];
+    notify: (message: NotifyPayload, type?: NotificationType, duration?: number) => Notification | void;
+    showBannerNotification: (message: NotifyPayload) => Notification | void;
+    removeNotification: (id: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
+
+export const useNotification = (): NotificationContextType => {
+    const context = useContext(NotificationContext)
+    if (!context) throw new Error('useNotification must be used within a NotificationProvider')
+    return context
+}
+
+export const NotificationProvider: React.FC<{
+    children: ReactNode,
+}> = props => {
+    const profileCtx = useProfileContext()
+    const uuid = profileCtx.profile?.userId ?? 'annon'
+    const [notifications, setNotifications] = useState<Notification[]>([])
+
+    const removeNotification = useCallback((id: string, persist?: boolean) => {
+        setNotifications(prev => prev.filter(n => n.id !== id))
+        if (persist) {
+            dismiss(id)
+        }
+    }, [])
+
+    const notify = useCallback(
+        (message: NotifyPayload, type: NotificationType = 'info', duration = 3000) => {
+            const id = `${uuid}[${typeof message === 'string' ? message : message.id}]`
+            const newNotification: Notification
+                = typeof message === 'string'
+                    ? { duration, id, message, type }
+                    : { duration, type, ...message, id }
+
+            if (wasDismissed(id)) {
+                return undefined
+            }
+
+            setNotifications(prev => [...prev, newNotification])
+
+            if (duration > 0) {
+                setTimeout(() => removeNotification(id), duration)
+            }
+
+            return newNotification
+        },
+        [uuid],
+    )
+
+    const showBannerNotification = useCallback((
+        message: NotifyPayload,
+    ) => notify(message, 'banner', 0), [notify])
+
+    const ctxValue = useMemo(() => ({
+        notifications,
+        notify,
+        removeNotification,
+        showBannerNotification,
+    }), [
+        notifications,
+        notify,
+        removeNotification,
+        showBannerNotification,
+    ])
+
+    return (
+        <NotificationContext.Provider value={ctxValue}>
+            {props.children}
+        </NotificationContext.Provider>
+    )
+}

src/libs/shared/lib/components/notifications/NotificationsContainer.module.scss

@@ -0,0 +1,7 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    position: relative;
+    width: 100%;
+    z-index: 1000;
+}

src/libs/shared/lib/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export { default as NotificationsContainer } from './Notifications.container'
+export * from './Notifications.context'