feat: Announcement per page FF accept params (#4275)

frontend/web/components/AnnouncementPerPage.tsx

@@ -1,3 +1,4 @@
+import { get } from 'lodash'
 import React, { FC } from 'react'
 import InfoMessage from './InfoMessage'
 import flagsmith from 'flagsmith'
@@ -8,9 +9,13 @@ import { routes } from 'web/routes'
 
 type AnnouncementPerPageValueType = AnnouncementValueType & {
   pages: string[]
+  projectId: number
+  params: { [key: string]: string }
 }
 
-type AnnouncementPerPageType = { pathname: string }
+type AnnouncementPerPageType = {
+  pathname: string
+}
 
 const AnnouncementPerPage: FC<AnnouncementPerPageType> = ({ pathname }) => {
   const closeAnnouncement = (id: string) => {
@@ -33,14 +38,36 @@ const AnnouncementPerPage: FC<AnnouncementPerPageType> = ({ pathname }) => {
 
   const announcementInPage = announcementPerPageValue?.pages?.some((page) => {
     if (Object.keys(routes).includes(page)) {
-      return !!matchPath(pathname, {
+      const match = matchPath(pathname, {
         exact: false,
         path: routes[page],
         strict: false,
       })
+
+      if (match) {
+        const annParams = announcementPerPageValue?.params || {}
+        const matchParams = match?.params || {}
+        const objectsMatch = (
+          obj1: AnnouncementPerPageValueType['params'],
+          obj2: AnnouncementPerPageValueType['params'],
+        ) => {
+          return Object.keys(obj1).every((key) => {
+            return `${obj1[key]}` === `${obj2[key]}`
+          })
+        }
+        const annParamsMatch = objectsMatch(annParams, matchParams)
+        const matchParamsMatch = objectsMatch(matchParams, annParams)
+        if (annParamsMatch || matchParamsMatch) {
+          return true
+        }
+
+        return false
+      }
     }
+
     return false
   })
+
   return (
     <>
       {showAnnouncementPerPage && announcementInPage && (

frontend/web/components/InfoMessage.js

@@ -21,7 +21,7 @@ export default class InfoMessage extends PureComponent {
           <div className='title'>{this.props.title || 'NOTE'}</div>
           <div className='flex-fill'>{this.props.children}</div>
         </div>
-        {this.props.url && (
+        {this.props.url && this.props.buttonText && (
           <Button
             size='small'
             className='btn my-2 ml-2'