👽 translate the suggestion tooltip

I had to force the default language to a value (I forced it to 'fr') so
that the fr resource is effectively loaded in the first place

source/components/conversation/Input.js

@@ -11,8 +11,8 @@ import SendButton from './SendButton'
 @translate()
 export default class Input extends Component {
 	static contextTypes = {
-      i18n: PropTypes.object.isRequired
-    }
+		i18n: PropTypes.object.isRequired
+	}
 	state = {
 		lastValue: ''
 	}
@@ -54,8 +54,7 @@ export default class Input extends Component {
 						<label
 							className="suffix"
 							htmlFor={'step-' + dottedName}
-							style={!active ? { color: '#888' } : { color: '#222' }}
-						>
+							style={!active ? { color: '#888' } : { color: '#222' }}>
 							{answerSuffix}
 						</label>
 					)}
@@ -97,8 +96,7 @@ export default class Input extends Component {
 				name={'inversions.' + dottedName}
 				onChange={(e, newValue, previousFieldName) =>
 					setFormValue('', previousFieldName)
-				}
-			>
+				}>
 				{inversion.inversions.map(({ name, title, dottedName }) => (
 					<option key={dottedName} value={dottedName}>
 						{title || name}
@@ -108,7 +106,8 @@ export default class Input extends Component {
 		)
 	}
 	renderSuggestions(themeColours) {
-		let { setFormValue, suggestions, inverted } = this.props.stepProps
+		let { setFormValue, suggestions, inverted } = this.props.stepProps,
+			{ i18n } = this.context
 
 		if (!suggestions || inverted) return null
 		return (
@@ -133,9 +132,10 @@ export default class Input extends Component {
 								this.state.lastValue != null &&
 								setFormValue('' + this.state.lastValue)
 							}
-							style={{ color: themeColours.textColourOnWhite }}
-						>
-							<span title="cliquez pour insérer cette suggestion">{text}</span>
+							style={{ color: themeColours.textColourOnWhite }}>
+							<span title={i18n.t('cliquez pour insérer cette suggestion')}>
+								{text}
+							</span>
 						</li>
 					))}
 				</ul>

source/i18n.js

@@ -1,4 +1,4 @@
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next'
 import i18next from 'i18next'
 import queryString from 'query-string'
 
@@ -12,16 +12,19 @@ let lang = getIframeOption('lang') ||
 
 sessionStorage['lang'] = lang
 
-i18next
-	.init({
+i18next.init(
+	{
 		debug: true,
 		lng: lang,
 		resources: {
-				en: {
-			translation: enTranslations
-		}}
-	}, (err, t) => {
-		console.log("Error from i18n load",err,t)
-	})
+			en: {
+				translation: enTranslations
+			}
+		}
+	},
+	(err, t) => {
+		console.log('Error from i18n load', err, t)
+	}
+)
 
 export default lang

source/locales/en.yaml

@@ -54,9 +54,9 @@ Calcul: Calculation formula
 Chercher une règle: Find a rule
 Entrez des mots clefs ici: Enter keywords
 noresults: No results
+cliquez pour insérer cette suggestion: click to insert this suggestion
 satisfaction: Are you satisfied with the simulator ?
 Envoyez-nous un commentaire !: Send us a comment !
 Qu'est-ce qui n'a pas été ?: What went wrong ?
 satisfaction-email-ou: To start a conversation with us, fill your email address or
 satisfaction-mailto: click here to directly write an email
-