Step 1 get it working

frontend/src/app/actions/localizations.js

@@ -0,0 +1,21 @@
+// @flow
+
+import type {
+  Localizations,
+  SetLocalizationsAction
+} from '../reducers/localizations.js';
+
+export function updateExperiment(addonID: string, data: Experiment): UpdateExperimentAction {
+  return {
+    type: 'UPDATE_EXPERIMENT',
+    payload: { addonID, data }
+  };
+}
+
+export function setLocalizations(localizations: Localizations): SetLocalizationsAction {
+  console.log('setLocalizations', localizations);
+  return {
+    type: 'SET_LOCALIZATIONS',
+    payload: localizations
+  };
+}

frontend/src/app/components/View.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import ReactDOMFactories from 'react/lib/ReactDOMFactories';
 import Symbol from 'es-symbol';
+import { Localized } from 'fluent-react';
 
 import Copter from '../components/Copter';
 import Footer from '../components/Footer';
@@ -136,6 +137,11 @@ export default class View extends React.Component {
     return (
       <section className={this.makeClassNames(setWarningLayout)}>
         {this.renderHeader()}
+        <Localized id="pageTitleDefault">
+          <h2 className="banner__subtitle">
+            Firefox Test Pilot
+          </h2>
+        </Localized>
         {upgradeWarning !== null ? upgradeWarning : this.renderChildren()}
         {upgradeWarning !== null ? null : this.renderNewsletterFooter()}
         {this.renderFooter()}

frontend/src/app/containers/App.js

@@ -1,4 +1,6 @@
 /* global ga */
+import { MessageContext } from 'fluent';
+import { LocalizationProvider } from 'fluent-react';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -13,10 +15,12 @@ import { getChosenTest } from '../reducers/varianttests';
 import experimentSelector from '../selectors/experiment';
 import { uninstallAddon, installAddon, enableExperiment, disableExperiment, pollAddon } from '../lib/InstallManager';
 import { fetchUserCounts } from '../actions/experiments';
+import { setLocalizations } from '../actions/localizations';
 import { chooseTests } from '../actions/varianttests';
 import addonActions from '../actions/addon';
 import newsletterFormActions from '../actions/newsletter-form';
 import RestartPage from '../containers/RestartPage';
+import Loading from '../components/Loading';
 import { isFirefox, isMinFirefoxVersion, isMobile } from '../lib/utils';
 import newsUpdatesSelector from '../selectors/news';
 import config from '../config';
@@ -100,14 +104,57 @@ class App extends Component {
       }
     });
     this.measurePageview();
+
+    const langs = {};
+
+    function addLang(lang, response) {
+      if (response.ok) {
+        response.text().then(data => {
+          langs[lang] = `${langs[lang] || ''}${data}
+`;
+        });
+      }
+    }
+
+    Promise.all(navigator.languages.map(language =>
+      Promise.all(
+        [
+          fetch(`/static/locales/${language}/app.ftl`).then(response => addLang(language, response)),
+          fetch(`/static/locales/${language}/experiments.ftl`).then(response => addLang(language, response))
+        ]
+      )
+    )).then(() => {
+      console.log('all done', langs);
+      this.props.setLocalizations(langs)
+    });
   }
 
   render() {
     const { restart } = this.props.addon;
     if (restart.isRequired) {
       return <RestartPage {...this.props}/>;
     }
-    return React.cloneElement(this.props.children, this.props);
+
+    function* generateMessages(languages, localizations) {
+      console.log('generateMessages', languages, localizations);
+      for (const lang of languages) {
+        const cx = new MessageContext(lang);
+        cx.addMessages(localizations[lang]);
+        yield cx;
+      }
+    }
+
+    if (Object.keys(this.props.localizations).length === 0) {
+      return <Loading {...this.props} />;
+    }
+    console.log('asdfasdf', this.props.localizations.length, this.props.localizations);
+    console.log('localz', navigator.languages);
+    return <LocalizationProvider messages={ generateMessages(
+      navigator.languages,
+      this.props.localizations
+    ) }>
+      { React.cloneElement(this.props.children, this.props) }
+    </LocalizationProvider>;
   }
 }
 
@@ -133,6 +180,7 @@ function sendToGA(type, dataIn) {
 const mapStateToProps = state => ({
   addon: state.addon,
   experiments: experimentSelector(state),
+  localizations: state.localizations,
   newsUpdates: newsUpdatesSelector(state),
   slug: state.experiments.slug,
   getExperimentBySlug: slug =>
@@ -178,7 +226,9 @@ const mapDispatchToProps = dispatch => ({
       dispatch(newsletterFormActions.newsletterFormSetPrivacy(privacy)),
     subscribe: (email) =>
       dispatch(newsletterFormActions.newsletterFormSubscribe(dispatch, email, '' + window.location))
-  }
+  },
+  setLocalizations: localizations =>
+    dispatch(setLocalizations(localizations))
 });
 
 

frontend/src/app/reducers/localizations.js

@@ -0,0 +1,37 @@
+// @flow
+
+export type Localizations = {
+  [language: string]: string
+};
+
+function defaultState(): ExperimentsState {
+  return {
+  };
+}
+
+export type SetLocalizationsAction = {
+  type: 'SET_LOCALIZATIONS',
+  payload: Localizations
+};
+
+function setLocalizations(
+  state: Localizations,
+  action: SetLocalizationsAction
+): Localizations {
+  return action.payload;
+}
+
+export default function experimentsReducer(
+  state: ?Localizations,
+  action: SetLocalizationsAction
+): Localizations {
+  if (!state) {
+    return defaultState();
+  }
+  switch (action.type) {
+    case 'SET_LOCALIZATIONS':
+      return setLocalizations(state, action);
+    default:
+      return state;
+  }
+}

frontend/src/app/store.js

@@ -4,6 +4,7 @@ import promise from 'redux-promise';
 import addonReducer from './reducers/addon';
 import browserReducer from './reducers/browser';
 import experimentsReducer from './reducers/experiments';
+import localizationsReducer from './reducers/localizations';
 import newsletterFormReducer from './reducers/newsletter-form';
 import varianttestsReducer from './reducers/varianttests';
 import newsReducer from './reducers/news';
@@ -15,6 +16,7 @@ export const reducers = combineReducers({
   addon: addonReducer,
   browser: browserReducer,
   experiments: experimentsReducer,
+  localizations: localizationsReducer,
   newsletterForm: newsletterFormReducer,
   varianttests: varianttestsReducer,
   news: newsReducer

gulpfile.babel.js

@@ -1,4 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies*/
+require('babel-polyfill');
+
 const gulp = require('gulp');
 const config = require('./frontend/config.js');
 

package.json

@@ -19,6 +19,8 @@
     "domready": "1.0.8",
     "es-symbol": "1.1.2",
     "es6-promise": "4.1.0",
+    "fluent": "0.4.1",
+    "fluent-react": "0.4.0",
     "html-react-parser": "0.3.3",
     "isomorphic-fetch": "2.2.1",
     "js-cookie": "2.1.4",