Add favorite shot promo card. (mozilla-services#4878)

locales/en-US/server.ftl

@@ -199,12 +199,17 @@ errorThirdPartyCookiesEnabled = If you took this shot and cannot delete it, you
 
 ## Shot Page New Feature Promotion Dialog.
 # Note: If possible, choose a short translation to better fit into the card.
-promoTitle = Take Note!
-promoMessage = Updated editing tools let you crop, highlight, and even add text to your shot.
-promoLink = Give them a try
 promoCloseButton =
     .title = Close notification
 
+editorPromoTitle = Take Note!
+editorPromoMessage = Updated editing tools let you crop, highlight, and even add text to your shot.
+editorPromoCallToAction = Give them a try
+
+favShotsPromoTitle = Favorite Shots!
+favShotsPromoMessage = You can now sign in with Firefox Account to favorite your shots and save forever.
+favShotPromoCallToAction = Give it a try!
+
 ## Annotations
 
 annotationPenButton =

server/src/pages/shot/controller.js

@@ -25,12 +25,12 @@ function shouldShowPromo(model) {
     return false;
   }
   let show = false;
-  const count = localStorage.hasSeenPromoDialog;
+  const count = localStorage.hasSeenEditorPromoDialog;
   if (!count) {
-    localStorage.hasSeenPromoDialog = 1;
+    localStorage.hasSeenEditorPromoDialog = 1;
     show = true;
   } else if (count < 3) {
-    localStorage.hasSeenPromoDialog = parseInt(count, 10) + 1;
+    localStorage.hasSeenEditorPromoDialog = parseInt(count, 10) + 1;
     show = true;
   }
   return show;
@@ -77,7 +77,7 @@ exports.launch = function(data) {
     }
   }
   model.highlightEditButton = shouldHighlightEditIcon(model);
-  model.promoDialog = shouldShowPromo(model);
+  model.showEditorPromoDialog = shouldShowPromo(model);
   if (firstSet) {
     refreshHash();
   }

server/src/pages/shot/model.js

@@ -13,6 +13,18 @@ exports.createModel = function(req) {
   const title = req.getText("shotPageTitle", {originalTitle: req.shot.title});
   const enableAnnotations = req.config.enableAnnotations;
   const isFxaAuthenticated = req.accountId && req.accountId === req.shot.accountId;
+  const promos = {
+    editor: {
+      title: req.getText("editorPromoTitle"),
+      message: req.getText("editorPromoMessage"),
+      callToAction: req.getText("editorPromoCallToAction"),
+    },
+    favShot: {
+      title: req.getText("favShotsPromoTitle"),
+      message: req.getText("favShotsPromoMessage"),
+      callToAction: req.getText("favShotPromoCallToAction"),
+    },
+  };
   const serverPayload = {
     title,
     staticLink: req.staticLink,
@@ -42,6 +54,7 @@ exports.createModel = function(req) {
     downloadUrl,
     isMobile,
     enableAnnotations,
+    promos,
   };
   const clientPayload = {
     title,
@@ -74,6 +87,7 @@ exports.createModel = function(req) {
     downloadUrl,
     isMobile,
     enableAnnotations,
+    promos,
   };
   if (serverPayload.expireTime !== null && Date.now() > serverPayload.expireTime) {
     clientPayload.shot = {

server/src/pages/shot/promo-dialog.js

@@ -1,7 +1,6 @@
 const React = require("react");
 const PropTypes = require("prop-types");
 const { Localized } = require("fluent-react/compat");
-const sendEvent = require("../../browser-send-event.js");
 
 exports.PromoDialog = class PromoDialog extends React.Component {
   constructor(props) {
@@ -11,30 +10,26 @@ exports.PromoDialog = class PromoDialog extends React.Component {
   render() {
     if (this.props.display) {
       return <div id="promo-dialog-panel" className="promo-panel default-color-scheme" >
-        <Localized id="promoCloseButton">
-          <a className="box-close" title="Close notification" onClick={this.closePanel.bind(this)}></a>
-        </Localized>
-        <Localized id="promoTitle">
-          <h4 className="title">Take Note!</h4>
-        </Localized>
-        <Localized id="promoMessage">
-          <p className="message">
-            Updated editing tools let you crop, highlight, and even add text to your shot.
-          </p>
-        </Localized>
-        <p className="message">✨<Localized id="promoLink"><span className="message-text">Give them a try</span></Localized>✨</p>
+        <a className="box-close" title="Close notification" onClick={this.closePanel.bind(this)}></a>
+        <h4 className="title">{this.props.title}</h4>
+        <p className="message">
+          {this.props.message}
+        </p>
+        <p className="message">✨<span className="message-text">{this.props.callToAction}</span>✨</p>
       </div>;
     }
     return null;
   }
 
   closePanel(event) {
     this.props.promoClose();
-    sendEvent("promo-closed");
   }
 };
 
 exports.PromoDialog.propTypes = {
   display: PropTypes.bool,
   promoClose: PropTypes.func,
+  title: PropTypes.string,
+  message: PropTypes.string,
+  callToAction: PropTypes.string,
 };

server/src/pages/shot/shotpage-header.js

@@ -6,10 +6,20 @@ const sendEvent = require("../../browser-send-event.js");
 const { SignInButton } = require("../../signin-button.js");
 const { Header } = require("../../header.js");
 const { TimeDiff } = require("./time-diff");
+const { PromoDialog } = require("./promo-dialog");
 
 exports.ShotPageHeader = class ShotPageHeader extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      showPromo: false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.showPromo !== prevProps.showPromo) {
+      this.setState({showPromo: this.props.showPromo});
+    }
   }
 
   renderMyShotsText() {
@@ -90,10 +100,19 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
   }
 
   renderFxASignIn() {
+    let promo = null;
+    if (this.props.promo) {
+      promo = <PromoDialog
+                display={this.state.showPromo}
+                {...this.props.promo}
+                promoClose={this.props.closePromoCallback}/>;
+    }
+
     return (
       this.props.isOwner ?
         <div className="shot-fxa-signin">
           <SignInButton isAuthenticated={this.props.isFxaAuthenticated} initialPage={this.props.shot.id} />
+          {promo}
         </div> : null
     );
   }
@@ -121,6 +140,7 @@ exports.ShotPageHeader.propTypes = {
   shot: PropTypes.object,
   isFxaAuthenticated: PropTypes.bool,
   expireTime: PropTypes.number,
+  promo: PropTypes.object,
 };
 
 class EditableTitle extends React.Component {

server/src/pages/shot/view.js

@@ -175,12 +175,13 @@ class Body extends React.Component {
       hidden: false,
       closeBanner: false,
       imageEditing: false,
+      showFavShotPromo: false,
     };
   }
 
   componentDidMount() {
-    this.setState({highlightEditButton: this.props.highlightEditButton || this.props.promoDialog});
-    this.setState({promoDialog: this.props.promoDialog});
+    this.setState({highlightEditButton: this.props.highlightEditButton || this.props.showEditorPromoDialog});
+    this.setState({showEditorPromoDialog: this.props.showEditorPromoDialog});
   }
 
   doCloseBanner() {
@@ -341,10 +342,10 @@ class Body extends React.Component {
     let editButton = null;
     const highlight = this.state.highlightEditButton ? <div className="edit-highlight" onClick={ this.onClickEdit.bind(this) } onMouseOver={ this.onMouseOverHighlight.bind(this) } onMouseOut={ this.onMouseOutHighlight.bind(this) }></div> : null;
     const activeFavClass = this.props.expireTime ? "" : "is-fav";
-    const shouldShow = this.props.isFxaAuthenticated ? "" : "hidden";
 
     favoriteShotButton = <div className="favorite-shot-button"><Localized id="shotPagefavoriteButton">
-      <button className={`nav-button ${shouldShow} `} onClick={this.onClickFavorite.bind(this)}>
+      <button className="nav-button"
+        onClick={this.onClickFavorite.bind(this)}>
         <span className={`icon-favorite favorite ${activeFavClass}`} ></span>
         <Localized id="shotPageFavorite">
           <span className={`favorite-text favorite ${activeFavClass} `}>Favorite</span>
@@ -377,7 +378,10 @@ class Body extends React.Component {
             </Localized>
           </button>
         </Localized>
-        <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
+        <PromoDialog
+          promoClose={this.closeEditorPromo.bind(this)}
+          display={this.state.showEditorPromoDialog}
+          {...this.props.promos.editor} />
         { highlight }
         </div> : null;
     }
@@ -403,7 +407,10 @@ class Body extends React.Component {
         { 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}
+          promo={this.props.promos.favShot}
+          showPromo={this.state.showFavShotPromo}
+          closePromoCallback={this.closeFavShotPromo.bind(this)}>
           { favoriteShotButton }
           { editButton }
           { downloadButton }
@@ -419,10 +426,15 @@ class Body extends React.Component {
     </reactruntime.BodyTemplate>);
   }
 
-  promoClose() {
-    this.setState({promoDialog: false});
+  closeEditorPromo() {
+    this.setState({showEditorPromoDialog: false});
     // set counter to max to stop showing notification again
     localStorage.hasSeenPromoDialog = 3;
+    sendEvent("editor-promo-closed");
+  }
+
+  closeFavShotPromo() {
+    this.setState({showFavShotPromo: false});
   }
 
   onMouseOverHighlight() {
@@ -455,7 +467,7 @@ class Body extends React.Component {
     }
     // Close promo dialog if user clicked edit after seeing new edit tool promo
     if (this.props.promoDialog) {
-      this.promoClose();
+      this.closeEditorPromo();
     }
   }
 
@@ -490,6 +502,14 @@ class Body extends React.Component {
   }
 
   onClickFavorite() {
+    if (!this.props.isFxaAuthenticated) {
+      this.setState({
+        showEditorPromoDialog: false,
+        showFavShotPromo: true,
+      });
+      return;
+    }
+
     if (this.props.expireTime) {
       sendEvent("set-favorite", "navbar");
       const INDEFINITE = 0;
@@ -500,6 +520,11 @@ class Body extends React.Component {
     }
   }
 
+  onCloseFavShotPromo() {
+    this.setState({showFavShotPromo: false});
+    sendEvent("fav-shot-promo-closed");
+  }
+
   onClickDownload() {
     sendEvent("download", "navbar");
     location.href = this.props.downloadUrl;

static/css/frame.scss

@@ -195,6 +195,12 @@
   }
 }
 
+.shot-fxa-signin {
+  .promo-panel {
+    right: 10px;
+  }
+}
+
 .delete-confirmation-dialog {
   &.right-align {
     top: 88px;