diff --git a/src/components/UserProfile/MyCertificates.jsx b/src/components/UserProfile/MyCertificates.jsx
index 3ee1ded..6f5c4de 100644
--- a/src/components/UserProfile/MyCertificates.jsx
+++ b/src/components/UserProfile/MyCertificates.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
import { Row, Col, Card, CardBody, CardTitle } from 'reactstrap';
import EditControls from './elements/EditControls';
@@ -65,7 +66,11 @@ function MyCertificates({
),
empty: (
- You don’t have any certificates yet. Find a course.
+
),
static: (
diff --git a/src/i18n/i18n-loader.js b/src/i18n/i18n-loader.js
new file mode 100644
index 0000000..45b8ee6
--- /dev/null
+++ b/src/i18n/i18n-loader.js
@@ -0,0 +1,29 @@
+/**
+ * For each locale we want to support, react-intl needs 1) the locale-data, which includes
+ * information about how to format numbers, handle plurals, etc., and 2) the translations, as an
+ * object holding message id / translated string pairs. A locale string and the messages object are
+ * passed into the IntlProvider element that wraps your element hierarchy.
+ *
+ * Note that react-intl has no way of checking if the translations you give it actually have
+ * anything to do with the locale you pass it; it will happily use whatever messages object you pass
+ * in. However, if the locale data for the locale you passed into the IntlProvider was not
+ * correctly installed with addLocaleData, all of your translations will fall back to the default
+ * (in our case English), *even if you gave IntlProvider the correct messages object for that
+ * locale*.
+ */
+
+import { addLocaleData } from 'react-intl';
+
+import enLocale from 'react-intl/locale-data/en';
+
+import esLocale from 'react-intl/locale-data/es';
+import esMessages from './messages/es.json';
+
+addLocaleData([...enLocale, ...esLocale]);
+
+// temporary; set your browser language to Spanish to see es
+const getLocale = (localeStr = window.navigator.language) => localeStr.substr(0, 2);
+
+const getMessages = (locale = getLocale()) => (locale === 'es' ? esMessages : {});
+
+export { getLocale, getMessages };
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
new file mode 100644
index 0000000..1807a5b
--- /dev/null
+++ b/src/i18n/messages/es.json
@@ -0,0 +1,4 @@
+{
+ "profile.no.certificates": "Aún no tienes ningún certificado.",
+ "profile.bio.empty": "Añada una breve biografía"
+}
diff --git a/src/index.jsx b/src/index.jsx
index 369a783..a7e3449 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,11 +1,14 @@
import 'babel-polyfill';
+
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import SiteFooter from '@edx/frontend-component-footer';
import { fetchUserAccount, UserAccountApiService } from '@edx/frontend-auth';
+import { getLocale, getMessages } from './i18n/i18n-loader';
import apiClient from './data/apiClient';
import { handleTrackEvents, identifyUser } from './analytics';
import SiteHeader from './containers/SiteHeader';
@@ -24,41 +27,43 @@ class App extends Component {
render() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
}