Bug 1000772: Allow Loop users to send a call-back URL by email. r=nperriault

browser/components/loop/content/js/panel.js

@@ -203,6 +203,13 @@ loop.panel = (function(_, mozL10n) {
       }
     },
 
+    _generateMailto: function() {
+      return encodeURI([
+        "mailto:?subject=" + __("share_email_subject") + "&",
+        "body=" + __("share_email_body", {callUrl: this.state.callUrl})
+      ].join(""));
+    },
+
     render: function() {
       // XXX setting elem value from a state (in the callUrl input)
       // makes it immutable ie read only but that is fine in our case.
@@ -217,7 +224,13 @@ loop.panel = (function(_, mozL10n) {
         PanelLayout({summary: __("share_link_header_text")}, 
           React.DOM.div({className: "invite"}, 
             React.DOM.input({type: "url", value: this.state.callUrl, readOnly: "true", 
-                   className: cx(inputCSSClass)})
+                   className: cx(inputCSSClass)}), 
+          React.DOM.a({className: cx({btn: true, hide: !this.state.callUrl}), 
+             href: this._generateMailto()}, 
+           React.DOM.span(null, 
+            __("share_button")
+           )
+          )
           )
         )
       );

browser/components/loop/content/js/panel.jsx

@@ -203,6 +203,13 @@ loop.panel = (function(_, mozL10n) {
       }
     },
 
+    _generateMailto: function() {
+      return encodeURI([
+        "mailto:?subject=" + __("share_email_subject") + "&",
+        "body=" + __("share_email_body", {callUrl: this.state.callUrl})
+      ].join(""));
+    },
+
     render: function() {
       // XXX setting elem value from a state (in the callUrl input)
       // makes it immutable ie read only but that is fine in our case.
@@ -218,6 +225,12 @@ loop.panel = (function(_, mozL10n) {
           <div className="invite">
             <input type="url" value={this.state.callUrl} readOnly="true"
                    className={cx(inputCSSClass)} />
+          <a className={cx({btn: true, hide: !this.state.callUrl})}
+             href={this._generateMailto()}>
+           <span>
+            {__("share_button")}
+           </span>
+          </a>
           </div>
         </PanelLayout>
       );

browser/components/loop/content/shared/css/common.css

@@ -58,7 +58,13 @@ h1, h2, h3 {
 }
 
 .hide {
-  display: none;
+  /**
+   * Force the display: none as it can conflict with other display.
+   * You usually want to avoid !important statements as much as
+   * possible. In this case, it makes sense as it's unlikely we want a
+   * class to undo the hide feature.
+   */
+  display: none !important;
 }
 
 .visually-hidden {

browser/components/loop/content/shared/css/panel.css

@@ -10,7 +10,7 @@
 }
 
 .component-spacer {
-  padding: 5px 10px;
+  padding: 5px 10px 10px 10px;
 }
 
 .spacer {
@@ -75,6 +75,28 @@
   padding-top: 6px;
 }
 
+.share .action .btn {
+  background-color: #0096DD;
+  border: 1px solid #0095DD;
+  color: #fff;
+  width: 50%;
+  height: 26px;
+  text-align: center;
+  font-family: 'Lucida Grande', sans-serif;
+  margin-top: 10px;
+}
+
+.share .action .btn:hover {
+  background-color: #008ACB;
+  border: 1px solid #008ACB;
+}
+
+.share .action .btn span {
+  margin-top: 2px;
+  font-size: 12px;
+  display: inline-block;
+}
+
 /* Specific cases */
 
 .panel #messages .alert {

browser/components/loop/test/desktop-local/panel_test.js

@@ -247,6 +247,21 @@ describe("loop.panel", function() {
 
     describe("Rendering the component should generate a call URL", function() {
 
+      beforeEach(function() {
+        document.mozL10n.initialize({
+          getStrings: function(key) {
+            var text;
+
+            if (key === "share_email_subject")
+              text = "email-subject";
+            else if (key === "share_email_body")
+              text = "{{callUrl}}";
+
+            return JSON.stringify({textContent: text});
+          }
+        });
+      });
+
       it("should make a request to requestCallUrl", function() {
         sandbox.stub(fakeClient, "requestCallUrl");
         var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
@@ -290,6 +305,20 @@ describe("loop.panel", function() {
         sinon.assert.calledOnce(view.props.notifier.clear);
       });
 
+      it("should display a share button for email", function() {
+        fakeClient.requestCallUrl = sandbox.stub();
+        var mailto = 'mailto:?subject=email-subject&body=http://example.com';
+        var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          notifier: notifier,
+          client: fakeClient
+        }));
+        view.setState({pending: false, callUrl: "http://example.com"});
+
+        TestUtils.findRenderedDOMComponentWithTag(view, "a");
+        var shareButton = view.getDOMNode().querySelector("a.btn");
+        expect(shareButton.href).to.equal(encodeURI(mailto));
+      });
+
       it("should notify the user when the operation failed", function() {
         fakeClient.requestCallUrl = function(_, cb) {
           cb("fake error");

browser/locales/en-US/chrome/browser/loop/loop.properties

@@ -33,6 +33,7 @@ cannot_start_call_session_not_ready=Can't start call, session is not ready.
 network_disconnected=The network connection terminated abruptly.
 
 connection_error_see_console_notification=Call failed; see console for details.
+
 ## LOCALIZATION NOTE (legal_text_and_links2): In this item, don't translate the
 ## parts between {{..}} because these will be replaced with links with the labels
 ## from legal_text_tos and legal_text_privacy.
@@ -54,3 +55,10 @@ feedback_back_button=Back
 ## LOCALIZATION NOTE (feedback_window_will_close_in): In this item, don't
 ## translate the part between {{..}}
 feedback_window_will_close_in=This window will close in {{countdown}} seconds
+
+## LOCALIZATION NOTE (share_email_body): In this item, don't translate the
+## part between {{..}} and let the \r\n\r\n part
+share_email_subject=Loop invitation to chat
+share_email_body=Please click that link to call me back:\r\n\r\n{{callUrl}}
+share_button=Email
+