Announcement Banner + Partial Code for 'Extra Monetization'

src/client/Wrapper.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import url from 'url';
 import { connect } from 'react-redux';
 import { IntlProvider } from 'react-intl';
-import { withRouter } from 'react-router-dom';
+import { withRouter, Link } from 'react-router-dom';
 import { renderRoutes } from 'react-router-config';
-import { LocaleProvider, Layout } from 'antd';
+import { Alert, LocaleProvider, Layout } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 import Cookie from 'js-cookie';
 import { findLanguage, getRequestLocale, getBrowserLocale, loadLanguage } from './translations';
@@ -41,6 +41,7 @@ import Topnav from './components/Navigation/Topnav';
 import Transfer from './wallet/Transfer';
 import PowerUpOrDown from './wallet/PowerUpOrDown';
 import BBackTop from './components/BBackTop';
+import * as announcement from './announcements/announcement'
 
 @withRouter
 @connect(
@@ -248,12 +249,41 @@ export default class Wrapper extends React.PureComponent {
     const { user, usedLocale, translations } = this.props;
 
     const language = findLanguage(usedLocale);
+    const displayBanner = announcement.displayBanner1 || announcement.displayBanner2
 
     return (
       <IntlProvider key={language.id} locale={language.localeData} messages={translations}>
         <LocaleProvider locale={enUS}>
           <Layout data-dir={language && language.rtl ? 'rtl' : 'ltr'}>
             <Layout.Header style={{ position: 'fixed', width: '100%', zIndex: 1050 }}>
+              {displayBanner && (
+                <Alert
+                  style={{ backgroundColor: 'blue', color: 'white', textAlign: 'center'}}
+                  showIcon={false} type="info" banner closable 
+                  message={
+                    <span>
+                      <p>
+                        <span style={{marginRight: '5px'}}>{announcement.message1}</span>
+                        <Link 
+                          style={{color: '#F0E68C'}}
+                          to={announcement.link1}
+                        >
+                          {announcement.linkMessage1}
+                        </Link>
+                      </p>
+                      <p>
+                        <span style={{margin: '0px 5px'}}>{announcement.message2}</span>
+                        <Link 
+                          style={{color: '#F0E68C'}}
+                          to={announcement.link2}
+                        >
+                          {announcement.linkMessage2}
+                        </Link>
+                      </p>
+                    </span>
+                  }
+                />
+              )}
               <Topnav username={user.name} onMenuItemClick={this.handleMenuItemClick} />
             </Layout.Header>
             <div className="content">

src/client/announcements/announcement.js

@@ -0,0 +1,9 @@
+export const displayBanner1 = true
+export const message1 = "Ulogs.org Update: What's Ongoing?"
+export const linkMessage1 = "Click here."
+export const link1 = "/@surpassinggoogle/do-you-want-to-become-certified-uloggers-kindly-fill-up-this-form-if-you-are-already-a-certified-ulogger-there-is-a-separate"
+
+export const displayBanner2 = true
+export const message2 = 'Update: For "Certified Uloggers"'
+export const linkMessage2 = "Click here."
+export const link2 = "/@surpassinggoogle/steemcleaners-cheetah-and-every-curation-guild-on-steem-kindly-read-this-short-draft"

src/client/components/Editor/Editor.js

@@ -456,7 +456,10 @@ class Editor extends React.Component {
             <Checkbox onChange={this.onUpdate} disabled={isUpdating}>
               <FormattedMessage id="like_post" defaultMessage="Like this post" />
             </Checkbox>,
-          )}
+            <Checkbox onChange={this.onUpdate} disabled={isUpdating}>
+              <FormattedMessage id="like_post" defaultMessage="Like this post" />
+            </Checkbox>,
+        )}
         </Form.Item>
         <div className="Editor__bottom">
           <span className="Editor__bottom__info">

src/client/components/Editor/EditorMain.js

@@ -2,12 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import ReactDOM from 'react-dom';
-import { withRouter, Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import readingTime from 'reading-time';
-import { Checkbox, Form, Input, Select, Button, Collapse, Menu, Dropdown, Icon } from 'antd';
+import { message, Checkbox, Form, Input, Select, Button, Collapse } from 'antd';
 import { rewardsValues } from '../../../common/constants/rewards';
 import Action from '../Button/Action';
 import requiresLogin from '../../auth/requiresLogin';
@@ -78,6 +77,7 @@ class EditorMain extends React.Component {
     this.throttledUpdate = this.throttledUpdate.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.displayComingSoon = this.displayComingSoon.bind(this);
   }
 
   componentDidMount() {
@@ -215,6 +215,13 @@ class EditorMain extends React.Component {
     this.props.onDelete();
   }
 
+  /*
+   * Display a coming soon message when user clicks on any "Click Here" button
+   */
+  displayComingSoon = () => {
+    message.success('Coming soon!', 3);
+  }
+
   render() {
     const { intl, form, loading, isUpdating, saving, draftId } = this.props;
     const { getFieldDecorator } = form;
@@ -408,6 +415,9 @@ Want to "mine the human" some more, you can also try one of our specialized edit
               <FormattedMessage id="like_post" defaultMessage="Like this post" />
             </Checkbox>,
           )}
+          <Checkbox onChange={this.displayComingSoon} disabled={isUpdating}>
+            <FormattedMessage id="extra_monetization" πdeefaultMessage="Extra Monitezation" />
+          </Checkbox>
         </Form.Item>
         <div className="Editor__bottom">
           <span className="Editor__bottom__info">

src/client/locales/default.json

@@ -210,6 +210,7 @@
   "reward_option_0": "Declined",
   "recommended_posts": "Recommended Posts",
   "like_post": "Like this post",
+  "extra_monetization": "Extra Monetization",
   "saving": "Saving...",
   "post_send": "Post",
   "post_update_send": "Update post",