Convert MainInstallButton to fluent-react

frontend/src/app/components/MainInstallButton.js

@@ -1,8 +1,9 @@
-import React from 'react';
 import classnames from 'classnames';
-import { VariantTests, VariantTestCase, VariantTestDefault } from './VariantTests';
+import { Localized } from 'fluent-react';
+import React from 'react';
 
 import LayoutWrapper from './LayoutWrapper';
+import { VariantTests, VariantTestCase, VariantTestDefault } from './VariantTests';
 
 import config from '../config';
 
@@ -38,17 +39,24 @@ export default class MainInstallButton extends React.Component {
     return (
       <LayoutWrapper flexModifier="column-center-start-breaking">
         {(isMinFirefox && !isMobile) ? this.renderInstallButton(isInstalling, hasAddon) : this.renderAltButton(isFirefox, isMobile) }
-        {isMinFirefox && !isMobile && <p data-l10n-id="landingLegalNotice" className="legal-information">By proceeding,
-          you agree to the <a href="/terms">Terms of Use</a> and <a href="/privacy">Privacy Notice</a> of Test Pilot.</p>}
+        {isMinFirefox && !isMobile && <Localized id="landingLegalNotice">
+          <p className="legal-information">
+            By proceeding, you agree to the <a href="/terms">Terms of Use</a> and <a href="/privacy">Privacy Notice</a> of Test Pilot.
+          </p>
+        </Localized>}
       </LayoutWrapper>
     );
   }
 
   renderOneClickInstallButton(title) {
     return (
       <div className="default-btn-msg one-click-text">
-        <span className="minor-cta" data-l10n-id="oneClickInstallMinorCta" >Install Test Pilot &amp;</span>
-        <span className="major-cta" data-l10n-id="oneClickInstallMajorCta" data-l10n-args={ JSON.stringify({ title: title }) }></span>
+        <Localized id="oneClickInstallMinorCta">
+          <span className="minor-cta">Install Test Pilot &amp;</span>
+        </Localized>
+        <Localized id="oneClickInstallMajorCta" $title={title}>
+          <span className="major-cta"></span>
+        </Localized>
       </div>
     );
   }
@@ -59,17 +67,23 @@ export default class MainInstallButton extends React.Component {
     if (experimentTitle) {
       installButton = this.renderOneClickInstallButton(experimentTitle);
     } else {
-      installButton = <span className="default-btn-msg" data-l10n-id="landingInstallButton">
-        Install the Test Pilot Add-on
-      </span>;
+      installButton = <Localized id="landingInstallButton">
+        <span className="default-btn-msg">
+          Install the Test Pilot Add-on
+        </span>
+      </Localized>;
     }
     const makeInstallButton = (extraClass = '') => {
       return <button onClick={e => this.install(e)}
         className={classnames(`button extra-large primary install ${extraClass}`, { 'state-change': isInstalling })}>
-        {hasAddon && <span className="progress-btn-msg" data-l10n-id="landingInstalledButton">Installed</span>}
+        {hasAddon && <Localized id="landingInstalledButton">
+          <span className="progress-btn-msg">Installed</span>
+        </Localized>}
         {!hasAddon && !isInstalling && installButton}
         {!hasAddon && isInstalling &&
-          <span className="progress-btn-msg" data-l10n-id="landingInstallingButton">Installing...</span>}
+          <Localized id="landingInstallingButton">
+            <span className="progress-btn-msg">Installing...</span>
+          </Localized>}
         <div className="state-change-inner"></div>
       </button>;
     };
@@ -88,16 +102,22 @@ export default class MainInstallButton extends React.Component {
     if (isFirefox && isMobile) {
       return (
         <div>
-          <span data-l10n-id="landingRequiresDesktop">Test Pilot requires Firefox for Desktop on Windows, Mac or Linux</span>
+          <Localized id="landingRequiresDesktop">
+            <span>Test Pilot requires Firefox for Desktop on Windows, Mac or Linux</span>
+          </Localized>
         </div>
       );
     }
     return (
       <div>
           {!isFirefox ? (
-              <span data-l10n-id="landingDownloadFirefoxDesc" className="parens">(Test Pilot is available for Firefox on Windows, OS X and Linux)</span>
+              <Localized id="landingDownloadFirefoxDesc">
+                <span className="parens">(Test Pilot is available for Firefox on Windows, OS X and Linux)</span>
+              </Localized>
             ) : (
-              <span className="parens" data-l10n-id="landingUpgradeDesc2" data-l10n-args={JSON.stringify({ version: config.minFirefoxVersion })}>Test Pilot requires Firefox { config.minFirefoxVersion } or higher.</span>
+              <Localized id="landingUpgradeDesc2" $version={config.minFirefoxVersion}>
+                <span className="parens">Test Pilot requires Firefox { config.minFirefoxVersion } or higher.</span>
+              </Localized>
             )
           }
           {!isMobile && <a href="https://www.mozilla.org/firefox" className="button primary download-firefox">
@@ -106,12 +126,18 @@ export default class MainInstallButton extends React.Component {
             </div>
             <div className="button-copy">
               {(!isFirefox) ? (
-                  <div data-l10n-id="landingDownloadFirefoxTitle" className="button-title">Firefox</div>
+                  <Localized id="landingDownloadFirefoxTitle">
+                    <div className="button-title">Firefox</div>
+                  </Localized>
                 ) : (
-                  <div data-l10n-id="landingUpgradeFirefoxTitle" className="button-title">Upgrade Firefox</div>
+                  <Localized id="landingUpgradeFirefoxTitle">
+                    <div className="button-title">Upgrade Firefox</div>
+                  </Localized>
                 )
               }
-              <div data-l10n-id="landingDownloadFirefoxSubTitle" className="button-description">Free Download</div>
+              <Localized id="landingDownloadFirefoxSubTitle">
+                <div className="button-description">Free Download</div>
+              </Localized>
             </div>
           </a>}
       </div>