Fixes #4724 - Add image editor new feature promotion dialog

locales/en-US/server.ftl

@@ -175,6 +175,14 @@ timeDiffFutureDays = { $number ->
 
 errorThirdPartyCookiesEnabled = If you took this shot and cannot delete it, you may need to temporarily enable third party cookies from your browser’s preferences.
 
+## 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
+
 ## Annotations
 
 annotationPenButton =

server/src/pages/shot/controller.js

@@ -20,6 +20,22 @@ function shouldHighlightEditIcon(model) {
   return !hasSeen;
 }
 
+function shouldShowPromo(model) {
+  if (!model.isOwner || !model.enableAnnotations) {
+    return false;
+  }
+  let show = false;
+  const count = localStorage.hasSeenPromoDialog;
+  if (!count) {
+    localStorage.hasSeenPromoDialog = 1;
+    show = true;
+  } else if (count < 3) {
+    localStorage.hasSeenPromoDialog = parseInt(count, 10) + 1;
+    show = true;
+  }
+  return show;
+}
+
 exports.launch = function(data) {
   const firstSet = !model;
   model = data;
@@ -57,6 +73,7 @@ exports.launch = function(data) {
     }
   }
   model.highlightEditButton = shouldHighlightEditIcon(model);
+  model.promoDialog = shouldShowPromo(model);
   if (firstSet) {
     refreshHash();
   }

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

@@ -0,0 +1,40 @@
+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) {
+    super(props);
+  }
+
+  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 it a try</span></Localized>✨</p>
+      </div>;
+    }
+    return null;
+  }
+
+  closePanel(event) {
+    this.props.promoClose();
+    sendEvent("promo-closed");
+  }
+};
+
+exports.PromoDialog.propTypes = {
+  display: PropTypes.bool,
+  promoClose: PropTypes.func
+};

server/src/pages/shot/view.js

@@ -5,6 +5,7 @@ const { Localized } = require("fluent-react/compat");
 const { Footer } = require("../../footer-view");
 const sendEvent = require("../../browser-send-event.js");
 const { ShareButton } = require("../../share-buttons");
+const { PromoDialog } = require("./promo-dialog");
 const { DeleteShotButton } = require("../../delete-shot-button");
 const { TimeDiff } = require("./time-diff");
 const reactruntime = require("../../reactruntime");
@@ -181,7 +182,8 @@ class Body extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({highlightEditButton: this.props.highlightEditButton});
+    this.setState({highlightEditButton: this.props.highlightEditButton || this.props.promoDialog});
+    this.setState({promoDialog: this.props.promoDialog});
   }
 
   doCloseBanner() {
@@ -358,9 +360,13 @@ class Body extends React.Component {
         clickDeleteHandler={ this.clickDeleteHandler.bind(this) }
         confirmDeleteHandler={ this.confirmDeleteHandler.bind(this) }
         cancelDeleteHandler={ this.cancelDeleteHandler.bind(this) } />;
-      editButton = <Localized id="shotPageEditButton">
-        <button className="button transparent edit" title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit; }}></button>
-      </Localized>;
+
+      editButton = <div className="edit-shot-button">
+        <Localized id="shotPageEditButton">
+          <button className="button transparent edit" title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit; }}></button>
+        </Localized>
+        <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
+        </div>;
     } else {
       trashOrFlagButton = <Localized id="shotPageAbuseButton">
         <button className="button transparent flag" title="Report this shot for abuse, spam, or other problems" onClick={ this.onClickFlag.bind(this) }></button>
@@ -408,6 +414,7 @@ class Body extends React.Component {
 
     const noText = this.props.abTests && this.props.abTests.downloadText
                    && this.props.abTests.downloadText.value === "no-download-text";
+
     return (
       <reactruntime.BodyTemplate {...this.props}>
         { renderGetFirefox ? this.renderFirefoxRequired() : null }
@@ -452,6 +459,12 @@ class Body extends React.Component {
     </reactruntime.BodyTemplate>);
   }
 
+  promoClose() {
+    this.setState({promoDialog: false});
+    // set counter to max to stop showing notification again
+    localStorage.hasSeenPromoDialog = 3;
+  }
+
   onMouseOverHighlight() {
     this.editButton.style.backgroundColor = "#ededf0";
   }
@@ -480,6 +493,10 @@ class Body extends React.Component {
       this.setState({imageEditing: true});
       sendEvent("start-annotations", "navbar");
     }
+    // Close promo dialog if user clicked edit after seeing new edit tool promo
+    if (this.props.promoDialog) {
+      this.promoClose();
+    }
   }
 
   onClickSave(dataUrl, dimensions) {
@@ -555,6 +572,7 @@ Body.propTypes = {
   enableAnnotations: PropTypes.bool,
   expireTime: PropTypes.number,
   highlightEditButton: PropTypes.bool,
+  promoDialog: PropTypes.bool,
   id: PropTypes.string,
   isExtInstalled: PropTypes.bool,
   isMobile: PropTypes.bool,

static/css/frame.scss

@@ -47,11 +47,61 @@
   }
 }
 
+.promo-panel {
+  position: absolute;
+  top: 45px;
+  right: -45px;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
+  width: 150px;
+  z-index: 999;
+  padding: 5px;
+  text-align: center;
+
+  .title {
+    font-size: 14px;
+    line-height: 14px;
+    margin: 5px;
+  }
+
+  .message {
+    font-size: 12px;
+    margin: 5px 2px;
+  }
+
+  .message-text {
+    margin: 0 2px;
+  }
+
+  a.box-close {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    cursor: pointer;
+    color: #000;
+    width: 15px;
+    height: 15px;
+    line-height: 12px;
+  }
+
+  .box-close:before {
+    content: "×";
+  }
+
+  .box-close:hover {
+    background-color: $light-hover;
+  }
+}
+
 .shot-alt-actions {
   #downloadIcon {
     margin-right: 4px;
   }
 
+  .edit-shot-button {
+    position: relative;
+  }
+
   @include respond-to("small") {
     padding-right: $grid-unit * 0.5;