Fixes mozilla-services#4684 - Common Marketing Banner

punamdahiya · Sep 18, 2018 · a3bf7a9 · a3bf7a9
1 parent 0191b17
commit a3bf7a9
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 146 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -9,6 +9,7 @@ gNoShots
 gScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
 gSettings = Settings
 gSignIn = Sign In
+gBannerMessage = Sign in or sign up to access your shots across devices and save your favorites forever.
 
 ## Header
 buttonSettings =

diff --git a/server/src/ad-banner.js b/server/src/ad-banner.js
@@ -0,0 +1,22 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+
+exports.AdBanner = function AdBanner(props) {
+  if (props.isDisabled) {
+    return null;
+  }
+
+  if (props.content) {
+    return <div className="ad-banner default-color-scheme">
+      <div className="logo message">
+        {props.content}
+      </div>
+    </div>;
+  }
+  return null;
+};
+
+exports.AdBanner.propTypes = {
+  content: PropTypes.object,
+  isDisabled: PropTypes.bool,
+};
diff --git a/server/src/config.js b/server/src/config.js
@@ -319,6 +319,13 @@ const conf = convict({
     env: "DISABLE_SEARCH",
     arg: "disable-search",
   },
+  disableBanner: {
+    doc: "If true, then hide the banner",
+    format: Boolean,
+    default: false,
+    env: "DISABLE_BANNER",
+    arg: "disable-banner",
+  },
   siteCdn: {
     doc: "CDN URL prefix for site assets, e.g. 'https://somecdn.com/mysite'; links will be rewritten as 'https://somecdn.com/mysite/static/style.css'",
     format: String,

diff --git a/server/src/header.js b/server/src/header.js
@@ -1,6 +1,7 @@
 const React = require("react");
 const PropTypes = require("prop-types");
 const { Localized } = require("fluent-react/compat");
+const { AdBanner } = require("./ad-banner");
 
 exports.Header = function Header(props) {
   const logo = props.hasLogo ? <div className="logo">
@@ -9,13 +10,18 @@ exports.Header = function Header(props) {
       </Localized>
     </div> : null;
 
-  return <header className="header-panel default-color-scheme">
+  return <div className="header-container">
+    <AdBanner content={props.bannerContent} isDisabled={props.disableBanner} />
+    <header className="header-panel default-color-scheme">
       {logo}
       {props.children}
-    </header>;
+    </header>
+  </div>;
 };
 
 exports.Header.propTypes = {
   hasLogo: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  disableBanner: PropTypes.bool,
+  bannerContent: PropTypes.object,
 };
diff --git a/server/src/pages/homepage/homepage-header.js b/server/src/pages/homepage/homepage-header.js
@@ -34,8 +34,17 @@ exports.HomePageHeader = class HomePageHeader extends React.Component {
     }
 
     const signin = this.renderFxASignIn();
+    let bannerContent = null;
+    if (this.props.isOwner && !this.props.hasFxa) {
+      bannerContent = <Localized id="gBannerMessage">
+        <span>
+          Sign in or sign up to sync shots across devices, save your favorite shots forever.
+        </span>
+      </Localized>;
+    }
+
     return (
-      <Header hasLogo={true}>
+      <Header hasLogo={true} disableBanner={this.props.disableBanner} bannerContent={bannerContent}>
         <div className="alt-actions">
           { myShots }
           { signin }
@@ -49,4 +58,5 @@ exports.HomePageHeader.propTypes = {
   hasFxa: PropTypes.bool,
   isOwner: PropTypes.bool,
   isFirefox: PropTypes.bool,
+  disableBanner: PropTypes.bool,
 };
diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js
@@ -79,7 +79,7 @@ class Body extends React.Component {
       <reactruntime.BodyTemplate {...this.props}>
         <div className="default-color-scheme">
           <HomePageHeader isOwner={this.props.showMyShots} isFirefox={this.props.isFirefox}
-            hasFxa={this.props.hasFxa} />
+            hasFxa={this.props.hasFxa} disableBanner={this.props.disableBanner}/>
           <div className="banner">
             <div className="banner-image-back" />
             <div className="banner-container">

diff --git a/server/src/pages/shot/shotpage-header.js b/server/src/pages/shot/shotpage-header.js
@@ -98,12 +98,37 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     );
   }
 
+  renderBannerContent() {
+    if (this.props.shouldGetFirefox) {
+      return <div><Localized id="gScreenshotsDescription">
+          <span>Screenshots made simple. Take, save and share screenshots without leaving Firefox.</span>
+        </Localized>
+        <Localized id="shotPageUpsellFirefox">
+          <a className="upsellLink" href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-shot"
+            onClick={ this.clickedInstallFirefox.bind(this) }>Get Firefox now</a>
+        </Localized></div>;
+    } else if (this.props.isOwner && !this.props.isFxaAuthenticated) {
+      return <Localized id="gBannerMessage">
+          <span>
+            Sign in or sign up to sync shots across devices, save your favorite shots forever.
+          </span>
+        </Localized>;
+    }
+    return null;
+  }
+
+  clickedInstallFirefox() {
+    sendEvent("click-install-firefox-shot", {useBeacon: true});
+  }
+
   render() {
     const myShotsText = this.renderMyShotsText();
     const signin = this.renderFxASignIn();
     const shotInfo = this.renderShotInfo();
+    const bannerContent = this.renderBannerContent();
+
     return (
-      <Header>
+      <Header bannerContent={bannerContent} disableBanner={this.props.disableBanner}>
         { myShotsText }
         { shotInfo }
         <div className="shot-alt-actions">
@@ -121,6 +146,8 @@ exports.ShotPageHeader.propTypes = {
   shot: PropTypes.object,
   isFxaAuthenticated: PropTypes.bool,
   expireTime: PropTypes.number,
+  shouldGetFirefox: PropTypes.bool,
+  disableBanner: PropTypes.bool,
 };
 
 class EditableTitle extends React.Component {

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -173,7 +173,6 @@ class Body extends React.Component {
     super(props);
     this.state = {
       hidden: false,
-      closeBanner: false,
       imageEditing: false,
     };
   }
@@ -183,10 +182,6 @@ class Body extends React.Component {
     this.setState({promoDialog: this.props.promoDialog});
   }
 
-  doCloseBanner() {
-    this.setState({closeBanner: true});
-  }
-
   clickDeleteHandler() {
     sendEvent("start-delete", "navbar", {useBeacon: true});
   }
@@ -394,16 +389,15 @@ class Body extends React.Component {
     }
 
     let renderGetFirefox = this.props.userAgent && (this.props.userAgent + "").search(/firefox\/\d{1,255}/i) === -1;
-    if (this.props.isMobile || this.state.closeBanner) {
+    if (this.props.isMobile) {
       renderGetFirefox = false;
     }
 
     return (
       <reactruntime.BodyTemplate {...this.props}>
-        { renderGetFirefox ? this.renderFirefoxRequired() : null }
         <div id="frame" className="inverse-color-scheme full-height column-space">
         <ShotPageHeader isOwner={this.props.isOwner} isFxaAuthenticated={this.props.isFxaAuthenticated}
-          shot={this.props.shot} expireTime={this.props.expireTime}>
+          shot={this.props.shot} expireTime={this.props.expireTime} shouldGetFirefox={renderGetFirefox} disableBanner={this.props.disableBanner}>
           { favoriteShotButton }
           { editButton }
           { downloadButton }
@@ -433,21 +427,6 @@ class Body extends React.Component {
     this.editButton.style.backgroundColor = "transparent";
   }
 
-  renderFirefoxRequired() {
-    return <div className="highlight-color-scheme alt-notification">
-      <div>
-        <Localized id="gScreenshotsDescription">
-          <span>Screenshots made simple. Take, save and share screenshots without leaving Firefox.</span>
-        </Localized>
-        &nbsp;
-        <Localized id="shotPageUpsellFirefox">
-          <a href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-shot" onClick={ this.clickedInstallFirefox.bind(this) }>Get Firefox now</a>
-        </Localized>
-      </div>
-      <a className="close" onClick={ this.doCloseBanner.bind(this) }></a>
-    </div>;
-  }
-
   onClickEdit() {
     if (!this.state.imageEditing) {
       this.setState({imageEditing: true});

diff --git a/server/src/pages/shotindex/myshots-header.js b/server/src/pages/shotindex/myshots-header.js
@@ -1,14 +1,24 @@
 const React = require("react");
 const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
 const { SignInButton } = require("../../signin-button.js");
 const { Header } = require("../../header.js");
 
 exports.MyShotsHeader = function MyShotsHeader(props) {
   const signin = props.enableUserSettings && props.hasDeviceId ?
     <SignInButton isAuthenticated={props.hasFxa} initialPage="shots" /> : null;
 
+  let bannerContent = null;
+  if (props.hasDeviceId && !props.hasFxa) {
+    bannerContent = <Localized id="gBannerMessage">
+      <span>
+        Sign in or sign up to sync shots across devices, save your favorite shots forever.
+      </span>
+    </Localized>;
+  }
+
   return (
-    <Header hasLogo={true}>
+    <Header hasLogo={true} disableBanner={props.disableBanner} bannerContent={bannerContent}>
       <div className="alt-actions">
         { signin }
       </div>
@@ -20,4 +30,5 @@ exports.MyShotsHeader.propTypes = {
   hasFxa: PropTypes.bool,
   hasDeviceId: PropTypes.bool,
   enableUserSettings: PropTypes.bool,
+  disableBanner: PropTypes.bool,
 };
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -40,7 +40,7 @@ class Body extends React.Component {
       <reactruntime.BodyTemplate {...this.props}>
         <div className="column-space full-height default-color-scheme" id="shot-index-page">
           <MyShotsHeader hasDeviceId={this.props.hasDeviceId} hasFxa={this.props.hasFxa}
-            enableUserSettings={this.props.enableUserSettings} />
+            enableUserSettings={this.props.enableUserSettings} disableBanner={this.props.disableBanner} />
           { this.props.disableSearch ? null : this.renderSearchForm() }
           <div id="shot-index" className="flex-1">
             { this.renderShots() }

diff --git a/server/src/reactrender.js b/server/src/reactrender.js
@@ -22,6 +22,7 @@ exports.render = function(req, res, page) {
       csrfToken,
       abTests: req.abTests,
       userLocales: req.userLocales,
+      disableBanner: req.config.disableBanner,
     }, jsonModel);
     serverModel = Object.assign({
       authenticated: !!req.deviceId,
@@ -33,6 +34,7 @@ exports.render = function(req, res, page) {
       abTests: req.abTests,
       userLocales: req.userLocales,
       messages: req.messages,
+      disableBanner: req.config.disableBanner,
     }, serverModel);
     if (req.query.data === "json") {
       if (req.query.pretty !== undefined) {