Fixes mozilla-services#4790 - NonFxA Shot takers should be briefly on…

…boarded

server/src/onboarding-promo.js

@@ -0,0 +1,79 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+const sendEvent = require("./browser-send-event.js");
+
+exports.OnboardingPromoDialog = class OnboardingPromoDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showPromo: false,
+    }
+  }
+
+  shouldShowOnboardingPromo() {
+    let show = false;
+    const count = localStorage.hasSeenOnboardingPromo;
+    if (!count) {
+      localStorage.hasSeenOnboardingPromo = 1;
+      show = true;
+    } else if (count < 3) {
+      localStorage.hasSeenOnboardingPromo = parseInt(count, 10) + 1;
+      show = true;
+    }
+    return show;
+  }
+
+  componentDidMount() {
+    const showPromo =  this.shouldShowOnboardingPromo();
+    this.setState({showPromo});
+  }
+
+  render() {
+    if (this.state.showPromo) {
+      return <div className="onboarding-promo-panel right-align">
+        <div className="triangle"><div className="triangle-inner"></div></div>
+        <div className="promo-header">
+          <span className="promo-logo" />
+          <Localized id="onboardingPromoTitle">
+            <span className="promo-title">What’s new with Firefox Screenshots?</span>
+          </Localized>
+        </div>
+        <div className="promo-message">
+          <Localized id="onboardingPromoMessage">
+            <p>
+              Now, sign in to Screenshots with a Firefox Account and
+              do more:
+            </p>
+          </Localized>
+           <ul>
+            <li>Access your library on all of your devices</li>
+            <li>Store your favorite shots forever</li>
+          </ul>
+        </div>
+        <div className="promo-footer">
+          <Localized id="promo-dismiss-button" attrs={{title: true}}>
+          <a href="#" title="Dismiss" onClick={ this.onClosePanel.bind(this) }>Dismiss</a>
+          </Localized>
+          <Localized id="promo-signin-button" attrs={{title: true}}>
+          <button className="button primary" title="Sign in" onClick={ this.onConfirm.bind(this) }>Sign in</button>
+          </Localized>
+        </div>
+      </div>;
+    }
+    return null;
+  }
+
+  onClosePanel(event) {
+    const showPromo = !this.state.showPromo;
+    this.setState({showPromo});
+    sendEvent("onboarding-promo-closed");
+  }
+
+  onConfirm(event) {
+  }
+};
+
+exports.OnboardingPromoDialog.propTypes = {
+  isOwner: PropTypes.bool,
+};

server/src/pages/shot/controller.js

@@ -21,6 +21,7 @@ function shouldHighlightEditIcon(model) {
 }
 
 function shouldShowPromo(model) {
+  // check here if localStorage.onboardingPromo is < 3 return false
   if (!model.isOwner || !model.enableAnnotations) {
     return false;
   }

server/src/signin-button.js

@@ -2,6 +2,7 @@ const React = require("react");
 const PropTypes = require("prop-types");
 const { Localized } = require("fluent-react/compat");
 const sendEvent = require("./browser-send-event.js");
+const { OnboardingPromoDialog } = require("./onboarding-promo");
 
 exports.SignInButton = class SignInButton extends React.Component {
   constructor(props) {
@@ -25,12 +26,13 @@ exports.SignInButton = class SignInButton extends React.Component {
     }
 
     const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage;
-    return <Localized id="buttonSignIn" attrs={{title: true}}>
+    return [<Localized id="buttonSignIn" key="signin" attrs={{title: true}}>
         <a className="transparent nav-button icon-settings" tabIndex="0" href={logInURI} title="SignIn"
            onClick={this.clickHandler.bind(this)}>
           <img src={this.props.staticLink("/static/img/icon-settings.svg")} />
         </a>
-      </Localized>;
+      </Localized>,
+      <OnboardingPromoDialog key="onboarding" />,];
   }
 
   clickHandler(event) {

static/css/frame.scss

@@ -104,6 +104,10 @@
   order: 1;
 }
 
+.shot-fxa-signin {
+  position: relative;
+}
+
 .shot-info {
   @include flex-container(column, center, flex-start);
   color: $black;

static/css/partials/_header.scss

@@ -54,6 +54,7 @@
     align-items: center;
     display: flex;
     margin-inline-end: 0;
+    position: relative;
   }
 
   a.nav-button {

static/css/partials/_onboarding-promo.scss

@@ -0,0 +1,110 @@
+.onboarding-promo-panel {
+  background: #F7F7F7;
+  border: 1px solid $light-border;
+  border-radius: 3px;
+  box-shadow: $medium-box-shadow;
+  color: #0C0C0D;
+  min-height: 200px;
+  min-width: 200px;
+  position: absolute;
+  inset-inline-start: 3px;
+  top: 47px;
+  z-index: 2;
+
+  .triangle {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-inline-start: 9px solid transparent;
+    border-inline-end: 9px solid transparent;
+    border-bottom: 15px solid $light-border;
+    top: -15px;
+    inset-inline-start: 8px;
+
+    .triangle-inner {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-inline-start: 8px solid transparent;
+      border-inline-end: 8px solid transparent;
+      border-bottom: 13px solid $white;
+      inset-inline-start: -8px;
+      top: 2px;
+    }
+  }
+
+  &.right-align {
+    @include respond-to("large") {
+      top: 85px;
+      width: 400px;
+    }
+    top: 70px;
+  }
+
+  &.right-align {
+    @include respond-to("large") {
+      inset-inline-start: -255px;
+    }
+    inset-inline-start: -267px;
+    .triangle {
+      inset-inline-start: 292px;
+    }
+  }
+
+  .promo-header {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: $white;
+
+    .promo-logo {
+      background-position: center;
+      background-image: url("../img/icon-promo.svg");
+      background-repeat: no-repeat;
+      background-size: 30px auto;
+      background-color: #0684FF;
+      width: 60px;
+      height: 100%;
+      display: block;
+    }
+
+    .promo-title {
+      display: block;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 0 16px;
+    }
+
+  }
+
+  .promo-message {
+    padding: 0 16px;
+    font-size: 14px;
+
+    ul {
+      padding-left: 16px;
+    }
+  }
+
+  .promo-footer {
+    height: 70px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    a {
+      font-weight: bold;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    button {
+      margin: 0 16px;
+      width: 120px;
+      height: 40px;
+    }
+  }
+}

static/css/partials/_partials.scss

@@ -12,3 +12,4 @@
 @import "share-panel";
 @import "theme";
 @import "header";
+@import "onboarding-promo";