feat: Home page announcement (#2710)

frontend/web/components/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import { matchPath } from 'react-router'
 import { withRouter } from 'react-router-dom'
 import amplitude from 'amplitude-js'
@@ -22,6 +22,7 @@ import { getOrganisationUsage } from 'common/services/useOrganisationUsage'
 import Button from './base/forms/Button'
 import Icon from 'components/Icon'
 import AccountStore from 'common/stores/account-store'
+import InfoMessage from './InfoMessage'
 
 const App = class extends Component {
   static propTypes = {
@@ -38,6 +39,7 @@ const App = class extends Component {
     lastEnvironmentId: '',
     lastProjectId: '',
     pin: '',
+    showAnnouncement: true,
     totalApiCalls: 0,
   }
 
@@ -210,6 +212,11 @@ const App = class extends Component {
     this.context.router.history.replace('/')
   }
 
+  closeAnnouncement = (announcementId) => {
+    this.setState({ showAnnouncement: false })
+    flagsmith.setTrait(`dismissed_announcement`, announcementId)
+  }
+
   render() {
     if (
       Utils.getFlagsmithHasFeature('dark_mode') &&
@@ -276,6 +283,11 @@ const App = class extends Component {
     if (document.location.href.includes('widget')) {
       return <div>{this.props.children}</div>
     }
+    const announcementValue = JSON.parse(
+      Utils.getFlagsmithValue('announcement'),
+    )
+    const dismissed = flagsmith.getTrait('dismissed_announcement')
+    const showBanner = !dismissed || dismissed !== announcementValue.id
 
     return (
       <Provider store={getStore()}>
@@ -471,7 +483,30 @@ const App = class extends Component {
                           <Loader />
                         </div>
                       ) : (
-                        this.props.children
+                        <Fragment>
+                          {user &&
+                            showBanner &&
+                            Utils.getFlagsmithHasFeature('announcement') &&
+                            this.state.showAnnouncement && (
+                              <Row>
+                                <InfoMessage
+                                  title={announcementValue.title}
+                                  infoMessageClass={'announcement'}
+                                  isClosable={announcementValue.isClosable}
+                                  close={() =>
+                                    this.closeAnnouncement(announcementValue.id)
+                                  }
+                                  buttonText={announcementValue.buttonText}
+                                  url={announcementValue.url}
+                                >
+                                  <div>
+                                    <div>{announcementValue.description}</div>
+                                  </div>
+                                </InfoMessage>
+                              </Row>
+                            )}
+                          {this.props.children}
+                        </Fragment>
                       )}
                     </div>
                   )}

frontend/web/components/InfoMessage.js

@@ -5,16 +5,40 @@ import Icon from './Icon'
 export default class InfoMessage extends PureComponent {
   static displayName = 'InfoMessage'
 
+  handleOpenNewWindow = () => {
+    window.open(this.props.url, '_blank')
+    if (this.props.isClosable) {
+     this.props.close()
+    }
+  }
+
   render() {
+    const infoMessageClass = `alert alert-info ${
+      this.props.infoMessageClass || 'flex-1'
+    }`
+    const titleDescClass = this.props.infoMessageClass
+      ? `${this.props.infoMessageClass} body mr-2`
+      : ''
+
     return (
-      <div className='alert alert-info flex-1'>
+      <div className={infoMessageClass}>
         <span className='icon-alert'>
           <Icon name='info' />
         </span>
-        <div>
+        <div className={titleDescClass}>
           <div className='title'>{this.props.title || 'NOTE'}</div>
           {this.props.children}
         </div>
+        {this.props.url && (
+          <Button className='btn my-2' onClick={this.handleOpenNewWindow}>
+            {this.props.buttonText}
+          </Button>
+        )}
+        {this.props.isClosable && (
+          <a onClick={this.props.close} className='mt-n2 mr-n2 pl-2'>
+            <span className='icon ion-md-close' />
+          </a>
+        )}
       </div>
     )
   }

frontend/web/styles/project/_alert.scss

@@ -56,6 +56,18 @@
     color: $text-icon-dark;
   }
 }
+
+.announcement {
+  margin: auto;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  .body {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+}
+
 .dark {
   .alert {
     color: $alert-color-dark;