Bug 1074720 - Display partner logo depending on the locale on first-time experience. r=mikedeboer

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

@@ -200,23 +200,31 @@ loop.panel = (function(_, mozL10n) {
 
     render: function() {
       if (this.state.seenToS == "unseen") {
+        var locale = mozL10n.getLanguage();
         var terms_of_use_url = navigator.mozLoop.getLoopCharPref('legal.ToS_url');
         var privacy_notice_url = navigator.mozLoop.getLoopCharPref('legal.privacy_url');
-        var tosHTML = __("legal_text_and_links3", {
+        var tosHTML = mozL10n.get("legal_text_and_links3", {
-          "clientShortname": __("clientShortname2"),
+          "clientShortname": mozL10n.get("clientShortname2"),
           "terms_of_use": React.renderComponentToStaticMarkup(
             React.DOM.a({href: terms_of_use_url, target: "_blank"}, 
-              __("legal_text_tos")
+              mozL10n.get("legal_text_tos")
             )
           ),
           "privacy_notice": React.renderComponentToStaticMarkup(
             React.DOM.a({href: privacy_notice_url, target: "_blank"}, 
-              __("legal_text_privacy")
+              mozL10n.get("legal_text_privacy")
             )
           ),
         });
-        return React.DOM.p({className: "terms-service", 
+        return React.DOM.div(null, 
-                  dangerouslySetInnerHTML: {__html: tosHTML}});
+          React.DOM.p({id: "powered-by"}, 
+            mozL10n.get("powered_by_beforeLogo"), 
+            React.DOM.img({id: "powered-by-logo", className: locale}), 
+            mozL10n.get("powered_by_afterLogo")
+          ), 
+          React.DOM.p({className: "terms-service", 
+             dangerouslySetInnerHTML: {__html: tosHTML}})
+         );
       } else {
         return React.DOM.div(null);
       }

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

@@ -200,23 +200,31 @@ loop.panel = (function(_, mozL10n) {
 
     render: function() {
       if (this.state.seenToS == "unseen") {
+        var locale = mozL10n.getLanguage();
         var terms_of_use_url = navigator.mozLoop.getLoopCharPref('legal.ToS_url');
         var privacy_notice_url = navigator.mozLoop.getLoopCharPref('legal.privacy_url');
-        var tosHTML = __("legal_text_and_links3", {
+        var tosHTML = mozL10n.get("legal_text_and_links3", {
-          "clientShortname": __("clientShortname2"),
+          "clientShortname": mozL10n.get("clientShortname2"),
           "terms_of_use": React.renderComponentToStaticMarkup(
             <a href={terms_of_use_url} target="_blank">
-              {__("legal_text_tos")}
+              {mozL10n.get("legal_text_tos")}
             </a>
           ),
           "privacy_notice": React.renderComponentToStaticMarkup(
             <a href={privacy_notice_url} target="_blank">
-              {__("legal_text_privacy")}
+              {mozL10n.get("legal_text_privacy")}
             </a>
           ),
         });
-        return <p className="terms-service"
+        return <div>
-                  dangerouslySetInnerHTML={{__html: tosHTML}}></p>;
+          <p id="powered-by">
+            {mozL10n.get("powered_by_beforeLogo")}
+            <img id="powered-by-logo" className={locale} />
+            {mozL10n.get("powered_by_afterLogo")}
+          </p>
+          <p className="terms-service"
+             dangerouslySetInnerHTML={{__html: tosHTML}}></p>
+         </div>;
       } else {
         return <div />;
       }

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

@@ -473,13 +473,73 @@ body[dir=rtl] .generate-url-spinner {
   color: #fff;
 }
 
+#powered-by,
 .terms-service {
   color: #888;
   text-align: center;
   font-size: .9em;
 }
 
-.terms-service a {
+#powered-by {
+  border-top: 1px solid #ccc;
+  padding-top: 1em;
+  margin-left: -14px;
+  margin-right: -14px;
+}
+
+#powered-by-logo {
+  display: inline-block;
+  margin-left: 10px;
+  margin-right: 10px;
+  vertical-align: middle;
+  background-image: url("../img/telefonica.png");
+  background-size: 72px 20px;
+  width: 72px;
+  height: 20px;
+}
+
+#powered-by-logo.en-GB,
+#powered-by-logo.de-DE {
+  background-image: url("../img/02.png");
+  background-size: 21px 20px;
+  width: 21px;
+  height: 20px;
+}
+
+#powered-by-logo.pt-BR {
+  background-image: url("../img/vivo.png");
+  background-size: 53px 26px;
+  width: 53px;
+  height: 26px;
+}
+
+#powered-by-logo[class^="es-"] {
+  background-image: url("../img/movistar.png");
+  background-size: 92px 20px;
+  width: 92px;
+  height: 20px;
+}
+
+@media (min-resolution: 2dppx) {
+  #powered-by-logo {
+    background-image: url("../img/telefonica@2x.png");
+  }
+
+  #powered-by-logo.en-GB,
+  #powered-by-logo.de-DE {
+    background-image: url("../img/02@2x.png");
+  }
+
+  #powered-by-logo.pt-BR {
+    background-image: url("../img/vivo@2x.png");
+  }
+
+  #powered-by-logo[class^="es-"] {
+    background-image: url("../img/movistar@2x.png");
+  }
+}
+
+.terms-service > a {
   color: #00caee;
 }
 

browser/components/loop/jar.mn

@@ -55,6 +55,14 @@ browser.jar:
   content/browser/loop/shared/img/icons-10x10.svg               (content/shared/img/icons-10x10.svg)
   content/browser/loop/shared/img/icons-14x14.svg               (content/shared/img/icons-14x14.svg)
   content/browser/loop/shared/img/icons-16x16.svg               (content/shared/img/icons-16x16.svg)
+  content/browser/loop/shared/img/movistar.png                  (content/shared/img/movistar.png)
+  content/browser/loop/shared/img/movistar@2x.png               (content/shared/img/movistar@2x.png)
+  content/browser/loop/shared/img/vivo.png                      (content/shared/img/vivo.png)
+  content/browser/loop/shared/img/vivo@2x.png                   (content/shared/img/vivo@2x.png)
+  content/browser/loop/shared/img/02.png                        (content/shared/img/02.png)
+  content/browser/loop/shared/img/02@2x.png                     (content/shared/img/02@2x.png)
+  content/browser/loop/shared/img/telefonica.png                (content/shared/img/telefonica.png)
+  content/browser/loop/shared/img/telefonica@2x.png             (content/shared/img/telefonica@2x.png)
 
   # Shared scripts
   content/browser/loop/shared/js/actions.js           (content/shared/js/actions.js)