feat(i18n): setup i18next extension

src/app/content/i18n.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import resources from '../locales/resources';
+
+const options = {
+  resources,
+  fallbackLng: 'fr_FR',
+  ns: ['extension'],
+  defaultNS: 'extension',
+  debug: true,
+  interpolation: {
+    escapeValue: false // react already safes from xss
+  },
+  keySeparator: '.'
+};
+
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init(options);
+
+export default i18n;

src/app/content/index.ts

@@ -11,6 +11,7 @@ if (window.location.href.match((process.env as AppEnv).PROFILES_ORIGIN)) {
 
 import { Scope } from '@sentry/browser';
 import { AppEnv, CustomWindow } from 'types';
+import './i18n';
 
 if (!(window as CustomWindow).__BULLES__CONTENT_SCRIPT_INJECTED__) {
   Logger.info('Running content script ...');

src/app/locales/extension/en_GB.json

@@ -0,0 +1 @@
+{}

src/app/locales/extension/fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "Contributions": "Contributions",
+  "Abonnements": "Test",
+  "Aide": "Aide",
+  "Mon compte": "Mon compte"
+}

src/app/locales/resources.ts

@@ -0,0 +1,15 @@
+import extensionFR from './extension/fr_FR.json';
+import extensionEN from './extension/en_GB.json';
+
+const resources = {
+  // eslint-disable-next-line @typescript-eslint/camelcase
+  fr_FR: {
+    extension: extensionFR
+  },
+  // eslint-disable-next-line @typescript-eslint/camelcase
+  en_GB: {
+    extension: extensionEN
+  }
+};
+
+export default resources;

src/components/organisms/Notification/NotificationFooter/NotificationFooter.tsx

@@ -5,21 +5,25 @@ import {
   FooterRoute,
   footerRoutes
 } from '../../../../app/content/footerRoutes';
+import { useTranslation } from 'react-i18next';
 
 interface NotificationFooterProps {
   children?: FooterRoute[];
 }
 
-const NotificationFooter = ({ children }: NotificationFooterProps) => (
-  <FooterContainer>
-    {children &&
-      children.map(route => (
-        <NavLink key={route.location as string} to={route.location}>
-          {route.element}
-        </NavLink>
-      ))}
-  </FooterContainer>
-);
+const NotificationFooter = ({ children }: NotificationFooterProps) => {
+  const { t } = useTranslation();
+  return (
+    <FooterContainer>
+      {children &&
+        children.map(route => (
+          <NavLink key={route.location as string} to={route.location}>
+            {t(route.element)}
+          </NavLink>
+        ))}
+    </FooterContainer>
+  );
+};
 
 NotificationFooter.defaultProps = {
   children: footerRoutes