feat: Announcement feature flag per page (#4218)

frontend/web/components/Announcement.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+import InfoMessage from './InfoMessage'
+import flagsmith from 'flagsmith'
+import Utils from 'common/utils/utils'
+
+export type AnnouncementValueType = {
+  id: string
+  title: string
+  description: string
+  isClosable: boolean
+  buttonText: string
+  url: string
+}
+
+type AnnouncementType = {}
+
+const Announcement: FC<AnnouncementType> = () => {
+  const closeAnnouncement = (id: string) => {
+    flagsmith.setTrait(`dismissed_announcement`, id)
+  }
+
+  const announcementValue = Utils.getFlagsmithJSONValue('announcement', null)
+  const { buttonText, description, id, isClosable, title, url } =
+    announcementValue as AnnouncementValueType
+  const dismissed = flagsmith.getTrait('dismissed_announcement')
+
+  const showBanner =
+    announcementValue &&
+    (!dismissed || dismissed !== announcementValue.id) &&
+    Utils.getFlagsmithHasFeature('announcement')
+
+  return (
+    <>
+      {showBanner && (
+        <InfoMessage
+          title={title}
+          isClosable={isClosable}
+          close={() => closeAnnouncement(id)}
+          buttonText={buttonText}
+          url={url}
+        >
+          <div>
+            <div>{description}</div>
+          </div>
+        </InfoMessage>
+      )}
+    </>
+  )
+}
+
+export default Announcement

frontend/web/components/AnnouncementPerPage.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react'
+import InfoMessage from './InfoMessage'
+import flagsmith from 'flagsmith'
+import Utils from 'common/utils/utils'
+import { AnnouncementValueType } from './Announcement'
+import { matchPath } from 'react-router'
+import { routes } from 'web/routes'
+
+type AnnouncementPerPageValueType = AnnouncementValueType & {
+  pages: string[]
+}
+
+type AnnouncementPerPageType = { pathname: string }
+
+const AnnouncementPerPage: FC<AnnouncementPerPageType> = ({ pathname }) => {
+  const closeAnnouncement = (id: string) => {
+    flagsmith.setTrait(`dismissed_announcement_per_page`, id)
+  }
+
+  const announcementPerPageDismissed = flagsmith.getTrait(
+    'dismissed_announcement_per_page',
+  )
+  const announcementPerPageValue = Utils.getFlagsmithJSONValue(
+    'announcement_per_page',
+    null,
+  ) as AnnouncementPerPageValueType
+
+  const showAnnouncementPerPage =
+    (!announcementPerPageDismissed ||
+      announcementPerPageDismissed !== announcementPerPageValue.id) &&
+    Utils.getFlagsmithHasFeature('announcement_per_page') &&
+    announcementPerPageValue?.pages?.length > 0
+
+  const announcementInPage = announcementPerPageValue?.pages?.some((page) => {
+    if (Object.keys(routes).includes(page)) {
+      return !!matchPath(pathname, {
+        exact: false,
+        path: routes[page],
+        strict: false,
+      })
+    }
+    return false
+  })
+  return (
+    <>
+      {showAnnouncementPerPage && announcementInPage && (
+        <InfoMessage
+          title={announcementPerPageValue?.title}
+          isClosable={announcementPerPageValue?.isClosable}
+          close={() => closeAnnouncement(announcementPerPageValue?.id)}
+          buttonText={announcementPerPageValue?.buttonText}
+          url={announcementPerPageValue?.url}
+        >
+          <div>
+            <div>{announcementPerPageValue?.description}</div>
+          </div>
+        </InfoMessage>
+      )}
+    </>
+  )
+}
+
+export default AnnouncementPerPage

frontend/web/components/App.js

@@ -36,6 +36,8 @@ import AuditLogIcon from './svg/AuditLogIcon'
 import Permission from 'common/providers/Permission'
 import HomeAside from './pages/HomeAside'
 import ScrollToTop from './ScrollToTop'
+import AnnouncementPerPage from './AnnouncementPerPage'
+import Announcement from './Announcement'
 
 const App = class extends Component {
   static propTypes = {
@@ -349,13 +351,6 @@ const App = class extends Component {
     if (document.location.href.includes('widget')) {
       return <div>{this.props.children}</div>
     }
-    const announcementValue = Utils.getFlagsmithJSONValue('announcement', null)
-    const dismissed = flagsmith.getTrait('dismissed_announcement')
-    const showBanner =
-      announcementValue &&
-      (!dismissed || dismissed !== announcementValue.id) &&
-      Utils.getFlagsmithHasFeature('announcement') &&
-      this.state.showAnnouncement
     const isOrganisationSelect = document.location.pathname === '/organisations'
     const integrations = Object.keys(
       JSON.parse(Utils.getFlagsmithValue('integration_data') || '{}'),
@@ -390,25 +385,15 @@ const App = class extends Component {
                         }
                       />
                     )}
-                    {user && showBanner && (
+                    {user && (
                       <div className='container mt-4'>
-                        <div className='row'>
-                          <InfoMessage
-                            title={announcementValue.title}
-                            isClosable={announcementValue.isClosable}
-                            close={() =>
-                              this.closeAnnouncement(announcementValue.id)
-                            }
-                            buttonText={announcementValue.buttonText}
-                            url={announcementValue.url}
-                          >
-                            <div>
-                              <div>{announcementValue.description}</div>
-                            </div>
-                          </InfoMessage>
+                        <div>
+                          <Announcement />
+                          <AnnouncementPerPage pathname={pathname} />
                         </div>
                       </div>
                     )}
+
                     {this.props.children}
                   </Fragment>
                 )}