Fixes #4684 - Common Marketing Banner (#4910)

mozilla-services · Sep 20, 2018 · 55cd022 · 55cd022
1 parent 83bb07a
commit 55cd022
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 30 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -17,7 +17,7 @@ buttonSignIn =
     .title = Sign In
 screenshotsLogo =
     .title = Screenshots Home
-
+bannerMessage = Sign in or sign up to access your shots across devices and save your favorites forever.
 
 ## Footer
 

diff --git a/server/src/ad-banner.js b/server/src/ad-banner.js
@@ -0,0 +1,56 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+const sendEvent = require("./browser-send-event.js");
+
+exports.AdBanner = class AdBanner extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  clickedInstallFirefox() {
+    sendEvent("click-install-firefox-shot", {useBeacon: true});
+  }
+
+  render() {
+    let bannerContent = null;
+
+    if (this.props.shouldGetFirefox) {
+      bannerContent = [
+        <Localized key="message" id="gScreenshotsDescription">
+          <p>Screenshots made simple. Take, save and share screenshots without leaving Firefox.</p>
+        </Localized>,
+        <Localized key="upsell" 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>,
+      ];
+    } else if (this.props.isOwner && !this.props.hasFxa) {
+      bannerContent = <Localized id="bannerMessage">
+          <p>
+            Sign in or sign up to sync shots across devices, save your favorite shots forever.
+          </p>
+        </Localized>;
+    }
+
+    if (bannerContent) {
+      return <aside className="ad-banner">
+        <div className="logo message">
+          {bannerContent}
+        </div>
+      </aside>;
+    }
+    return null;
+  }
+};
+
+exports.AdBanner.propTypes = {
+  isOwner: PropTypes.bool,
+  hasFxa: PropTypes.bool,
+  shouldGetFirefox: PropTypes.bool,
+};
+
+exports.AdBanner.defaultProps = {
+  shouldGetFirefox: false,
+};
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,19 @@ exports.Header = function Header(props) {
       </Localized>
     </div> : null;
 
-  return <header className="header-panel default-color-scheme">
+  return [
+    <AdBanner key="banner" isOwner={props.isOwner} hasFxa={props.hasFxa} shouldGetFirefox={props.shouldGetFirefox} />,
+    <header key="header" className="header-panel default-color-scheme">
       {logo}
       {props.children}
-    </header>;
+    </header>,
+  ];
 };
 
 exports.Header.propTypes = {
   hasLogo: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  isOwner: PropTypes.bool,
+  hasFxa: PropTypes.bool,
+  shouldGetFirefox: PropTypes.bool,
 };
diff --git a/server/src/pages/homepage/homepage-header.js b/server/src/pages/homepage/homepage-header.js
@@ -35,7 +35,7 @@ exports.HomePageHeader = class HomePageHeader extends React.Component {
 
     const signin = this.renderFxASignIn();
     return (
-      <Header hasLogo={true}>
+      <Header hasLogo={true} isOwner={this.props.isOwner} hasFxa={this.props.hasFxa}>
         <div className="alt-actions">
           { myShots }
           { signin }

diff --git a/server/src/pages/shot/shotpage-header.js b/server/src/pages/shot/shotpage-header.js
@@ -102,8 +102,10 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     const myShotsText = this.renderMyShotsText();
     const signin = this.renderFxASignIn();
     const shotInfo = this.renderShotInfo();
+
     return (
-      <Header>
+      <Header shouldGetFirefox={this.props.shouldGetFirefox} isOwner={this.props.isOwner}
+        hasFxa={this.props.isFxaAuthenticated}>
         { myShotsText }
         { shotInfo }
         <div className="shot-alt-actions">
@@ -121,6 +123,7 @@ exports.ShotPageHeader.propTypes = {
   shot: PropTypes.object,
   isFxaAuthenticated: PropTypes.bool,
   expireTime: PropTypes.number,
+  shouldGetFirefox: 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}>
           { 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
@@ -8,7 +8,7 @@ exports.MyShotsHeader = function MyShotsHeader(props) {
     <SignInButton isAuthenticated={props.hasFxa} initialPage="shots" /> : null;
 
   return (
-    <Header hasLogo={true}>
+    <Header hasLogo={true} isOwner={props.hasDeviceId} hasFxa={props.hasFxa}>
       <div className="alt-actions">
         { signin }
       </div>

diff --git a/static/css/partials/_header.scss b/static/css/partials/_header.scss
@@ -83,7 +83,7 @@
     }
 
     &.icon-shots {
-      background-image: url("../img/icon-shots.svg"); 
+      background-image: url("../img/icon-shots.svg");
     }
 
     &.icon-settings {
@@ -154,3 +154,43 @@
     }
   }
 }
+
+.ad-banner {
+  @include flex-container(row, center, center);
+  @include respond-to("medium") {
+    height: 58px;
+  }
+
+  @include respond-to("small") {
+    height: 68px;
+    font-size: 13px;
+  }
+
+  display: flex;
+  font-size: 14px;
+  height: 48px;
+  color: $black;
+  background: #efeff1;
+  width: 100%;
+
+  .message {
+    padding: 16px 5px 16px 32px;
+  }
+
+  .logo {
+    background-position: left center;
+    background-image: url("../img/firefox-logo.svg");
+    background-repeat: no-repeat;
+    background-size: 24px auto;
+    margin-left: 16px;
+  }
+
+  p {
+    display: inline;
+  }
+
+  .upsellLink {
+    padding-left: 10px;
+    color: #009ec0;
+  }
+}