From 7e2a4085a7c2a3c617c60bed9709cd5ae3f0ca32 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Sun, 10 Nov 2019 16:57:44 +0100
Subject: [PATCH] Poursuite de la migration TypeScript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Utilisation de la version stable de TypeScript 3.7

* Début de migration du State Redux. Plutôt que de redéfinir les types
  en doublon par rapport aux actions et reducers, on utilise les valeurs
  retournées par ces fonctions comme source pour les types globaux.

* Modification de tsconfig pour meilleur typage dans VS Code

* Meilleur typage de l'environnement : suppression de @types/node qui
  était trop large (contient tout l'environnement serveur), et
  remplacement par @types/webpack-env. Par ailleurs typage des variables
  d'environnement utilisées.

* Début de migration de l'économie collaborative

* Migration de nombreux composants UI

* Mise à jour de dépendances pour récupérer un meilleur typage

* Ajout d'un hook pour configurer les simulateurs

* Suppression du higher-order component "withSitePaths", on utilise
  systématiquement le hook useContext.

L'essentiel de l'application est maintenant migré, reste le moteur !
---
 package.json                                  |  15 +-
 source/{Provider.js => Provider.tsx}          |  37 +-
 source/Tracker.ts                             |  19 +-
 source/actions/actions.js                     |  98 -----
 source/actions/actions.ts                     | 157 +++++++
 .../companyCreationChecklistActions.js        |  21 -
 .../companyCreationChecklistActions.ts        |  29 ++
 source/actions/existingCompanyActions.js      |   2 +-
 ...listAction.js => hiringChecklistAction.ts} |  12 +-
 source/api/{sirene.js => sirene.ts}           |  15 +-
 source/components/Banner.js                   |  30 --
 source/components/Banner.tsx                  |  29 ++
 .../{CompanyDetails.js => CompanyDetails.tsx} |   4 +-
 .../{CurrencyInput.js => CurrencyInput.tsx}   |  21 +-
 .../{FeedbackForm.js => FeedbackForm.tsx}     |  26 +-
 source/components/Feedback/PageFeedback.js    | 170 --------
 source/components/Feedback/PageFeedback.tsx   | 144 +++++++
 .../{FindCompany.js => FindCompany.tsx}       |   7 +-
 .../{LegalNotice.js => LegalNotice.tsx}       |   0
 .../{Mecanisms.js => Mecanisms.tsx}           |   0
 ...tterRegister.js => NewsletterRegister.tsx} |   5 +-
 source/components/{Overlay.js => Overlay.tsx} |  26 +-
 ...PercentageField.js => PercentageField.tsx} |   0
 .../{PeriodSwitch.js => PeriodSwitch.tsx}     |   4 +-
 source/components/PreviousSimulationBanner.js |  54 ---
 .../components/PreviousSimulationBanner.tsx   |  36 ++
 source/components/QuickLinks.js               |  72 ----
 source/components/QuickLinks.tsx              |  52 +++
 source/components/RuleLink.tsx                |   9 +-
 .../components/{RulePage.js => RulePage.tsx}  |  38 +-
 ...ryExplanation.js => SalaryExplanation.tsx} |  21 +-
 ...meComparaison.js => SchemeComparaison.tsx} | 185 ++++----
 source/components/SearchBar.js                |  18 +-
 .../{SearchButton.js => SearchButton.tsx}     |  21 +-
 ...lateurWarning.js => SimulateurWarning.tsx} |  20 +-
 .../{Simulation.js => Simulation.tsx}         |  21 +-
 ...StackedBarChart.js => StackedBarChart.tsx} |  17 +-
 ...TargetSelection.js => TargetSelection.tsx} |  63 ++-
 source/components/{Targets.js => Targets.tsx} |  19 +-
 source/components/{Value.js => Value.tsx}     |  20 +-
 source/components/conversation/Aide.js        |  64 ---
 source/components/conversation/Aide.tsx       |  62 +++
 .../{Conversation.js => Conversation.tsx}     |  57 ++-
 .../{Explicable.js => Explicable.tsx}         |  40 +-
 ...eAnswersButton.js => SeeAnswersButton.tsx} |  15 +-
 .../{SendButton.js => SendButton.tsx}         |  12 +-
 source/components/index.js                    |   6 -
 source/components/index.tsx                   |   8 +
 source/components/rule/Namespace.tsx          |  11 +-
 source/components/rule/References.tsx         |   4 +-
 source/components/rule/Rule.js                |  32 +-
 source/components/rule/RuleSource.tsx         |   5 +-
 .../simulationConfigs/useSimulationConfig.ts  |  16 +
 .../simulationConfigs/withSimulationConfig.js |  28 --
 source/components/ui/AnimatedTargetValue.tsx  |  12 +-
 source/components/ui/Checklist/index.tsx      |   7 +-
 source/components/ui/Progress.tsx             |  12 +-
 source/components/ui/SocialIcon.tsx           |  30 +-
 source/components/utils/markdown.tsx          |   6 +-
 source/components/utils/persistState.ts       |   5 +-
 ...secting.js => useDisplayOnIntersecting.ts} |  10 +-
 source/components/utils/withColours.tsx       |   2 +-
 source/components/utils/withSitePaths.tsx     |  28 +-
 source/components/utils/withTracker.tsx       |  18 +-
 source/engine/{format.js => format.ts}        |  26 +-
 .../mecanismViews/{common.js => common.tsx}   |  51 ++-
 source/engine/{units.js => units.ts}          |  35 +-
 source/i18n.ts                                |   2 +
 ...nceAppReducer.js => inFranceAppReducer.ts} |  63 +--
 .../{rootReducer.js => rootReducer.ts}        | 163 ++++---
 .../{storageReducer.js => storageReducer.ts}  |   7 +-
 ...nalyseSelectors.js => analyseSelectors.ts} |  88 ++--
 ...Selectors.js => companyStatusSelectors.ts} |  73 ++--
 ...gressSelectors.js => progressSelectors.ts} |   3 +-
 source/selectors/storageSelectors.js          |  23 -
 source/selectors/storageSelectors.ts          |  33 ++
 source/server.js                              |   2 +-
 source/sites/mon-entreprise.fr/entry.en.tsx   |   1 -
 source/sites/mon-entreprise.fr/history.js     |   0
 .../layout/Footer/Footer.tsx                  |   7 +-
 .../layout/Footer/Privacy.tsx                 |   2 +-
 .../middlewares/trackSimulatorActions.ts      |   2 +-
 .../pages/Créer/AfterRegistration.tsx         |  11 +-
 .../pages/Créer/CreationChecklist.tsx         |  48 ++-
 .../Créer/GuideStatut/PickLegalStatus.tsx     |  17 +-
 .../Créer/GuideStatut/PreviousAnswers.tsx     |   9 +-
 .../Créer/GuideStatut/SoleProprietorship.tsx  |  15 +-
 .../mon-entreprise.fr/pages/Créer/Home.tsx    |  23 +-
 .../pages/Créer/StatutDescription.tsx         |   2 +-
 .../mon-entreprise.fr/pages/Dev/Couleur.tsx   |  13 +-
 .../pages/Dev/IntegrationTest.tsx             |  11 +-
 .../mon-entreprise.fr/pages/Dev/Sitemap.tsx   |  37 +-
 .../pages/Documentation/ExampleSituations.tsx |  17 +-
 .../pages/Gérer/Embaucher.tsx                 | 405 +++++++++---------
 .../mon-entreprise.fr/pages/Gérer/Home.tsx    | 146 ++++---
 .../pages/Gérer/SchemeSelection.tsx           |  14 +-
 .../mon-entreprise.fr/pages/Gérer/index.tsx   |   3 +-
 .../pages/Iframes/IframeFooter.tsx            |   7 +-
 .../pages/Iframes/SimulateurEmbauche.tsx      |  10 +-
 .../pages/Landing/Landing.tsx                 |  14 +-
 .../pages/Simulateurs/AssimiléSalarié.tsx     |  26 +-
 .../pages/Simulateurs/AutoEntrepreneur.tsx    |   8 +-
 .../pages/Simulateurs/Home.tsx                | 218 +++++-----
 .../pages/Simulateurs/Indépendant.tsx         |   9 +-
 .../pages/Simulateurs/Salarié.tsx             |  27 +-
 .../pages/Simulateurs/index.tsx               | 125 +++---
 .../pages/integration/Library.tsx             |  15 +-
 .../pages/integration/Options.tsx             |   3 +-
 .../pages/integration/iframe.css              |   1 -
 .../{Activité.js => Activité.tsx}             |  47 +-
 .../ActivitésSelection.js                     | 160 -------
 .../ActivitésSelection.tsx                    | 199 +++++++++
 ...xonération.js => ExceptionsExonération.tsx} |  24 +-
 .../{NextButton.js => NextButton.tsx}         |  22 +-
 .../{VotreSituation.js => VotreSituation.tsx} |  99 +++--
 .../pages/ÉconomieCollaborative/actions.js    |  22 -
 .../pages/ÉconomieCollaborative/actions.ts    |  32 ++
 .../{activitésData.js => activitésData.ts}    |   2 +-
 .../{index.js => index.tsx}                   |   0
 .../{reducer.js => reducer.ts}                |  24 +-
 source/sites/mon-entreprise.fr/sitePaths.ts   |  34 +-
 source/types/ActionsTypes.js                  |  40 --
 source/types/Analysis.js                      |   4 -
 source/types/CDD.js                           |  26 --
 source/types/ContratSalarié.js                |  18 -
 source/types/Entreprise.js                    |   5 -
 source/types/RegleTypes.ts                    |   4 -
 source/types/Situation.ts                     |  10 -
 source/types/State.ts                         |  26 --
 source/types/app-env.d.ts                     |   8 +
 source/types/companyCreationChecklistTypes.js |  16 -
 source/types/{typescript => }/css-prop.d.ts   |   0
 source/types/hiringChecklistTypes.js          |  13 -
 .../types/{typescript => }/import-images.d.ts |   0
 source/types/{typescript => }/import-yaml.ts  |   0
 .../{typescript => }/react-easy-emoji.d.ts    |   0
 source/types/rule.ts                          |  16 +
 source/types/shared.js                        |   2 -
 source/utils.ts                               |   8 +-
 tsconfig.json                                 |  13 +-
 yarn.lock                                     |  85 ++--
 141 files changed, 2501 insertions(+), 2300 deletions(-)
 rename source/{Provider.js => Provider.tsx} (76%)
 delete mode 100644 source/actions/actions.js
 create mode 100644 source/actions/actions.ts
 delete mode 100644 source/actions/companyCreationChecklistActions.js
 create mode 100644 source/actions/companyCreationChecklistActions.ts
 rename source/actions/{hiringChecklistAction.js => hiringChecklistAction.ts} (50%)
 rename source/api/{sirene.js => sirene.ts} (69%)
 delete mode 100644 source/components/Banner.js
 create mode 100644 source/components/Banner.tsx
 rename source/components/{CompanyDetails.js => CompanyDetails.tsx} (89%)
 rename source/components/CurrencyInput/{CurrencyInput.js => CurrencyInput.tsx} (83%)
 rename source/components/Feedback/{FeedbackForm.js => FeedbackForm.tsx} (77%)
 delete mode 100644 source/components/Feedback/PageFeedback.js
 create mode 100644 source/components/Feedback/PageFeedback.tsx
 rename source/components/{FindCompany.js => FindCompany.tsx} (93%)
 rename source/components/{LegalNotice.js => LegalNotice.tsx} (100%)
 rename source/components/{Mecanisms.js => Mecanisms.tsx} (100%)
 rename source/components/{NewsletterRegister.js => NewsletterRegister.tsx} (96%)
 rename source/components/{Overlay.js => Overlay.tsx} (68%)
 rename source/components/{PercentageField.js => PercentageField.tsx} (100%)
 rename source/components/{PeriodSwitch.js => PeriodSwitch.tsx} (88%)
 delete mode 100644 source/components/PreviousSimulationBanner.js
 create mode 100644 source/components/PreviousSimulationBanner.tsx
 delete mode 100644 source/components/QuickLinks.js
 create mode 100644 source/components/QuickLinks.tsx
 rename source/components/{RulePage.js => RulePage.tsx} (64%)
 rename source/components/{SalaryExplanation.js => SalaryExplanation.tsx} (88%)
 rename source/components/{SchemeComparaison.js => SchemeComparaison.tsx} (86%)
 rename source/components/{SearchButton.js => SearchButton.tsx} (75%)
 rename source/components/{SimulateurWarning.js => SimulateurWarning.tsx} (87%)
 rename source/components/{Simulation.js => Simulation.tsx} (84%)
 rename source/components/{StackedBarChart.js => StackedBarChart.tsx} (89%)
 rename source/components/{TargetSelection.js => TargetSelection.tsx} (84%)
 rename source/components/{Targets.js => Targets.tsx} (70%)
 rename source/components/{Value.js => Value.tsx} (78%)
 delete mode 100644 source/components/conversation/Aide.js
 create mode 100644 source/components/conversation/Aide.tsx
 rename source/components/conversation/{Conversation.js => Conversation.tsx} (60%)
 rename source/components/conversation/{Explicable.js => Explicable.tsx} (55%)
 rename source/components/conversation/{SeeAnswersButton.js => SeeAnswersButton.tsx} (59%)
 rename source/components/conversation/{SendButton.js => SendButton.tsx} (70%)
 delete mode 100644 source/components/index.js
 create mode 100644 source/components/index.tsx
 create mode 100644 source/components/simulationConfigs/useSimulationConfig.ts
 delete mode 100644 source/components/simulationConfigs/withSimulationConfig.js
 rename source/components/utils/{useDisplayOnIntersecting.js => useDisplayOnIntersecting.ts} (70%)
 rename source/engine/{format.js => format.ts} (77%)
 rename source/engine/mecanismViews/{common.js => common.tsx} (83%)
 rename source/engine/{units.js => units.ts} (75%)
 rename source/reducers/{inFranceAppReducer.js => inFranceAppReducer.ts} (77%)
 rename source/reducers/{rootReducer.js => rootReducer.ts} (56%)
 rename source/reducers/{storageReducer.js => storageReducer.ts} (69%)
 rename source/selectors/{analyseSelectors.js => analyseSelectors.ts} (79%)
 rename source/selectors/{companyStatusSelectors.js => companyStatusSelectors.ts} (74%)
 rename source/selectors/{progressSelectors.js => progressSelectors.ts} (70%)
 delete mode 100644 source/selectors/storageSelectors.js
 create mode 100644 source/selectors/storageSelectors.ts
 delete mode 100644 source/sites/mon-entreprise.fr/history.js
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{Activité.js => Activité.tsx} (81%)
 delete mode 100644 source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.js
 create mode 100644 source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.tsx
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{ExceptionsExonération.js => ExceptionsExonération.tsx} (56%)
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{NextButton.js => NextButton.tsx} (69%)
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{VotreSituation.js => VotreSituation.tsx} (64%)
 delete mode 100644 source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.js
 create mode 100644 source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.ts
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{activitésData.js => activitésData.ts} (95%)
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{index.js => index.tsx} (100%)
 rename source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/{reducer.js => reducer.ts} (71%)
 delete mode 100644 source/types/ActionsTypes.js
 delete mode 100644 source/types/Analysis.js
 delete mode 100644 source/types/CDD.js
 delete mode 100644 source/types/ContratSalarié.js
 delete mode 100644 source/types/Entreprise.js
 delete mode 100644 source/types/RegleTypes.ts
 delete mode 100644 source/types/Situation.ts
 delete mode 100644 source/types/State.ts
 create mode 100644 source/types/app-env.d.ts
 delete mode 100644 source/types/companyCreationChecklistTypes.js
 rename source/types/{typescript => }/css-prop.d.ts (100%)
 delete mode 100644 source/types/hiringChecklistTypes.js
 rename source/types/{typescript => }/import-images.d.ts (100%)
 rename source/types/{typescript => }/import-yaml.ts (100%)
 rename source/types/{typescript => }/react-easy-emoji.d.ts (100%)
 create mode 100644 source/types/rule.ts
 delete mode 100644 source/types/shared.js

diff --git a/package.json b/package.json
index 859198eb0..70b6470cc 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
 		"react-i18next": "^11.0.0",
 		"react-loading-skeleton": "^1.1.2",
 		"react-markdown": "^4.1.0",
-		"react-number-format": "^4.0.8",
+		"react-number-format": "^4.3.1",
 		"react-redux": "^7.0.3",
 		"react-router": "^5.1.1",
 		"react-router-dom": "^5.1.1",
@@ -53,8 +53,8 @@
 		"react-transition-group": "^2.2.1",
 		"react-virtualized": "^9.20.0",
 		"react-virtualized-select": "^3.1.3",
-		"reduce-reducers": "^0.1.2",
-		"redux": "^3.7.2",
+		"reduce-reducers": "^1.0.4",
+		"redux": "^4.0.4",
 		"redux-thunk": "^2.3.0",
 		"regenerator-runtime": "^0.13.3",
 		"reselect": "^4.0.0",
@@ -103,17 +103,20 @@
 		"@babel/preset-flow": "^7.0.0-beta.51",
 		"@babel/preset-react": "^7.0.0",
 		"@babel/preset-typescript": "^7.6.0",
+		"@types/classnames": "^2.2.9",
 		"@types/iframe-resizer": "^3.5.7",
-		"@types/node": "^12.11.7",
 		"@types/ramda": "^0.26.33",
+		"@types/raven-for-redux": "^1.1.1",
 		"@types/react": "^16.9.11",
 		"@types/react-addons-css-transition-group": "^15.0.5",
+		"@types/react-color": "^3.0.1",
 		"@types/react-dom": "^16.9.3",
 		"@types/react-helmet": "^5.0.13",
 		"@types/react-redux": "^7.1.5",
 		"@types/react-router": "^5.1.2",
 		"@types/react-router-dom": "^5.1.0",
 		"@types/styled-components": "^4.1.19",
+		"@types/webpack-env": "^1.14.1",
 		"akh": "^3.1.2",
 		"autoprefixer": "^9.3.1",
 		"babel-eslint": "^11.0.0-beta.0",
@@ -155,7 +158,7 @@
 		"mock-local-storage": "^1.0.5",
 		"nearley-loader": "^2.0.0",
 		"postcss-loader": "^2.1.2",
-		"prettier": "^1.16.4",
+		"prettier": "^1.19.1",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
 		"react-hot-loader": "^4.12.15",
@@ -167,7 +170,7 @@
 		"style-loader": "^0.23.1",
 		"styled-components": "^4.2.0",
 		"toml-loader": "^1.0.0",
-		"typescript": "^3.7.1-rc",
+		"typescript": "^3.7.2",
 		"url-loader": "^1.0.1",
 		"webpack": "^4.39.3",
 		"webpack-cli": "^3.1.2",
diff --git a/source/Provider.js b/source/Provider.tsx
similarity index 76%
rename from source/Provider.js
rename to source/Provider.tsx
index 94e3d7f0e..613dce56a 100644
--- a/source/Provider.js
+++ b/source/Provider.tsx
@@ -1,17 +1,25 @@
 import { ThemeColoursProvider } from 'Components/utils/withColours'
-import { SitePathProvider } from 'Components/utils/withSitePaths'
+import { SitePathProvider, SitePaths } from 'Components/utils/withSitePaths'
 import { TrackerProvider } from 'Components/utils/withTracker'
-import { createBrowserHistory } from 'history'
+import { createBrowserHistory, History } from 'history'
+import { AvailableLangs } from 'i18n'
 import i18next from 'i18next'
 import React, { PureComponent } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Provider as ReduxProvider } from 'react-redux'
 import { Router } from 'react-router-dom'
-import reducers from 'Reducers/rootReducer'
-import { applyMiddleware, compose, createStore } from 'redux'
+import reducers, { RootState } from 'Reducers/rootReducer'
+import { applyMiddleware, compose, createStore, Middleware, Store } from 'redux'
 import thunk from 'redux-thunk'
+import Tracker from 'Tracker'
 import { inIframe } from './utils'
 
+declare global {
+	interface Window {
+		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
+	}
+}
+
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
 if (
@@ -33,8 +41,20 @@ if (
 	})
 }
 
-export default class Provider extends PureComponent {
-	constructor(props) {
+type ProviderProps = {
+	tracker: Tracker
+	basename: string
+	sitePaths: SitePaths
+	language: AvailableLangs
+	initialStore: RootState
+	onStoreCreated: (store: Store) => void
+	reduxMiddlewares: Array<Middleware>
+}
+
+export default class Provider extends PureComponent<ProviderProps> {
+	history: History
+	store: Store
+	constructor(props: ProviderProps) {
 		super(props)
 		this.history = createBrowserHistory({
 			basename: process.env.NODE_ENV === 'production' ? '' : this.props.basename
@@ -56,7 +76,7 @@ export default class Provider extends PureComponent {
 				this.props.initialStore.lang = this.props.language
 		}
 		this.store = createStore(reducers, this.props.initialStore, storeEnhancer)
-		this.props.onStoreCreated && this.props.onStoreCreated(this.store)
+		this.props.onStoreCreated?.(this.store)
 
 		// Remove loader
 		var css = document.createElement('style')
@@ -82,7 +102,8 @@ export default class Provider extends PureComponent {
 			// If IE < 11 display nothing
 			<ReduxProvider store={this.store}>
 				<ThemeColoursProvider
-					colour={iframeCouleur && decodeURIComponent(iframeCouleur)}>
+					colour={iframeCouleur && decodeURIComponent(iframeCouleur)}
+				>
 					<TrackerProvider value={this.props.tracker}>
 						<SitePathProvider value={this.props.sitePaths}>
 							<I18nextProvider i18n={i18next}>
diff --git a/source/Tracker.ts b/source/Tracker.ts
index 7da1add4c..2c12d1564 100644
--- a/source/Tracker.ts
+++ b/source/Tracker.ts
@@ -1,17 +1,14 @@
+import { History, Location } from 'history'
 import { debounce } from './utils'
 
 declare global {
-    interface Window { _paq: any; }
+	interface Window {
+		_paq: any
+	}
 }
 
-function push(args: ['trackPageView']): void
-function push(args: ['trackEvent']): void
-function push(args: ['trackEvent', string, string]): void
-function push(args: ['trackEvent', string, string, string]): void
-function push(args: ['trackEvent', string, string, string, string, string]): void
-function push(args: ['trackEvent', string, string, string, number]): void
-function push() {}
-type PushType = typeof push
+type PushArgs = ['trackPageView'] | ['trackEvent', ...Array<string | number>]
+type PushType = (args: PushArgs) => void
 
 export default class Tracker {
 	push: PushType
@@ -23,7 +20,7 @@ export default class Tracker {
 		this.push = debounce(200, pushFunction) as PushType
 	}
 
-	connectToHistory(history) {
+	connectToHistory(history: History) {
 		this.unlistenFromHistory = history.listen(loc => {
 			this.track(loc)
 		})
@@ -52,5 +49,5 @@ export default class Tracker {
 }
 
 export const devTracker = new Tracker(
-	(console?.log?.bind(console)) ?? (() => {}) // eslint-disable-line no-console
+	console?.log?.bind(console) ?? (() => {}) // eslint-disable-line no-console
 )
diff --git a/source/actions/actions.js b/source/actions/actions.js
deleted file mode 100644
index 95846d8dc..000000000
--- a/source/actions/actions.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import type {
-	ResetSimulationAction,
-	LoadPreviousSimulationAction,
-	StepAction,
-	DeletePreviousSimulationAction,
-	SetSimulationConfigAction,
-	SetSituationBranchAction
-} from 'Types/ActionsTypes'
-import { deletePersistedSimulation } from '../storage/persistSimulation'
-import type { Thunk } from 'Types/ActionsTypes'
-
-export const resetSimulation = () => (dispatch: any => void): void => {
-	dispatch(
-		({
-			type: 'RESET_SIMULATION'
-		}: ResetSimulationAction)
-	)
-}
-
-export const goToQuestion = (question: string): StepAction => ({
-	type: 'STEP_ACTION',
-	name: 'unfold',
-	step: question
-})
-
-export const validateStepWithValue = (
-	dottedName,
-	value: any
-): Thunk<StepAction> => dispatch => {
-	dispatch(updateSituation(dottedName, value))
-	dispatch({
-		type: 'STEP_ACTION',
-		name: 'fold',
-		step: dottedName
-	})
-}
-
-export const setSituationBranch = (id: number): SetSituationBranchAction => ({
-	type: 'SET_SITUATION_BRANCH',
-	id
-})
-
-export const setSimulationConfig = (
-	config: Object
-): Thunk<SetSimulationConfigAction> => (dispatch, _, { history }): void => {
-	const url = history.location.pathname
-	dispatch({
-		type: 'SET_SIMULATION',
-		url,
-		config
-	})
-}
-
-export const deletePreviousSimulation = () => (
-	dispatch: DeletePreviousSimulationAction => void
-) => {
-	dispatch({
-		type: 'DELETE_PREVIOUS_SIMULATION'
-	})
-	deletePersistedSimulation()
-}
-
-export const updateSituation = (fieldName, value) => ({
-	type: 'UPDATE_SITUATION',
-	fieldName,
-	value
-})
-
-export const updatePeriod = toPeriod => ({
-	type: 'UPDATE_PERIOD',
-	toPeriod
-})
-
-// $FlowFixMe
-export function setExample(name, situation, dottedName) {
-	return { type: 'SET_EXAMPLE', name, situation, dottedName }
-}
-
-export const goBackToSimulation = (): Thunk<any> => (
-	dispatch,
-	getState,
-	{ history }
-) => {
-	dispatch({ type: 'SET_EXEMPLE', name: null })
-	history.push(getState().simulation.url)
-}
-
-export function loadPreviousSimulation(): LoadPreviousSimulationAction {
-	return {
-		type: 'LOAD_PREVIOUS_SIMULATION'
-	}
-}
-
-export function hideControl(id: string) {
-	return { type: 'HIDE_CONTROL', id }
-}
-
-export const EXPLAIN_VARIABLE = 'EXPLAIN_VARIABLE'
diff --git a/source/actions/actions.ts b/source/actions/actions.ts
new file mode 100644
index 000000000..9f59adb78
--- /dev/null
+++ b/source/actions/actions.ts
@@ -0,0 +1,157 @@
+import { SitePaths } from 'Components/utils/withSitePaths'
+import { History } from 'history'
+import { RootState } from 'Reducers/rootReducer'
+import { ThunkAction } from 'redux-thunk'
+import { DottedName } from 'Types/rule'
+import { deletePersistedSimulation } from '../storage/persistSimulation'
+
+export type Action =
+	| ResetSimulationAction
+	| StepAction
+	| UpdateAction
+	| SetSimulationConfigAction
+	| DeletePreviousSimulationAction
+	| SetExempleAction
+	| ExplainVariableAction
+	| UpdatePeriodAction
+	| HideControlAction
+	| LoadPreviousSimulationAction
+	| SetSituationBranchAction
+	| SetActiveTargetAction
+
+type ThunkResult<R> = ThunkAction<
+	R,
+	RootState,
+	{ history: History; sitePaths: SitePaths },
+	Action
+>
+
+type StepAction = {
+	type: 'STEP_ACTION'
+	name: 'fold' | 'unfold'
+	step: string
+}
+
+type SetSimulationConfigAction = {
+	type: 'SET_SIMULATION'
+	url: string
+	config: Object
+}
+
+type DeletePreviousSimulationAction = {
+	type: 'DELETE_PREVIOUS_SIMULATION'
+}
+
+type SetExempleAction = {
+	type: 'SET_EXAMPLE'
+	name: null | string
+	situation?: object
+	dottedName?: string
+}
+
+type ResetSimulationAction = ReturnType<typeof resetSimulation>
+type UpdateAction = ReturnType<typeof updateSituation>
+type UpdatePeriodAction = ReturnType<typeof updatePeriod>
+type LoadPreviousSimulationAction = ReturnType<typeof loadPreviousSimulation>
+type SetSituationBranchAction = ReturnType<typeof setSituationBranch>
+type SetActiveTargetAction = ReturnType<typeof setActiveTarget>
+type HideControlAction = ReturnType<typeof hideControl>
+type ExplainVariableAction = ReturnType<typeof explainVariable>
+
+export const resetSimulation = () =>
+	({
+		type: 'RESET_SIMULATION'
+	} as const)
+
+export const goToQuestion = (question: string) =>
+	({
+		type: 'STEP_ACTION',
+		name: 'unfold',
+		step: question
+	} as const)
+
+export const validateStepWithValue = (
+	dottedName: DottedName,
+	value: any
+): ThunkResult<void> => dispatch => {
+	dispatch(updateSituation(dottedName, value))
+	dispatch({
+		type: 'STEP_ACTION',
+		name: 'fold',
+		step: dottedName
+	})
+}
+
+export const setSituationBranch = (id: number) =>
+	({
+		type: 'SET_SITUATION_BRANCH',
+		id
+	} as const)
+
+export const setSimulationConfig = (config: Object): ThunkResult<void> => (
+	dispatch,
+	_,
+	{ history }
+): void => {
+	const url = history.location.pathname
+	dispatch({
+		type: 'SET_SIMULATION',
+		url,
+		config
+	})
+}
+
+export const setActiveTarget = (targetName: string) =>
+	({
+		type: 'SET_ACTIVE_TARGET_INPUT',
+		name: targetName
+	} as const)
+
+export const deletePreviousSimulation = (): ThunkResult<void> => dispatch => {
+	dispatch({
+		type: 'DELETE_PREVIOUS_SIMULATION'
+	})
+	deletePersistedSimulation()
+}
+
+export const updateSituation = (fieldName: DottedName, value: any) =>
+	({
+		type: 'UPDATE_SITUATION',
+		fieldName,
+		value
+	} as const)
+
+export const updatePeriod = (toPeriod: string) =>
+	({
+		type: 'UPDATE_PERIOD',
+		toPeriod
+	} as const)
+
+export function setExample(name: string, situation, dottedName: string) {
+	return { type: 'SET_EXAMPLE', name, situation, dottedName } as const
+}
+
+export const goBackToSimulation = (): ThunkResult<void> => (
+	dispatch,
+	getState,
+	{ history }
+) => {
+	dispatch({ type: 'SET_EXAMPLE', name: null })
+	history.push(getState().simulation.url)
+}
+
+export function loadPreviousSimulation() {
+	return {
+		type: 'LOAD_PREVIOUS_SIMULATION'
+	} as const
+}
+
+export function hideControl(id: string) {
+	return { type: 'HIDE_CONTROL', id } as const
+}
+
+export const explainVariable = (variableName = null) =>
+	({
+		type: 'EXPLAIN_VARIABLE',
+		variableName
+	} as const)
diff --git a/source/actions/companyCreationChecklistActions.js b/source/actions/companyCreationChecklistActions.js
deleted file mode 100644
index 6788cdfe2..000000000
--- a/source/actions/companyCreationChecklistActions.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {
-	InitializeCompanyCreationChecklistAction,
-	CheckCompanyCreationItemAction
-} from 'Types/companyCreationChecklistTypes'
-
-export const initializeCompanyCreationChecklist = (
-	statusName: string,
-	checklistItems: Array<string>
-) =>
-	({
-		type: 'INITIALIZE_COMPANY_CREATION_CHECKLIST',
-		checklistItems,
-		statusName
-	}: InitializeCompanyCreationChecklistAction)
-
-export const checkCompanyCreationItem = (name: string, checked: boolean) =>
-	({
-		type: 'CHECK_COMPANY_CREATION_ITEM',
-		name,
-		checked
-	}: CheckCompanyCreationItemAction)
diff --git a/source/actions/companyCreationChecklistActions.ts b/source/actions/companyCreationChecklistActions.ts
new file mode 100644
index 000000000..4fc5c8b25
--- /dev/null
+++ b/source/actions/companyCreationChecklistActions.ts
@@ -0,0 +1,29 @@
+import { LegalStatus } from 'Selectors/companyStatusSelectors'
+
+export type Action =
+	| InitializeCompanyCreationChecklistAction
+	| CheckCompanyCreationItemAction
+
+type InitializeCompanyCreationChecklistAction = ReturnType<
+	typeof initializeCompanyCreationChecklist
+>
+type CheckCompanyCreationItemAction = ReturnType<
+	typeof checkCompanyCreationItem
+>
+
+export const initializeCompanyCreationChecklist = (
+	statusName: LegalStatus,
+	checklistItems: Array<string>
+) =>
+	({
+		type: 'INITIALIZE_COMPANY_CREATION_CHECKLIST',
+		checklistItems,
+		statusName
+	} as const)
+
+export const checkCompanyCreationItem = (name: string, checked: boolean) =>
+	({
+		type: 'CHECK_COMPANY_CREATION_ITEM',
+		name,
+		checked
+	} as const)
diff --git a/source/actions/existingCompanyActions.js b/source/actions/existingCompanyActions.js
index c46469c7f..0ddcfa36a 100644
--- a/source/actions/existingCompanyActions.js
+++ b/source/actions/existingCompanyActions.js
@@ -1,6 +1,6 @@
 import { fetchCompanyDetails } from '../api/sirene'
 
-const fetchCommuneDetails = function (codeCommune) {
+const fetchCommuneDetails = function(codeCommune) {
 	return fetch(
 		`https://geo.api.gouv.fr/communes/${codeCommune}?fields=departement,region`
 	).then(response => {
diff --git a/source/actions/hiringChecklistAction.js b/source/actions/hiringChecklistAction.ts
similarity index 50%
rename from source/actions/hiringChecklistAction.js
rename to source/actions/hiringChecklistAction.ts
index de2de028c..0445463d9 100644
--- a/source/actions/hiringChecklistAction.js
+++ b/source/actions/hiringChecklistAction.ts
@@ -1,17 +1,17 @@
-import type {
-	InitializeHiringChecklistAction,
-	CheckHiringItemAction
-} from 'Types/hiringChecklistTypes'
+export type Action = InitializeHiringChecklistAction | CheckHiringItemAction
+
+type InitializeHiringChecklistAction = ReturnType<typeof initializeHiringChecklist>
+type CheckHiringItemAction = ReturnType<typeof checkHiringItem>
 
 export const initializeHiringChecklist = (checklistItems: Array<string>) =>
 	({
 		type: 'INITIALIZE_HIRING_CHECKLIST',
 		checklistItems
-	}: InitializeHiringChecklistAction)
+	} as const)
 
 export const checkHiringItem = (name: string, checked: boolean) =>
 	({
 		type: 'CHECK_HIRING_ITEM',
 		name,
 		checked
-	}: CheckHiringItemAction)
+	} as const)
diff --git a/source/api/sirene.js b/source/api/sirene.ts
similarity index 69%
rename from source/api/sirene.js
rename to source/api/sirene.ts
index 9493efe96..8df00bf7a 100644
--- a/source/api/sirene.js
+++ b/source/api/sirene.ts
@@ -1,7 +1,7 @@
-const isSIREN = input => input.match(/^[\s]*([\d][\s]*){9}$/)
-const isSIRET = input => input.match(/^[\s]*([\d][\s]*){14}$/)
+const isSIREN = (input: string) => input.match(/^[\s]*([\d][\s]*){9}$/)
+const isSIRET = (input: string) => input.match(/^[\s]*([\d][\s]*){14}$/)
 
-export async function fetchCompanyDetails(siren) {
+export async function fetchCompanyDetails(siren: string) {
 	const response = await fetch(
 		`https://entreprise.data.gouv.fr/api/sirene/v3/unites_legales/${siren.replace(
 			/[\s]/g,
@@ -15,7 +15,7 @@ export async function fetchCompanyDetails(siren) {
 	return json.unite_legale
 }
 
-export async function searchDenominationOrSiren(value) {
+export async function searchDenominationOrSiren(value: string) {
 	if (isSIRET(value)) {
 		value = value.replace(/[\s]/g, '').slice(0, 9)
 	}
@@ -25,7 +25,12 @@ export async function searchDenominationOrSiren(value) {
 	return searchFullText(value)
 }
 
-async function searchFullText(text) {
+export type Etablissement = {
+	siren: string
+	denomination?: string
+}
+
+async function searchFullText(text: string): Promise<Array<Etablissement>> {
 	const response = await fetch(
 		`https://entreprise.data.gouv.fr/api/sirene/v1/full_text/${text}?per_page=5`
 	)
diff --git a/source/components/Banner.js b/source/components/Banner.js
deleted file mode 100644
index 9514ea217..000000000
--- a/source/components/Banner.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import emoji from 'react-easy-emoji'
-import { connect } from 'react-redux'
-import { firstStepCompletedSelector } from 'Selectors/analyseSelectors'
-import Animate from 'Ui/animate'
-import './Banner.css'
-import type { Node } from 'react'
-import type { State } from 'Types/State'
-type PropTypes = {
-	hidden: boolean,
-	children: Node,
-	icon?: string
-}
-
-let Banner = ({ hidden = false, children, icon }: PropTypes) =>
-	!hidden ? (
-		<Animate.fadeIn>
-			<div className="ui__ banner">
-				{icon && emoji(icon)}
-				<p>{children}</p>
-			</div>
-		</Animate.fadeIn>
-	) : null
-
-export default connect(
-	(state: State, { hidden }: PropTypes) => ({
-		hidden: hidden || firstStepCompletedSelector(state)
-	}),
-	{}
-)(Banner)
diff --git a/source/components/Banner.tsx b/source/components/Banner.tsx
new file mode 100644
index 000000000..d751ae5d1
--- /dev/null
+++ b/source/components/Banner.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import emoji from 'react-easy-emoji'
+import { useSelector } from 'react-redux'
+import { firstStepCompletedSelector } from 'Selectors/analyseSelectors'
+import Animate from 'Ui/animate'
+import './Banner.css'
+
+type BannerProps = {
+	children: React.ReactNode
+	hidden?: boolean
+	icon?: string
+}
+
+export default function Banner({
+	children,
+	hidden: hiddenProp = false,
+	icon
+}: BannerProps) {
+	const hiddenState = useSelector(firstStepCompletedSelector)
+	const hidden = hiddenProp || hiddenState
+	return !hidden ? (
+		<Animate.fadeIn>
+			<div className="ui__ banner">
+				{icon && emoji(icon)}
+				<p>{children}</p>
+			</div>
+		</Animate.fadeIn>
+	) : null
+}
diff --git a/source/components/CompanyDetails.js b/source/components/CompanyDetails.tsx
similarity index 89%
rename from source/components/CompanyDetails.js
rename to source/components/CompanyDetails.tsx
index 96523d295..88966a7ea 100644
--- a/source/components/CompanyDetails.js
+++ b/source/components/CompanyDetails.tsx
@@ -2,9 +2,9 @@ import { T } from 'Components'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Skeleton from 'react-loading-skeleton'
-import { fetchCompanyDetails } from '../api/sirene'
+import { Etablissement, fetchCompanyDetails } from '../api/sirene'
 
-export default function CompanyDetails({ siren, denomination }) {
+export default function CompanyDetails({ siren, denomination }: Etablissement) {
 	const { i18n } = useTranslation()
 	const DateFormatter = useMemo(
 		() =>
diff --git a/source/components/CurrencyInput/CurrencyInput.js b/source/components/CurrencyInput/CurrencyInput.tsx
similarity index 83%
rename from source/components/CurrencyInput/CurrencyInput.js
rename to source/components/CurrencyInput/CurrencyInput.tsx
index 907db76a6..f8d892146 100644
--- a/source/components/CurrencyInput/CurrencyInput.js
+++ b/source/components/CurrencyInput/CurrencyInput.tsx
@@ -1,10 +1,18 @@
 import classnames from 'classnames'
-import React, { useRef, useState } from 'react'
 import { currencyFormat } from 'Engine/format'
-import NumberFormat from 'react-number-format'
+import React, { useRef, useState } from 'react'
+import NumberFormat, { NumberFormatProps } from 'react-number-format'
 import { debounce } from '../../utils'
 import './CurrencyInput.css'
 
+type CurrencyInputProps = NumberFormatProps & {
+	value?: string | number
+	debounce?: number
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+	currencySymbol?: string
+	language?: Parameters<typeof currencyFormat>[0]
+}
+
 export default function CurrencyInput({
 	value: valueProp = '',
 	debounce: debounceTimeout,
@@ -13,7 +21,7 @@ export default function CurrencyInput({
 	language,
 	className,
 	...forwardedProps
-}) {
+}: CurrencyInputProps) {
 	const [initialValue, setInitialValue] = useState(valueProp)
 	const [currentValue, setCurrentValue] = useState(valueProp)
 	const onChangeDebounced = useRef(
@@ -23,7 +31,7 @@ export default function CurrencyInput({
 	// the DOM `event` in its custom `onValueChange` handler
 	const nextValue = useRef(null)
 
-	const inputRef = useRef()
+	const inputRef = useRef<HTMLInputElement>()
 
 	// When the component is rendered with a new "value" prop, we reset our local state
 	if (valueProp !== initialValue) {
@@ -31,7 +39,7 @@ export default function CurrencyInput({
 		setInitialValue(valueProp)
 	}
 
-	const handleChange = event => {
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		// Only trigger the `onChange` event if the value has changed -- and not
 		// only its formating, we don't want to call it when a dot is added in `12.`
 		// for instance
@@ -63,7 +71,8 @@ export default function CurrencyInput({
 		<div
 			className={classnames(className, 'currencyInput__container')}
 			{...(valueLength > 5 ? { style: { width } } : {})}
-			onClick={() => inputRef.current.focus()}>
+			onClick={() => inputRef.current.focus()}
+		>
 			{!currentValue && isCurrencyPrefixed && currencySymbol}
 			<NumberFormat
 				{...forwardedProps}
diff --git a/source/components/Feedback/FeedbackForm.js b/source/components/Feedback/FeedbackForm.tsx
similarity index 77%
rename from source/components/Feedback/FeedbackForm.js
rename to source/components/Feedback/FeedbackForm.tsx
index 40a211896..7dc28c9de 100644
--- a/source/components/Feedback/FeedbackForm.js
+++ b/source/components/Feedback/FeedbackForm.tsx
@@ -1,21 +1,19 @@
-
 import { ScrollToElement } from 'Components/utils/Scroll'
-import withTracker from 'Components/utils/withTracker'
-import React, { useRef } from 'react'
+import { TrackerContext } from 'Components/utils/withTracker'
+import React, { useContext, useRef } from 'react'
 import { Trans } from 'react-i18next'
-import type { Tracker } from 'Components/utils/withTracker'
 
-type Props = { onEnd: () => void, tracker: Tracker, onCancel: () => void }
+type Props = { onEnd: () => void; onCancel: () => void }
 
-function FeedbackForm({ onEnd, onCancel, tracker }: Props) {
-	const formRef = useRef()
+export default function FeedbackForm({ onEnd, onCancel }: Props) {
+	const formRef = useRef<HTMLFormElement>()
+	const tracker = useContext(TrackerContext)
 
-	const handleFormSubmit = e => {
+	const handleFormSubmit = (e: React.FormEvent): void => {
 		tracker.push(['trackEvent', 'Feedback', 'written feedback submitted'])
 		e.preventDefault()
 		fetch('/', {
 			method: 'POST',
-			// $FlowFixMe
 			body: new FormData(formRef.current)
 		})
 		onEnd()
@@ -28,7 +26,8 @@ function FeedbackForm({ onEnd, onCancel, tracker }: Props) {
 					onClick={() => onCancel()}
 					className="ui__ link-button"
 					style={{ textDecoration: 'none', marginLeft: '0.3rem' }}
-					aria-label="close">
+					aria-label="close"
+				>
 					X
 				</button>
 			</div>
@@ -37,7 +36,8 @@ function FeedbackForm({ onEnd, onCancel, tracker }: Props) {
 				style={{ flex: 1 }}
 				method="post"
 				ref={formRef}
-				onSubmit={handleFormSubmit}>
+				onSubmit={handleFormSubmit}
+			>
 				<input type="hidden" name="form-name" value="feedback" />
 				<label htmlFor="message">
 					<p>
@@ -50,7 +50,7 @@ function FeedbackForm({ onEnd, onCancel, tracker }: Props) {
 				</label>
 				<textarea
 					name="message"
-					rows="5"
+					rows={5}
 					style={{ resize: 'none', width: '100%', padding: '0.6rem' }}
 				/>
 				<br />
@@ -75,5 +75,3 @@ function FeedbackForm({ onEnd, onCancel, tracker }: Props) {
 		</ScrollToElement>
 	)
 }
-
-export default withTracker(FeedbackForm)
diff --git a/source/components/Feedback/PageFeedback.js b/source/components/Feedback/PageFeedback.js
deleted file mode 100644
index c3fa97d7a..000000000
--- a/source/components/Feedback/PageFeedback.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import withTracker from 'Components/utils/withTracker'
-import React, { Component } from 'react'
-import { Trans } from 'react-i18next'
-import { withRouter } from 'react-router'
-import { compose } from 'redux'
-import safeLocalStorage from '../../storage/safeLocalStorage'
-import './Feedback.css'
-import Form from './FeedbackForm'
-import type { Tracker } from 'Components/utils/withTracker'
-import type { Location } from 'react-router-dom'
-import type { Node } from 'react'
-
-type OwnProps = {
-	blacklist: Array<string>,
-	customMessage?: Node,
-	customEventName?: string
-}
-type Props = OwnProps & {
-	location: Location,
-	tracker: Tracker
-}
-type State = {
-	showForm: boolean,
-	feedbackAlreadyGiven: boolean,
-	showThanks: boolean
-}
-
-const localStorageKey = (feedback: [string, string]) =>
-	`app::feedback::${feedback.join('::')}`
-const saveFeedbackOccurrenceInLocalStorage = ([name, path, rating]: [
-	string,
-	string,
-	number
-]) => {
-	safeLocalStorage.setItem(
-		localStorageKey([name, path]),
-		JSON.stringify(rating)
-	)
-}
-const feedbackAlreadyGiven = (feedback: [string, string]) => {
-	return !!safeLocalStorage.getItem(localStorageKey(feedback))
-}
-
-class PageFeedback extends Component<Props, State> {
-	static defaultProps = {
-		blacklist: []
-	}
-	feedbackAlreadyGiven: boolean
-	feedbackAlreadyGiven = false
-	constructor(props) {
-		super(props)
-		this.state = {
-			showForm: false,
-			showThanks: false,
-			feedbackAlreadyGiven: feedbackAlreadyGiven([
-				this.props.customEventName || 'rate page usefulness',
-				this.props.location.pathname
-			])
-		}
-	}
-
-	handleFeedback = ({ useful }) => {
-		this.props.tracker.push([
-			'trackEvent',
-			'Feedback',
-			useful ? 'positive rating' : 'negative rating',
-			this.props.location.pathname
-		])
-		const feedback = [
-			this.props.customEventName || 'rate page usefulness',
-			this.props.location.pathname,
-			useful ? 10 : 0.1
-		]
-		this.props.tracker.push(['trackEvent', 'Feedback', ...feedback])
-		saveFeedbackOccurrenceInLocalStorage(feedback)
-		this.setState({
-			showThanks: useful,
-			feedbackAlreadyGiven: true,
-			showForm: !useful
-		})
-	}
-	handleErrorReporting = () => {
-		this.props.tracker.push([
-			'trackEvent',
-			'Feedback',
-			'report error',
-			this.props.location.pathname
-		])
-		this.setState({ showForm: true })
-	}
-	render() {
-		if (
-			this.state.feedbackAlreadyGiven &&
-			!this.state.showForm &&
-			!this.state.showThanks
-		) {
-			return null
-		}
-		const pathname =
-			this.props.location.pathname === '/' ? '' : this.props.location.pathname
-		return (
-			!this.props.blacklist.includes(pathname) && (
-				<div
-					className="ui__ container"
-					style={{ display: 'flex', justifyContent: 'center' }}>
-					<div className="feedback-page ui__ notice ">
-						{!this.state.showForm && !this.state.showThanks && (
-							<>
-								<div style={{ flexShrink: 0 }}>
-									{this.props.customMessage || (
-										<Trans i18nKey="feedback.question">
-											Cette page vous est utile ?
-										</Trans>
-									)}{' '}
-								</div>
-								<div className="feedbackButtons">
-									<button
-										className="ui__ link-button"
-										onClick={() => this.handleFeedback({ useful: true })}>
-										<Trans>Oui</Trans>
-									</button>{' '}
-									<button
-										className="ui__ link-button"
-										onClick={() => this.handleFeedback({ useful: false })}>
-										<Trans>Non</Trans>
-									</button>
-									<button
-										className="ui__ link-button"
-										onClick={this.handleErrorReporting}>
-										<Trans i18nKey="feedback.reportError">
-											Faire une suggestion
-										</Trans>
-									</button>
-								</div>
-							</>
-						)}
-						{this.state.showThanks && (
-							<div>
-								<Trans i18nKey="feedback.thanks">
-									Merci pour votre retour ! Vous pouvez nous contacter
-									directement à{' '}
-									<a href="mailto:contact@mon-entreprise.beta.gouv.fr">
-										contact@mon-entreprise.beta.gouv.fr
-									</a>
-								</Trans>
-							</div>
-						)}
-						{this.state.showForm && (
-							<Form
-								onEnd={() =>
-									this.setState({ showThanks: true, showForm: false })
-								}
-								onCancel={() =>
-									this.setState({ showThanks: false, showForm: false })
-								}
-							/>
-						)}
-					</div>
-				</div>
-			)
-		)
-	}
-}
-const PageFeedbackWithRouter = ({ location, ...props }) => (
-	<PageFeedback {...props} location={location} key={location.pathname} />
-)
-export default compose(
-	withRouter,
-	withTracker
-)(PageFeedbackWithRouter)
diff --git a/source/components/Feedback/PageFeedback.tsx b/source/components/Feedback/PageFeedback.tsx
new file mode 100644
index 000000000..fffa743a8
--- /dev/null
+++ b/source/components/Feedback/PageFeedback.tsx
@@ -0,0 +1,144 @@
+import { TrackerContext } from 'Components/utils/withTracker'
+import React, { useCallback, useContext, useState } from 'react'
+import { Trans } from 'react-i18next'
+import { useLocation } from 'react-router'
+import safeLocalStorage from '../../storage/safeLocalStorage'
+import './Feedback.css'
+import Form from './FeedbackForm'
+
+type PageFeedbackProps = {
+	blacklist?: Array<string>
+	customMessage?: React.ReactNode
+	customEventName?: string
+}
+
+const localStorageKey = (feedback: [string, string]) =>
+	`app::feedback::${feedback.join('::')}`
+const saveFeedbackOccurrenceInLocalStorage = ([name, path, rating]: [
+	string,
+	string,
+	number
+]) => {
+	safeLocalStorage.setItem(
+		localStorageKey([name, path]),
+		JSON.stringify(rating)
+	)
+}
+const feedbackAlreadyGiven = (feedback: [string, string]) => {
+	return !!safeLocalStorage.getItem(localStorageKey(feedback))
+}
+
+export default function PageFeedback({
+	blacklist = [],
+	customMessage,
+	customEventName
+}: PageFeedbackProps) {
+	const location = useLocation()
+	const tracker = useContext(TrackerContext)
+	const [state, setState] = useState({
+		showForm: false,
+		showThanks: false,
+		feedbackAlreadyGiven: feedbackAlreadyGiven([
+			customEventName || 'rate page usefulness',
+			location.pathname
+		])
+	})
+
+	const handleFeedback = useCallback(({ useful }: { useful: boolean }) => {
+		tracker.push([
+			'trackEvent',
+			'Feedback',
+			useful ? 'positive rating' : 'negative rating',
+			location.pathname
+		])
+		const feedback = [
+			customEventName || 'rate page usefulness',
+			location.pathname,
+			useful ? 10 : 0.1
+		] as [string, string, number]
+		tracker.push(['trackEvent', 'Feedback', ...feedback])
+		saveFeedbackOccurrenceInLocalStorage(feedback)
+		setState({
+			showThanks: useful,
+			feedbackAlreadyGiven: true,
+			showForm: !useful
+		})
+	}, [])
+
+	const handleErrorReporting = useCallback(() => {
+		tracker.push(['trackEvent', 'Feedback', 'report error', location.pathname])
+		setState({ ...state, showForm: true })
+	}, [])
+
+	if (state.feedbackAlreadyGiven && !state.showForm && !state.showThanks) {
+		return null
+	}
+	const pathname = location.pathname === '/' ? '' : location.pathname
+
+	if (blacklist.includes(pathname)) {
+		return null
+	}
+
+	return (
+		<div
+			className="ui__ container"
+			style={{ display: 'flex', justifyContent: 'center' }}
+		>
+			<div className="feedback-page ui__ notice ">
+				{!state.showForm && !state.showThanks && (
+					<>
+						<div style={{ flexShrink: 0 }}>
+							{customMessage || (
+								<Trans i18nKey="feedback.question">
+									Cette page vous est utile ?
+								</Trans>
+							)}{' '}
+						</div>
+						<div className="feedbackButtons">
+							<button
+								className="ui__ link-button"
+								onClick={() => handleFeedback({ useful: true })}
+							>
+								<Trans>Oui</Trans>
+							</button>{' '}
+							<button
+								className="ui__ link-button"
+								onClick={() => handleFeedback({ useful: false })}
+							>
+								<Trans>Non</Trans>
+							</button>
+							<button
+								className="ui__ link-button"
+								onClick={handleErrorReporting}
+							>
+								<Trans i18nKey="feedback.reportError">
+									Faire une suggestion
+								</Trans>
+							</button>
+						</div>
+					</>
+				)}
+				{state.showThanks && (
+					<div>
+						<Trans i18nKey="feedback.thanks">
+							Merci pour votre retour ! Vous pouvez nous contacter directement à{' '}
+							<a href="mailto:contact@mon-entreprise.beta.gouv.fr">
+								contact@mon-entreprise.beta.gouv.fr
+							</a>
+						</Trans>
+					</div>
+				)}
+				{state.showForm && (
+					<Form
+						onEnd={() =>
+							setState({ ...state, showThanks: true, showForm: false })
+						}
+						onCancel={() =>
+							setState({ ...state, showThanks: false, showForm: false })
+						}
+					/>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/source/components/FindCompany.js b/source/components/FindCompany.tsx
similarity index 93%
rename from source/components/FindCompany.js
rename to source/components/FindCompany.tsx
index 053c0e44d..351b073ce 100644
--- a/source/components/FindCompany.js
+++ b/source/components/FindCompany.tsx
@@ -3,11 +3,11 @@ import { T } from 'Components'
 import CompanyDetails from 'Components/CompanyDetails'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { searchDenominationOrSiren } from '../api/sirene'
+import { Etablissement, searchDenominationOrSiren } from '../api/sirene'
 import { debounce } from '../utils'
 
 export default function Search() {
-	const [searchResults, setSearchResults] = useState()
+	const [searchResults, setSearchResults] = useState<Array<Etablissement>>()
 	const [isLoading, setLoadingState] = useState(false)
 
 	const handleSearch = useCallback(
@@ -85,7 +85,8 @@ export default function Search() {
 							:focus {
 								background-color: var(--lighterColour);
 							}
-						`}>
+						`}
+					>
 						<CompanyDetails siren={siren} denomination={denomination} />
 					</button>
 				))}
diff --git a/source/components/LegalNotice.js b/source/components/LegalNotice.tsx
similarity index 100%
rename from source/components/LegalNotice.js
rename to source/components/LegalNotice.tsx
diff --git a/source/components/Mecanisms.js b/source/components/Mecanisms.tsx
similarity index 100%
rename from source/components/Mecanisms.js
rename to source/components/Mecanisms.tsx
diff --git a/source/components/NewsletterRegister.js b/source/components/NewsletterRegister.tsx
similarity index 96%
rename from source/components/NewsletterRegister.js
rename to source/components/NewsletterRegister.tsx
index b894d638e..6adf77373 100644
--- a/source/components/NewsletterRegister.js
+++ b/source/components/NewsletterRegister.tsx
@@ -43,7 +43,8 @@ export default function Newsletter() {
 					onSubmit={onSubmit}
 					id="mc-embedded-subscribe-form"
 					name="mc-embedded-subscribe-form"
-					target="_blank">
+					target="_blank"
+				>
 					<div>
 						<label htmlFor="mce-EMAIL">
 							<T>Votre adresse e-mail</T>
@@ -53,7 +54,7 @@ export default function Newsletter() {
 							<input
 								className="ui__ plain small button"
 								type="submit"
-								value={t("S'inscrire")}
+								value={t("S'inscrire") as string}
 								name="subscribe"
 								id="mc-embedded-subscribe"
 							/>
diff --git a/source/components/Overlay.js b/source/components/Overlay.tsx
similarity index 68%
rename from source/components/Overlay.js
rename to source/components/Overlay.tsx
index f513c0a6c..e243f841b 100644
--- a/source/components/Overlay.js
+++ b/source/components/Overlay.tsx
@@ -3,15 +3,24 @@ import React, { useEffect } from 'react'
 import * as animate from 'Ui/animate'
 import { LinkButton } from 'Ui/Button'
 import './Overlay.css'
-export default function Overlay({ onClose, children, ...otherProps }) {
+
+type OverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+	onClose?: () => void
+	children: React.ReactNode
+}
+
+export default function Overlay({
+	onClose,
+	children,
+	...otherProps
+}: OverlayProps) {
 	useEffect(() => {
 		const body = document.getElementsByTagName('body')[0]
-		body.classList.add('no-scroll');
+		body.classList.add('no-scroll')
 		return () => {
 			body.classList.remove('no-scroll')
 		}
-	}
-		, [])
+	}, [])
 	return (
 		<div id="overlayWrapper">
 			<animate.fromBottom>
@@ -19,18 +28,21 @@ export default function Overlay({ onClose, children, ...otherProps }) {
 					focusTrapOptions={{
 						onDeactivate: onClose,
 						clickOutsideDeactivates: !!onClose
-					}}>
+					}}
+				>
 					<div
 						aria-modal="true"
 						id="overlayContent"
 						{...otherProps}
-						className={'ui__ card ' + otherProps.className}>
+						className={'ui__ card ' + otherProps?.className}
+					>
 						{children}
 						{onClose && (
 							<LinkButton
 								aria-label="close"
 								onClick={onClose}
-								id="overlayCloseButton">
+								id="overlayCloseButton"
+							>
 								×
 							</LinkButton>
 						)}
diff --git a/source/components/PercentageField.js b/source/components/PercentageField.tsx
similarity index 100%
rename from source/components/PercentageField.js
rename to source/components/PercentageField.tsx
diff --git a/source/components/PeriodSwitch.js b/source/components/PeriodSwitch.tsx
similarity index 88%
rename from source/components/PeriodSwitch.js
rename to source/components/PeriodSwitch.tsx
index 34bba977d..1e09b45ad 100644
--- a/source/components/PeriodSwitch.js
+++ b/source/components/PeriodSwitch.tsx
@@ -2,6 +2,7 @@ import { updatePeriod } from 'Actions/actions'
 import React from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
 import { situationSelector } from 'Selectors/analyseSelectors'
 import './PeriodSwitch.css'
 
@@ -9,7 +10,8 @@ export default function PeriodSwitch() {
 	const dispatch = useDispatch()
 	const situation = useSelector(situationSelector)
 	const defaultPeriod = useSelector(
-		state => state.simulation?.config?.situation?.période || 'année'
+		(state: RootState) =>
+			state.simulation?.config?.situation?.période || 'année'
 	)
 	const currentPeriod = situation.période
 	let periods = ['année', 'mois']
diff --git a/source/components/PreviousSimulationBanner.js b/source/components/PreviousSimulationBanner.js
deleted file mode 100644
index bec4f7a6b..000000000
--- a/source/components/PreviousSimulationBanner.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-	deletePreviousSimulation,
-	loadPreviousSimulation
-} from 'Actions/actions'
-import { compose } from 'ramda'
-import React from 'react'
-import { Trans } from 'react-i18next'
-import { connect } from 'react-redux'
-import { noUserInputSelector } from 'Selectors/analyseSelectors'
-import { LinkButton } from 'Ui/Button'
-import Banner from './Banner'
-
-import type { SavedSimulation } from 'Types/State'
-
-type ConnectedPropTypes = {
-	previousSimulation: SavedSimulation,
-	loadPreviousSimulation: () => void,
-	newSimulationStarted: boolean,
-	deletePreviousSimulation: () => void
-}
-const PreviousSimulationBanner = ({
-	previousSimulation,
-	deletePreviousSimulation,
-	newSimulationStarted,
-	loadPreviousSimulation
-}: ConnectedPropTypes) => (
-	<Banner hidden={!previousSimulation || newSimulationStarted} icon="💾">
-		<Trans i18nKey="previousSimulationBanner.info">
-			Votre précédente simulation a été sauvegardée.
-		</Trans>{' '}
-		<LinkButton onClick={loadPreviousSimulation}>
-			<Trans i18nKey="previousSimulationBanner.retrieveButton">
-				Retrouver ma simulation
-			</Trans>
-		</LinkButton>
-		.{' '}
-		<LinkButton onClick={deletePreviousSimulation}>
-			<Trans>Effacer</Trans>
-		</LinkButton>
-	</Banner>
-)
-
-export default compose(
-	connect(
-		state => ({
-			previousSimulation: state.previousSimulation,
-			newSimulationStarted: !noUserInputSelector(state)
-		}),
-		{
-			loadPreviousSimulation,
-			deletePreviousSimulation
-		}
-	)
-)(PreviousSimulationBanner)
diff --git a/source/components/PreviousSimulationBanner.tsx b/source/components/PreviousSimulationBanner.tsx
new file mode 100644
index 000000000..d63bb065b
--- /dev/null
+++ b/source/components/PreviousSimulationBanner.tsx
@@ -0,0 +1,36 @@
+import {
+	deletePreviousSimulation,
+	loadPreviousSimulation
+} from 'Actions/actions'
+import React from 'react'
+import { Trans } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
+import { noUserInputSelector } from 'Selectors/analyseSelectors'
+import { LinkButton } from 'Ui/Button'
+import Banner from './Banner'
+
+export default function PreviousSimulationBanner() {
+	const previousSimulation = useSelector(
+		(state: RootState) => state.previousSimulation
+	)
+	const newSimulationStarted = !useSelector(noUserInputSelector)
+	const dispatch = useDispatch()
+
+	return (
+		<Banner hidden={!previousSimulation || newSimulationStarted} icon="💾">
+			<Trans i18nKey="previousSimulationBanner.info">
+				Votre précédente simulation a été sauvegardée.
+			</Trans>{' '}
+			<LinkButton onClick={() => dispatch(loadPreviousSimulation())}>
+				<Trans i18nKey="previousSimulationBanner.retrieveButton">
+					Retrouver ma simulation
+				</Trans>
+			</LinkButton>
+			.{' '}
+			<LinkButton onClick={() => dispatch(deletePreviousSimulation())}>
+				<Trans>Effacer</Trans>
+			</LinkButton>
+		</Banner>
+	)
+}
diff --git a/source/components/QuickLinks.js b/source/components/QuickLinks.js
deleted file mode 100644
index 92ffe93c4..000000000
--- a/source/components/QuickLinks.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { goToQuestion } from 'Actions/actions'
-import { T } from 'Components'
-import { compose, contains, filter, reject, toPairs } from 'ramda'
-import React from 'react'
-import { connect } from 'react-redux'
-import {
-	currentQuestionSelector,
-	nextStepsSelector
-} from 'Selectors/analyseSelectors'
-import type { Location } from 'react-router'
-
-type OwnProps = {
-	quickLinks: { [string]: string }
-}
-type Props = OwnProps & {
-	goToQuestion: string => void,
-	location: Location,
-	currentQuestion: string,
-	nextSteps: Array<string>,
-	quickLinksToHide: Array<string>,
-	show: boolean
-}
-
-const QuickLinks = ({
-	goToQuestion,
-	currentQuestion,
-	nextSteps,
-	quickLinks,
-	quickLinksToHide
-}: Props) => {
-	if (!quickLinks) {
-		return null
-	}
-	const links = compose(
-		toPairs,
-		filter(dottedName => contains(dottedName, nextSteps)),
-		reject(dottedName => contains(dottedName, quickLinksToHide))
-	)(quickLinks)
-
-	return (
-		!!links.length && (
-			<span>
-				<small>Questions :</small>
-				{links.map(([label, dottedName]) => (
-					<button
-						key={dottedName}
-						className={`ui__ link-button ${
-							dottedName === currentQuestion ? 'active' : ''
-						}`}
-						css="margin: 0 0.4rem !important"
-						onClick={() => goToQuestion(dottedName)}>
-						<T k={'quicklinks.' + label}>{label}</T>
-					</button>
-				))}{' '}
-				{/* <button className="ui__ link-button">Voir la liste</button> */}
-			</span>
-		)
-	)
-}
-
-export default connect(
-	(state, props) => ({
-		key: props.language,
-		currentQuestion: currentQuestionSelector(state),
-		nextSteps: nextStepsSelector(state),
-		quickLinks: state.simulation?.config.questions?.["à l'affiche"],
-		quickLinksToHide: state.conversationSteps.foldedSteps
-	}),
-	{
-		goToQuestion
-	}
-)(QuickLinks)
diff --git a/source/components/QuickLinks.tsx b/source/components/QuickLinks.tsx
new file mode 100644
index 000000000..bd291b530
--- /dev/null
+++ b/source/components/QuickLinks.tsx
@@ -0,0 +1,52 @@
+import { goToQuestion } from 'Actions/actions'
+import { T } from 'Components'
+import { compose, contains, filter, reject, toPairs } from 'ramda'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
+import {
+	currentQuestionSelector,
+	nextStepsSelector
+} from 'Selectors/analyseSelectors'
+
+export default function QuickLinks() {
+	const currentQuestion = useSelector(currentQuestionSelector)
+	const nextSteps = useSelector(nextStepsSelector)
+	const quickLinks = useSelector(
+		(state: RootState) => state.simulation?.config.questions?.["à l'affiche"]
+	)
+	const quickLinksToHide = useSelector(
+		(state: RootState) => state.conversationSteps.foldedSteps
+	)
+	const dispatch = useDispatch()
+
+	if (!quickLinks) {
+		return null
+	}
+	const links = compose(
+		toPairs,
+		filter(dottedName => contains(dottedName, nextSteps)) as any,
+		reject(dottedName => contains(dottedName, quickLinksToHide))
+	)(quickLinks) as any
+
+	return (
+		!!links.length && (
+			<span>
+				<small>Questions :</small>
+				{links.map(([label, dottedName]) => (
+					<button
+						key={dottedName}
+						className={`ui__ link-button ${
+							dottedName === currentQuestion ? 'active' : ''
+						}`}
+						css="margin: 0 0.4rem !important"
+						onClick={() => dispatch(goToQuestion(dottedName))}
+					>
+						<T k={'quicklinks.' + label}>{label}</T>
+					</button>
+				))}{' '}
+				{/* <button className="ui__ link-button">Voir la liste</button> */}
+			</span>
+		)
+	)
+}
diff --git a/source/components/RuleLink.tsx b/source/components/RuleLink.tsx
index 9ed36598a..18e5d7fcb 100644
--- a/source/components/RuleLink.tsx
+++ b/source/components/RuleLink.tsx
@@ -3,11 +3,11 @@ import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { encodeRuleName, nameLeaf } from 'Engine/rules'
 import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
-import { Règle } from 'Types/RegleTypes'
+import { Rule } from 'Types/rule'
 import './RuleLink.css'
 
-type RuleLinkProps = Règle & {
-	style: React.CSSProperties
+type RuleLinkProps = Rule & {
+	style?: React.CSSProperties
 	children: React.ReactNode
 }
 
@@ -27,7 +27,8 @@ export default function RuleLink({
 			to={newPath}
 			className="rule-link"
 			title={title}
-			style={{ color: colour, ...style }}>
+			style={{ color: colour, ...style }}
+		>
 			{children || title || nameLeaf(dottedName)}
 		</Link>
 	)
diff --git a/source/components/RulePage.js b/source/components/RulePage.tsx
similarity index 64%
rename from source/components/RulePage.js
rename to source/components/RulePage.tsx
index 957dfcaeb..d19940c6d 100644
--- a/source/components/RulePage.js
+++ b/source/components/RulePage.tsx
@@ -1,28 +1,28 @@
 import { goBackToSimulation } from 'Actions/actions'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import { decodeRuleName, findRuleByDottedName } from 'Engine/rules.js'
-import { compose } from 'ramda'
 import React from 'react'
 import { Trans } from 'react-i18next'
-import { connect } from 'react-redux'
+import { connect, useSelector } from 'react-redux'
 import { Redirect } from 'react-router-dom'
-import { flatRulesSelector, noUserInputSelector, situationBranchNameSelector } from 'Selectors/analyseSelectors'
+import {
+	flatRulesSelector,
+	noUserInputSelector,
+	situationBranchNameSelector
+} from 'Selectors/analyseSelectors'
+import { DottedName } from 'Types/rule'
 import Rule from './rule/Rule'
 import './RulePage.css'
 import SearchButton from './SearchButton'
 
-
-export default compose(
-	connect(state => ({
-		valuesToShow: !noUserInputSelector(state),
-		flatRules: flatRulesSelector(state),
-		brancheName: situationBranchNameSelector(state)
-	}))
-)(function RulePage({ flatRules, match, valuesToShow, brancheName }) {
-	let name = match ?.params ?.name,
+export default function RulePage({ match }) {
+	const flatRules = useSelector(flatRulesSelector)
+	const brancheName = useSelector(situationBranchNameSelector)
+	const valuesToShow = !useSelector(noUserInputSelector)
+	let name = match?.params?.name,
 		decodedRuleName = decodeRuleName(name)
 
-	const renderRule = dottedName => {
+	const renderRule = (dottedName: DottedName) => {
 		return (
 			<div id="RulePage">
 				<ScrollToTop key={brancheName + dottedName} />
@@ -40,20 +40,16 @@ export default compose(
 		return <Redirect to="/404" />
 
 	return renderRule(decodedRuleName)
-})
+}
 
-const BackToSimulation = compose(
-	connect(
-		null,
-		{ goBackToSimulation }
-	)
-)(
+const BackToSimulation = connect(null, { goBackToSimulation })(
 	// Triggers rerender when the language changes
 	function BackToSimulation({ goBackToSimulation }) {
 		return (
 			<button
 				className="ui__ simple small push-left button"
-				onClick={goBackToSimulation}>
+				onClick={goBackToSimulation}
+			>
 				← <Trans i18nKey="back">Reprendre la simulation</Trans>
 			</button>
 		)
diff --git a/source/components/SalaryExplanation.js b/source/components/SalaryExplanation.tsx
similarity index 88%
rename from source/components/SalaryExplanation.js
rename to source/components/SalaryExplanation.tsx
index 6b96fc002..b5022af9e 100644
--- a/source/components/SalaryExplanation.js
+++ b/source/components/SalaryExplanation.tsx
@@ -4,11 +4,11 @@ import PaySlip from 'Components/PaySlip'
 import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColoursContext } from 'Components/utils/withColours'
 import { getRuleFromAnalysis } from 'Engine/rules'
-import React, { useRef, useContext } from 'react'
+import React, { useContext, useRef } from 'react'
 import emoji from 'react-easy-emoji'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { useTranslation } from 'react-i18next'
+import { RootState } from 'Reducers/rootReducer'
 import {
 	analysisWithDefaultsSelector,
 	usePeriod
@@ -16,7 +16,7 @@ import {
 import * as Animate from 'Ui/animate'
 
 class ErrorBoundary extends React.Component {
-	state = {}
+	state = {} as { error?: string }
 	static getDerivedStateFromError() {
 		return {
 			error:
@@ -32,12 +32,12 @@ class ErrorBoundary extends React.Component {
 
 export default function SalaryExplanation() {
 	const showDistributionFirst = useSelector(
-		state => !state.conversationSteps.foldedSteps.length
+		(state: RootState) => !state.conversationSteps.foldedSteps.length
 	)
-	const distributionRef = useRef({})
+	const distributionRef = useRef<HTMLDivElement>()
 	return (
 		<ErrorBoundary>
-			<Animate.fromTop key={showDistributionFirst}>
+			<Animate.fromTop key={showDistributionFirst.toString()}>
 				{showDistributionFirst ? (
 					<>
 						<RevenueRepatitionSection />
@@ -55,7 +55,8 @@ export default function SalaryExplanation() {
 										behavior: 'smooth',
 										block: 'start'
 									})
-								}>
+								}
+							>
 								{emoji('📊')} <T>Voir la répartition des cotisations</T>
 							</button>
 						</div>
@@ -71,9 +72,7 @@ export default function SalaryExplanation() {
 						Le simulateur vous aide à comprendre votre bulletin de paie, sans
 						lui être opposable. Pour plus d&apos;informations, rendez vous
 						sur&nbsp;
-						<a
-							alt="service-public.fr"
-							href="https://www.service-public.fr/particuliers/vosdroits/F559">
+						<a href="https://www.service-public.fr/particuliers/vosdroits/F559">
 							service-public.fr
 						</a>
 						.
diff --git a/source/components/SchemeComparaison.js b/source/components/SchemeComparaison.tsx
similarity index 86%
rename from source/components/SchemeComparaison.js
rename to source/components/SchemeComparaison.tsx
index 1a1bc0435..90abdd846 100644
--- a/source/components/SchemeComparaison.js
+++ b/source/components/SchemeComparaison.tsx
@@ -8,57 +8,55 @@ import { T } from 'Components'
 import Conversation from 'Components/conversation/Conversation'
 import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
 import PeriodSwitch from 'Components/PeriodSwitch'
-// $FlowFixMe
 import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
-import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import Value from 'Components/Value'
 import { encodeRuleName, getRuleFromAnalysis } from 'Engine/rules.js'
 import revenusSVG from 'Images/revenus.svg'
-import { compose } from 'ramda'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import emoji from 'react-easy-emoji'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import {
 	analysisWithDefaultsSelector,
 	branchAnalyseSelector
 } from 'Selectors/analyseSelectors'
+import { DottedName } from 'Types/rule'
 import Animate from 'Ui/animate'
 import InfoBulle from 'Ui/InfoBulle'
 import './SchemeComparaison.css'
 
-type OwnProps = {
-	hideAutoEntrepreneur?: boolean,
-	hideAssimiléSalarié?: boolean
-}
-
-type Props = OwnProps & {
-	setSituationBranch: number => void,
-	defineDirectorStatus: string => void,
-	sitePaths: any,
-	isAutoentrepreneur: boolean => void,
-	plafondAutoEntrepreneurDépassé: boolean
-}
-
-let getBranchIndex = branch =>
+let getBranchIndex = (branch: string) =>
 	({ assimilé: 0, indépendant: 1, 'auto-entrepreneur': 2 }[branch])
-let getRuleFrom = analyses => (branch, dottedName) => {
+
+let getRuleFrom = analyses => (branch: string, dottedName: DottedName) => {
 	let i = getBranchIndex(branch)
 	return getRuleFromAnalysis(analyses[i])(dottedName)
 }
 
-const SchemeComparaison = ({
-	/* Own Props */
-	hideAutoEntrepreneur = false,
-	hideAssimiléSalarié = false,
-	/* Injected Props */
+type SchemeComparaisonProps = {
+	hideAutoEntrepreneur?: boolean
+	hideAssimiléSalarié?: boolean
+}
+
+export default function SchemeComparaison({
+	hideAutoEntrepreneur = false,
+	hideAssimiléSalarié = false
+}: SchemeComparaisonProps) {
+	useSimulationConfig(ComparaisonConfig)
+	const dispatch = useDispatch()
+	const analyses = useSelector(analysisWithDefaultsSelector)
+	const plafondAutoEntrepreneurDépassé = useSelector((state: RootState) =>
+		branchAnalyseSelector(state, {
+			situationBranchName: 'Auto-entrepreneur'
+		}).controls?.find(
+			({ test }) =>
+				test.includes && test.includes('base des cotisations > plafond')
+		)
+	)
 
-	plafondAutoEntrepreneurDépassé,
-	defineDirectorStatus,
-	isAutoentrepreneur,
-	analyses
-}: Props) => {
 	let getRule = getRuleFrom(analyses)
 	const [showMore, setShowMore] = useState(false)
 	const [conversationStarted, setConversationStarted] = useState(
@@ -74,7 +72,8 @@ const SchemeComparaison = ({
 				className={classnames('comparaison-grid', {
 					hideAutoEntrepreneur,
 					hideAssimiléSalarié
-				})}>
+				})}
+			>
 				<h2 className="AS">
 					{emoji('☂')} <T>Assimilé salarié</T>
 					<small>
@@ -289,7 +288,8 @@ const SchemeComparaison = ({
 						<div className="all">
 							<button
 								onClick={() => setShowMore(true)}
-								className="ui__ simple small button">
+								className="ui__ simple small button"
+							>
 								Afficher plus d'informations
 							</button>
 						</div>
@@ -315,7 +315,8 @@ const SchemeComparaison = ({
 								<img src={revenusSVG} css="height: 8rem" />
 								<button
 									className="ui__ cta plain button"
-									onClick={startConversation}>
+									onClick={startConversation}
+								>
 									Lancer la simulation
 								</button>
 							</T>
@@ -354,7 +355,8 @@ const SchemeComparaison = ({
 									className={classnames(
 										'ui__ plain card',
 										plafondAutoEntrepreneurDépassé && 'disabled'
-									)}>
+									)}
+								>
 									{plafondAutoEntrepreneurDépassé ? (
 										'Plafond de CA dépassé'
 									) : (
@@ -563,18 +565,21 @@ const SchemeComparaison = ({
 						<button
 							className="ui__  button"
 							onClick={() => {
-								defineDirectorStatus('SALARIED')
-								!hideAutoEntrepreneur && isAutoentrepreneur(false)
-							}}>
+								dispatch(defineDirectorStatus('SALARIED'))
+								!hideAutoEntrepreneur && dispatch(isAutoentrepreneur(false))
+							}}
+						>
 							<T k="comparaisonRégimes.choix.AS">Assimilé&nbsp;salarié</T>
 						</button>
 					)}
 					<button
 						className="ui__  button"
 						onClick={() => {
-							!hideAssimiléSalarié && defineDirectorStatus('SELF_EMPLOYED')
-							!hideAutoEntrepreneur && isAutoentrepreneur(false)
-						}}>
+							!hideAssimiléSalarié &&
+								dispatch(defineDirectorStatus('SELF_EMPLOYED'))
+							!hideAutoEntrepreneur && dispatch(isAutoentrepreneur(false))
+						}}
+					>
 						{hideAssimiléSalarié ? (
 							<T k="comparaisonRégimes.choix.EI">Entreprise individuelle</T>
 						) : (
@@ -585,9 +590,11 @@ const SchemeComparaison = ({
 						<button
 							className="ui__ button"
 							onClick={() => {
-								!hideAssimiléSalarié && defineDirectorStatus('SELF_EMPLOYED')
-								isAutoentrepreneur(true)
-							}}>
+								!hideAssimiléSalarié &&
+									dispatch(defineDirectorStatus('SELF_EMPLOYED'))
+								dispatch(isAutoentrepreneur(true))
+							}}
+						>
 							<T k="comparaisonRégimes.choix.auto">Auto-entrepreneur</T>
 						</button>
 					)}
@@ -597,63 +604,37 @@ const SchemeComparaison = ({
 	)
 }
 
-const RuleValueLink = compose(
-	withSitePaths,
-	connect(
-		state => ({
-			analyses: analysisWithDefaultsSelector(state)
-		}),
-		{
-			setSituationBranch
-		}
-	)
-)(
-	({
-		analyses,
-		branch,
-		rule: dottedName,
-		sitePaths,
-		appendText,
-		setSituationBranch,
-		unit
-	}) => {
-		let rule = getRuleFrom(analyses)(branch, dottedName)
-		return !rule ? null : (
-			<Link
-				onClick={() => setSituationBranch(getBranchIndex(branch))}
-				to={
-					sitePaths.documentation.index + '/' + encodeRuleName(rule.dottedName)
-				}>
-				<Value
-					maximumFractionDigits={0}
-					{...rule}
-					unit={
-						/* //TODO the unit should be integrated in the leaf rules of base.yaml and infered by mecanisms. Will be done in a future release*/
-						unit !== undefined ? unit : '€'
-					}
-				/>
-				{appendText && <> {appendText}</>}
-			</Link>
-		)
-	}
-)
+type RuleValueLinkProps = {
+	branch: string
+	rule: string
+	appendText?: React.ReactNode
+	unit?: null | string
+}
 
-export default compose(
-	withSimulationConfig(ComparaisonConfig),
-	connect(
-		state => ({
-			analyses: analysisWithDefaultsSelector(state),
-			plafondAutoEntrepreneurDépassé: branchAnalyseSelector(state, {
-				situationBranchName: 'Auto-entrepreneur'
-			}).controls?.find(
-				({ test }) =>
-					test.includes && test.includes('base des cotisations > plafond')
-			)
-		}),
-		{
-			defineDirectorStatus,
-			isAutoentrepreneur,
-			setSituationBranch
-		}
+function RuleValueLink({
+	branch,
+	rule: dottedName,
+	appendText,
+	unit
+}: RuleValueLinkProps) {
+	const dispatch = useDispatch()
+	const analyses = useSelector(analysisWithDefaultsSelector)
+	const sitePaths = useContext(SitePathsContext)
+	let rule = getRuleFrom(analyses)(branch, dottedName)
+	return !rule ? null : (
+		<Link
+			onClick={() => dispatch(setSituationBranch(getBranchIndex(branch)))}
+			to={sitePaths.documentation.index + '/' + encodeRuleName(rule.dottedName)}
+		>
+			<Value
+				maximumFractionDigits={0}
+				{...rule}
+				unit={
+					/* //TODO the unit should be integrated in the leaf rules of base.yaml and infered by mecanisms. Will be done in a future release*/
+					unit !== undefined ? unit : '€'
+				}
+			/>
+			{appendText && <> {appendText}</>}
+		</Link>
 	)
-)(SchemeComparaison)
+}
diff --git a/source/components/SearchBar.js b/source/components/SearchBar.js
index 430a252f8..60e47b1db 100644
--- a/source/components/SearchBar.js
+++ b/source/components/SearchBar.js
@@ -1,7 +1,7 @@
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { encodeRuleName, parentName } from 'Engine/rules.js'
-import { compose, pick, sortBy, take } from 'ramda'
-import React, { useEffect, useState } from 'react'
+import { pick, sortBy, take } from 'ramda'
+import React, { useContext, useEffect, useState } from 'react'
 import Highlighter from 'react-highlight-words'
 import { useTranslation } from 'react-i18next'
 import { Link, Redirect } from 'react-router-dom'
@@ -10,12 +10,12 @@ import { capitalise0 } from '../utils'
 
 const worker = new Worker()
 
-let SearchBar = ({
+export default function SearchBar({
 	rules,
 	showDefaultList,
-	finally: finallyCallback,
-	sitePaths
-}) => {
+	finally: finallyCallback
+}) {
+	const sitePaths = useContext(SitePathsContext)
 	const [input, setInput] = useState('')
 	const [selectedOption, setSelectedOption] = useState(null)
 	const [results, setResults] = useState([])
@@ -29,7 +29,7 @@ let SearchBar = ({
 		})
 
 		worker.onmessage = ({ data: results }) => setResults(results)
-	}, [])
+	}, [rules])
 
 	let renderOptions = rules => {
 		let options =
@@ -120,5 +120,3 @@ let SearchBar = ({
 		</>
 	)
 }
-
-export default compose(withSitePaths)(SearchBar)
diff --git a/source/components/SearchButton.js b/source/components/SearchButton.tsx
similarity index 75%
rename from source/components/SearchButton.js
rename to source/components/SearchButton.tsx
index d6900a30d..852cb96c5 100644
--- a/source/components/SearchButton.js
+++ b/source/components/SearchButton.tsx
@@ -1,20 +1,20 @@
-import { compose } from 'ramda'
 import React, { useEffect, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import Overlay from './Overlay'
 import SearchBar from './SearchBar'
 
-export default compose(
-	connect(state => ({
-		flatRules: flatRulesSelector(state)
-	}))
-)(function SearchButton({ flatRules, invisibleButton }) {
+type SearchButtonProps = {
+	invisibleButton?: boolean
+}
+
+export default function SearchButton({ invisibleButton }: SearchButtonProps) {
+	const flatRules = useSelector(flatRulesSelector)
 	const [visible, setVisible] = useState(false)
 	useEffect(() => {
-		const handleKeyDown = e => {
+		const handleKeyDown = (e: KeyboardEvent) => {
 			if (!(e.ctrlKey && e.key === 'k')) return
 			setVisible(true)
 			e.preventDefault()
@@ -40,8 +40,9 @@ export default compose(
 	) : invisibleButton ? null : (
 		<button
 			className="ui__ simple small button"
-			onClick={() => setVisible(true)}>
+			onClick={() => setVisible(true)}
+		>
 			{emoji('🔍')} <Trans>Rechercher</Trans>
 		</button>
 	)
-})
+}
diff --git a/source/components/SimulateurWarning.js b/source/components/SimulateurWarning.tsx
similarity index 87%
rename from source/components/SimulateurWarning.js
rename to source/components/SimulateurWarning.tsx
index cf09a95d2..42f7c3c0d 100644
--- a/source/components/SimulateurWarning.js
+++ b/source/components/SimulateurWarning.tsx
@@ -3,7 +3,13 @@ import { usePersistingState } from 'Components/utils/persistState'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 
-export default function SimulateurWarning({ simulateur }) {
+type SimulateurWarningProps = {
+	simulateur: string
+}
+
+export default function SimulateurWarning({
+	simulateur
+}: SimulateurWarningProps) {
 	let [folded, fold] = usePersistingState(
 		'app::simulateurs:warning-folded:v1:' + simulateur,
 		false
@@ -13,7 +19,8 @@ export default function SimulateurWarning({ simulateur }) {
 			id="SimulateurWarning"
 			css={`
 				margin-bottom: 1rem;
-			`}>
+			`}
+		>
 			<p>
 				{emoji('🚩 ')}
 				<strong>
@@ -22,7 +29,8 @@ export default function SimulateurWarning({ simulateur }) {
 				{folded && (
 					<button
 						className="ui__ button simple small"
-						onClick={() => fold(false)}>
+						onClick={() => fold(false)}
+					>
 						<T k="simulateurs.warning.plus">Lire les précisions</T>
 					</button>
 				)}
@@ -30,7 +38,8 @@ export default function SimulateurWarning({ simulateur }) {
 			{!folded && (
 				<div
 					className="ui__ card light-bg"
-					css="padding-top: 1rem; padding-bottom: 0.4rem">
+					css="padding-top: 1rem; padding-bottom: 0.4rem"
+				>
 					<ul>
 						{simulateur == 'auto-entreprise' && (
 							<li>
@@ -66,7 +75,8 @@ export default function SimulateurWarning({ simulateur }) {
 					<div className="ui__ answer-group">
 						<button
 							className="ui__ button simple small"
-							onClick={() => fold(true)}>
+							onClick={() => fold(true)}
+						>
 							<T>J'ai compris</T>
 						</button>
 					</div>
diff --git a/source/components/Simulation.js b/source/components/Simulation.tsx
similarity index 84%
rename from source/components/Simulation.js
rename to source/components/Simulation.tsx
index e4f50f27f..6366ebfc6 100644
--- a/source/components/Simulation.js
+++ b/source/components/Simulation.tsx
@@ -1,6 +1,8 @@
 import { T } from 'Components'
 import Controls from 'Components/Controls'
-import Conversation from 'Components/conversation/Conversation'
+import Conversation, {
+	ConversationProps
+} from 'Components/conversation/Conversation'
 import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
 import PageFeedback from 'Components/Feedback/PageFeedback'
 import SearchButton from 'Components/SearchButton'
@@ -12,7 +14,15 @@ import { simulationProgressSelector } from 'Selectors/progressSelectors'
 import * as Animate from 'Ui/animate'
 import Progress from 'Ui/Progress'
 
-export default function Simulation({ explanations, customEndMessages }) {
+type SimulationProps = {
+	explanations: React.ReactNode
+	customEndMessages?: ConversationProps['customEndMessages']
+}
+
+export default function Simulation({
+	explanations,
+	customEndMessages
+}: SimulationProps) {
 	const firstStepCompleted = useSelector(firstStepCompletedSelector)
 	const progress = useSelector(simulationProgressSelector)
 	return (
@@ -29,7 +39,8 @@ export default function Simulation({ explanations, customEndMessages }) {
 								marginTop: '1.2rem',
 								marginBottom: '0.6rem',
 								alignItems: 'baseline'
-							}}>
+							}}
+						>
 							{progress < 1 ? (
 								<small css="padding: 0.4rem 0">
 									<T k="simulateurs.précision.défaut">
@@ -37,8 +48,8 @@ export default function Simulation({ explanations, customEndMessages }) {
 									</T>
 								</small>
 							) : (
-									<span />
-								)}
+								<span />
+							)}
 							<SeeAnswersButton />
 						</div>
 						<section className="ui__ full-width lighter-bg">
diff --git a/source/components/StackedBarChart.js b/source/components/StackedBarChart.tsx
similarity index 89%
rename from source/components/StackedBarChart.js
rename to source/components/StackedBarChart.tsx
index dd6af24d2..e52baa7aa 100644
--- a/source/components/StackedBarChart.js
+++ b/source/components/StackedBarChart.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
-import styled from 'styled-components'
 import RuleLink from 'Components/RuleLink'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
+import React from 'react'
 import { animated, useSpring } from 'react-spring'
+import styled from 'styled-components'
+import { Rule } from 'Types/rule'
 import { capitalise0 } from '../utils'
 
 const BarStack = styled.div`
@@ -51,7 +52,7 @@ const SmallCircle = styled.span`
 	border-radius: 100%;
 `
 
-function integerAndDecimalParts(value) {
+function integerAndDecimalParts(value: number) {
 	const integer = Math.floor(value)
 	const decimal = value - integer
 	return { integer, decimal }
@@ -59,8 +60,8 @@ function integerAndDecimalParts(value) {
 
 // This function calculates rounded percentages so that the sum of all
 // returned values is always 100. For instance: [60, 30, 10].
-export function roundedPercentages(values) {
-	const sum = (a = 0, b) => a + b
+export function roundedPercentages(values: Array<number>) {
+	const sum = (a: number = 0, b: number) => a + b
 	const total = values.reduce(sum)
 	const percentages = values.map(value =>
 		integerAndDecimalParts((value / total) * 100)
@@ -78,7 +79,11 @@ export function roundedPercentages(values) {
 	)
 }
 
-export default function StackedBarChart({ data }) {
+type StackedBarChartProps = {
+	data: Array<{ color?: string } & Rule>
+}
+
+export default function StackedBarChart({ data }: StackedBarChartProps) {
 	const [intersectionRef, displayChart] = useDisplayOnIntersecting({
 		threshold: 0.5
 	})
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.tsx
similarity index 84%
rename from source/components/TargetSelection.js
rename to source/components/TargetSelection.tsx
index 2d756d479..45d868689 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.tsx
@@ -1,10 +1,10 @@
-import { updateSituation } from 'Actions/actions'
+import { setActiveTarget, updateSituation } from 'Actions/actions'
 import { T } from 'Components'
 import InputSuggestions from 'Components/conversation/InputSuggestions'
 import PeriodSwitch from 'Components/PeriodSwitch'
 import RuleLink from 'Components/RuleLink'
 import { ThemeColoursContext } from 'Components/utils/withColours'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { formatCurrency } from 'Engine/format'
 import { encodeRuleName } from 'Engine/rules'
 import { isEmpty, isNil } from 'ramda'
@@ -13,12 +13,13 @@ import emoji from 'react-easy-emoji'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import {
 	analysisWithDefaultsSelector,
-	useSituation,
-	useSituationValue,
+	situationSelector,
 	useTarget
 } from 'Selectors/analyseSelectors'
+import { Rule } from 'Types/rule'
 import Animate from 'Ui/animate'
 import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
@@ -28,12 +29,13 @@ export default function TargetSelection() {
 	const [initialRender, setInitialRender] = useState(true)
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const objectifs = useSelector(
-		state => state.simulation?.config.objectifs || []
+		(state: RootState) => state.simulation?.config.objectifs || []
 	)
 	const secondaryObjectives = useSelector(
-		state => state.simulation?.config['objectifs secondaires'] || []
+		(state: RootState) =>
+			state.simulation?.config['objectifs secondaires'] || []
 	)
-	const situation = useSituation()
+	const situation = useSelector(situationSelector)
 	const dispatch = useDispatch()
 	const colours = useContext(ThemeColoursContext)
 
@@ -73,7 +75,9 @@ export default function TargetSelection() {
 
 	return (
 		<div id="targetSelection">
-			{(typeof objectifs[0] === 'string' ? [{ objectifs }] : objectifs).map(
+			{((typeof objectifs[0] === 'string'
+				? [{ objectifs }]
+				: objectifs) as any).map(
 				({ icône, objectifs: groupTargets, nom }, index) => (
 					<React.Fragment key={nom || '0'}>
 						<div style={{ display: 'flex', alignItems: 'end' }}>
@@ -96,7 +100,8 @@ export default function TargetSelection() {
 								${colours.darkColour} 0%,
 								${colours.colour} 100%
 								)`
-							}}>
+							}}
+						>
 							<Targets
 								{...{
 									targets: targets.filter(({ dottedName }) =>
@@ -138,7 +143,7 @@ let Targets = ({ targets, initialRender }) => (
 )
 
 const Target = ({ target, initialRender }) => {
-	const activeInput = useSelector(state => state.activeTargetInput)
+	const activeInput = useSelector((state: RootState) => state.activeTargetInput)
 	const dispatch = useDispatch()
 
 	const isActiveInput = activeInput === target.dottedName
@@ -147,7 +152,8 @@ const Target = ({ target, initialRender }) => {
 	return (
 		<li
 			key={target.name}
-			className={isSmallTarget ? 'small-target' : undefined}>
+			className={isSmallTarget ? 'small-target' : undefined}
+		>
 			<Animate.appear unless={initialRender}>
 				<div>
 					<div className="main">
@@ -192,7 +198,8 @@ const Target = ({ target, initialRender }) => {
 	)
 }
 
-let Header = withSitePaths(({ target, sitePaths }) => {
+let Header = ({ target }) => {
+	const sitePaths = useContext(SitePathsContext)
 	const ruleLink =
 		sitePaths.documentation.index + '/' + encodeRuleName(target.dottedName)
 	return (
@@ -205,26 +212,40 @@ let Header = withSitePaths(({ target, sitePaths }) => {
 			</span>
 		</span>
 	)
-})
+}
 
-let TargetInputOrValue = ({ target, isActiveInput, isSmallTarget }) => {
+type TargetInputOrValueProps = {
+	target: Rule
+	isActiveInput: boolean
+	isSmallTarget: boolean
+}
+
+let TargetInputOrValue = ({
+	target,
+	isActiveInput,
+	isSmallTarget
+}: TargetInputOrValueProps) => {
 	const { language } = useTranslation().i18n
 	const colors = useContext(ThemeColoursContext)
 	const dispatch = useDispatch()
-	const situationValue = Math.round(useSituationValue(target.dottedName))
+	const situationValue = Math.round(
+		useSelector(situationSelector)[target.dottedName]
+	)
 	const targetWithValue = useTarget(target.dottedName)
 	const value = targetWithValue?.nodeValue
 		? Math.round(targetWithValue?.nodeValue)
 		: undefined
 	const inversionFail = useSelector(
-		state => analysisWithDefaultsSelector(state)?.cache.inversionFail
+		(state: RootState) =>
+			analysisWithDefaultsSelector(state)?.cache.inversionFail
 	)
 	const blurValue = inversionFail && !isActiveInput && value
 
 	return (
 		<span
 			className="targetInputOrValue"
-			style={blurValue ? { filter: 'blur(3px)' } : {}}>
+			style={blurValue ? { filter: 'blur(3px)' } : {}}
+		>
 			{target.question ? (
 				<>
 					{!isActiveInput && <AnimatedTargetValue value={value} />}
@@ -246,10 +267,7 @@ let TargetInputOrValue = ({ target, isActiveInput, isSmallTarget }) => {
 						}
 						onFocus={() => {
 							if (isSmallTarget) return
-							dispatch({
-								type: 'SET_ACTIVE_TARGET_INPUT',
-								name: target.dottedName
-							})
+							dispatch(setActiveTarget(target.dottedName))
 						}}
 						language={language}
 					/>
@@ -269,6 +287,7 @@ let TargetInputOrValue = ({ target, isActiveInput, isSmallTarget }) => {
 
 function AidesGlimpse() {
 	const aides = useTarget('contrat salarié . aides employeur')
+	const { language } = useTranslation().i18n
 
 	// Dans le cas où il n'y a qu'une seule aide à l'embauche qui s'applique, nous
 	// faisons un lien direct vers cette aide, plutôt qu'un lien vers la liste qui
@@ -286,7 +305,7 @@ function AidesGlimpse() {
 					<T>en incluant</T>{' '}
 					<strong>
 						<AnimatedTargetValue value={aides.nodeValue}>
-							<span>{formatCurrency(aides.nodeValue)}</span>
+							<span>{formatCurrency(aides.nodeValue, language)}</span>
 						</AnimatedTargetValue>
 					</strong>{' '}
 					<T>d'aides</T> {emoji(aides.explanation.icons)}
diff --git a/source/components/Targets.js b/source/components/Targets.tsx
similarity index 70%
rename from source/components/Targets.js
rename to source/components/Targets.tsx
index 8089a150f..f397e4a5e 100644
--- a/source/components/Targets.js
+++ b/source/components/Targets.tsx
@@ -1,17 +1,15 @@
-import withColours from 'Components/utils/withColours'
-import withSitePaths from 'Components/utils/withSitePaths'
-import { compose } from 'ramda'
-import React from 'react'
+import { ThemeColoursContext } from 'Components/utils/withColours'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import './Targets.css'
 
-export default compose(
-	withColours,
-	withSitePaths
-)(function Targets({ colours, sitePaths }) {
+export default function Targets() {
+	const colours = useContext(ThemeColoursContext)
+	const sitePaths = useContext(SitePathsContext)
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	let { nodeValue, unité: unit, dottedName } = analysis.targets[0]
 	return (
@@ -26,10 +24,11 @@ export default compose(
 					title="Quel est calcul ?"
 					style={{ color: colours.colour }}
 					to={sitePaths.documentation.index + '/' + dottedName}
-					className="explanation">
+					className="explanation"
+				>
 					{emoji('📖')}
 				</Link>
 			</span>
 		</div>
 	)
-})
+}
diff --git a/source/components/Value.js b/source/components/Value.tsx
similarity index 78%
rename from source/components/Value.js
rename to source/components/Value.tsx
index 7c796d96f..7d36d686f 100644
--- a/source/components/Value.js
+++ b/source/components/Value.tsx
@@ -1,7 +1,8 @@
 import { T } from 'Components'
-import { formatValue } from 'Engine/format'
+import { formatValue, formatValueOptions } from 'Engine/format'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Rule } from 'Types/rule'
 
 // let booleanTranslations = { true: '✅', false: '❌' }
 
@@ -16,6 +17,19 @@ let style = customStyle => `
 		${customStyle}
 `
 
+type ValueProps = Partial<
+	Pick<Rule, 'nodeValue' | 'unit'> &
+		Pick<
+			formatValueOptions,
+			'maximumFractionDigits' | 'minimumFractionDigits'
+		> & {
+			nilValueSymbol: string
+			children: number
+			negative: boolean
+			customCSS: string
+		}
+>
+
 export default function Value({
 	nodeValue: value,
 	unit,
@@ -25,7 +39,7 @@ export default function Value({
 	children,
 	negative,
 	customCSS = ''
-}) {
+}: ValueProps) {
 	const { language } = useTranslation().i18n
 
 	/* Either an entire rule object is passed, or just the right attributes and the value as a JSX  child*/
@@ -46,7 +60,7 @@ export default function Value({
 			valueType === 'string' ? (
 				<T>{nodeValue}</T>
 			) : valueType === 'object' ? (
-				nodeValue.nom
+				(nodeValue as any).nom
 			) : valueType === 'boolean' ? (
 				booleanTranslations[language][nodeValue]
 			) : (
diff --git a/source/components/conversation/Aide.js b/source/components/conversation/Aide.js
deleted file mode 100644
index 4d9ab472b..000000000
--- a/source/components/conversation/Aide.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { EXPLAIN_VARIABLE } from 'Actions/actions'
-import Animate from 'Components/ui/animate'
-import { Markdown } from 'Components/utils/markdown'
-import withColours from 'Components/utils/withColours'
-import { findRuleByDottedName } from 'Engine/rules'
-import { compose } from 'ramda'
-import React from 'react'
-import emoji from 'react-easy-emoji'
-import { connect } from 'react-redux'
-import { flatRulesSelector } from 'Selectors/analyseSelectors'
-import References from '../rule/References'
-import './Aide.css'
-
-export default compose(
-	connect(
-		state => ({
-			explained: state.explainedVariable,
-			flatRules: flatRulesSelector(state)
-		}),
-		dispatch => ({
-			stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE })
-		})
-	),
-	withColours
-)(function Aide({ flatRules, explained, stopExplaining, colours }) {
-	if (!explained) return <section id="helpWrapper" />
-
-	let rule = findRuleByDottedName(flatRules, explained),
-		text = rule.description,
-		refs = rule.références
-
-	return (
-		<Animate.fromTop><div css={`
-		display: flex; 
-		align-items: center;
-		img {
-			margin: 0 1em 0 !important;
-			width: 1.6em !important;
-			height: 1.6em !important;
-		}
-	`}>
-			{emoji('ℹ️')}
-
-			<div className="controlText ui__ card" css="padding: 0.6rem 0; flex: 1;">
-				<h4>{rule.title}</h4>
-				<p>
-					<Markdown source={text} />
-				</p>
-				{refs && (
-					<div>
-						<p>Pour en savoir plus: </p>
-						<References refs={refs} />
-					</div>
-				)}
-				<button
-					className="hide"
-					aria-label="close"
-					onClick={stopExplaining}
-				>
-					×
-			</button>
-			</div></div></Animate.fromTop>
-	)
-})
diff --git a/source/components/conversation/Aide.tsx b/source/components/conversation/Aide.tsx
new file mode 100644
index 000000000..99b681525
--- /dev/null
+++ b/source/components/conversation/Aide.tsx
@@ -0,0 +1,62 @@
+import { explainVariable } from 'Actions/actions'
+import Animate from 'Components/ui/animate'
+import { Markdown } from 'Components/utils/markdown'
+import { findRuleByDottedName } from 'Engine/rules'
+import React from 'react'
+import emoji from 'react-easy-emoji'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
+import { flatRulesSelector } from 'Selectors/analyseSelectors'
+import References from '../rule/References'
+import './Aide.css'
+
+export default function Aide() {
+	const explained = useSelector((state: RootState) => state.explainedVariable)
+	const flatRules = useSelector(flatRulesSelector)
+	const dispatch = useDispatch()
+
+	const stopExplaining = () => dispatch(explainVariable())
+
+	if (!explained) return <section id="helpWrapper" />
+
+	let rule = findRuleByDottedName(flatRules, explained),
+		text = rule.description,
+		refs = rule.références
+
+	return (
+		<Animate.fromTop>
+			<div
+				css={`
+					display: flex;
+					align-items: center;
+					img {
+						margin: 0 1em 0 !important;
+						width: 1.6em !important;
+						height: 1.6em !important;
+					}
+				`}
+			>
+				{emoji('ℹ️')}
+
+				<div
+					className="controlText ui__ card"
+					css="padding: 0.6rem 0; flex: 1;"
+				>
+					<h4>{rule.title}</h4>
+					<p>
+						<Markdown source={text} />
+					</p>
+					{refs && (
+						<div>
+							<p>Pour en savoir plus: </p>
+							<References refs={refs} />
+						</div>
+					)}
+					<button className="hide" aria-label="close" onClick={stopExplaining}>
+						×
+					</button>
+				</div>
+			</div>
+		</Animate.fromTop>
+	)
+}
diff --git a/source/components/conversation/Conversation.js b/source/components/conversation/Conversation.tsx
similarity index 60%
rename from source/components/conversation/Conversation.js
rename to source/components/conversation/Conversation.tsx
index 142dedd6c..6976ad588 100644
--- a/source/components/conversation/Conversation.js
+++ b/source/components/conversation/Conversation.tsx
@@ -1,22 +1,31 @@
 import { goToQuestion, validateStepWithValue } from 'Actions/actions'
 import { T } from 'Components'
 import QuickLinks from 'Components/QuickLinks'
-import  getInputComponent  from 'Engine/getInputComponent'
+import getInputComponent from 'Engine/getInputComponent'
 import { findRuleByDottedName } from 'Engine/rules'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 import { useDispatch, useSelector } from 'react-redux'
-import { currentQuestionSelector, flatRulesSelector, nextStepsSelector } from 'Selectors/analyseSelectors'
+import { RootState } from 'Reducers/rootReducer'
+import {
+	currentQuestionSelector,
+	flatRulesSelector,
+	nextStepsSelector
+} from 'Selectors/analyseSelectors'
 import * as Animate from 'Ui/animate'
 import Aide from './Aide'
 import './conversation.css'
 
-export default function Conversation({ customEndMessages }) {
+export type ConversationProps = {
+	customEndMessages?: React.ReactNode
+}
+
+export default function Conversation({ customEndMessages }: ConversationProps) {
 	const dispatch = useDispatch()
 	const flatRules = useSelector(flatRulesSelector)
 	const currentQuestion = useSelector(currentQuestionSelector)
 	const previousAnswers = useSelector(
-		state => state.conversationSteps.foldedSteps
+		(state: RootState) => state.conversationSteps.foldedSteps
 	)
 	const nextSteps = useSelector(nextStepsSelector)
 
@@ -29,7 +38,7 @@ export default function Conversation({ customEndMessages }) {
 		)
 	const goToPrevious = () =>
 		dispatch(goToQuestion(previousAnswers.slice(-1)[0]))
-	const handleKeyDown = ({ key }) => {
+	const handleKeyDown = ({ key }: React.KeyboardEvent) => {
 		if (['Escape'].includes(key)) {
 			setDefault()
 		}
@@ -38,7 +47,7 @@ export default function Conversation({ customEndMessages }) {
 	return nextSteps.length ? (
 		<>
 			<Aide />
-			<div tabIndex="0" style={{ outline: 'none' }} onKeyDown={handleKeyDown}>
+			<div tabIndex={0} style={{ outline: 'none' }} onKeyDown={handleKeyDown}>
 				{currentQuestion && (
 					<React.Fragment key={currentQuestion}>
 						<Animate.fadeIn>
@@ -49,14 +58,16 @@ export default function Conversation({ customEndMessages }) {
 								<>
 									<button
 										onClick={goToPrevious}
-										className="ui__ simple small push-left button">
+										className="ui__ simple small push-left button"
+									>
 										← <T>Précédent</T>
 									</button>
 								</>
 							)}
 							<button
 								onClick={setDefault}
-								className="ui__ simple small push-right button">
+								className="ui__ simple small push-right button"
+							>
 								<T>Passer</T> →
 							</button>
 						</div>
@@ -66,20 +77,20 @@ export default function Conversation({ customEndMessages }) {
 			<QuickLinks />
 		</>
 	) : (
-			<div style={{ textAlign: 'center' }}>
-				<h3>
-					{emoji('🌟')}{' '}
-					<T k="simulation-end.title">Vous avez complété cette simulation</T>{' '}
-				</h3>
-				<p>
-					{customEndMessages ? (
-						customEndMessages
-					) : (
-							<T k="simulation-end.text">
-								Vous avez maintenant accès à l'estimation la plus précise possible.
+		<div style={{ textAlign: 'center' }}>
+			<h3>
+				{emoji('🌟')}{' '}
+				<T k="simulation-end.title">Vous avez complété cette simulation</T>{' '}
+			</h3>
+			<p>
+				{customEndMessages ? (
+					customEndMessages
+				) : (
+					<T k="simulation-end.text">
+						Vous avez maintenant accès à l'estimation la plus précise possible.
 					</T>
-						)}
-				</p>
-			</div>
-		)
+				)}
+			</p>
+		</div>
+	)
 }
diff --git a/source/components/conversation/Explicable.js b/source/components/conversation/Explicable.tsx
similarity index 55%
rename from source/components/conversation/Explicable.js
rename to source/components/conversation/Explicable.tsx
index 34ee913e4..a013e8f87 100644
--- a/source/components/conversation/Explicable.js
+++ b/source/components/conversation/Explicable.tsx
@@ -1,27 +1,21 @@
-import { EXPLAIN_VARIABLE } from 'Actions/actions'
+import { explainVariable } from 'Actions/actions'
 import classNames from 'classnames'
 import { findRuleByDottedName } from 'Engine/rules'
-import { compose } from 'ramda'
-import React from 'react'
+import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
-import withTracker from '../utils/withTracker'
+import { DottedName } from 'Types/rule'
+import { TrackerContext } from '../utils/withTracker'
 import './Explicable.css'
 
-export default compose(
-	connect(
-		state => ({
-			explained: state.explainedVariable,
-			flatRules: flatRulesSelector(state)
-		}),
-		dispatch => ({
-			explain: variableName =>
-				dispatch({ type: EXPLAIN_VARIABLE, variableName })
-		})
-	),
-	withTracker
-)(function Explicable({ flatRules, dottedName, explain, explained, tracker }) {
+export default function Explicable({ dottedName }: { dottedName: DottedName }) {
+	const tracker = useContext(TrackerContext)
+	const dispatch = useDispatch()
+	const explained = useSelector((state: RootState) => state.explainedVariable)
+	const flatRules = useSelector(flatRulesSelector)
+
 	// Rien à expliquer ici, ce n'est pas une règle
 	if (dottedName == null) return null
 
@@ -35,17 +29,19 @@ export default compose(
 		<span
 			className={classNames('explicable', {
 				explained: dottedName === explained
-			})}>
+			})}
+		>
 			<span
 				className="icon"
 				onClick={e => {
 					tracker.push(['trackEvent', 'help', dottedName])
-					explain(dottedName)
+					dispatch(explainVariable(dottedName))
 					e.preventDefault()
 					e.stopPropagation()
-				}}>
+				}}
+			>
 				{emoji('ℹ️')}
 			</span>
 		</span>
 	)
-})
+}
diff --git a/source/components/conversation/SeeAnswersButton.js b/source/components/conversation/SeeAnswersButton.tsx
similarity index 59%
rename from source/components/conversation/SeeAnswersButton.js
rename to source/components/conversation/SeeAnswersButton.tsx
index 077349c6d..45208b90e 100644
--- a/source/components/conversation/SeeAnswersButton.js
+++ b/source/components/conversation/SeeAnswersButton.tsx
@@ -1,23 +1,26 @@
 import { T } from 'Components'
 import React, { useState } from 'react'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
 import Answers from './AnswerList'
 import './conversation.css'
 
-export default connect(state => ({
-	arePreviousAnswers: !!state.conversationSteps.foldedSteps.length
-}))(function SeeAnswersButton({ arePreviousAnswers }) {
+export default function SeeAnswersButton() {
+	const arePreviousAnswers = !!useSelector(
+		(state: RootState) => state.conversationSteps.foldedSteps.length
+	)
 	const [showAnswerModal, setShowAnswerModal] = useState(false)
 	return (
 		<>
 			{arePreviousAnswers && (
 				<button
 					className="ui__ small simple  button "
-					onClick={() => setShowAnswerModal(true)}>
+					onClick={() => setShowAnswerModal(true)}
+				>
 					<T>Modifier mes réponses</T>
 				</button>
 			)}
 			{showAnswerModal && <Answers onClose={() => setShowAnswerModal(false)} />}
 		</>
 	)
-})
+}
diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.tsx
similarity index 70%
rename from source/components/conversation/SendButton.js
rename to source/components/conversation/SendButton.tsx
index 10a0f9374..05722b819 100644
--- a/source/components/conversation/SendButton.js
+++ b/source/components/conversation/SendButton.tsx
@@ -1,13 +1,18 @@
 import React, { useCallback, useEffect } from 'react'
 import { Trans } from 'react-i18next'
 
-export default function SendButton({ disabled, submit }) {
+type SendButtonProps = {
+	disabled: boolean
+	submit: (cause: string) => void
+}
+
+export default function SendButton({ disabled, submit }: SendButtonProps) {
 	const getAction = useCallback(cause => (!disabled ? submit(cause) : null), [
 		disabled,
 		submit
 	])
 	useEffect(() => {
-		const handleKeyDown = ({ key }) => {
+		const handleKeyDown = ({ key }: KeyboardEvent) => {
 			if (key !== 'Enter') return
 			getAction('enter')
 		}
@@ -23,7 +28,8 @@ export default function SendButton({ disabled, submit }) {
 			className="ui__ button plain"
 			css="margin-left: 1.2rem"
 			disabled={disabled}
-			onClick={() => getAction('accept')}>
+			onClick={() => getAction('accept')}
+		>
 			<span className="text">
 				<Trans>Suivant</Trans> →
 			</span>
diff --git a/source/components/index.js b/source/components/index.js
deleted file mode 100644
index cab8f1f87..000000000
--- a/source/components/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Trans } from 'react-i18next'
-
-let T = ({ k, ...props }) => <Trans i18nKey={k} {...props} />
-
-export { T }
diff --git a/source/components/index.tsx b/source/components/index.tsx
new file mode 100644
index 000000000..497569cb0
--- /dev/null
+++ b/source/components/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Trans, TransProps } from 'react-i18next'
+
+type TProps = { k?: TransProps['i18nKey'] } & TransProps
+
+const T = ({ k, ...props }: TProps) => <Trans i18nKey={k} {...props} />
+
+export { T }
diff --git a/source/components/rule/Namespace.tsx b/source/components/rule/Namespace.tsx
index f5ed8ce56..56f59cec3 100644
--- a/source/components/rule/Namespace.tsx
+++ b/source/components/rule/Namespace.tsx
@@ -1,12 +1,13 @@
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
-import React from 'react'
+import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { Link } from 'react-router-dom'
 import { capitalise0 } from '../../utils'
 import './Namespace.css'
 
-let Namespace = ({ dottedName, flatRules, colour, sitePaths }) => {
+export default function Namespace({ dottedName, flatRules, colour }) {
+	const sitePaths = useContext(SitePathsContext)
 	return (
 		<ul id="namespace">
 			{dottedName
@@ -36,7 +37,8 @@ let Namespace = ({ dottedName, flatRules, colour, sitePaths }) => {
 								style={style}
 								to={
 									sitePaths.documentation.index + '/' + encodeRuleName(ruleName)
-								}>
+								}
+							>
 								{rule.icons && <span>{emoji(rule.icons)} </span>}
 								{ruleText}
 							</Link>
@@ -47,4 +49,3 @@ let Namespace = ({ dottedName, flatRules, colour, sitePaths }) => {
 		</ul>
 	)
 }
-export default withSitePaths(Namespace)
diff --git a/source/components/rule/References.tsx b/source/components/rule/References.tsx
index ba68daceb..fb92d47b8 100644
--- a/source/components/rule/References.tsx
+++ b/source/components/rule/References.tsx
@@ -32,8 +32,8 @@ function Ref({ name, link }) {
 	)
 }
 
-interface ReferencesProps {
-	refs: { [key: string]: string }
+type ReferencesProps = {
+	refs: { [name: string]: string }
 }
 
 export default function References({ refs }: ReferencesProps) {
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index b1d14636f..bbef4a41c 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -1,7 +1,7 @@
 import { T } from 'Components'
 import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import Value from 'Components/Value'
 import knownMecanisms from 'Engine/known-mecanisms.yaml'
 import {
@@ -10,7 +10,7 @@ import {
 	findRuleByNamespace
 } from 'Engine/rules'
 import { compose, isEmpty } from 'ramda'
-import React, { Suspense, useState } from 'react'
+import React, { Suspense, useContext, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
@@ -42,17 +42,16 @@ export default compose(
 		analysedRule: ruleAnalysisSelector(state, props),
 		analysedExample: exampleAnalysisSelector(state, props)
 	})),
-	AttachDictionary(knownMecanisms),
-	withSitePaths
+	AttachDictionary(knownMecanisms)
 )(function Rule({
 	dottedName,
 	currentExample,
 	flatRules,
 	valuesToShow,
-	sitePaths,
 	analysedExample,
 	analysedRule
 }) {
+	const sitePaths = useContext(SitePathsContext)
 	const [viewSource, setViewSource] = useState(false)
 	const { t } = useTranslation()
 
@@ -60,13 +59,14 @@ export default compose(
 	let { type, name, acronyme, title, description, question, icon } = flatRule,
 		namespaceRules = findRuleByNamespace(flatRules, dottedName)
 	let displayedRule = analysedExample || analysedRule
-	
+
 	const renderToggleSourceButton = () => {
 		return (
 			<button
 				id="toggleRuleSource"
 				className="ui__ link-button"
-				onClick={() => setViewSource(!viewSource)}>
+				onClick={() => setViewSource(!viewSource)}
+			>
 				{emoji(
 					viewSource
 						? `📖 ${t('Revenir à la documentation')}`
@@ -140,7 +140,8 @@ export default compose(
 									> * {
 										margin: 0 0.6em;
 									}
-								`}>
+								`}
+							>
 								<Value
 									{...displayedRule}
 									nilValueSymbol={
@@ -177,7 +178,8 @@ export default compose(
 												? sitePaths.simulateurs.indépendant
 												: // otherwise
 												  sitePaths.simulateurs.index
-										}>
+										}
+									>
 										<T>Faire une simulation</T>
 									</Link>
 								</div>
@@ -224,10 +226,8 @@ export default compose(
 	)
 })
 
-let NamespaceRulesList = compose(
-	withColours,
-	withSitePaths
-)(({ namespaceRules, colours, sitePaths }) => {
+let NamespaceRulesList = compose(withColours)(({ namespaceRules, colours }) => {
+	const sitePaths = useContext(SitePathsContext)
 	return (
 		<section>
 			<h2>
@@ -245,7 +245,8 @@ let NamespaceRulesList = compose(
 								sitePaths.documentation.index +
 								'/' +
 								encodeRuleName(r.dottedName)
-							}>
+							}
+						>
 							{r.title || r.name}
 						</Link>
 					</li>
@@ -264,7 +265,8 @@ let Period = ({ period, valuesToShow }) =>
 				<span
 					className="name"
 					data-term-definition="période"
-					style={{ background: '#8e44ad' }}>
+					style={{ background: '#8e44ad' }}
+				>
 					{period}
 				</span>
 			</span>
diff --git a/source/components/rule/RuleSource.tsx b/source/components/rule/RuleSource.tsx
index 8fb560887..8ae6e6246 100644
--- a/source/components/rule/RuleSource.tsx
+++ b/source/components/rule/RuleSource.tsx
@@ -2,9 +2,12 @@ import { safeDump } from 'js-yaml'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 import rules from 'Règles/base.yaml'
+import { Rule } from 'Types/rule'
 import ColoredYaml from './ColoredYaml'
 
-export default function RuleSource({ dottedName }) {
+type RuleSourceProps = Pick<Rule, 'dottedName'>
+
+export default function RuleSource({ dottedName }: RuleSourceProps) {
 	let source = rules[dottedName]
 
 	return (
diff --git a/source/components/simulationConfigs/useSimulationConfig.ts b/source/components/simulationConfigs/useSimulationConfig.ts
new file mode 100644
index 000000000..cbdc0a365
--- /dev/null
+++ b/source/components/simulationConfigs/useSimulationConfig.ts
@@ -0,0 +1,16 @@
+import { resetSimulation, setSimulationConfig } from 'Actions/actions'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState, SimulationConfig } from 'Reducers/rootReducer'
+
+export function useSimulationConfig(config: SimulationConfig) {
+	const dispatch = useDispatch()
+	const stateConfig = useSelector(
+		(state: RootState) => state.simulation?.config
+	)
+	if (config !== stateConfig) {
+		dispatch(setSimulationConfig(config))
+		if (stateConfig) {
+			dispatch(resetSimulation())
+		}
+	}
+}
diff --git a/source/components/simulationConfigs/withSimulationConfig.js b/source/components/simulationConfigs/withSimulationConfig.js
deleted file mode 100644
index e769717fc..000000000
--- a/source/components/simulationConfigs/withSimulationConfig.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { resetSimulation, setSimulationConfig } from 'Actions/actions'
-import { compose } from 'ramda'
-import React from 'react'
-import { connect } from 'react-redux'
-import { noUserInputSelector } from 'Selectors/analyseSelectors'
-
-export default config => SimulationComponent =>
-	compose(
-		connect(
-			state => ({
-				config: state.simulation?.config,
-				noUserInput: noUserInputSelector(state)
-			}),
-			{
-				setSimulationConfig,
-				resetSimulation
-			}
-		)
-	)(function DecoratedSimulation(props) {
-		if (config !== props.config) {
-			props.setSimulationConfig(config)
-			if (props.config) {
-				props.resetSimulation()
-			}
-		}
-		if (!config) return null
-		return <SimulationComponent {...props} />
-	})
diff --git a/source/components/ui/AnimatedTargetValue.tsx b/source/components/ui/AnimatedTargetValue.tsx
index 5ce84d116..2004a32cf 100644
--- a/source/components/ui/AnimatedTargetValue.tsx
+++ b/source/components/ui/AnimatedTargetValue.tsx
@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next'
 import { usePeriod } from 'Selectors/analyseSelectors'
 import './AnimatedTargetValue.css'
 
-interface AnimatedTargetValueProps {
+type AnimatedTargetValueProps = {
 	value?: number
-	children: React.ReactNode
+	children?: React.ReactNode
 }
 
-function formatDifference(difference, language) {
+const formatDifference: typeof formatCurrency = (difference, language) => {
 	const prefix = difference > 0 ? '+' : ''
 	return prefix + formatCurrency(difference, language)
 }
@@ -46,7 +46,8 @@ export default function AnimatedTargetValue({
 						style={{
 							color: difference > 0 ? 'chartreuse' : 'red',
 							pointerEvents: 'none'
-						}}>
+						}}
+					>
 						{formatDifference(difference, language)}
 					</Evaporate>
 				)}{' '}
@@ -61,7 +62,8 @@ const Evaporate = React.memo(
 		<ReactCSSTransitionGroup
 			transitionName="evaporate"
 			transitionEnterTimeout={2500}
-			transitionLeaveTimeout={1}>
+			transitionLeaveTimeout={1}
+		>
 			<span key={children} style={style} className="evaporate">
 				{children}
 			</span>
diff --git a/source/components/ui/Checklist/index.tsx b/source/components/ui/Checklist/index.tsx
index dccbd4a39..7157404fa 100644
--- a/source/components/ui/Checklist/index.tsx
+++ b/source/components/ui/Checklist/index.tsx
@@ -1,9 +1,9 @@
 import classnames from 'classnames'
-import Animate from 'Ui/animate'
 import { Markdown } from 'Components/utils/markdown'
 import { ScrollToElement } from 'Components/utils/Scroll'
 import { TrackerContext } from 'Components/utils/withTracker'
 import React, { Component, useContext, useState } from 'react'
+import Animate from 'Ui/animate'
 import Checkbox from '../Checkbox'
 import './index.css'
 
@@ -58,7 +58,8 @@ export function CheckItem({
 					className={classnames('ui__ checklist-button', {
 						opened: displayExplanations
 					})}
-					onClick={handleClick}>
+					onClick={handleClick}
+				>
 					{title}
 				</button>
 			</div>
@@ -78,7 +79,7 @@ export function CheckItem({
 	)
 }
 
-type ChecklistProps = {
+export type ChecklistProps = {
 	children: React.ReactNode
 	onItemCheck: (string, boolean) => void
 	onInitialization: (arg: Array<string>) => void
diff --git a/source/components/ui/Progress.tsx b/source/components/ui/Progress.tsx
index ba6ea7890..8341f0c68 100644
--- a/source/components/ui/Progress.tsx
+++ b/source/components/ui/Progress.tsx
@@ -1,7 +1,17 @@
 import React from 'react'
 import './Progress.css'
 
-export default function Progress({ progress, style, className }) {
+type ProgressProps = {
+	progress: number
+	style?: React.CSSProperties
+	className: string
+}
+
+export default function Progress({
+	progress,
+	style,
+	className
+}: ProgressProps) {
 	return (
 		<div className={'progress__container ' + className} style={style}>
 			<div className="progress__bar" style={{ width: `${progress * 100}%` }} />
diff --git a/source/components/ui/SocialIcon.tsx b/source/components/ui/SocialIcon.tsx
index 9857e58b1..e7b7dc6b5 100644
--- a/source/components/ui/SocialIcon.tsx
+++ b/source/components/ui/SocialIcon.tsx
@@ -1,13 +1,5 @@
-import withColours, { ThemeColours } from 'Components/utils/withColours'
-import React from 'react'
-
-type OwnProps = {
-	media: 'email' | 'facebook' | 'linkedin' | 'github' | 'twitter'
-}
-
-type Props = {
-	colours: ThemeColours
-} & OwnProps
+import { ThemeColoursContext } from 'Components/utils/withColours'
+import React, { useContext } from 'react'
 
 const icons = {
 	facebook: {
@@ -42,10 +34,12 @@ const icons = {
 	}
 }
 
-export default withColours(function withSocialMedia({
-	media,
-	colours: { colour }
-}: Props) {
+export default function withSocialMedia({
+	media
+}: {
+	media: keyof typeof icons
+}) {
+	const { colour } = useContext(ThemeColoursContext)
 	return (
 		<svg
 			viewBox="0 0 64 64"
@@ -55,7 +49,8 @@ export default withColours(function withSocialMedia({
 				height: '2rem',
 				margin: '0.6rem',
 				fillRule: 'evenodd'
-			}}>
+			}}
+		>
 			<g
 				style={{
 					display: 'inline-block',
@@ -64,7 +59,8 @@ export default withColours(function withSocialMedia({
 					position: 'relative',
 					overflow: 'hidden',
 					verticalAlign: 'middle'
-				}}>
+				}}
+			>
 				<circle cx="32" cy="32" r="31" />
 			</g>
 			<g>
@@ -75,4 +71,4 @@ export default withColours(function withSocialMedia({
 			</g>
 		</svg>
 	)
-})
+}
diff --git a/source/components/utils/markdown.tsx b/source/components/utils/markdown.tsx
index 37e4ee8a2..36d45a3b2 100644
--- a/source/components/utils/markdown.tsx
+++ b/source/components/utils/markdown.tsx
@@ -14,18 +14,16 @@ function LinkRenderer({ href, children }) {
 	}
 }
 
-interface MarkdownProps {
+type MarkdownProps = ReactMarkdownProps & {
 	source: string
 	className?: string
-	renderers?: ReactMarkdownProps['renderers']
-	[other_props: string]: any
 }
 
 export const Markdown = ({
 	source,
 	className = '',
 	renderers = {},
-	otherProps
+	...otherProps
 }: MarkdownProps) => (
 	<ReactMarkdown
 		source={source}
diff --git a/source/components/utils/persistState.ts b/source/components/utils/persistState.ts
index e303775ce..f1e49ebe8 100644
--- a/source/components/utils/persistState.ts
+++ b/source/components/utils/persistState.ts
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react'
 import safeLocalStorage from '../../storage/safeLocalStorage'
 
-export const persistState = key => ([state, changeState]) => {
+export const persistState = (key: string) => ([state, changeState]) => {
 	useEffect(() => safeLocalStorage.setItem(key, JSON.stringify(state)), [state])
 	return [state, changeState]
 }
-export const getInitialState = key => {
+
+export const getInitialState = (key: string) => {
 	const value = safeLocalStorage.getItem(key)
 	if (!value) {
 		return
diff --git a/source/components/utils/useDisplayOnIntersecting.js b/source/components/utils/useDisplayOnIntersecting.ts
similarity index 70%
rename from source/components/utils/useDisplayOnIntersecting.js
rename to source/components/utils/useDisplayOnIntersecting.ts
index 58562689b..26096ee88 100644
--- a/source/components/utils/useDisplayOnIntersecting.js
+++ b/source/components/utils/useDisplayOnIntersecting.ts
@@ -1,7 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
 
-export default function({ root = null, rootMargin, threshold = 0 }) {
-	const ref = useRef()
+export default function({
+	root = null,
+	rootMargin,
+	threshold = 0
+}: IntersectionObserverInit): [React.RefObject<HTMLDivElement>, boolean] {
+	const ref = useRef<HTMLDivElement>()
 	const [wasOnScreen, setWasOnScreen] = useState(false)
 
 	useEffect(() => {
@@ -25,7 +29,7 @@ export default function({ root = null, rootMargin, threshold = 0 }) {
 		return () => {
 			observer.unobserve(node)
 		}
-	}, [root, rootMargin, threshold]) // Empty array ensures that effect is only run on mount and unmount
+	}, [root, rootMargin, threshold])
 
 	return [ref, wasOnScreen]
 }
diff --git a/source/components/utils/withColours.tsx b/source/components/utils/withColours.tsx
index 2e0f87545..fc93f7496 100644
--- a/source/components/utils/withColours.tsx
+++ b/source/components/utils/withColours.tsx
@@ -111,7 +111,7 @@ export function ThemeColoursProvider({ colour, children }: ProviderProps) {
 	)
 }
 
-interface WithColoursProps {
+type WithColoursProps = {
 	colours: ThemeColours
 }
 
diff --git a/source/components/utils/withSitePaths.tsx b/source/components/utils/withSitePaths.tsx
index 237df4a0b..0b6f71f9f 100644
--- a/source/components/utils/withSitePaths.tsx
+++ b/source/components/utils/withSitePaths.tsx
@@ -1,30 +1,10 @@
-import React, { createContext } from 'react'
+import { createContext } from 'react'
 import { SitePathsType } from 'sites/mon-entreprise.fr/sitePaths'
 
-export const SitePathsContext = createContext<Partial<SitePathsType>>({})
+export const SitePathsContext = createContext<SitePathsType>(
+	{} as SitePathsType
+)
 
 export const SitePathProvider = SitePathsContext.Provider
 
-export interface WithSitePathsProps {
-	sitePaths: SitePathsType
-}
-
-export default function withSitePaths<P extends object>(
-	WrappedComponent: React.ComponentType<P>
-) {
-	class WithSitePaths extends React.Component<P & WithSitePathsProps> {
-		displayName = `withSitePaths(${WrappedComponent.displayName || ''})`
-		render() {
-			return (
-				<SitePathsContext.Consumer>
-					{sitePaths => (
-						<WrappedComponent {...(this.props as P)} sitePaths={sitePaths} />
-					)}
-				</SitePathsContext.Consumer>
-			)
-		}
-	}
-	return WithSitePaths
-}
-
 export type SitePaths = SitePathsType
diff --git a/source/components/utils/withTracker.tsx b/source/components/utils/withTracker.tsx
index cfb3a3b57..61c816867 100644
--- a/source/components/utils/withTracker.tsx
+++ b/source/components/utils/withTracker.tsx
@@ -1,19 +1,5 @@
-import React, { createContext } from 'react'
+import { createContext } from 'react'
 import Tracker, { devTracker } from '../../Tracker'
 
-export const TrackerContext = createContext(devTracker)
+export const TrackerContext = createContext<Tracker>(devTracker)
 export const TrackerProvider = TrackerContext.Provider
-
-export interface WithTrackerProps {
-	tracker: Tracker
-}
-
-export default function withTracker(Component: React.ComponentType) {
-	return function ConnectTracker(props) {
-		return (
-			<TrackerContext.Consumer>
-				{(tracker: Tracker) => <Component {...props} tracker={tracker} />}
-			</TrackerContext.Consumer>
-		)
-	}
-}
diff --git a/source/engine/format.js b/source/engine/format.ts
similarity index 77%
rename from source/engine/format.js
rename to source/engine/format.ts
index ea9c0e889..06a8e262e 100644
--- a/source/engine/format.js
+++ b/source/engine/format.ts
@@ -1,5 +1,6 @@
 import { serialiseUnit } from 'Engine/units'
 import { memoizeWith } from 'ramda'
+import { Unit } from './units'
 
 const NumberFormat = memoizeWith(
 	(...args) => JSON.stringify(args),
@@ -11,6 +12,11 @@ export let numberFormatter = ({
 	maximumFractionDigits = 2,
 	minimumFractionDigits = 0,
 	language
+}: {
+	style?: string
+	maximumFractionDigits?: number
+	minimumFractionDigits?: number
+	language?: string
 }) => value => {
 	// When we format currency we don't want to display a single decimal digit
 	// ie 8,1€ but we want to display 8,10€
@@ -29,7 +35,7 @@ export let numberFormatter = ({
 	}).format(value)
 }
 
-export const currencyFormat = language => ({
+export const currencyFormat = (language: string) => ({
 	isCurrencyPrefixed: !!numberFormatter({ language, style: 'currency' })(
 		12
 	).match(/^€/),
@@ -37,7 +43,7 @@ export const currencyFormat = language => ({
 	decimalSeparator: numberFormatter({ language })(0.1).charAt(1)
 })
 
-export const formatCurrency = (value, language) => {
+export const formatCurrency = (value: number, language: string) => {
 	return value == null
 		? ''
 		: formatValue({ unit: '€', language, value }).replace(/^(-)?€/, '$1€\u00A0')
@@ -48,13 +54,21 @@ export const formatPercentage = value =>
 		? ''
 		: formatValue({ unit: '%', value, maximumFractionDigits: 2 })
 
+export type formatValueOptions = {
+	maximumFractionDigits?: number
+	minimumFractionDigits?: number
+	language?: string
+	unit: Unit | string
+	value: number
+}
+
 export function formatValue({
 	maximumFractionDigits,
 	minimumFractionDigits,
 	language,
 	unit,
 	value
-}) {
+}: formatValueOptions) {
 	if (typeof value !== 'number') {
 		return value
 	}
@@ -69,7 +83,11 @@ export function formatValue({
 				language
 			})(value)
 		case '%':
-			return numberFormatter({ style: 'percent', maximumFractionDigits })(value)
+			return numberFormatter({
+				style: 'percent',
+				maximumFractionDigits,
+				language
+			})(value)
 		default:
 			return (
 				numberFormatter({
diff --git a/source/engine/mecanismViews/common.js b/source/engine/mecanismViews/common.tsx
similarity index 83%
rename from source/engine/mecanismViews/common.js
rename to source/engine/mecanismViews/common.tsx
index 7fe45e727..eb2e19204 100644
--- a/source/engine/mecanismViews/common.js
+++ b/source/engine/mecanismViews/common.tsx
@@ -1,10 +1,10 @@
 import { default as classNames, default as classnames } from 'classnames'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import Value from 'Components/Value'
-import { compose, contains, isNil, pipe, sort, toPairs } from 'ramda'
-import React from 'react'
+import { contains, isNil, pipe, sort, toPairs } from 'ramda'
+import React, { useContext } from 'react'
 import { Trans } from 'react-i18next'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import { LinkButton } from 'Ui/Button'
@@ -26,7 +26,8 @@ export let NodeValuePointer = ({ data, unit }) => (
 			box-shadow: 2px 2px 4px 1px #d9d9d9, 0 0 0 1px #d9d9d9;
 			line-height: 1.6em;
 			border-radius: 0.2rem;
-		`}>
+		`}
+	>
 		<Value nodeValue={data} unit={unit} />
 	</span>
 )
@@ -38,13 +39,15 @@ export function Node({ classes, name, value, child, inline, unit }) {
 	return (
 		<div
 			className={classNames(classes, 'node', { inline })}
-			style={termDefinition ? { borderColor: mecanismColours(name) } : {}}>
+			style={termDefinition ? { borderColor: mecanismColours(name) } : {}}
+		>
 			{name && !inline && (
 				<div className="nodeHead" css="margin-bottom: 1em">
 					<LinkButton
 						className="name"
 						style={termDefinition ? { background: mecanismColours(name) } : {}}
-						data-term-definition={termDefinition}>
+						data-term-definition={termDefinition}
+					>
 						<Trans>{name}</Trans>
 					</LinkButton>
 				</div>
@@ -64,7 +67,8 @@ export function Node({ classes, name, value, child, inline, unit }) {
 							width: 100%;
 							text-align: right;
 						}
-					`}>
+					`}
+				>
 					{value !== true && value !== false && !isNil(value) && (
 						<span className="operator"> =&nbsp;</span>
 					)}
@@ -81,7 +85,8 @@ export function InlineMecanism({ name }) {
 			<LinkButton
 				className="name"
 				data-term-definition={name}
-				style={{ background: mecanismColours(name) }}>
+				style={{ background: mecanismColours(name) }}
+			>
 				<Trans>{name}</Trans>
 			</LinkButton>
 		</span>
@@ -89,19 +94,9 @@ export function InlineMecanism({ name }) {
 }
 
 // Un élément du graphe de calcul qui a une valeur interprétée (à afficher)
-export const Leaf = compose(
-	withSitePaths,
-	connect(state => ({ flatRules: flatRulesSelector(state) }))
-)(function Leaf({
-	classes,
-	dottedName,
-	name,
-	nodeValue,
-	flatRules,
-	filter,
-	sitePaths,
-	unit
-}) {
+export function Leaf({ classes, dottedName, name, nodeValue, filter, unit }) {
+	const sitePaths = useContext(SitePathsContext)
+	const flatRules = useSelector(flatRulesSelector)
 	let rule = findRuleByDottedName(flatRules, dottedName)
 
 	return (
@@ -111,7 +106,8 @@ export const Leaf = compose(
 					<Link
 						to={
 							sitePaths.documentation.index + '/' + encodeRuleName(dottedName)
-						}>
+						}
+					>
 						<span className="name">
 							{rule.title || capitalise0(name)} {filter}
 						</span>
@@ -120,7 +116,8 @@ export const Leaf = compose(
 						<span
 							css={`
 								margin: 0 0.3rem;
-							`}>
+							`}
+						>
 							<NodeValuePointer data={nodeValue} unit={unit} />
 						</span>
 					)}
@@ -128,7 +125,7 @@ export const Leaf = compose(
 			)}
 		</span>
 	)
-})
+}
 
 export function SimpleRuleLink({ rule: { dottedName, title, name } }) {
 	return (
@@ -139,7 +136,7 @@ export function SimpleRuleLink({ rule: { dottedName, title, name } }) {
 }
 
 export let sortObjectByKeys = pipe(
-	toPairs,
+	toPairs as any,
 	// we don't rely on the sorting of objects
-	sort(([k1], [k2]) => k1 - k2)
+	sort(([k1]: [number], [k2]: [number]) => k1 - k2)
 )
diff --git a/source/engine/units.js b/source/engine/units.ts
similarity index 75%
rename from source/engine/units.js
rename to source/engine/units.ts
index bc07a4009..c602690ed 100644
--- a/source/engine/units.js
+++ b/source/engine/units.ts
@@ -1,8 +1,15 @@
-import { remove, isEmpty, unnest } from 'ramda'
+import { isEmpty, remove, unnest } from 'ramda'
 import i18n from '../i18n'
 
+type BaseUnit = string
+
+export type Unit = {
+	numerators: Array<BaseUnit>
+	denominators: Array<BaseUnit>
+}
+
 //TODO this function does not handle complex units like passenger-kilometer/flight
-export let parseUnit = string => {
+export let parseUnit = (string: string): Unit => {
 	let [a, b = ''] = string.split('/'),
 		result = {
 			numerators: a !== '' ? [getUnitKey(a)] : [],
@@ -14,21 +21,25 @@ export let parseUnit = string => {
 const translations = Object.entries(
 	i18n.getResourceBundle(i18n.language, 'units')
 )
-function getUnitKey(unit) {
+function getUnitKey(unit: string): string {
 	const key = translations
 		.find(([, trans]) => trans === unit)?.[0]
 		.replace(/_plural$/, '')
 	return key || unit
 }
 
-let printUnits = (units, count) =>
+let printUnits = (units: Array<string>, count: number): string =>
 	units
 		.filter(unit => unit !== '%')
 		.map(unit => i18n.t(`units:${unit}`, { count }))
 		.join('-')
 
 const plural = 2
-export let serialiseUnit = (rawUnit, count = plural, lng = undefined) => {
+export let serialiseUnit = (
+	rawUnit: Unit | null | string,
+	count: number = plural,
+	lng?: string
+) => {
 	if (rawUnit === null || typeof rawUnit !== 'object') {
 		return typeof rawUnit === 'string'
 			? i18n.t(`units:${rawUnit}`, { count, lng })
@@ -54,8 +65,13 @@ export let serialiseUnit = (rawUnit, count = plural, lng = undefined) => {
 	return string
 }
 
+type SupportedOperators = '*' | '/' | '+' | '-'
+
 let noUnit = { numerators: [], denominators: [] }
-export let inferUnit = (operator, rawUnits) => {
+export let inferUnit = (
+	operator: SupportedOperators,
+	rawUnits: Array<Unit>
+): Unit => {
 	let units = rawUnits.map(u => u || noUnit)
 	if (operator === '*')
 		return simplify({
@@ -80,13 +96,14 @@ export let inferUnit = (operator, rawUnits) => {
 
 	return null
 }
-export let removeOnce = element => list => {
+
+export let removeOnce = <T>(element: T) => (list: Array<T>): Array<T> => {
 	let index = list.indexOf(element)
-	if (index > -1) return remove(index, 1)(list)
+	if (index > -1) return remove<T>(index, 1)(list)
 	else return list
 }
 
-let simplify = unit =>
+let simplify = (unit: Unit): Unit =>
 	[...unit.numerators, ...unit.denominators].reduce(
 		({ numerators, denominators }, next) =>
 			numerators.includes(next) && denominators.includes(next)
diff --git a/source/i18n.ts b/source/i18n.ts
index 0a79a84c5..7d9ae44b7 100644
--- a/source/i18n.ts
+++ b/source/i18n.ts
@@ -4,6 +4,8 @@ import enTranslations from './locales/en.yaml'
 import unitsTranslations from './locales/units.yaml'
 import { getSessionStorage } from './utils'
 
+export type AvailableLangs = 'fr' | 'en'
+
 let lang =
 	(typeof document !== 'undefined' &&
 		new URLSearchParams(document.location.search.substring(1)).get('lang')) ||
diff --git a/source/reducers/inFranceAppReducer.js b/source/reducers/inFranceAppReducer.ts
similarity index 77%
rename from source/reducers/inFranceAppReducer.js
rename to source/reducers/inFranceAppReducer.ts
index e7519b7fb..5856df9f1 100644
--- a/source/reducers/inFranceAppReducer.js
+++ b/source/reducers/inFranceAppReducer.ts
@@ -1,13 +1,13 @@
-
+import { Action as CreationChecklistAction } from 'Actions/companyCreationChecklistActions'
+import { Action as HiringChecklist } from 'Actions/hiringChecklistAction'
 import { omit } from 'ramda'
 import { combineReducers } from 'redux'
-import type {
+import { LegalStatus } from 'Selectors/companyStatusSelectors'
+import {
 	Action as CompanyStatusAction,
-		LegalStatusRequirements,
-		State
+	LegalStatusRequirements
 } from 'Types/companyTypes'
-import type { Action as CreationChecklistAction } from 'Types/companyCreationChecklistTypes'
-import type { Action as HiringChecklist } from 'Types/hiringChecklistTypes'
+
 type Action = CompanyStatusAction | CreationChecklistAction | HiringChecklist
 
 function companyLegalStatus(
@@ -32,7 +32,10 @@ function companyLegalStatus(
 	return state
 }
 
-function hiringChecklist(state: { [string]: boolean } = {}, action: Action) {
+function hiringChecklist(
+	state: { [key: string]: boolean } = {},
+	action: Action
+) {
 	switch (action.type) {
 		case 'CHECK_HIRING_ITEM':
 			return {
@@ -43,16 +46,16 @@ function hiringChecklist(state: { [string]: boolean } = {}, action: Action) {
 			return Object.keys(state).length
 				? state
 				: action.checklistItems.reduce(
-					(checklist, item) => ({ ...checklist, [item]: false }),
-					{}
-				)
+						(checklist, item) => ({ ...checklist, [item]: false }),
+						{}
+				  )
 		default:
 			return state
 	}
 }
 
 function companyCreationChecklist(
-	state: { [string]: boolean } = {},
+	state: { [key: string]: boolean } = {},
 	action: Action
 ) {
 	switch (action.type) {
@@ -65,9 +68,9 @@ function companyCreationChecklist(
 			return Object.keys(state).length
 				? state
 				: action.checklistItems.reduce(
-					(checklist, item) => ({ ...checklist, [item]: false }),
-					{}
-				)
+						(checklist, item) => ({ ...checklist, [item]: false }),
+						{}
+				  )
 		case 'RESET_COMPANY_STATUS_CHOICE':
 			return {}
 		default:
@@ -75,7 +78,10 @@ function companyCreationChecklist(
 	}
 }
 
-function companyStatusChoice(state: ?string = null, action: Action) {
+function companyStatusChoice(
+	state: LegalStatus = null,
+	action: Action
+): LegalStatus {
 	if (action.type === 'RESET_COMPANY_STATUS_CHOICE') {
 		return null
 	}
@@ -85,7 +91,9 @@ function companyStatusChoice(state: ?string = null, action: Action) {
 	return action.statusName
 }
 
-const infereLegalStatusFromCategorieJuridique = catégorieJuridique => {
+const infereLegalStatusFromCategorieJuridique = (
+	catégorieJuridique: string
+) => {
 	/*
 	Nous utilisons le code entreprise pour connaitre le statut juridique
 	(voir https://www.insee.fr/fr/information/2028129)
@@ -114,14 +122,16 @@ const infereLegalStatusFromCategorieJuridique = catégorieJuridique => {
 	}
 	return 'NON_IMPLÉMENTÉ'
 }
-function existingCompany(
-	state: ?{
-		siren: string,
-		catégorieJuridique: ?string,
-		statutJuridique: string
-	} = null,
-	action
-) {
+
+export type Company = {
+	siren: string
+	catégorieJuridique?: string
+	statutJuridique?: string
+	isAutoEntrepreneur?: boolean
+	isDirigeantMajoritaire?: boolean
+}
+
+function existingCompany(state: Company = null, action): Company {
 	if (!action.type.startsWith('EXISTING_COMPANY::')) {
 		return state
 	}
@@ -150,11 +160,10 @@ function existingCompany(
 	return state
 }
 
-// $FlowFixMe
-export default (combineReducers({
+export default combineReducers({
 	companyLegalStatus,
 	companyStatusChoice,
 	companyCreationChecklist,
 	existingCompany,
 	hiringChecklist
-}): (State, Action) => State)
+})
diff --git a/source/reducers/rootReducer.js b/source/reducers/rootReducer.ts
similarity index 56%
rename from source/reducers/rootReducer.js
rename to source/reducers/rootReducer.ts
index 645a9bc11..5863c3b5e 100644
--- a/source/reducers/rootReducer.js
+++ b/source/reducers/rootReducer.ts
@@ -1,19 +1,33 @@
-
+import { Action } from 'Actions/actions'
 import { findRuleByDottedName } from 'Engine/rules'
-import { compose, defaultTo, dissoc, identity, lensPath, omit, over, set, uniq, without } from 'ramda'
+import {
+	compose,
+	defaultTo,
+	dissoc,
+	identity,
+	lensPath,
+	omit,
+	over,
+	set,
+	uniq,
+	without
+} from 'ramda'
 import reduceReducers from 'reduce-reducers'
-import { combineReducers } from 'redux'
+import { combineReducers, Reducer } from 'redux'
 import { targetNamesSelector } from 'Selectors/analyseSelectors'
-import i18n from '../i18n'
+import { SavedSimulation } from 'Selectors/storageSelectors'
+import { DottedName, Rule } from 'Types/rule'
+import i18n, { AvailableLangs } from '../i18n'
 import inFranceAppReducer from './inFranceAppReducer'
 import storageRootReducer from './storageReducer'
 
-import type { Action } from 'Types/ActionsTypes'
-
-function explainedVariable(state = null, { type, variableName = null }) {
-	switch (type) {
+function explainedVariable(
+	state: DottedName = null,
+	action: Action
+): DottedName {
+	switch (action.type) {
 		case 'EXPLAIN_VARIABLE':
-			return variableName
+			return action.variableName
 		case 'STEP_ACTION':
 			return null
 		default:
@@ -21,28 +35,32 @@ function explainedVariable(state = null, { type, variableName = null }) {
 	}
 }
 
-function currentExample(state = null, { type, situation, name, dottedName }) {
-	switch (type) {
+function currentExample(state = null, action: Action) {
+	switch (action.type) {
 		case 'SET_EXAMPLE':
+			const { situation, name, dottedName } = action
 			return name != null ? { name, situation, dottedName } : null
 		default:
 			return state
 	}
 }
 
-function situationBranch(state = null, { type, id }) {
-	switch (type) {
+function situationBranch(state: number = null, action: Action): number {
+	switch (action.type) {
 		case 'SET_SITUATION_BRANCH':
-			return id
+			return action.id
 		default:
 			return state
 	}
 }
 
-function activeTargetInput(state = null, { type, name }) {
-	switch (type) {
+function activeTargetInput(
+	state: DottedName | null = null,
+	action: Action
+): DottedName | null {
+	switch (action.type) {
 		case 'SET_ACTIVE_TARGET_INPUT':
-			return name
+			return action.name
 		case 'RESET_SIMULATION':
 			return null
 		default:
@@ -50,7 +68,10 @@ function activeTargetInput(state = null, { type, name }) {
 	}
 }
 
-function lang(state = i18n.language, { type, lang }) {
+function lang(
+	state = i18n.language as AvailableLangs,
+	{ type, lang }
+): AvailableLangs {
 	switch (type) {
 		case 'SWITCH_LANG':
 			return lang
@@ -59,10 +80,10 @@ function lang(state = i18n.language, { type, lang }) {
 	}
 }
 
-type ConversationSteps = {|
-	+foldedSteps: Array < string >,
-	+unfoldedStep: ?string
-		|}
+type ConversationSteps = {
+	foldedSteps: Array<string>
+	unfoldedStep?: string
+}
 
 function conversationSteps(
 	state: ConversationSteps = {
@@ -91,7 +112,7 @@ function conversationSteps(
 }
 
 function updateSituation(situation, { fieldName, value, config, rules }) {
-	const goals = targetNamesSelector({ simulation: { config } }).filter(
+	const goals = targetNamesSelector({ simulation: { config } } as any).filter(
 		dottedName => {
 			const target = rules.find(r => r.dottedName === dottedName)
 			const isSmallTarget = !target.question || !target.formule
@@ -115,14 +136,16 @@ function updatePeriod(situation, { toPeriod, rules }) {
 
 	const needConversion = Object.keys(situation).filter(dottedName => {
 		const rule = findRuleByDottedName(rules, dottedName)
-		return rule ?.période === 'flexible'
+		return rule?.période === 'flexible'
 	})
 
 	const updatedSituation = Object.entries(situation)
 		.filter(([fieldName]) => needConversion.includes(fieldName))
 		.map(([fieldName, value]) => [
 			fieldName,
-			currentPeriod === 'mois' && toPeriod === 'année' ? value * 12 : value / 12
+			currentPeriod === 'mois' && toPeriod === 'année'
+				? (value as number) * 12
+				: (value as number) / 12
 		])
 
 	return {
@@ -132,7 +155,34 @@ function updatePeriod(situation, { toPeriod, rules }) {
 	}
 }
 
-function simulation(state = null, action, rules) {
+type QuestionsKind =
+	| "à l'affiche"
+	| 'non prioritaires'
+	| 'uniquement'
+	| 'liste noire'
+
+export type SimulationConfig = Partial<{
+	objectifs:
+		| Array<DottedName>
+		| Array<{ icône: string; nom: string; objectifs: Array<DottedName> }>
+	questions: Partial<Record<QuestionsKind, Array<DottedName>>>
+	bloquant: Array<DottedName>
+	situation: Simulation['situation']
+	branches: Array<{ nom: string; situation: SimulationConfig['situation'] }>
+}>
+
+export type Simulation = {
+	config: SimulationConfig
+	url: string
+	hiddenControls: Array<string>
+	situation: Record<DottedName, any>
+}
+
+function simulation(
+	state: Simulation = null,
+	action: Action,
+	rules: Array<Rule>
+): Simulation | null {
 	if (action.type === 'SET_SIMULATION') {
 		const { config, url } = action
 		return { config, url, hiddenControls: [], situation: {} }
@@ -167,23 +217,33 @@ function simulation(state = null, action, rules) {
 	return state
 }
 
-const addAnswerToSituation = (dottedName, value, state) => {
-	return compose(
+const addAnswerToSituation = (
+	dottedName: DottedName,
+	value: any,
+	state: RootState
+) => {
+	return (compose(
 		set(lensPath(['simulation', 'situation', dottedName]), value),
 		over(lensPath(['conversationSteps', 'foldedSteps']), (steps = []) =>
 			uniq([...steps, dottedName])
-		)
-	)(state)
+		) as any
+	) as any)(state)
 }
 
-const removeAnswerFromSituation = (dottedName, state) => {
-	return compose(
+const removeAnswerFromSituation = (
+	dottedName: DottedName,
+	state: RootState
+) => {
+	return (compose(
 		over(lensPath(['simulation', 'situation']), dissoc(dottedName)),
-		over(lensPath(['conversationSteps', 'foldedSteps']), without([dottedName]))
-	)(state)
+		over(
+			lensPath(['conversationSteps', 'foldedSteps']),
+			without([dottedName])
+		) as any
+	) as any)(state)
 }
 
-const existingCompanyRootReducer = (state, action) => {
+const existingCompanyRootReducer = (state: RootState, action): RootState => {
 	if (!action.type.startsWith('EXISTING_COMPANY::')) {
 		return state
 	}
@@ -200,21 +260,26 @@ const existingCompanyRootReducer = (state, action) => {
 	return state
 }
 
+const mainReducer = (state, action: Action) =>
+	combineReducers({
+		conversationSteps,
+		lang,
+		rules: defaultTo(null) as Reducer<Array<Rule>>,
+		explainedVariable,
+		// We need to access the `rules` in the simulation reducer
+		simulation: (a: Simulation | null, b: Action) =>
+			simulation(a, b, state.rules),
+		previousSimulation: defaultTo(null) as Reducer<SavedSimulation>,
+		currentExample,
+		situationBranch,
+		activeTargetInput,
+		inFranceApp: inFranceAppReducer
+	})(state, action)
+
 export default reduceReducers(
 	existingCompanyRootReducer,
 	storageRootReducer,
-	(state, action) =>
-		combineReducers({
-			conversationSteps,
-			lang,
-			rules: defaultTo(null),
-			explainedVariable,
-			// We need to access the `rules` in the simulation reducer
-			simulation: (a, b) => simulation(a, b, state.rules),
-			previousSimulation: defaultTo(null),
-			currentExample,
-			situationBranch,
-			activeTargetInput,
-			inFranceApp: inFranceAppReducer
-		})(state, action)
+	mainReducer
 )
+
+export type RootState = ReturnType<typeof mainReducer>
diff --git a/source/reducers/storageReducer.js b/source/reducers/storageReducer.ts
similarity index 69%
rename from source/reducers/storageReducer.js
rename to source/reducers/storageReducer.ts
index 27cf8d9c6..2ae83a109 100644
--- a/source/reducers/storageReducer.js
+++ b/source/reducers/storageReducer.ts
@@ -1,9 +1,8 @@
-
-import type { State } from 'Types/State'
-import type { Action } from 'Types/ActionsTypes'
+import { Action } from 'Actions/actions'
 import { createStateFromSavedSimulation } from 'Selectors/storageSelectors'
+import { RootState } from './rootReducer'
 
-export default (state: State, action: Action): State => {
+export default (state: RootState, action: Action): RootState => {
 	switch (action.type) {
 		case 'LOAD_PREVIOUS_SIMULATION':
 			return {
diff --git a/source/selectors/analyseSelectors.js b/source/selectors/analyseSelectors.ts
similarity index 79%
rename from source/selectors/analyseSelectors.js
rename to source/selectors/analyseSelectors.ts
index 39f97d4a8..01f8cf856 100644
--- a/source/selectors/analyseSelectors.js
+++ b/source/selectors/analyseSelectors.ts
@@ -1,63 +1,38 @@
-import {
-	collectMissingVariablesByTarget,
-	getNextSteps
-} from 'Engine/generateQuestions'
-import {
-	collectDefaults,
-	disambiguateExampleSituation,
-	findRuleByDottedName
-} from 'Engine/rules'
+import { collectMissingVariablesByTarget, getNextSteps } from 'Engine/generateQuestions'
+import { collectDefaults, disambiguateExampleSituation, findRuleByDottedName } from 'Engine/rules'
 import { analyse, analyseMany, parseAll } from 'Engine/traverse'
-import {
-	add,
-	defaultTo,
-	difference,
-	dissoc,
-	equals,
-	head,
-	intersection,
-	isEmpty,
-	isNil,
-	last,
-	length,
-	map,
-	mergeDeepWith,
-	negate,
-	pick,
-	pipe,
-	sortBy,
-	split,
-	takeWhile,
-	zipWith
-} from 'ramda'
+import { add, defaultTo, difference, dissoc, equals, head, intersection, isEmpty, isNil, last, length, map, mergeDeepWith, negate, pick, pipe, sortBy, split, takeWhile, zipWith } from 'ramda'
 import { useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
 import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect'
+import { DottedName } from "Types/rule"
 import { mapOrApply } from '../utils'
 // create a "selector creator" that uses deep equal instead of ===
 const createDeepEqualSelector = createSelectorCreator(defaultMemoize, equals)
 
 // We must here compute parsedRules, flatRules, analyse which contains both targets and cache objects
-export let flatRulesSelector = (state, props) => {
+export let flatRulesSelector = (
+	state: RootState,
+	props?: { rules: RootState['rules'] }
+) => {
 	return props?.rules || state?.rules
 }
 
-export let parsedRulesSelector = createSelector(
-	[flatRulesSelector],
-	rules => parseAll(rules)
+export let parsedRulesSelector = createSelector([flatRulesSelector], rules =>
+	parseAll(rules)
 )
 
-export let ruleDefaultsSelector = createSelector(
-	[flatRulesSelector],
-	rules => collectDefaults(rules)
+export let ruleDefaultsSelector = createSelector([flatRulesSelector], rules =>
+	collectDefaults(rules)
 )
 
-export let targetNamesSelector = state => {
+export let targetNamesSelector = (state: RootState) => {
 	let objectifs = state.simulation?.config.objectifs
 	if (!objectifs || !Array.isArray(objectifs)) {
 		return null
 	}
 	const targetNames = [].concat(
-		...objectifs.map(objectifOrGroup =>
+		...(objectifs as any).map(objectifOrGroup =>
 			typeof objectifOrGroup === 'string'
 				? [objectifOrGroup]
 				: objectifOrGroup.objectifs
@@ -70,17 +45,16 @@ export let targetNamesSelector = state => {
 	return [...targetNames, ...secondaryTargetNames]
 }
 
-export let situationSelector = state => state.simulation?.situation || {}
+type SituationSelectorType = typeof situationSelector
 
-export const useSituation = () => useSelector(situationSelector)
+export const situationSelector = (state: RootState) =>
+	state.simulation?.situation || {}
 
-export const useSituationValue = fieldName => useSituation()?.[fieldName]
+export const usePeriod = () => useSelector(situationSelector)['période']
 
-export const usePeriod = () => useSituationValue('période')
-
-export const useTarget = dottedName => {
+export const useTarget = (dottedName: DottedName) => {
 	const targets = useSelector(
-		state => analysisWithDefaultsSelector(state).targets
+		(state: RootState) => analysisWithDefaultsSelector(state).targets
 	)
 	return targets?.find(t => t.dottedName === dottedName)
 }
@@ -119,10 +93,13 @@ let validatedStepsSelector = createSelector(
 	[state => state.conversationSteps.foldedSteps, targetNamesSelector],
 	(foldedSteps, targetNames) => [...foldedSteps, ...targetNames]
 )
-let branchesSelector = state => state.simulation?.config.branches
-let configSituationSelector = state => state.simulation?.config.situation || {}
+let branchesSelector = (state: RootState) => state.simulation?.config.branches
+let configSituationSelector = (state: RootState) =>
+	state.simulation?.config.situation || {}
 
-const createSituationBrancheSelector = situationSelector =>
+const createSituationBrancheSelector = (
+	situationSelector: SituationSelectorType
+) =>
 	createSelector(
 		[situationSelector, branchesSelector, configSituationSelector],
 		(situation, branches, configSituation) => {
@@ -209,13 +186,16 @@ export let exampleAnalysisSelector = createSelector(
 		analyseRule(rules, dottedName, dottedName => situation[dottedName])
 )
 
-let makeAnalysisSelector = situationSelector =>
+let makeAnalysisSelector = (situationSelector: SituationSelectorType) =>
 	createDeepEqualSelector(
 		[parsedRulesSelector, targetNamesSelector, situationSelector],
 		(parsedRules, targetNames, situations) =>
 			mapOrApply(
 				situation =>
-					analyseMany(parsedRules, targetNames)(dottedName => {
+					analyseMany(
+						parsedRules,
+						targetNames
+					)(dottedName => {
 						return situation[dottedName]
 					}),
 				situations
@@ -259,11 +239,11 @@ let currentMissingVariablesByTargetSelector = createSelector(
 	}
 )
 
-const similarity = (rule1, rule2) =>
+const similarity = (rule1: DottedName, rule2: DottedName) =>
 	pipe(
 		map(defaultTo('')),
 		map(split(' . ')),
-		rules => zipWith(equals, ...rules),
+		(rules: [string[], string[]]) => zipWith(equals, ...rules),
 		takeWhile(Boolean),
 		length,
 		negate
diff --git a/source/selectors/companyStatusSelectors.js b/source/selectors/companyStatusSelectors.ts
similarity index 74%
rename from source/selectors/companyStatusSelectors.js
rename to source/selectors/companyStatusSelectors.ts
index f7e78895d..f970c84bd 100644
--- a/source/selectors/companyStatusSelectors.js
+++ b/source/selectors/companyStatusSelectors.ts
@@ -1,12 +1,20 @@
-/* @flow */
+import { SitePaths } from 'Components/utils/withSitePaths'
+import {
+	add,
+	any,
+	countBy,
+	difference,
+	flatten,
+	isNil,
+	keys,
+	map,
+	mergeAll,
+	mergeWith,
+	sortBy
+} from 'ramda'
+import { LegalStatusRequirements, State } from 'Types/companyTypes'
 
-import type { State, LegalStatusRequirements } from 'Types/companyTypes'
-import type { SitePaths } from 'Components/utils/withSitePaths'
-import { add, any, countBy, difference, flatten, isNil, map, mergeAll, mergeWith, sortBy } from 'ramda'
-
-const LEGAL_STATUS_DETAILS: {
-	[status: string]: Array<LegalStatusRequirements> | LegalStatusRequirements
-} = {
+const LEGAL_STATUS_DETAILS = {
 	'auto-entrepreneur': {
 		soleProprietorship: true,
 		directorStatus: 'SELF_EMPLOYED',
@@ -48,7 +56,7 @@ const LEGAL_STATUS_DETAILS: {
 		multipleAssociates: true,
 		autoEntrepreneur: false
 	},
-	SARL: ([
+	SARL: [
 		{
 			soleProprietorship: false,
 			directorStatus: 'SELF_EMPLOYED',
@@ -63,7 +71,7 @@ const LEGAL_STATUS_DETAILS: {
 			minorityDirector: true,
 			autoEntrepreneur: false
 		}
-	]: Array<LegalStatusRequirements>),
+	] as Array<LegalStatusRequirements>,
 	EURL: {
 		soleProprietorship: false,
 		directorStatus: 'SELF_EMPLOYED',
@@ -79,18 +87,14 @@ const LEGAL_STATUS_DETAILS: {
 	}
 }
 
-export type LegalStatus = $Keys<typeof LEGAL_STATUS_DETAILS>
-type Question = $Keys<LegalStatusRequirements>
+export type LegalStatus = keyof typeof LEGAL_STATUS_DETAILS
+type Question = keyof LegalStatusRequirements
 
-// $FlowFixMe
-const QUESTION_LIST: Array<Question> = Object.keys(
-	// $FlowFixMe
+const QUESTION_LIST: Array<Question> = keys(
 	mergeAll(flatten(Object.values(LEGAL_STATUS_DETAILS)))
 )
 
-const isCompatibleStatusWith = (answers: LegalStatusRequirements) => (
-	statusRequirements: LegalStatusRequirements
-): boolean => {
+const isCompatibleStatusWith = answers => (statusRequirements): boolean => {
 	const stringify = map(x => (!isNil(x) ? JSON.stringify(x) : x))
 	const answerCompatibility = Object.values(
 		mergeWith(
@@ -105,46 +109,49 @@ const isCompatibleStatusWith = (answers: LegalStatusRequirements) => (
 }
 const possibleStatus = (
 	answers: LegalStatusRequirements
-): { [LegalStatus]: boolean } =>
+): Record<LegalStatus, boolean> =>
 	map(
 		statusRequirements =>
 			Array.isArray(statusRequirements)
 				? any(isCompatibleStatusWith(answers), statusRequirements)
-				: isCompatibleStatusWith(answers)(statusRequirements),
+				: isCompatibleStatusWith(answers)(
+						statusRequirements as LegalStatusRequirements
+				  ),
 		LEGAL_STATUS_DETAILS
 	)
 
 export const possibleStatusSelector = (state: {
 	inFranceApp: State
-}): { [LegalStatus]: boolean } =>
+}): Record<LegalStatus, boolean> =>
 	possibleStatus(state.inFranceApp.companyLegalStatus)
 
 export const nextQuestionSelector = (state: {
 	inFranceApp: State
-}): ?Question => {
+}): Question => {
 	const legalStatusRequirements = state.inFranceApp.companyLegalStatus
-	const questionAnswered = Object.keys(legalStatusRequirements)
+	const questionAnswered = Object.keys(legalStatusRequirements) as Array<
+		Question
+	>
 	const possibleStatusList = flatten(
 		Object.values(LEGAL_STATUS_DETAILS)
-		// $FlowFixMe
 	).filter(isCompatibleStatusWith(legalStatusRequirements))
 
 	const unansweredQuestions = difference(QUESTION_LIST, questionAnswered)
-	const shannonEntropyByQuestion = unansweredQuestions.map(question => {
+	const shannonEntropyByQuestion = unansweredQuestions.map((question): [
+		typeof question,
+		number
+	] => {
 		const answerPopulation = Object.values(possibleStatusList).map(
-			// $FlowFixMe
 			status => status[question]
 		)
 		const frequencyOfAnswers = Object.values(
-			countBy(x => x, answerPopulation.filter(x => x !== undefined))
-		).map(
-			numOccurrence =>
-				// $FlowFixMe
-				numOccurrence / answerPopulation.length
-		)
+			countBy(
+				x => x,
+				answerPopulation.filter(x => x !== undefined)
+			)
+		).map(numOccurrence => numOccurrence / answerPopulation.length)
 		const shannonEntropy = -frequencyOfAnswers
 			.map(p => p * Math.log2(p))
-			// $FlowFixMe
 			.reduce(add, 0)
 		return [question, shannonEntropy]
 	})
diff --git a/source/selectors/progressSelectors.js b/source/selectors/progressSelectors.ts
similarity index 70%
rename from source/selectors/progressSelectors.js
rename to source/selectors/progressSelectors.ts
index 989fad64e..1883a71a3 100644
--- a/source/selectors/progressSelectors.js
+++ b/source/selectors/progressSelectors.ts
@@ -1,6 +1,7 @@
+import { RootState } from 'Reducers/rootReducer'
 import { nextStepsSelector } from './analyseSelectors'
 
-export const simulationProgressSelector = state => {
+export const simulationProgressSelector = (state: RootState) => {
 	const numberQuestionAnswered = state.conversationSteps.foldedSteps.length
 	const numberQuestionLeft = nextStepsSelector(state).length
 	return numberQuestionAnswered / (numberQuestionAnswered + numberQuestionLeft)
diff --git a/source/selectors/storageSelectors.js b/source/selectors/storageSelectors.js
deleted file mode 100644
index d8936fff6..000000000
--- a/source/selectors/storageSelectors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* @flow */
-import type { SavedSimulation, State } from 'Types/State.js'
-
-export const currentSimulationSelector: State => SavedSimulation = state => {
-	return {
-		situation: state.simulation.situation,
-		activeTargetInput: state.activeTargetInput,
-		foldedSteps: state.conversationSteps.foldedSteps
-	}
-}
-
-export const createStateFromSavedSimulation = state =>
-	state.previousSimulation && {
-		activeTargetInput: state.previousSimulation.activeTargetInput,
-		simulation: {
-			...state.simulation,
-			situation: state.previousSimulation.situation || {}
-		},
-		conversationSteps: {
-			foldedSteps: state.previousSimulation.foldedSteps
-		},
-		previousSimulation: null
-	}
diff --git a/source/selectors/storageSelectors.ts b/source/selectors/storageSelectors.ts
new file mode 100644
index 000000000..2419606fa
--- /dev/null
+++ b/source/selectors/storageSelectors.ts
@@ -0,0 +1,33 @@
+import { RootState } from 'Reducers/rootReducer'
+
+// Note: it is currently not possible to define SavedSimulation as the return
+// type of the currentSimulationSelector function because the type would then
+// circulary reference itself.
+export type SavedSimulation = {
+	situation: RootState['simulation']['situation']
+	activeTargetInput: RootState['activeTargetInput']
+	foldedSteps: RootState['conversationSteps']['foldedSteps']
+}
+
+export const currentSimulationSelector = (
+	state: RootState
+): SavedSimulation => {
+	return {
+		situation: state.simulation.situation,
+		activeTargetInput: state.activeTargetInput,
+		foldedSteps: state.conversationSteps.foldedSteps
+	}
+}
+
+export const createStateFromSavedSimulation = (state: RootState) =>
+	state.previousSimulation && {
+		activeTargetInput: state.previousSimulation.activeTargetInput,
+		simulation: {
+			...state.simulation,
+			situation: state.previousSimulation.situation || {}
+		},
+		conversationSteps: {
+			foldedSteps: state.previousSimulation.foldedSteps
+		},
+		previousSimulation: null
+	}
diff --git a/source/server.js b/source/server.js
index 293592b5c..741e84956 100644
--- a/source/server.js
+++ b/source/server.js
@@ -15,7 +15,7 @@ const rewrite = basename => ({
 app.get('/', function(req, res) {
 	res.send(`<ul><li><a href="/mon-entreprise">mon-entreprise [fr]</a></li>
 	<li><a href="/infrance">infrance [en]</a></li>
-	<li><a href="/mon-entreprise/dev/integration-test">intégration du simulateur sur site tiers [iframe fr]</a></li><li><a href="/publicodes">publicodes</a></li><</ul>`)
+	<li><a href="/mon-entreprise/dev/integration-test">intégration du simulateur sur site tiers [iframe fr]</a></li><li><a href="/publicodes">publicodes</a></li></ul>`)
 })
 
 app.use(
diff --git a/source/sites/mon-entreprise.fr/entry.en.tsx b/source/sites/mon-entreprise.fr/entry.en.tsx
index fc6eb3003..c4ef853de 100644
--- a/source/sites/mon-entreprise.fr/entry.en.tsx
+++ b/source/sites/mon-entreprise.fr/entry.en.tsx
@@ -5,5 +5,4 @@ import 'regenerator-runtime/runtime'
 import App from './App'
 
 let anchor = document.querySelector('#js')
-
 render(<App language="en" basename="infrance" />, anchor)
diff --git a/source/sites/mon-entreprise.fr/history.js b/source/sites/mon-entreprise.fr/history.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx b/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
index 0f2f5cb87..38f3a933d 100644
--- a/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
@@ -8,7 +8,7 @@ import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
 import SocialIcon from 'Ui/SocialIcon'
-import i18n from '../../../../i18n'
+import i18n, { AvailableLangs } from '../../../../i18n'
 import { hrefLangLink } from '../../sitePaths'
 import './Footer.css'
 import Privacy from './Privacy'
@@ -25,7 +25,7 @@ const feedbackBlacklist = [
 const Footer = () => {
 	const sitePaths = useContext(SitePathsContext)
 	const hrefLink =
-		hrefLangLink[i18n.language][
+		hrefLangLink[i18n.language as AvailableLangs][
 			decodeURIComponent(
 				(process.env.NODE_ENV === 'production'
 					? window.location.protocol + '//' + window.location.host
@@ -99,7 +99,8 @@ const Footer = () => {
 							<a
 								href={href}
 								key={hrefLang}
-								style={{ textDecoration: 'underline' }}>
+								style={{ textDecoration: 'underline' }}
+							>
 								{hrefLang === 'fr' ? (
 									<> Passer en français {emoji('🇫🇷')}</>
 								) : hrefLang === 'en' ? (
diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Privacy.tsx b/source/sites/mon-entreprise.fr/layout/Footer/Privacy.tsx
index e95c1c12d..4bbc75ee1 100644
--- a/source/sites/mon-entreprise.fr/layout/Footer/Privacy.tsx
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Privacy.tsx
@@ -30,7 +30,7 @@ export default function Privacy() {
 	)
 }
 
-export let PrivacyContent = ({ language }) => (
+export let PrivacyContent = ({ language }: { language: string }) => (
 	<>
 		<T k="privacyContent">
 			<h1>Vie privée</h1>
diff --git a/source/sites/mon-entreprise.fr/middlewares/trackSimulatorActions.ts b/source/sites/mon-entreprise.fr/middlewares/trackSimulatorActions.ts
index ab2a37505..81c51d128 100644
--- a/source/sites/mon-entreprise.fr/middlewares/trackSimulatorActions.ts
+++ b/source/sites/mon-entreprise.fr/middlewares/trackSimulatorActions.ts
@@ -46,7 +46,7 @@ export default (tracker: Tracker) => {
 				...(action.type === 'UPDATE_PERIOD'
 					? ['période', action.toPeriod]
 					: [action.fieldName, action.value])
-			] as any)
+			])
 		}
 		if (action.type === 'START_CONVERSATION') {
 			tracker.push([
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/AfterRegistration.tsx b/source/sites/mon-entreprise.fr/pages/Créer/AfterRegistration.tsx
index 16cf5fda8..6d335db70 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/AfterRegistration.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/AfterRegistration.tsx
@@ -5,13 +5,14 @@ import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { NavLink } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import Animate from 'Ui/animate'
 import siret from './siret.jpg'
 
 export default function AfterRegistration() {
 	const sitePaths = useContext(SitePathsContext)
-	const statutChoisi = useSelector<any, any>(
-		state => state.inFranceApp.companyStatusChoice
+	const statutChoisi = useSelector(
+		(state: RootState) => state.inFranceApp.companyStatusChoice
 	)
 	const { t } = useTranslation()
 	const isAutoentrepreneur = statutChoisi.match('auto-entrepreneur')
@@ -24,7 +25,8 @@ export default function AfterRegistration() {
 					to={sitePaths.créer.index}
 					exact
 					activeClassName="ui__ hide"
-					className="ui__ simple small button">
+					className="ui__ simple small button"
+				>
 					← <T>Retour à la création</T>
 				</NavLink>
 			</div>
@@ -76,7 +78,8 @@ export default function AfterRegistration() {
 							statutChoisi && statutChoisi.match(/auto-entrepreneur|EI/)
 								? { display: 'none' }
 								: {}
-						}>
+						}
+					>
 						Il détermine aussi la convention collective applicable à
 						l'entreprise, et en partie le taux de la cotisation accidents du
 						travail et maladies professionnelles à payer.
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/CreationChecklist.tsx b/source/sites/mon-entreprise.fr/pages/Créer/CreationChecklist.tsx
index f6a4a9b51..633770c3d 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/CreationChecklist.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/CreationChecklist.tsx
@@ -12,6 +12,7 @@ import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { connect, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import * as Animate from 'Ui/animate'
 import { CheckItem, Checklist } from 'Ui/Checklist'
 import StatutDescription from './StatutDescription'
@@ -24,8 +25,8 @@ function CreateCompany({
 }) {
 	const { t, i18n } = useTranslation()
 	const sitePaths = useContext(SitePathsContext)
-	const companyCreationChecklist = useSelector<any, any>(
-		state => state.inFranceApp.companyCreationChecklist
+	const companyCreationChecklist = useSelector(
+		(state: RootState) => state.inFranceApp.companyCreationChecklist
 	)
 
 	// TODO : add this logic inside selector
@@ -75,7 +76,8 @@ function CreateCompany({
 			<div css="transform: translateY(2rem);">
 				<button
 					onClick={onStatusChange}
-					className="ui__ simple small push-left button">
+					className="ui__ simple small push-left button"
+				>
 					<T k="entreprise.retour">← Choisir un autre statut</T>
 				</button>
 			</div>
@@ -100,7 +102,8 @@ function CreateCompany({
 				key={statut}
 				onInitialization={items => onChecklistInitialization(statut, items)}
 				onItemCheck={x => onItemCheck}
-				defaultChecked={companyCreationChecklist}>
+				defaultChecked={companyCreationChecklist}
+			>
 				<CheckItem
 					name="legalStatus"
 					defaultChecked={true}
@@ -191,7 +194,8 @@ function CreateCompany({
 									<span
 										style={{
 											display: multipleAssociates ? 'visible' : 'none'
-										}}>
+										}}
+									>
 										Dans le cas d'une création d'entreprise avec plusieurs
 										associés, il est recommandé de faire appel à un juriste pour
 										les rédiger.{' '}
@@ -365,7 +369,8 @@ function CreateCompany({
 											? 'https://www.autoentrepreneur.urssaf.fr/portail/accueil/creer-mon-auto-entreprise.html'
 											: 'https://account.guichet-entreprises.fr/user/create'
 									}
-									target="blank">
+									target="blank"
+								>
 									Faire la démarche en ligne
 								</a>
 							</div>
@@ -437,14 +442,16 @@ function CreateCompany({
 					> * {
 						flex: 1;
 					}
-				`}>
+				`}
+			>
 				{isAutoentrepreneur && (
 					<Link
 						className="ui__ interactive card button-choice lighter-bg"
 						to={{
 							pathname: sitePaths.simulateurs['auto-entrepreneur'],
 							state: { fromCréer: true }
-						}}>
+						}}
+					>
 						<T k="entreprise.ressources.simu.autoEntrepreneur">
 							<p>Simulateur de revenus auto-entrepreneur</p>
 							<small>
@@ -460,7 +467,8 @@ function CreateCompany({
 						to={{
 							pathname: sitePaths.simulateurs.indépendant,
 							state: { fromCréer: true }
-						}}>
+						}}
+					>
 						<T k="entreprise.ressources.simu.indépendant">
 							<p>Simulateur de cotisations indépendant</p>
 							<small>
@@ -476,7 +484,8 @@ function CreateCompany({
 						to={{
 							pathname: sitePaths.simulateurs['assimilé-salarié'],
 							state: { fromCréer: true }
-						}}>
+						}}
+					>
 						<T k="entreprise.ressources.simu.assimilé">
 							<p>Simulateur de cotisations assimilé-salarié</p>
 							<small>
@@ -488,7 +497,8 @@ function CreateCompany({
 				)}
 				<Link
 					className="ui__ interactive card button-choice lighter-bg"
-					to={sitePaths.créer.après}>
+					to={sitePaths.créer.après}
+				>
 					<T k="entreprise.ressources.après">
 						<p>Après la création</p>
 						<small>
@@ -501,7 +511,8 @@ function CreateCompany({
 					<a
 						target="_blank"
 						className="ui__ interactive card button-choice lighter-bg"
-						href="https://www.urssaf.fr/portail/files/live/sites/urssaf/files/documents/SSI-Guide-Objectif-Entreprise.pdf">
+						href="https://www.urssaf.fr/portail/files/live/sites/urssaf/files/documents/SSI-Guide-Objectif-Entreprise.pdf"
+					>
 						<p>Guide de création URSSAF </p>
 						<small>
 							Des conseils sur comment préparer son projet pour se lancer dans
@@ -519,14 +530,11 @@ function CreateCompany({
 	)
 }
 
-export default connect(
-	null,
-	{
-		onChecklistInitialization: initializeCompanyCreationChecklist,
-		onItemCheck: checkCompanyCreationItem,
-		onStatusChange: goToCompanyStatusChoice
-	}
-)(CreateCompany)
+export default connect(null, {
+	onChecklistInitialization: initializeCompanyCreationChecklist,
+	onItemCheck: checkCompanyCreationItem,
+	onStatusChange: goToCompanyStatusChoice
+})(CreateCompany)
 
 let StatutsExample = ({ statut }) => {
 	const links = {
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PickLegalStatus.tsx b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PickLegalStatus.tsx
index d90067bc0..be49cd7b7 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PickLegalStatus.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PickLegalStatus.tsx
@@ -12,7 +12,11 @@ import {
 } from 'Selectors/companyStatusSelectors'
 import StatutDescription from '../StatutDescription'
 
-const StatutButton = ({ statut }: { statut: LegalStatus }) => {
+type StatutButtonProps = {
+	statut: LegalStatus
+}
+
+const StatutButton = ({ statut }: StatutButtonProps) => {
 	const sitePaths = useContext(SitePathsContext)
 	const { t } = useTranslation()
 	return (
@@ -29,7 +33,12 @@ const StatutButton = ({ statut }: { statut: LegalStatus }) => {
 	)
 }
 
-const StatutTitle = ({ statut, language }) =>
+type StatutTitleProps = {
+	statut: LegalStatus
+	language: string
+}
+
+const StatutTitle = ({ statut, language }: StatutTitleProps) =>
 	statut === 'EI' ? (
 		<>
 			Entreprise individuelle {language !== 'fr' && '(Individual business)'}:{' '}
@@ -61,7 +70,7 @@ const StatutTitle = ({ statut, language }) =>
 		</>
 	) : statut === 'SA' ? (
 		<>SA - Société anonyme {language !== 'fr' && '(Anonymous company)'}: </>
-	) : statut === 'SNC' ? (
+	) : (statut as string) === 'SNC' ? (
 		<>SNC - Société en nom collectif {language !== 'fr' && '(Partnership)'}: </>
 	) : statut === 'auto-entrepreneur' ? (
 		<>
@@ -98,7 +107,7 @@ export default function SetMainStatus() {
 			</h2>
 
 			<ul>
-				{Object.keys(filter(Boolean, possibleStatus as any)).map(
+				{Object.keys(filter(Boolean, possibleStatus)).map(
 					(statut: keyof typeof possibleStatus) => (
 						<li key={statut}>
 							<strong>
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers.tsx b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers.tsx
index d25d0e521..a0944eccf 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers.tsx
@@ -4,6 +4,7 @@ import { isNil } from 'ramda'
 import React, { useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import { LegalStatusRequirements } from 'Types/companyTypes'
 
 const requirementToText = (
@@ -15,9 +16,7 @@ const requirementToText = (
 			return value ? <T>Plusieurs associés</T> : <T>Un seul associé</T>
 		case 'soleProprietorship':
 			return value ? (
-				<T T k="responsabilité.bouton2">
-					Entreprise individuelle
-				</T>
+				<T k="responsabilité.bouton2">Entreprise individuelle</T>
 			) : (
 				<T k="responsabilité.bouton1">Société</T>
 			)
@@ -36,8 +35,8 @@ const requirementToText = (
 
 export default function PreviousAnswers() {
 	const sitePaths = useContext(SitePathsContext)
-	const legalStatus = useSelector<any, any>(
-		state => state.inFranceApp.companyLegalStatus
+	const legalStatus = useSelector(
+		(state: RootState) => state.inFranceApp.companyLegalStatus
 	)
 	return (
 		!!Object.values(legalStatus).length && (
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/SoleProprietorship.tsx b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/SoleProprietorship.tsx
index 499808edb..f9a3a1ee3 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/SoleProprietorship.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/SoleProprietorship.tsx
@@ -70,14 +70,16 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
 					onClick={() => {
 						isSoleProprietorship(true)
 					}}
-					className="ui__ button">
+					className="ui__ button"
+				>
 					<T k="responsabilité.bouton2">Entreprise individuelle</T>
 				</button>
 				<button
 					onClick={() => {
 						isSoleProprietorship(false)
 					}}
-					className="ui__ button">
+					className="ui__ button"
+				>
 					<T k="responsabilité.bouton1">Société</T>
 				</button>
 			</div>
@@ -87,9 +89,6 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
 	)
 }
 
-export default compose(
-	connect(
-		null,
-		{ isSoleProprietorship }
-	)
-)(SoleProprietorship)
+export default compose(connect(null, { isSoleProprietorship }))(
+	SoleProprietorship
+)
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/Home.tsx b/source/sites/mon-entreprise.fr/pages/Créer/Home.tsx
index 0927ae4c6..2f33dc96f 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/Home.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/Home.tsx
@@ -5,6 +5,7 @@ import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
 import Animate from 'Ui/animate'
 import créerSvg from './créer.svg'
@@ -12,11 +13,12 @@ import créerSvg from './créer.svg'
 export default function Créer() {
 	const { t } = useTranslation()
 	const sitePaths = useContext(SitePathsContext)
-	const nextQuestionUrl = useSelector(state =>
+	const nextQuestionUrl = useSelector((state: RootState) =>
 		nextQuestionUrlSelector(state, { sitePaths })
 	)
-	const guideAlreadyStarted = useSelector<any, any>(
-		state => !!Object.keys(state.inFranceApp.companyLegalStatus).length
+	const guideAlreadyStarted = useSelector(
+		(state: RootState) =>
+			!!Object.keys(state.inFranceApp.companyLegalStatus).length
 	)
 	return (
 		<Animate.fromBottom>
@@ -42,7 +44,8 @@ export default function Créer() {
 							guideAlreadyStarted && nextQuestionUrl
 								? nextQuestionUrl
 								: sitePaths.créer.guideStatut.multipleAssociates
-						}>
+						}
+					>
 						{!guideAlreadyStarted
 							? t('créer.cta.default', 'Trouver le bon statut')
 							: t('créer.cta.continue', 'Continuer le guide')}
@@ -72,10 +75,12 @@ export default function Créer() {
 					> * {
 						flex: 1;
 					}
-				`}>
+				`}
+			>
 				<Link
 					className="ui__ interactive card button-choice lighter-bg"
-					to={sitePaths.créer.guideStatut.liste}>
+					to={sitePaths.créer.guideStatut.liste}
+				>
 					<T k="créer.ressources.listeStatuts">
 						<p>Liste des statuts juridiques </p>
 						<small>
@@ -89,7 +94,8 @@ export default function Créer() {
 					to={{
 						pathname: sitePaths.simulateurs.comparaison,
 						state: { fromCréer: true }
-					}}>
+					}}
+				>
 					<T k="créer.ressources.comparaison">
 						<p>Comparateur de régimes</p>
 						<small>
@@ -101,7 +107,8 @@ export default function Créer() {
 
 				<Link
 					className="ui__ interactive card button-choice lighter-bg"
-					to={sitePaths.créer['auto-entrepreneur']}>
+					to={sitePaths.créer['auto-entrepreneur']}
+				>
 					<T k="créer.ressources.autoEntrepreneur">
 						<p>Démarche auto-entrepreneur</p>
 						<small>
diff --git a/source/sites/mon-entreprise.fr/pages/Créer/StatutDescription.tsx b/source/sites/mon-entreprise.fr/pages/Créer/StatutDescription.tsx
index b54e04fa5..70d4b04bd 100644
--- a/source/sites/mon-entreprise.fr/pages/Créer/StatutDescription.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Créer/StatutDescription.tsx
@@ -56,7 +56,7 @@ const StatutDescription = ({ statut }: Props) =>
 			d'être coté en bourse (à partir de 7 actionnaires). Le capital social
 			minimum est de 37.000 €.
 		</T>
-	) : statut === 'SNC' ? (
+	) : (statut as string) === 'SNC' ? (
 		<T k="formeJuridique.SNC">
 			La responsabilité des associés pour les dettes de la société est solidaire
 			(un seul associé peut être poursuivi pour la totalité de la dette) et
diff --git a/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx b/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx
index f677b566b..6b21e58da 100644
--- a/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/Couleur.tsx
@@ -1,10 +1,13 @@
-
-import withColours, { ThemeColoursProvider } from 'Components/utils/withColours'
-import React, { Suspense, useState } from 'react'
+import {
+	ThemeColoursContext,
+	ThemeColoursProvider
+} from 'Components/utils/withColours'
+import React, { Suspense, useContext, useState } from 'react'
 import Home from '../Iframes/SimulateurEmbauche'
 let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
 
-const Couleur = ({ colours: { colour: defaultColour } }) => {
+export default function Couleur() {
+	const { colour: defaultColour } = useContext(ThemeColoursContext)
 	const [colour, setColour] = useState(defaultColour)
 	return (
 		<>
@@ -28,5 +31,3 @@ const Couleur = ({ colours: { colour: defaultColour } }) => {
 		</>
 	)
 }
-
-export default withColours(Couleur)
diff --git a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx
index fc6d2910f..f33c254c8 100644
--- a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.tsx
@@ -14,7 +14,7 @@ export default function IntegrationTest() {
 	)
 	const [colour, setColour] = React.useState('#005aa1')
 	const [version, setVersion] = React.useState(0)
-	const domNode = React.useRef(null)
+	const domNode = React.useRef<HTMLDivElement>(null)
 	React.useEffect(() => {
 		const script = document.createElement('script')
 		script.id = 'script-monentreprise'
@@ -47,14 +47,16 @@ export default function IntegrationTest() {
 
 			<button
 				className="ui__ button plain"
-				onClick={() => setVersion(version + 1)}>
+				onClick={() => setVersion(version + 1)}
+			>
 				{!version ? 'Visualiser le module' : 'Valider les changements'}
 			</button>
 
 			<div
 				css={`
 					display: ${version > 0 ? 'block' : 'none'};
-				`}>
+				`}
+			>
 				<p>Code d'intégration </p>
 				<IntegrationCode colour={colour} module={currentModule} />
 				<div style={{ border: '2px dashed blue' }}>
@@ -99,7 +101,8 @@ export let IntegrationCode = ({
 			#scriptColor {
 				color: #2975d1;
 			}
-		`}>
+		`}
+	>
 		<span>{'<'}</span>
 		<em>
 			script
diff --git a/source/sites/mon-entreprise.fr/pages/Dev/Sitemap.tsx b/source/sites/mon-entreprise.fr/pages/Dev/Sitemap.tsx
index 011768cf3..ff73eaccd 100644
--- a/source/sites/mon-entreprise.fr/pages/Dev/Sitemap.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Dev/Sitemap.tsx
@@ -1,19 +1,20 @@
-import withSitePaths from 'Components/utils/withSitePaths'
-import React from 'react'
-import { generateSiteMap } from '../../sitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import React, { useContext } from 'react'
+import { generateSiteMap, SitePathsType } from '../../sitePaths'
 
-const SiteMap = ({ sitePaths }) => (
-	<>
-		<h1>Sitemap</h1>
-		<pre>
-			{generateSiteMap(sitePaths).map(path => (
-				<span key={path}>
-					{path}
-					<br />
-				</span>
-			))}
-		</pre>
-	</>
-)
-
-export default withSitePaths(SiteMap)
+export default function SiteMap() {
+	const sitePaths = useContext(SitePathsContext)
+	return (
+		<>
+			<h1>Sitemap</h1>
+			<pre>
+				{generateSiteMap(sitePaths as SitePathsType).map(path => (
+					<span key={path}>
+						{path}
+						<br />
+					</span>
+				))}
+			</pre>
+		</>
+	)
+}
diff --git a/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx b/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
index c58600915..c9723377b 100644
--- a/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
@@ -6,10 +6,8 @@ import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useSelector } from 'react-redux'
 import examples from 'Règles/cas-types.yaml'
-import {
-	parsedRulesSelector,
-	ruleDefaultsSelector
-} from 'Selectors/analyseSelectors'
+import { parsedRulesSelector, ruleDefaultsSelector } from 'Selectors/analyseSelectors'
+import { DottedName } from "Types/rule"
 import './ExampleSituations.css'
 
 export default function ExampleSituations() {
@@ -20,7 +18,7 @@ export default function ExampleSituations() {
 				<T>Quelques exemples de salaires</T>
 			</h1>
 			<ul>
-				{examples.map(ex => (
+				{examples.map((ex: any) => (
 					<Example ex={ex} key={ex.nom} />
 				))}
 			</ul>
@@ -29,14 +27,16 @@ export default function ExampleSituations() {
 }
 
 const Example = function Example({ ex: { nom, situation } }) {
-	const defaults = useSelector(ruleDefaultsSelector) as object
+	const defaults = useSelector(ruleDefaultsSelector)
 	const parsedRules = useSelector(parsedRulesSelector)
 	const colours = useContext(ThemeColoursContext)
 	let [total, net, netAprèsImpôts] = analyseMany(parsedRules, [
 			'total',
 			'net',
 			'net après impôt'
-		])(dottedName => ({ ...defaults, ...situation }[dottedName])).targets,
+		])(
+			(dottedName: DottedName) => ({ ...defaults, ...situation }[dottedName])
+		).targets,
 		figures = [
 			total,
 			{
@@ -60,7 +60,8 @@ const Example = function Example({ ex: { nom, situation } }) {
 						<h3>{t.title}</h3>
 						<span
 							style={{ color: colours.textColourOnWhite }}
-							className="figure">
+							className="figure"
+						>
 							{Math.round(t.nodeValue)} €
 						</span>
 					</li>
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.tsx
index 1a22d930e..59304a82b 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.tsx
@@ -3,208 +3,217 @@ import {
 	initializeHiringChecklist
 } from 'Actions/hiringChecklistAction'
 import { T } from 'Components'
-import { compose } from 'ramda'
 import React from 'react'
 import { Helmet } from 'react-helmet'
-import { withTranslation } from 'react-i18next'
-import { connect } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { connect, useSelector } from 'react-redux'
+import { RootState } from 'Reducers/rootReducer'
 import Animate from 'Ui/animate'
-import { CheckItem, Checklist } from 'Ui/Checklist'
+import { CheckItem, Checklist, ChecklistProps } from 'Ui/Checklist'
 
-const Embaucher = ({
-	onChecklistInitialization,
-	onItemCheck,
-	hiringChecklist,
-	t
-}) => (
-	<Animate.fromBottom>
-		<Helmet>
-			<title>
-				{t(['embauche.tâches.page.titre', 'Les formalités pour embaucher'])}
-			</title>
-			<meta
-				name="description"
-				content={t(
-					'embauche.tâches.page.description',
-					"Toutes les démarches nécessaires à l'embauche de votre premier salarié."
-				)}
-			/>
-		</Helmet>
-		<h1>
-			<T k="embauche.tâches.titre">Les formalités pour embaucher</T>
-		</h1>
-		<p>
-			<T k="embauche.tâches.description">
-				Toutes les étapes nécessaires à l'embauche de votre premier employé.
-			</T>
-		</p>
-		<Checklist
-			onInitialization={onChecklistInitialization}
-			onItemCheck={onItemCheck}
-			defaultChecked={hiringChecklist}>
-			<CheckItem
-				name="contract"
-				title={
-					<T k="embauche.tâches.contrat.titre">
-						Signer un contrat de travail avec votre employé
-					</T>
-				}
-				explanations={
-					<p>
-						<a
-							className="ui__ button"
-							href="https://www.service-public.fr/particuliers/vosdroits/N19871"
-							target="_blank">
-							{' '}
-							<T>Plus d'informations</T>
-						</a>
-					</p>
-				}
-			/>
-			<CheckItem
-				name="dpae"
-				title={
-					<T k="embauche.tâches.dpae.titre">
-						Déclarer l'embauche à l'administration sociale
-					</T>
-				}
-				explanations={
-					<p>
-						<T k="embauche.tâches.dpae.description">
-							Ceci peut être fait par le biais du formulaire appelé DPAE, doit
-							être complété dans les 8 jours avant toute embauche, et peut{' '}
-							<a href="https://www.due.urssaf.fr" target="_blank">
-								être effectué en ligne
-							</a>
-							.
-						</T>
-					</p>
-				}
-			/>
-			<CheckItem
-				name="paySoftware"
-				title={
-					<T k="embauche.tâches.logiciel de paie.titre">
-						Choisir un logiciel de paie
-					</T>
-				}
-				explanations={
-					<p>
-						<T k="embauche.tâches.logiciel de paie.description">
-							Les fiches de paie et les déclarations peuvent être traitées en
-							ligne gratuitement par le{' '}
-							<a href="http://www.letese.urssaf.fr" target="_blank">
-								Tese
-							</a>
-							. Vous pouvez aussi utiliser un{' '}
-							<a
-								href="http://www.dsn-info.fr/convention-charte.htm"
-								target="_blank">
-								logiciel de paie privé.
-							</a>
-						</T>
-					</p>
-				}
-			/>
-			<CheckItem
-				name="registre"
-				title={
-					<T k="embauche.tâches.registre.titre">
-						Tenir un registre des employés à jour
-					</T>
-				}
-				explanations={
-					<p>
-						<a
-							href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F1784"
-							className="ui__ button"
-							target="_blank">
-							<T>Plus d'informations</T>
-						</a>
-					</p>
-				}
-			/>
-			<CheckItem
-				name="complementaryPension"
-				title={
-					<T k="embauche.tâches.pension.titre">
-						Prendre contact avec l'institution de prévoyance complémentaire
-						obligatoire qui vous est assignée
-					</T>
-				}
-				explanations={
-					<p>
-						<a
-							href="https://www.espace-entreprise.agirc-arrco.fr/simape/#/donneesDep"
-							className="ui__ button"
-							target="_blank">
-							<T k="embauche.tâches.pension.description">
-								Trouver mon institution de prévoyance
-							</T>
-						</a>
-						{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
-					</p>
-				}
-			/>
-			<CheckItem
-				name="complementaryHealth"
-				title={
-					<T k="embauche.tâches.complémentaire santé.titre">
-						Choisir une complémentaire santé
-					</T>
-				}
-				explanations={
-					<p>
-						<T k="embauche.tâches.complémentaire santé.description">
-							Vous devez couvrir vos salariés avec l'assurance complémentaire
-							santé privée de votre choix (aussi appelée "mutuelle"), pour
-							autant qu'elle offre un ensemble de garanties minimales.
-							L'employeur doit payer au moins la moitié du forfait.
-						</T>
-					</p>
-				}
-			/>
-			<CheckItem
-				name="workMedicine"
-				title={
-					<T k="embauche.tâches.medecine.titre">
-						S'inscrire à un bureau de médecine du travail
-					</T>
-				}
-				explanations={
-					<p>
-						<T k="embauche.tâches.medecine.description">
-							N'oubliez pas de planifier un rendez-vous initial pour chaque
-							nouvelle embauche.{' '}
-							<a href="https://www.service-public.fr/particuliers/vosdroits/F2211">
-								Plus d'infos.
-							</a>
-						</T>
-					</p>
-				}
-			/>
-		</Checklist>
-		<T k="embauche.chaque mois">
-			<h2>Tous les mois</h2>
-			<ul>
-				<li>
-					Utiliser un logiciel de paie pour calculer les cotisations sociales et
-					les transmettre via la déclaration sociale nominative (DSN)
-				</li>
-				<li>Remettre la fiche de paie à votre employé</li>
-			</ul>
-		</T>
-	</Animate.fromBottom>
-)
+type EmbaucherProps = {
+	onChecklistInitialization: ChecklistProps['onInitialization']
+	onItemCheck: ChecklistProps['onItemCheck']
+}
 
-export default compose(
-	withTranslation(),
-
-	connect(
-		state => ({ hiringChecklist: (state as any).inFranceApp.hiringChecklist }),
-		{
-			onChecklistInitialization: initializeHiringChecklist,
-			onItemCheck: checkHiringItem
-		}
+function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
+	const { t } = useTranslation()
+	const hiringChecklist = useSelector(
+		(state: RootState) => state.inFranceApp.hiringChecklist
 	)
+	return (
+		<Animate.fromBottom>
+			<Helmet>
+				<title>
+					{t(['embauche.tâches.page.titre', 'Les formalités pour embaucher'])}
+				</title>
+				<meta
+					name="description"
+					content={t(
+						'embauche.tâches.page.description',
+						"Toutes les démarches nécessaires à l'embauche de votre premier salarié."
+					)}
+				/>
+			</Helmet>
+			<h1>
+				<T k="embauche.tâches.titre">Les formalités pour embaucher</T>
+			</h1>
+			<p>
+				<T k="embauche.tâches.description">
+					Toutes les étapes nécessaires à l'embauche de votre premier employé.
+				</T>
+			</p>
+			<Checklist
+				onInitialization={onChecklistInitialization}
+				onItemCheck={onItemCheck}
+				defaultChecked={hiringChecklist}
+			>
+				<CheckItem
+					name="contract"
+					title={
+						<T k="embauche.tâches.contrat.titre">
+							Signer un contrat de travail avec votre employé
+						</T>
+					}
+					explanations={
+						<p>
+							<a
+								className="ui__ button"
+								href="https://www.service-public.fr/particuliers/vosdroits/N19871"
+								target="_blank"
+							>
+								{' '}
+								<T>Plus d'informations</T>
+							</a>
+						</p>
+					}
+				/>
+				<CheckItem
+					name="dpae"
+					title={
+						<T k="embauche.tâches.dpae.titre">
+							Déclarer l'embauche à l'administration sociale
+						</T>
+					}
+					explanations={
+						<p>
+							<T k="embauche.tâches.dpae.description">
+								Ceci peut être fait par le biais du formulaire appelé DPAE, doit
+								être complété dans les 8 jours avant toute embauche, et peut{' '}
+								<a href="https://www.due.urssaf.fr" target="_blank">
+									être effectué en ligne
+								</a>
+								.
+							</T>
+						</p>
+					}
+				/>
+				<CheckItem
+					name="paySoftware"
+					title={
+						<T k="embauche.tâches.logiciel de paie.titre">
+							Choisir un logiciel de paie
+						</T>
+					}
+					explanations={
+						<p>
+							<T k="embauche.tâches.logiciel de paie.description">
+								Les fiches de paie et les déclarations peuvent être traitées en
+								ligne gratuitement par le{' '}
+								<a href="http://www.letese.urssaf.fr" target="_blank">
+									Tese
+								</a>
+								. Vous pouvez aussi utiliser un{' '}
+								<a
+									href="http://www.dsn-info.fr/convention-charte.htm"
+									target="_blank"
+								>
+									logiciel de paie privé.
+								</a>
+							</T>
+						</p>
+					}
+				/>
+				<CheckItem
+					name="registre"
+					title={
+						<T k="embauche.tâches.registre.titre">
+							Tenir un registre des employés à jour
+						</T>
+					}
+					explanations={
+						<p>
+							<a
+								href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F1784"
+								className="ui__ button"
+								target="_blank"
+							>
+								<T>Plus d'informations</T>
+							</a>
+						</p>
+					}
+				/>
+				<CheckItem
+					name="complementaryPension"
+					title={
+						<T k="embauche.tâches.pension.titre">
+							Prendre contact avec l'institution de prévoyance complémentaire
+							obligatoire qui vous est assignée
+						</T>
+					}
+					explanations={
+						<p>
+							<a
+								href="https://www.espace-entreprise.agirc-arrco.fr/simape/#/donneesDep"
+								className="ui__ button"
+								target="_blank"
+							>
+								<T k="embauche.tâches.pension.description">
+									Trouver mon institution de prévoyance
+								</T>
+							</a>
+							{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
+						</p>
+					}
+				/>
+				<CheckItem
+					name="complementaryHealth"
+					title={
+						<T k="embauche.tâches.complémentaire santé.titre">
+							Choisir une complémentaire santé
+						</T>
+					}
+					explanations={
+						<p>
+							<T k="embauche.tâches.complémentaire santé.description">
+								Vous devez couvrir vos salariés avec l'assurance complémentaire
+								santé privée de votre choix (aussi appelée "mutuelle"), pour
+								autant qu'elle offre un ensemble de garanties minimales.
+								L'employeur doit payer au moins la moitié du forfait.
+							</T>
+						</p>
+					}
+				/>
+				<CheckItem
+					name="workMedicine"
+					title={
+						<T k="embauche.tâches.medecine.titre">
+							S'inscrire à un bureau de médecine du travail
+						</T>
+					}
+					explanations={
+						<p>
+							<T k="embauche.tâches.medecine.description">
+								N'oubliez pas de planifier un rendez-vous initial pour chaque
+								nouvelle embauche.{' '}
+								<a href="https://www.service-public.fr/particuliers/vosdroits/F2211">
+									Plus d'infos.
+								</a>
+							</T>
+						</p>
+					}
+				/>
+			</Checklist>
+			<T k="embauche.chaque mois">
+				<h2>Tous les mois</h2>
+				<ul>
+					<li>
+						Utiliser un logiciel de paie pour calculer les cotisations sociales
+						et les transmettre via la déclaration sociale nominative (DSN)
+					</li>
+					<li>Remettre la fiche de paie à votre employé</li>
+				</ul>
+			</T>
+		</Animate.fromBottom>
+	)
+}
+
+export default connect(
+	(state: RootState) => ({
+		hiringChecklist: state.inFranceApp.hiringChecklist
+	}),
+	{
+		onChecklistInitialization: initializeHiringChecklist,
+		onItemCheck: checkHiringItem
+	}
 )(Embaucher)
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx
index 2c142a669..875f7c98c 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx
@@ -1,19 +1,25 @@
-import { resetEntreprise, specifyIfAutoEntrepreneur, specifyIfDirigeantMajoritaire } from 'Actions/existingCompanyActions'
+import {
+	resetEntreprise,
+	specifyIfAutoEntrepreneur,
+	specifyIfDirigeantMajoritaire
+} from 'Actions/existingCompanyActions'
 import { T } from 'Components'
 import CompanyDetails from 'Components/CompanyDetails'
 import FindCompany from 'Components/FindCompany'
 import Overlay from 'Components/Overlay'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
-import React, { useContext, useEffect, useRef, useState } from "react"
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { Company } from 'Reducers/inFranceAppReducer'
+import { RootState } from 'Reducers/rootReducer'
 import * as Animate from 'Ui/animate'
 import businessPlan from './businessPlan.svg'
 
-const infereRégimeFromCompanyDetails = company => {
+const infereRégimeFromCompanyDetails = (company: Company) => {
 	if (!company) {
 		return null
 	}
@@ -39,10 +45,12 @@ const infereRégimeFromCompanyDetails = company => {
 
 export default function SocialSecurity() {
 	const { t } = useTranslation()
-	const company = useSelector<any, any>(state => state.inFranceApp.existingCompany)
+	const company = useSelector(
+		(state: RootState) => state.inFranceApp.existingCompany
+	)
 	const sitePaths = useContext(SitePathsContext)
 	const régime = infereRégimeFromCompanyDetails(company)
-	
+
 	return (
 		<>
 			<Helmet>
@@ -76,7 +84,9 @@ export default function SocialSecurity() {
 				</div>
 
 				<>
-					<h2><T k="gérer.choix.titre">Que souhaitez-vous faire ?</T></h2>
+					<h2>
+						<T k="gérer.choix.titre">Que souhaitez-vous faire ?</T>
+					</h2>
 					{!!régime && (
 						<Link
 							className="ui__ interactive card button-choice lighter-bg"
@@ -86,11 +96,10 @@ export default function SocialSecurity() {
 								state: {
 									fromGérer: true
 								}
-							}}>
+							}}
+						>
 							<T k="gérer.choix.revenus">
-								<p>
-									Calculer mon revenu net
-								</p>
+								<p>Calculer mon revenu net</p>
 								<small>
 									Estimez précisément le montant de vos cotisations grâce au
 									simulateur {{ régime }} de l’URSSAF
@@ -107,19 +116,20 @@ export default function SocialSecurity() {
 								state: {
 									fromGérer: true
 								}
-							}}>
+							}}
+						>
 							<T k="gérer.choix.embauche">
-								<p>
-									Estimer le montant d’une embauche
-							</p>
+								<p>Estimer le montant d’une embauche</p>
 								<small>
-									Calculez le montant total que votre entreprise devra dépenser pour
-									rémunérer votre prochain employé
-							</small>
+									Calculez le montant total que votre entreprise devra dépenser
+									pour rémunérer votre prochain employé
+								</small>
 							</T>
 						</Link>
 					)}
-					<h2><T>Ressources utiles</T></h2>
+					<h2>
+						<T>Ressources utiles</T>
+					</h2>
 					<div
 						css={`
 							display: flex;
@@ -128,45 +138,49 @@ export default function SocialSecurity() {
 							> * {
 								flex: 1;
 							}
-						`}>
-						{!company ?.isAutoEntrepreneur && (
+						`}
+					>
+						{!company?.isAutoEntrepreneur && (
 							<Link
 								className="ui__ interactive card button-choice lighter-bg"
-								to={sitePaths.gérer.embaucher}>
+								to={sitePaths.gérer.embaucher}
+							>
 								<T k="gérer.ressources.embaucher">
-
 									<p>Découvrir les démarches d’embauche </p>
 									<small>
 										La liste des choses à faire pour être sûr de ne rien oublier
 										lors de l’embauche d’un nouveau salarié
-								</small>
+									</small>
 								</T>
 							</Link>
 						)}
-						{company ?.isAutoEntrepreneur && (
+						{company?.isAutoEntrepreneur && (
 							<a
 								className="ui__ interactive card button-choice lighter-bg"
-								href="https://autoentrepreneur.urssaf.fr">
+								href="https://autoentrepreneur.urssaf.fr"
+							>
 								<T k="gérer.ressources.autoEntrepreneur">
 									<p>Accéder au site officiel auto-entrepreneur</p>
 									<small>
-										Vous pourrez effectuer votre déclaration de chiffre d'affaire,
-										payer vos cotisations, et plus largement trouver toutes les
-										informations relatives au statut d'auto-entrepreneur
-								</small>
+										Vous pourrez effectuer votre déclaration de chiffre
+										d'affaire, payer vos cotisations, et plus largement trouver
+										toutes les informations relatives au statut
+										d'auto-entrepreneur
+									</small>
 								</T>
 							</a>
 						)}
 						<Link
 							className="ui__ interactive card button-choice lighter-bg"
-							to={sitePaths.gérer.sécuritéSociale}>
+							to={sitePaths.gérer.sécuritéSociale}
+						>
 							<T k="gérer.ressources.sécuritéSociale">
 								<p>Comprendre la sécurité sociale </p>
 								<small>
 									A quoi servent les cotisations sociales ? Le point sur le
 									système de protection sociale dont bénéficient tous les
 									travailleurs en France
-							</small>
+								</small>
 							</T>
 						</Link>
 					</div>
@@ -176,7 +190,11 @@ export default function SocialSecurity() {
 	)
 }
 
-const CompanySection = ({ company }) => {
+type CompanySectionProps = {
+	company: Company
+}
+
+const CompanySection = ({ company }: CompanySectionProps) => {
 	const [searchModal, showSearchModal] = useState(false)
 	const [autoEntrepreneurModal, showAutoEntrepreneurModal] = useState(false)
 	const [DirigeantMajoritaireModal, showDirigeantMajoritaireModal] = useState(
@@ -191,14 +209,14 @@ const CompanySection = ({ company }) => {
 				showSearchModal(false)
 			}
 			if (
-				company ?.statutJuridique === 'EI' &&
-					company ?.isAutoEntrepreneur == null
+				company?.statutJuridique === 'EI' &&
+				company?.isAutoEntrepreneur == null
 			) {
 				showAutoEntrepreneurModal(true)
 			}
 			if (
-				company ?.statutJuridique === 'SARL' &&
-					company ?.isDirigeantMajoritaire == null
+				company?.statutJuridique === 'SARL' &&
+				company?.isDirigeantMajoritaire == null
 			) {
 				showDirigeantMajoritaireModal(true)
 			}
@@ -206,11 +224,11 @@ const CompanySection = ({ company }) => {
 	}, [company, searchModal])
 
 	const dispatch = useDispatch()
-	const handleAnswerAutoEntrepreneur = isAutoEntrepreneur => {
+	const handleAnswerAutoEntrepreneur = (isAutoEntrepreneur: boolean) => {
 		dispatch(specifyIfAutoEntrepreneur(isAutoEntrepreneur))
 		showAutoEntrepreneurModal(false)
 	}
-	const handleAnswerDirigeantMajoritaire = DirigeantMajoritaire => {
+	const handleAnswerDirigeantMajoritaire = (DirigeantMajoritaire: boolean) => {
 		dispatch(specifyIfDirigeantMajoritaire(DirigeantMajoritaire))
 		showDirigeantMajoritaireModal(false)
 	}
@@ -221,16 +239,20 @@ const CompanySection = ({ company }) => {
 				<>
 					<ScrollToTop />
 					<Overlay>
-						<h2><T k="gérer.entreprise.auto">Êtes-vous auto-entrepreneur ? </T></h2>
+						<h2>
+							<T k="gérer.entreprise.auto">Êtes-vous auto-entrepreneur ? </T>
+						</h2>
 						<div className="ui__ answer-group">
 							<button
 								className="ui__ button"
-								onClick={() => handleAnswerAutoEntrepreneur(true)}>
+								onClick={() => handleAnswerAutoEntrepreneur(true)}
+							>
 								<T>Oui</T>
 							</button>
 							<button
 								className="ui__ button"
-								onClick={() => handleAnswerAutoEntrepreneur(false)}>
+								onClick={() => handleAnswerAutoEntrepreneur(false)}
+							>
 								<T>Non</T>
 							</button>
 						</div>
@@ -252,12 +274,14 @@ const CompanySection = ({ company }) => {
 						<div className="ui__ answer-group">
 							<button
 								className="ui__ button"
-								onClick={() => handleAnswerDirigeantMajoritaire(true)}>
+								onClick={() => handleAnswerDirigeantMajoritaire(true)}
+							>
 								<T>Oui</T>
 							</button>
 							<button
 								className="ui__ button"
-								onClick={() => handleAnswerDirigeantMajoritaire(false)}>
+								onClick={() => handleAnswerDirigeantMajoritaire(false)}
+							>
 								<T>Non</T>
 							</button>
 						</div>
@@ -286,9 +310,15 @@ const CompanySection = ({ company }) => {
 								</span>
 								{company.isDirigeantMajoritaire != null && (
 									<span css="margin-left: 1rem" className="ui__ label">
-										{company.isDirigeantMajoritaire
-											? <T k="gérer.entreprise.majoritaire">Dirigeant majoritaire</T>
-											: <T k="gérer.entreprise.minoritaire">Dirigeant minoritaire</T>}
+										{company.isDirigeantMajoritaire ? (
+											<T k="gérer.entreprise.majoritaire">
+												Dirigeant majoritaire
+											</T>
+										) : (
+											<T k="gérer.entreprise.minoritaire">
+												Dirigeant minoritaire
+											</T>
+										)}
 									</span>
 								)}
 							</>
@@ -299,19 +329,23 @@ const CompanySection = ({ company }) => {
 						onClick={() => {
 							dispatch(resetEntreprise())
 							showSearchModal(true)
-						}}>
-						<T k="gérer.entreprise.changer">Changer l'entreprise sélectionnée</T>
+						}}
+					>
+						<T k="gérer.entreprise.changer">
+							Changer l'entreprise sélectionnée
+						</T>
 					</button>
 				</>
 			) : (
-					<p>
-						<button
-							onClick={() => showSearchModal(true)}
-							className="ui__ plain cta button">
-							<T k="gérer.cta">Renseigner mon entreprise</T>
-						</button>
-					</p>
-				)}
+				<p>
+					<button
+						onClick={() => showSearchModal(true)}
+						className="ui__ plain cta button"
+					>
+						<T k="gérer.cta">Renseigner mon entreprise</T>
+					</button>
+				</p>
+			)}
 		</>
 	)
 }
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.tsx
index 607250aa3..b76bd6fa9 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.tsx
@@ -1,11 +1,11 @@
 import { T } from 'Components'
-import animate from 'Ui/animate'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import animate from 'Ui/animate'
 
 export default function SchemeChoice() {
 	const sitePaths = useContext(SitePathsContext)
@@ -21,7 +21,8 @@ export default function SchemeChoice() {
 			<p>
 				<Link
 					to={sitePaths.simulateurs['assimilé-salarié']}
-					className="ui__ interactive card light-bg button-choice">
+					className="ui__ interactive card light-bg button-choice"
+				>
 					{emoji('☂')}
 					<span>
 						<T>Assimilé salarié</T>
@@ -36,7 +37,8 @@ export default function SchemeChoice() {
 				</Link>
 				<Link
 					to={sitePaths.simulateurs.indépendant}
-					className="ui__ interactive card light-bg button-choice">
+					className="ui__ interactive card light-bg button-choice"
+				>
 					{emoji('👩‍🔧')}
 					<span>
 						<T>Indépendant</T>
@@ -51,7 +53,8 @@ export default function SchemeChoice() {
 				</Link>
 				<Link
 					to={sitePaths.simulateurs['auto-entrepreneur']}
-					className="ui__ interactive card light-bg button-choice">
+					className="ui__ interactive card light-bg button-choice"
+				>
 					{emoji('🚶‍♂️')}
 					Auto-entrepreneur
 				</Link>
@@ -64,7 +67,8 @@ export default function SchemeChoice() {
 			<p style={{ textAlign: 'center', marginTop: '1rem' }}>
 				<Link
 					className="ui__  plain cta button"
-					to={sitePaths.simulateurs.comparaison}>
+					to={sitePaths.simulateurs.comparaison}
+				>
 					<T k="selectionRégime.comparer.cta">Comparer les régimes</T>
 				</Link>
 			</p>
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/index.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/index.tsx
index 183c54ca0..422efbcc1 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/index.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/index.tsx
@@ -19,7 +19,8 @@ export default function Gérer() {
 					to={sitePaths.gérer.index}
 					exact
 					activeClassName="ui__ hide"
-					className="ui__ simple push-left small button">
+					className="ui__ simple push-left small button"
+				>
 					← <T>Retour à mon activité</T>
 				</NavLink>
 			</div>
diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.tsx b/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.tsx
index 73d25a56d..54239325c 100644
--- a/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.tsx
@@ -7,7 +7,6 @@ import screenfull from 'screenfull'
 import { isIE } from '../../../../utils'
 import Privacy from '../../layout/Footer/Privacy'
 
-
 export default function IframeFooter() {
 	const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen)
 	useEffect(() => {
@@ -25,14 +24,16 @@ export default function IframeFooter() {
 					display: 'flex',
 					alignItems: 'center',
 					justifyContent: 'space-between'
-				}}>
+				}}
+			>
 				<LangSwitcher className="ui__ button simple" />
 				{screenfull.enabled && !isFullscreen && !isIE() && (
 					<button
 						className="ui__ button small"
 						onClick={() => {
 							screenfull.toggle()
-						}}>
+						}}
+					>
 						{emoji('🖵')}&nbsp;
 						<Trans>Plein écran</Trans>
 					</button>
diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.tsx b/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.tsx
index 9b11999ba..500b1f171 100644
--- a/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.tsx
@@ -1,10 +1,10 @@
-import { SitePathsContext } from 'Components/utils/withSitePaths';
-import React, { useContext } from 'react';
-import { Helmet } from 'react-helmet';
-import { SalarySimulation } from '../Simulateurs/Salarié';
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import React, { useContext } from 'react'
+import { Helmet } from 'react-helmet'
+import { SalarySimulation } from '../Simulateurs/Salarié'
 
 export default function IframeSimulateurEmbauche() {
-	const sitePaths = useContext(SitePathsContext);
+	const sitePaths = useContext(SitePathsContext)
 	return (
 		<>
 			<Helmet>
diff --git a/source/sites/mon-entreprise.fr/pages/Landing/Landing.tsx b/source/sites/mon-entreprise.fr/pages/Landing/Landing.tsx
index 9ea34d4c9..c29e59b8a 100644
--- a/source/sites/mon-entreprise.fr/pages/Landing/Landing.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Landing/Landing.tsx
@@ -5,14 +5,15 @@ import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { RootState } from 'Reducers/rootReducer'
 import Footer from '../../layout/Footer/Footer'
 import illustrationSvg from './illustration.svg'
 import './Landing.css'
 
 export default function Landing() {
 	const sitePaths = useContext(SitePathsContext)
-	const statutChoisi = useSelector<any, any>(
-		state => state.inFranceApp.companyStatusChoice
+	const statutChoisi = useSelector(
+		(state: RootState) => state.inFranceApp.companyStatusChoice
 	)
 	return (
 		<div className="app-content">
@@ -42,7 +43,8 @@ export default function Landing() {
 					className="ui__ interactive card box"
 					to={
 						statutChoisi ? sitePaths.créer[statutChoisi] : sitePaths.créer.index
-					}>
+					}
+				>
 					<div className="ui__ big box-icon">{emoji('💡')}</div>
 					<T k="landing.choice.create">
 						<h3>Créer une entreprise</h3>
@@ -70,7 +72,8 @@ export default function Landing() {
 				</Link>
 				<Link
 					className="ui__ interactive card box"
-					to={sitePaths.économieCollaborative.index}>
+					to={sitePaths.économieCollaborative.index}
+				>
 					<div className="ui__ big box-icon">{emoji('🙋')}</div>
 					<T k="landing.choice.declare">
 						<h3>Que dois-je déclarer ?</h3>
@@ -88,7 +91,8 @@ export default function Landing() {
 				<div style={{ width: '100%', textAlign: 'center' }}>
 					<Link
 						to={sitePaths.simulateurs.index}
-						className="ui__ simple small button ">
+						className="ui__ simple small button "
+					>
 						{emoji('🧮')}{' '}
 						<T k="landing.seeSimulators">Voir la liste des simulateurs</T>
 					</Link>
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx
index 6ca6c598f..389b14669 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx
@@ -3,14 +3,15 @@ import SalaryExplanation from 'Components/SalaryExplanation'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import assimiléConfig from 'Components/simulationConfigs/assimilé.yaml'
-import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
+import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
 import React from 'react'
-import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
-const AssimiléSalarié = () => {
+export default function AssimiléSalarié() {
+	useSimulationConfig(assimiléConfig)
 	const { t } = useTranslation()
+
 	return (
 		<>
 			<Helmet>
@@ -34,24 +35,7 @@ const AssimiléSalarié = () => {
 				</T>
 			</h1>
 			<Warning simulateur="assimilé-salarié" />
-			<Simulation
-				explanations={
-					<SalaryExplanation
-						protectionText={
-							<p className="ui__ notice">
-								{emoji('☂️ ')}{' '}
-								<T k="simulateurs.assimilé-salarié.explications">
-									Les gérants égalitaires ou minoritaires de SARL ou les
-									dirigeants de SA et SAS sont assimilés salariés et relèvent du
-									régime général. Par conséquent, le dirigeant a la même
-									protection sociale qu'un salarié, mis à part le chômage.
-								</T>
-							</p>
-						}
-					/>
-				}
-			/>
+			<Simulation explanations={<SalaryExplanation />} />
 		</>
 	)
 }
-export default withSimulationConfig(assimiléConfig)(AssimiléSalarié)
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
index dd18bdede..6dc252f32 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
@@ -2,7 +2,7 @@ import { T } from 'Components'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/auto-entrepreneur.yaml'
-import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
+import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
 import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColoursContext } from 'Components/utils/withColours'
 import { getRuleFromAnalysis } from 'Engine/rules'
@@ -12,8 +12,10 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 
-const AutoEntrepreneur = () => {
+export default function AutoEntrepreneur() {
+	useSimulationConfig(indépendantConfig)
 	const { t } = useTranslation()
+
 	return (
 		<>
 			<Helmet>
@@ -42,8 +44,6 @@ const AutoEntrepreneur = () => {
 	)
 }
 
-export default withSimulationConfig(indépendantConfig)(AutoEntrepreneur)
-
 function ExplanationSection() {
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const getRule = getRuleFromAnalysis(analysis)
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.tsx
index 086dc59be..58a657332 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.tsx
@@ -1,106 +1,120 @@
-import { T } from 'Components';
-import { SitePathsContext } from 'Components/utils/withSitePaths';
-import React, { useContext } from 'react';
-import emoji from 'react-easy-emoji';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { T } from 'Components'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import React, { useContext } from 'react'
+import emoji from 'react-easy-emoji'
+import { Helmet } from 'react-helmet'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 
 export default function Simulateurs() {
-    const sitePaths = useContext(SitePathsContext)
-    const { t } = useTranslation();
-    const titre = t('simulateurs.accueil.titre', 'Simulateurs disponibles');
-    return (
-        <>
-            <Helmet><title>{titre}</title></Helmet>
+	const sitePaths = useContext(SitePathsContext)
+	const { t } = useTranslation()
+	const titre = t('simulateurs.accueil.titre', 'Simulateurs disponibles')
+	return (
+		<>
+			<Helmet>
+				<title>{titre}</title>
+			</Helmet>
 
-            <section className="ui__ full-width light-bg center-flex">
-                <h1 css='min-width: 100%; text-align: center'>{titre}</h1>
-                <Link
-                    className="ui__ interactive card box"
-                    to={{
-                        state: { fromSimulateurs: true },
-                        pathname: sitePaths.simulateurs['assimilé-salarié']
-                    }}>
-                    <div className="ui__ big box-icon">{emoji('☂️')}</div>
-                    <T k="simulateurs.accueil.assimilé">
-                        <h3>Assimilé salarié</h3>
-                        <p className="ui__ notice" css="flex: 1">
-                            Calculer le revenu d'un dirigeant de SAS, SASU ou SARL minoritaire
-					</p>
-                    </T>
-                </Link>
-                <Link
-                    className="ui__ interactive card box"
-                    to={{
-                        state: { fromSimulateurs: true },
-                        pathname: sitePaths.simulateurs.indépendant
-                    }}>
-                    <div className="ui__ big box-icon">{emoji('🃏')}</div>
-                    <T k="simulateurs.accueil.indépendant">
-                        <h3>Indépendant</h3>
-                        <p className="ui__ notice" css="flex: 1">
-                            Calculer le revenu d'un dirigeant de EURL, EI, ou SARL majoritaire
-					</p>
-                    </T>
-                </Link>
-                <Link
-                    className="ui__ interactive card box"
-                    to={{
-                        state: { fromSimulateurs: true },
-                        pathname: sitePaths.simulateurs['auto-entrepreneur']
-                    }}>
-                    <div className="ui__ big box-icon">{emoji('🧢')}</div>
-                    <T k="simulateurs.accueil.auto">
-                        <h3>Auto-entrepreneur</h3>
-                        <p className="ui__ notice" css="flex: 1">
-                            Calculer le revenu (ou le chiffre d'affaires) d'un auto-entrepreneur
-					</p>
-                    </T>
-                </Link>
-                <Link
-                    className="ui__ interactive card box"
-                    to={{
-                        state: { fromSimulateurs: true },
-                        pathname: sitePaths.simulateurs.salarié
-                    }}>
-                    <div className="ui__ big box-icon">{emoji('🤝')}</div>
-                    <T k="simulateurs.accueil.salarié">
-                        <h3>Salarié</h3>
-                        <p className="ui__ notice" css="flex: 1">
-                            Calculer le salaire net, brut, ou total d'un salarié, stagiaire, ou
-                            assimilé
-					</p>
-                    </T>
-                </Link>
-                <Link
-                    className="ui__ interactive card box"
-                    to={{
-                        state: { fromSimulateurs: true },
-                        pathname: sitePaths.simulateurs.comparaison
-                    }}>
-                    <div className="ui__ big box-icon">{emoji('📊')}</div>
-                    <T k="simulateurs.accueil.comparaison">
-                        <h3>Comparaison statuts</h3>
-                        <p className="ui__ notice" css="flex: 1">
-                            Simulez les différences entre les régimes (cotisations, retraite, maternité, maladie, etc.)
-					</p>
-                    </T>
-                </Link>
-
-            </section>
-            <section>
-                <T k="simulateurs.accueil.description">
-                    <p>
-                        Tous les simulateurs sur ce site sont :
-            </p>
-                    <ul>
-                        <li><strong>Maintenus à jour</strong> avec les dernières évolutions législatives</li>
-                        <li><strong>Améliorés en continu</strong> afin d'augmenter le nombre de dispositifs pris en compte</li>
-                        <li>Développés en <strong>partenariat avec l'Urssaf</strong></li>
-                    </ul>
-                </T>
-            </section>
-        </>
-    )
+			<section className="ui__ full-width light-bg center-flex">
+				<h1 css="min-width: 100%; text-align: center">{titre}</h1>
+				<Link
+					className="ui__ interactive card box"
+					to={{
+						state: { fromSimulateurs: true },
+						pathname: sitePaths.simulateurs['assimilé-salarié']
+					}}
+				>
+					<div className="ui__ big box-icon">{emoji('☂️')}</div>
+					<T k="simulateurs.accueil.assimilé">
+						<h3>Assimilé salarié</h3>
+						<p className="ui__ notice" css="flex: 1">
+							Calculer le revenu d'un dirigeant de SAS, SASU ou SARL minoritaire
+						</p>
+					</T>
+				</Link>
+				<Link
+					className="ui__ interactive card box"
+					to={{
+						state: { fromSimulateurs: true },
+						pathname: sitePaths.simulateurs.indépendant
+					}}
+				>
+					<div className="ui__ big box-icon">{emoji('🃏')}</div>
+					<T k="simulateurs.accueil.indépendant">
+						<h3>Indépendant</h3>
+						<p className="ui__ notice" css="flex: 1">
+							Calculer le revenu d'un dirigeant de EURL, EI, ou SARL majoritaire
+						</p>
+					</T>
+				</Link>
+				<Link
+					className="ui__ interactive card box"
+					to={{
+						state: { fromSimulateurs: true },
+						pathname: sitePaths.simulateurs['auto-entrepreneur']
+					}}
+				>
+					<div className="ui__ big box-icon">{emoji('🧢')}</div>
+					<T k="simulateurs.accueil.auto">
+						<h3>Auto-entrepreneur</h3>
+						<p className="ui__ notice" css="flex: 1">
+							Calculer le revenu (ou le chiffre d'affaires) d'un
+							auto-entrepreneur
+						</p>
+					</T>
+				</Link>
+				<Link
+					className="ui__ interactive card box"
+					to={{
+						state: { fromSimulateurs: true },
+						pathname: sitePaths.simulateurs.salarié
+					}}
+				>
+					<div className="ui__ big box-icon">{emoji('🤝')}</div>
+					<T k="simulateurs.accueil.salarié">
+						<h3>Salarié</h3>
+						<p className="ui__ notice" css="flex: 1">
+							Calculer le salaire net, brut, ou total d'un salarié, stagiaire,
+							ou assimilé
+						</p>
+					</T>
+				</Link>
+				<Link
+					className="ui__ interactive card box"
+					to={{
+						state: { fromSimulateurs: true },
+						pathname: sitePaths.simulateurs.comparaison
+					}}
+				>
+					<div className="ui__ big box-icon">{emoji('📊')}</div>
+					<T k="simulateurs.accueil.comparaison">
+						<h3>Comparaison statuts</h3>
+						<p className="ui__ notice" css="flex: 1">
+							Simulez les différences entre les régimes (cotisations, retraite,
+							maternité, maladie, etc.)
+						</p>
+					</T>
+				</Link>
+			</section>
+			<section>
+				<T k="simulateurs.accueil.description">
+					<p>Tous les simulateurs sur ce site sont :</p>
+					<ul>
+						<li>
+							<strong>Maintenus à jour</strong> avec les dernières évolutions
+							législatives
+						</li>
+						<li>
+							<strong>Améliorés en continu</strong> afin d'augmenter le nombre
+							de dispositifs pris en compte
+						</li>
+						<li>
+							Développés en <strong>partenariat avec l'Urssaf</strong>
+						</li>
+					</ul>
+				</T>
+			</section>
+		</>
+	)
 }
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
index 0c35f82d3..a34695d63 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
@@ -2,7 +2,7 @@ import { T } from 'Components'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/indépendant.yaml'
-import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
+import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
 import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColoursContext } from 'Components/utils/withColours'
 import { getRuleFromAnalysis } from 'Engine/rules'
@@ -12,7 +12,8 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 
-export default withSimulationConfig(indépendantConfig)(function Indépendant() {
+export default function Indépendant() {
+	useSimulationConfig(indépendantConfig)
 	const { t } = useTranslation()
 	return (
 		<>
@@ -36,11 +37,11 @@ export default withSimulationConfig(indépendantConfig)(function Indépendant()
 					Simulateur de revenus pour indépendants
 				</T>
 			</h1>
-			<Warning />
+			<Warning simulateur="indépendant" />
 			<Simulation explanations={<ExplanationSection />} />
 		</>
 	)
-})
+}
 
 function ExplanationSection() {
 	const analysis = useSelector(analysisWithDefaultsSelector)
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx
index 2373cd51b..f5fc7fc1a 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx
@@ -4,14 +4,13 @@ import PreviousSimulationBanner from 'Components/PreviousSimulationBanner'
 import SalaryExplanation from 'Components/SalaryExplanation'
 import Simulation from 'Components/Simulation'
 import salariéConfig from 'Components/simulationConfigs/salarié.yaml'
-import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
+import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import { Markdown } from 'Components/utils/markdown'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import urlIllustrationNetBrutEn from 'Images/illustration-net-brut-en.png'
 import urlIllustrationNetBrut from 'Images/illustration-net-brut.png'
 import React, { useContext } from 'react'
-import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
@@ -101,26 +100,13 @@ In addition to the salary, our simulator takes into account the calculation of b
 
 There are deferred hiring aids that are not taken into account by our simulator, you can find them on the official portal.`
 
-export let SalarySimulation = withSimulationConfig(salariéConfig)(() => {
+export let SalarySimulation = () => {
+	useSimulationConfig(salariéConfig)
 	const sitePaths = useContext(SitePathsContext)
 	return (
 		<>
 			<Simulation
-				explanations={
-					<SalaryExplanation
-						protectionText={
-							<p className="ui__ notice">
-								{emoji('☂️')}{' '}
-								<T k="simulateurs.salarié.description">
-									Dès que l'embauche d'un salarié est déclarée et qu'il est
-									payé, il est couvert par le régime général de la Sécurité
-									sociale (santé, maternité, invalidité, vieillesse, maladie
-									professionnelle et accidents) et chômage.
-								</T>
-							</p>
-						}
-					/>
-				}
+				explanations={<SalaryExplanation />}
 				customEndMessages={
 					<>
 						<T k="simulation-end.hiring.text">
@@ -129,7 +115,8 @@ export let SalarySimulation = withSimulationConfig(salariéConfig)(() => {
 						<div style={{ textAlign: 'center', margin: '1rem' }}>
 							<Link
 								className="ui__ plain button"
-								to={sitePaths.gérer.embaucher}>
+								to={sitePaths.gérer.embaucher}
+							>
 								<T k="simulation-end.cta">Connaître les démarches</T>
 							</Link>
 						</div>
@@ -139,4 +126,4 @@ export let SalarySimulation = withSimulationConfig(salariéConfig)(() => {
 			<PreviousSimulationBanner />
 		</>
 	)
-})
+}
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/index.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.tsx
index e40b525e1..e511932a9 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/index.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.tsx
@@ -13,65 +13,68 @@ import Salarié from './Salarié'
 import SchemeComparaison from './SchemeComparaison'
 
 export default function Simulateurs() {
-    const sitePaths = useContext(SitePathsContext)
-    const { state, pathname } = useLocation()
-    const [lastState, setLastState] = usePersistingState(
-        'navigation::simulateurs::locationState::v2'
-    )
-    useEffect(() => {
-        if (state) {
-            setLastState(state)
-        }
-    }, [setLastState, state])
-    return (
-        <>
-            <ScrollToTop key={pathname} />
-            {pathname !== sitePaths.simulateurs.index && (
-                <div css="transform: translateY(2rem);">
-                    {lastState ?.fromGérer && (
-                        <Link
-                            to={sitePaths.gérer.index}
-                            className="ui__ simple small push-left button">
-                            ← <T>Retour à mon activité</T>
-                        </Link>
-                    )}
-                    {lastState ?.fromCréer && (
-                        <Link
-                            to={sitePaths.créer.index}
-                            className="ui__ simple small push-left button">
-                            ← <T>Retour à la création</T>
-                        </Link>
-                    )}
-                    {!lastState ||
-                        (lastState ?.fromSimulateurs && (
-                            <Link
-                                to={sitePaths.simulateurs.index}
-                                className="ui__ simple small push-left button">
-                                ← <T>Voir les autres simulateurs</T>
-                            </Link>
-                        ))}
-                </div>
-            )}
-            <Switch>
-                <Route exact path={sitePaths.simulateurs.index} component={Home} />
-                <Route path={sitePaths.simulateurs.salarié} component={Salarié} />
-                <Route
-                    path={sitePaths.simulateurs.comparaison}
-                    component={SchemeComparaison}
-                />
-                <Route
-                    path={sitePaths.simulateurs['assimilé-salarié']}
-                    component={AssimiléSalarié}
-                />
-                <Route
-                    path={sitePaths.simulateurs.indépendant}
-                    component={Indépendant}
-                />
-                <Route
-                    path={sitePaths.simulateurs['auto-entrepreneur']}
-                    component={AutoEntrepreneur}
-                />
-            </Switch>
-        </>
-    )
+	const sitePaths = useContext(SitePathsContext)
+	const { state, pathname } = useLocation()
+	const [lastState, setLastState] = usePersistingState(
+		'navigation::simulateurs::locationState::v2'
+	)
+	useEffect(() => {
+		if (state) {
+			setLastState(state)
+		}
+	}, [setLastState, state])
+	return (
+		<>
+			<ScrollToTop key={pathname} />
+			{pathname !== sitePaths.simulateurs.index && (
+				<div css="transform: translateY(2rem);">
+					{lastState?.fromGérer && (
+						<Link
+							to={sitePaths.gérer.index}
+							className="ui__ simple small push-left button"
+						>
+							← <T>Retour à mon activité</T>
+						</Link>
+					)}
+					{lastState?.fromCréer && (
+						<Link
+							to={sitePaths.créer.index}
+							className="ui__ simple small push-left button"
+						>
+							← <T>Retour à la création</T>
+						</Link>
+					)}
+					{!lastState ||
+						(lastState?.fromSimulateurs && (
+							<Link
+								to={sitePaths.simulateurs.index}
+								className="ui__ simple small push-left button"
+							>
+								← <T>Voir les autres simulateurs</T>
+							</Link>
+						))}
+				</div>
+			)}
+			<Switch>
+				<Route exact path={sitePaths.simulateurs.index} component={Home} />
+				<Route path={sitePaths.simulateurs.salarié} component={Salarié} />
+				<Route
+					path={sitePaths.simulateurs.comparaison}
+					component={SchemeComparaison}
+				/>
+				<Route
+					path={sitePaths.simulateurs['assimilé-salarié']}
+					component={AssimiléSalarié}
+				/>
+				<Route
+					path={sitePaths.simulateurs.indépendant}
+					component={Indépendant}
+				/>
+				<Route
+					path={sitePaths.simulateurs['auto-entrepreneur']}
+					component={AutoEntrepreneur}
+				/>
+			</Switch>
+		</>
+	)
 }
diff --git a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx
index ac191599c..00bb2328f 100644
--- a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx
+++ b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx
@@ -2,7 +2,7 @@ import { ScrollToTop } from 'Components/utils/Scroll'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 
-export default function Privacy() {
+export default function Library() {
 	return (
 		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
 			<ScrollToTop />
@@ -43,7 +43,8 @@ export default function Privacy() {
 					title="mon-entreprise 1"
 					allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
 					css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
-					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+				></iframe>
 			</div>
 			<h3>2) Parcourir la documentation en ligne</h3>
 			<p>
@@ -99,7 +100,8 @@ export default function Privacy() {
 					title="mon-entreprise 2"
 					allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
 					css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
-					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+				></iframe>
 			</div>
 			<p>
 				{emoji('ℹ️ ')}
@@ -108,8 +110,8 @@ export default function Privacy() {
 			</p>
 			<p>
 				Alors que dans le simulateur{' '}
-				<a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>
-				, il suffit de renseigner la commune et le taux correspondant est
+				<a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>, il
+				suffit de renseigner la commune et le taux correspondant est
 				automatiquement déterminé. C'est voulu : pour garder la bibliothèque (et
 				le site) légers, nous utilisons deux API en ligne. L'
 				<a href="https://api.gouv.fr/api/api-geo.html#doc_tech">
@@ -152,7 +154,8 @@ export default function Privacy() {
 					title="mon-entreprise 2"
 					allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
 					css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
-					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+					sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+				></iframe>
 			</div>
 		</div>
 	)
diff --git a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx
index 63dbe1e96..01e8dc646 100644
--- a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx
+++ b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx
@@ -28,7 +28,8 @@ export default function Options() {
 				<br />
 				<Link
 					className="ui__ button-choice "
-					to={sitePaths.integration.library}>
+					to={sitePaths.integration.library}
+				>
 					{emoji('🧰')} <T>Intégrer la bibliothèque de calcul</T>
 				</Link>
 				<p css="margin-top: -1em">
diff --git a/source/sites/mon-entreprise.fr/pages/integration/iframe.css b/source/sites/mon-entreprise.fr/pages/integration/iframe.css
index 75b241716..dc0882904 100644
--- a/source/sites/mon-entreprise.fr/pages/integration/iframe.css
+++ b/source/sites/mon-entreprise.fr/pages/integration/iframe.css
@@ -1,4 +1,3 @@
-
 section#integrations a {
 	text-decoration: none;
 }
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.tsx
similarity index 81%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.tsx
index 2dde2708b..b28b1995a 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.tsx
@@ -1,11 +1,11 @@
 import { T } from 'Components'
 import { Markdown } from 'Components/utils/markdown'
 import { ScrollToTop } from 'Components/utils/Scroll'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import Value from 'Components/Value'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
-import { useTranslation } from "react-i18next"
+import { useTranslation } from 'react-i18next'
 import { Redirect } from 'react-router-dom'
 import Animate from 'Ui/animate'
 import { selectSeuilRevenus } from './actions'
@@ -16,15 +16,15 @@ import NextButton from './NextButton'
 import { estExonéréeSelector } from './selectors'
 import { StoreContext } from './StoreContext'
 
-export default withSitePaths(function Activité({
-	sitePaths,
+export default function Activité({
 	match: {
 		params: { title }
 	}
 }) {
-	const { i18n: { language } } = useTranslation();
-	const { state, dispatch } = useContext(StoreContext)	
-	const activité = getTranslatedActivité(title, language);
+	const { language } = useTranslation().i18n
+	const sitePaths = useContext(SitePathsContext)
+	const { state, dispatch } = useContext(StoreContext)
+	const activité = getTranslatedActivité(title, language)
 	if (!(title in state)) {
 		return <Redirect to={sitePaths.économieCollaborative.index} />
 	}
@@ -35,7 +35,11 @@ export default withSitePaths(function Activité({
 				<ScrollToTop />
 				<h1>{activité.titre}</h1>
 				<p>{activité.explication}</p>
-				<p><T k="économieCollaborative.activité.choix">Quelles sont plus précisément les activités exercées ?</T></p>
+				<p>
+					<T k="économieCollaborative.activité.choix">
+						Quelles sont plus précisément les activités exercées ?
+					</T>
+				</p>
 				<section className="ui__ full-width light-bg">
 					<ActivitéSelection
 						currentActivité={title}
@@ -58,7 +62,8 @@ export default withSitePaths(function Activité({
 				<Markdown source={activité.explication} />
 				{activité.plateformes && (
 					<p className="ui__ notice">
-						{emoji('📱 ')}{activité.plateformes.join(', ')}
+						{emoji('📱 ')}
+						{activité.plateformes.join(', ')}
 					</p>
 				)}
 				<ExceptionsExonération
@@ -81,20 +86,20 @@ export default withSitePaths(function Activité({
 					</T>
 				) : (
 					<>
-					<T k="économieCollaborative.activité.revenusAnnuels">
-
-						<h2>Revenus annuels</h2>
-						<p>Vos revenus annuels pour cette activité sont :</p>
-					</T>
+						<T k="économieCollaborative.activité.revenusAnnuels">
+							<h2>Revenus annuels</h2>
+							<p>Vos revenus annuels pour cette activité sont :</p>
+						</T>
 						<ul
 							key={title}
 							css="
 								list-style: none;
 								padding-left: 0;
 							"
-							onChange={e => {
+							onChange={(e: any) => {
 								dispatch(selectSeuilRevenus(title, e.target.value))
-							}}>
+							}}
+						>
 							{activité['seuil déclaration'] &&
 								activité['seuil déclaration'] !== 0 && (
 									<li>
@@ -106,7 +111,7 @@ export default withSitePaths(function Activité({
 												defaultChecked={seuilRevenus === 'AUCUN'}
 											/>{' '}
 											<T>inférieurs à</T>{' '}
-											<Value numFractionDigits={0} unit="€">
+											<Value maximumFractionDigits={0} unit="€">
 												{activité['seuil déclaration']}
 											</Value>
 										</label>
@@ -121,7 +126,7 @@ export default withSitePaths(function Activité({
 										defaultChecked={seuilRevenus === 'IMPOSITION'}
 									/>{' '}
 									<T>inférieurs à</T>{' '}
-									<Value numFractionDigits={0} unit="€">
+									<Value maximumFractionDigits={0} unit="€">
 										{activité['seuil pro']}
 									</Value>
 								</label>
@@ -138,7 +143,7 @@ export default withSitePaths(function Activité({
 											}
 										/>{' '}
 										<T>supérieurs à</T>{' '}
-										<Value numFractionDigits={0} unit="€">
+										<Value maximumFractionDigits={0} unit="€">
 											{activité['seuil pro']}
 										</Value>
 									</label>
@@ -156,7 +161,7 @@ export default withSitePaths(function Activité({
 										}
 									/>{' '}
 									<T>supérieurs à</T>{' '}
-									<Value numFractionDigits={0} unit="€">
+									<Value maximumFractionDigits={0} unit="€">
 										{activité['seuil régime général'] || activité['seuil pro']}
 									</Value>
 								</label>
@@ -168,4 +173,4 @@ export default withSitePaths(function Activité({
 			</Animate.fromBottom>
 		</section>
 	)
-})
+}
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.js
deleted file mode 100644
index edb89c3d5..000000000
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import classnames from 'classnames'
-import { T } from 'Components'
-import { ScrollToTop } from 'Components/utils/Scroll'
-import withSitePaths from 'Components/utils/withSitePaths'
-import { intersection } from 'ramda'
-import React, { useCallback, useContext } from 'react'
-import emoji from 'react-easy-emoji'
-import { Helmet } from 'react-helmet'
-import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
-import Animate from 'Ui/animate'
-import Checkbox from 'Ui/Checkbox'
-import InfoBulle from 'Ui/InfoBulle'
-import { debounce } from '../../../../utils'
-import { toggleActivité } from './actions'
-import { activités, getTranslatedActivité } from './activitésData'
-import NextButton from './NextButton'
-import { activitésEffectuéesSelector, activitésRéponduesSelector } from './selectors'
-import { StoreContext } from './StoreContext'
-
-export default (function ActivitésSelection() {
-	const { t } = useTranslation()
-	const titre = t('économieCollaborative.accueil.titre', 'Comment déclarer mes revenus des plateformes en ligne ?')
-	return (
-		<>
-			<Helmet>
-				<title>{titre}</title>
-			</Helmet>
-			<Animate.fromBottom>
-				<ScrollToTop />
-				<h1>{titre}</h1>
-				<section css="margin-bottom: 2rem">
-					<T k="économieCollaborative.accueil.contenu">
-						<p>
-							Vous avez des revenus issus des <strong>plateformes en ligne</strong>{' '}
-							(Airbnb, Abritel, Drivy, Blablacar, Leboncoin, etc.) ? Vous devez les
-							déclarer dans la plupart des cas. Cependant, il peut être difficile de
-							s'y retrouver <span>{emoji('🤔')}</span>.
-						</p>
-						<p>
-							Suivez ce guide pour savoir en quelques clics comment être en règle.
-				</p>
-						<p className="ui__ notice">
-							À partir de 2020, ces revenus seront communiqués automatiquement par
-							les plateformes à l’administration fiscale et à l’Urssaf.
-				</p>
-					</T>
-				</section>
-
-				<section className="ui__ full-width light-bg">
-					<h2 className="ui__ container" css="text-align: center">
-						<T k="économieCollaborative.accueil.question">Quels types d'activités avez-vous exercé ?</T>
-					</h2>
-					<ActivitéSelection activités={activités.map(({ titre }) => titre)} />
-					<p className="ui__ container notice" css="text-align: center">
-						<T k="économieCollaborative.accueil.réassurance">PS : cet outil est là uniquement pour vous informer, aucune donnée ne
-					sera transmise aux administrations</T> {emoji('😌')}
-					</p>
-				</section>
-			</Animate.fromBottom>
-		</>
-	)
-})
-
-export const ActivitéSelection = ({ activités, currentActivité }) => {
-	const { state } = useContext(StoreContext)
-	const activitéRépondue = activitésRéponduesSelector(state)
-	const nextButtonDisabled = !intersection(
-		activitésEffectuéesSelector(state),
-		activités
-	).length
-
-	return (
-		<>
-			<div css="display: flex; flex-wrap: wrap; justify-content: center">
-				{activités.map(title => {
-					const selected = state[title].effectuée
-					const answered = activitéRépondue.includes(title)
-					return (
-						<ActivitéCard
-							key={title}
-							title={title}
-							interactive
-							selected={selected}
-							answered={answered}
-						/>
-					)
-				})}
-			</div>
-			<NextButton disabled={nextButtonDisabled} activité={currentActivité} />
-		</>
-	)
-}
-
-export const ActivitéCard = withSitePaths(
-	({ title, selected, interactive, answered, sitePaths, label, className }) => {
-		const { dispatch } = useContext(StoreContext)
-		const { i18n: { language } } = useTranslation();
-		const toggle = useCallback(
-			selected !== undefined
-				? // debounce to avoid double onClick call when clicking on checkbox
-				debounce(1, () => dispatch(toggleActivité(title)))
-				: () => { },
-			[dispatch, selected]
-		)
-
-		return React.createElement(
-			interactive ? 'button' : 'div',
-			{
-				className: classnames('ui__ card box', className, {
-					selected,
-					interactive
-				}),
-				key: title,
-				...(interactive && { tabIndex: -1 }),
-				onMouseDown: toggle
-			},
-			<div css="display: flex; flex-direction: column; height: 100%; width: 100%">
-				{selected !== undefined && (
-					<div css="font-size: 1.5rem;">
-						<Checkbox name={title} id={title} checked={selected} readOnly />
-					</div>
-				)}
-				<ActivitéContent {...getTranslatedActivité(title, language)} label={label} />
-				{answered && (
-					<Link
-						readOnly
-						onClick={e => e.stopPropagation()}
-						className="ui__ small simple button"
-						to={sitePaths.économieCollaborative.index + '/' + title}>
-						<T>Modifier</T>
-					</Link>
-				)}
-			</div>
-		)
-	}
-)
-
-const ActivitéContent = ({
-	titre,
-	explication,
-	plateformes,
-	icônes,
-	label
-}) => (
-		<>
-			<h4 className="title">
-				{titre}{' '}
-				<InfoBulle>
-					<div css="line-height: initial">{explication}</div>
-				</InfoBulle>
-			</h4>
-
-			<p css="flex: 1" className="ui__ notice">
-				{plateformes.join(', ')}
-			</p>
-			{label && <div className="ui__ label"> {label}</div>}
-			<div className="ui__ box-icon">{emoji(icônes)}</div>
-		</>
-	)
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.tsx b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.tsx
new file mode 100644
index 000000000..864fbc69c
--- /dev/null
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.tsx
@@ -0,0 +1,199 @@
+import classnames from 'classnames'
+import { T } from 'Components'
+import { ScrollToTop } from 'Components/utils/Scroll'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import { intersection } from 'ramda'
+import React, { useCallback, useContext } from 'react'
+import emoji from 'react-easy-emoji'
+import { Helmet } from 'react-helmet'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import Animate from 'Ui/animate'
+import Checkbox from 'Ui/Checkbox'
+import InfoBulle from 'Ui/InfoBulle'
+import { debounce } from '../../../../utils'
+import { toggleActivité } from './actions'
+import { activités, getTranslatedActivité } from './activitésData'
+import NextButton from './NextButton'
+import {
+	activitésEffectuéesSelector,
+	activitésRéponduesSelector
+} from './selectors'
+import { StoreContext } from './StoreContext'
+
+export default function ActivitésSelection() {
+	const { t } = useTranslation()
+	const titre = t(
+		'économieCollaborative.accueil.titre',
+		'Comment déclarer mes revenus des plateformes en ligne ?'
+	)
+	return (
+		<>
+			<Helmet>
+				<title>{titre}</title>
+			</Helmet>
+			<Animate.fromBottom>
+				<ScrollToTop />
+				<h1>{titre}</h1>
+				<section css="margin-bottom: 2rem">
+					<T k="économieCollaborative.accueil.contenu">
+						<p>
+							Vous avez des revenus issus des{' '}
+							<strong>plateformes en ligne</strong> (Airbnb, Abritel, Drivy,
+							Blablacar, Leboncoin, etc.) ? Vous devez les déclarer dans la
+							plupart des cas. Cependant, il peut être difficile de s'y
+							retrouver <span>{emoji('🤔')}</span>.
+						</p>
+						<p>
+							Suivez ce guide pour savoir en quelques clics comment être en
+							règle.
+						</p>
+						<p className="ui__ notice">
+							À partir de 2020, ces revenus seront communiqués automatiquement
+							par les plateformes à l’administration fiscale et à l’Urssaf.
+						</p>
+					</T>
+				</section>
+
+				<section className="ui__ full-width light-bg">
+					<h2 className="ui__ container" css="text-align: center">
+						<T k="économieCollaborative.accueil.question">
+							Quels types d'activités avez-vous exercé ?
+						</T>
+					</h2>
+					<ActivitéSelection activités={activités.map(({ titre }) => titre)} />
+					<p className="ui__ container notice" css="text-align: center">
+						<T k="économieCollaborative.accueil.réassurance">
+							PS : cet outil est là uniquement pour vous informer, aucune donnée
+							ne sera transmise aux administrations
+						</T>{' '}
+						{emoji('😌')}
+					</p>
+				</section>
+			</Animate.fromBottom>
+		</>
+	)
+}
+
+type ActivitéSelectionProps = {
+	activités: Array<string>
+	currentActivité?: any
+}
+
+export const ActivitéSelection = ({
+	activités,
+	currentActivité
+}: ActivitéSelectionProps) => {
+	const { state } = useContext(StoreContext)
+	const activitéRépondue = activitésRéponduesSelector(state)
+	const nextButtonDisabled = !intersection(
+		activitésEffectuéesSelector(state),
+		activités
+	).length
+
+	return (
+		<>
+			<div css="display: flex; flex-wrap: wrap; justify-content: center">
+				{activités.map(title => {
+					const selected = state[title].effectuée
+					const answered = activitéRépondue.includes(title)
+					return (
+						<ActivitéCard
+							key={title}
+							title={title}
+							interactive
+							selected={selected}
+							answered={answered}
+						/>
+					)
+				})}
+			</div>
+			<NextButton disabled={nextButtonDisabled} activité={currentActivité} />
+		</>
+	)
+}
+
+type ActivitéCardProps = {
+	title: string
+	selected?: boolean
+	interactive?: boolean
+	answered: boolean
+	label?: React.ReactNode
+	className?: string
+}
+
+export const ActivitéCard = ({
+	title,
+	selected,
+	interactive,
+	answered,
+	label,
+	className
+}: ActivitéCardProps) => {
+	const sitePaths = useContext(SitePathsContext)
+	const { dispatch } = useContext(StoreContext)
+	const { language } = useTranslation().i18n
+	const toggle = useCallback(
+		selected !== undefined
+			? // debounce to avoid double onClick call when clicking on checkbox
+			  debounce(1, () => dispatch(toggleActivité(title)))
+			: () => {},
+		[dispatch, selected]
+	)
+
+	return React.createElement(
+		interactive ? 'button' : 'div',
+		{
+			className: classnames('ui__ card box', className, {
+				selected,
+				interactive
+			}),
+			key: title,
+			...(interactive && { tabIndex: -1 }),
+			onMouseDown: toggle
+		},
+		<div css="display: flex; flex-direction: column; height: 100%; width: 100%">
+			{selected !== undefined && (
+				<div css="font-size: 1.5rem;">
+					<Checkbox name={title} id={title} checked={selected} readOnly />
+				</div>
+			)}
+			<ActivitéContent
+				{...getTranslatedActivité(title, language)}
+				label={label}
+			/>
+			{answered && (
+				<Link
+					onClick={e => e.stopPropagation()}
+					className="ui__ small simple button"
+					to={sitePaths.économieCollaborative.index + '/' + title}
+				>
+					<T>Modifier</T>
+				</Link>
+			)}
+		</div>
+	)
+}
+
+const ActivitéContent = ({
+	titre,
+	explication,
+	plateformes,
+	icônes,
+	label
+}) => (
+	<>
+		<h4 className="title">
+			{titre}{' '}
+			<InfoBulle>
+				<div css="line-height: initial">{explication}</div>
+			</InfoBulle>
+		</h4>
+
+		<p css="flex: 1" className="ui__ notice">
+			{plateformes.join(', ')}
+		</p>
+		{label && <div className="ui__ label"> {label}</div>}
+		<div className="ui__ box-icon">{emoji(icônes)}</div>
+	</>
+)
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.tsx
similarity index 56%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.tsx
index 432268bdc..c125ebeb0 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.tsx
@@ -1,8 +1,8 @@
-import { T } from 'Components';
-import React, { useContext } from 'react';
-import { CheckItem, Checklist } from 'Ui/Checklist';
-import { changeCritèreExonération } from './actions';
-import { StoreContext } from './StoreContext';
+import { T } from 'Components'
+import React, { useContext } from 'react'
+import { CheckItem, Checklist } from 'Ui/Checklist'
+import { changeCritèreExonération } from './actions'
+import { StoreContext } from './StoreContext'
 
 export default function ExceptionsExonération({
 	exceptionsExonération,
@@ -16,12 +16,17 @@ export default function ExceptionsExonération({
 
 	return (
 		<>
-			<h2><T k="économieCollaborative.exonération.question">Êtes-vous dans un des cas suivants ?</T></h2>
+			<h2>
+				<T k="économieCollaborative.exonération.question">
+					Êtes-vous dans un des cas suivants ?
+				</T>
+			</h2>
 			<Checklist
 				onItemCheck={(index, checked) =>
 					dispatch(changeCritèreExonération(activité, index, !checked))
 				}
-				defaultChecked={defaultChecked}>
+				defaultChecked={defaultChecked}
+			>
 				{exceptionsExonération.map(({ titre, explication }, index) => (
 					<CheckItem
 						key={index}
@@ -32,8 +37,9 @@ export default function ExceptionsExonération({
 				))}
 			</Checklist>
 			<p className="ui__ notice">
-				<T k="économieCollaborative.exonération.notice">Si aucun de ces cas ne s'appliquent à vous, vous n'aurez rien à
-				déclarer.
+				<T k="économieCollaborative.exonération.notice">
+					Si aucun de ces cas ne s'appliquent à vous, vous n'aurez rien à
+					déclarer.
 				</T>
 			</p>
 		</>
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.tsx
similarity index 69%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.tsx
index d453e681a..f4a426f4f 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.tsx
@@ -1,17 +1,14 @@
 import classnames from 'classnames'
 import { T } from 'Components'
-import withSitePaths from 'Components/utils/withSitePaths'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
 import { activitéVue } from './actions'
 import { nextActivitéSelector } from './selectors'
 import { StoreContext } from './StoreContext'
 
-export default withSitePaths(function NextButton({
-	activité,
-	disabled,
-	sitePaths
-}) {
+export default function NextButton({ activité, disabled }) {
+	const sitePaths = useContext(SitePathsContext)
 	const { state, dispatch } = useContext(StoreContext)
 	const nextActivité = nextActivitéSelector(state, activité)
 	return (
@@ -31,9 +28,16 @@ export default withSitePaths(function NextButton({
 					nextActivité
 						? sitePaths.économieCollaborative.index + '/' + nextActivité
 						: sitePaths.économieCollaborative.votreSituation
-				}>
-				{nextActivité || disabled ? <T>Continuer</T> : <T k="économieCollaborative.activité.voirObligations">Voir mes obligations</T>}
+				}
+			>
+				{nextActivité || disabled ? (
+					<T>Continuer</T>
+				) : (
+					<T k="économieCollaborative.activité.voirObligations">
+						Voir mes obligations
+					</T>
+				)}
 			</Link>
 		</p>
 	)
-})
+}
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.tsx
similarity index 64%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.tsx
index bacbe7ccb..135779dc7 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.tsx
@@ -1,23 +1,32 @@
-import { T } from 'Components';
-import { ScrollToTop } from 'Components/utils/Scroll';
-import withSitePaths from 'Components/utils/withSitePaths';
-import React, { useContext } from 'react';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
-import { Link, Redirect } from 'react-router-dom';
-import Animate from 'Ui/animate';
-import { ActivitéCard } from './ActivitésSelection';
-import illustration from './images/multitasking.svg';
-import { activitésEffectuéesSelector, déclarationsSelector, nextActivitéSelector, régimeGénéralDisponibleSelector } from './selectors';
-import { StoreContext } from './StoreContext';
+import { T } from 'Components'
+import { ScrollToTop } from 'Components/utils/Scroll'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
+import React, { useContext } from 'react'
+import { Helmet } from 'react-helmet'
+import { useTranslation } from 'react-i18next'
+import { Link, Redirect } from 'react-router-dom'
+import Animate from 'Ui/animate'
+import { ActivitéCard } from './ActivitésSelection'
+import illustration from './images/multitasking.svg'
+import {
+	activitésEffectuéesSelector,
+	déclarationsSelector,
+	nextActivitéSelector,
+	régimeGénéralDisponibleSelector
+} from './selectors'
+import { StoreContext } from './StoreContext'
 
-export default withSitePaths(function VotreSituation({ sitePaths }) {
+export default function VotreSituation() {
+	const sitePaths = useContext(SitePathsContext)
 	const { state } = useContext(StoreContext)
-	const { t } = useTranslation();
+	const { t } = useTranslation()
 	if (!activitésEffectuéesSelector(state).length) {
 		return <Redirect to={sitePaths.économieCollaborative.index} />
 	}
-	const titre = t('économieCollaborative.obligations.titre', 'Que dois-je faire pour être en règle ?')
+	const titre = t(
+		'économieCollaborative.obligations.titre',
+		'Que dois-je faire pour être en règle ?'
+	)
 
 	const nextActivité = nextActivitéSelector(state)
 	if (nextActivité) {
@@ -29,9 +38,9 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 	}
 
 	const déclarations = déclarationsSelector(state)
-	const régimeGénéralDisponible = activitésEffectuéesSelector(state).some(
-		activité => régimeGénéralDisponibleSelector(state, activité)
-	)
+	const régimeGénéralDisponible = activitésEffectuéesSelector(
+		state
+	).some(activité => régimeGénéralDisponibleSelector(state, activité))
 
 	return (
 		<Animate.fromBottom>
@@ -47,34 +56,35 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 				{déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE.length > 0 && (
 					<>
 						<T k="économieCollaborative.obligations.pro">
-
 							<h2>Déclarer en tant qu'activité professionnelle</h2>
 							<p>
-								Vos revenus sont considérés comme revenus professionnels, ils sont
-								soumis aux cotisations sociales. En contrepartie, ils ouvrent vos
-								droit à des prestations sociales (retraite, assurance maladie,
-								maternité, etc.).
+								Vos revenus sont considérés comme revenus professionnels, ils
+								sont soumis aux cotisations sociales. En contrepartie, ils
+								ouvrent vos droit à des prestations sociales (retraite,
+								assurance maladie, maternité, etc.).
 							</p>
 						</T>
 						<ActivitéList activités={déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE} />
 						<T k="économieCollaborative.obligations.entreprise">
 							<h3>Avec une entreprise</h3>
 							<p>
-								Si vous possédez déjà une activité déclarée, vous pouvez ajouter ces revenus à ceux de l'entreprise. Il vous faudra seulement vérifier que son objet social est compatible avec les activités concernées (et le changer si besoin).
-								Sinon, vous aurez à créer une nouvelle entreprise.
+								Si vous possédez déjà une activité déclarée, vous pouvez ajouter
+								ces revenus à ceux de l'entreprise. Il vous faudra seulement
+								vérifier que son objet social est compatible avec les activités
+								concernées (et le changer si besoin). Sinon, vous aurez à créer
+								une nouvelle entreprise.
 							</p>
 							<Link
 								to={sitePaths.créer.index}
 								css="flex: 1"
-								className="ui__   simple small button">
+								className="ui__   simple small button"
+							>
 								Créer une entreprise
 							</Link>
 						</T>
 
 						{régimeGénéralDisponible && (
-
 							<T k="économieCollaborative.obligations.régimeGénéral">
-
 								<h3>Avec l'option régime général</h3>
 								<p>
 									Pour certaines activités, vous pouvez déclarer vos revenus
@@ -82,13 +92,14 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 									intéressante si vous ne souhaitez pas créer d'entreprise ou
 									modifier une entreprise existante. Vous devrez dans tous les
 									cas déclarer ces revenus aux impôts.
-									</p>
+								</p>
 								<a
 									href="https://www.urssaf.fr/portail/home/espaces-dedies/activites-relevant-de-leconomie/vous-optez-pour-le-regime-genera/comment-simmatriculer.html"
 									css="flex: 1"
-									className="ui__ small simple button">
+									className="ui__ small simple button"
+								>
 									Déclarer au régime général
-									</a>
+								</a>
 							</T>
 						)}
 					</>
@@ -96,17 +107,16 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 				{déclarations.IMPOSITION.length > 0 && (
 					<>
 						<T k="économieCollaborative.obligations.impôts">
-
 							<h2>Déclarer vos revenus aux impôts</h2>
 							<p>
 								Pour ces activités, vous avez uniquement besoin de déclarer vos
-								revenus sur votre feuille d'imposition. Pour en savoir plus, vous
-							pouvez consulter la{' '}
+								revenus sur votre feuille d'imposition. Pour en savoir plus,
+								vous pouvez consulter la{' '}
 								<a href="https://www.impots.gouv.fr/portail/particulier/questions/comment-declarer-mes-revenus-dactivites-annexes-telles-que-le-co-voiturage-la">
 									page dédiée sur impots.gouv.fr
-							</a>
+								</a>
 								.
-						</p>
+							</p>
 						</T>
 						<ActivitéList activités={déclarations.IMPOSITION} />
 					</>
@@ -117,8 +127,9 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 						<T k="économieCollaborative.obligations.aucune">
 							<h2>Rien à faire</h2>
 							<p>
-								Vous n'avez pas besoin de déclarer vos revenus pour ces activités.
-						</p>
+								Vous n'avez pas besoin de déclarer vos revenus pour ces
+								activités.
+							</p>
 						</T>
 						<ActivitéList activités={déclarations.AUCUN} />
 					</>
@@ -126,7 +137,7 @@ export default withSitePaths(function VotreSituation({ sitePaths }) {
 			</section>
 		</Animate.fromBottom>
 	)
-})
+}
 
 const ActivitéList = ({ activités }) => {
 	const { state } = useContext(StoreContext)
@@ -139,12 +150,14 @@ const ActivitéList = ({ activités }) => {
 					className="lighter-bg"
 					answered
 					label={
-						régimeGénéralDisponibleSelector(state, title)
-							? <T k="économieCollaborative.obligations.régimeGénéralDisponible">Régime général disponible</T>
-							: null
+						régimeGénéralDisponibleSelector(state, title) ? (
+							<T k="économieCollaborative.obligations.régimeGénéralDisponible">
+								Régime général disponible
+							</T>
+						) : null
 					}
 				/>
 			))}
 		</div>
 	)
-} 
+}
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.js
deleted file mode 100644
index 207bf7243..000000000
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const selectSeuilRevenus = (activité, seuilAtteint) => ({
-	type: 'SELECT_SEUIL_REVENUS_ATTEINT',
-	activité,
-	seuilAtteint
-})
-
-export const toggleActivité = activité => ({
-	type: 'TOGGLE_ACTIVITÉ_EFFECTUÉE',
-	activité
-})
-
-export const activitéVue = activité => ({
-	type: 'ACTIVITÉ_VUE',
-	activité
-})
-
-export const changeCritèreExonération = (activité, index, estRespecté) => ({
-	type: 'CHANGE_CRITÈRE_EXONÉRATION',
-	activité,
-	index,
-	estRespecté
-})
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.ts b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.ts
new file mode 100644
index 000000000..89111029a
--- /dev/null
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/actions.ts
@@ -0,0 +1,32 @@
+export type Action =
+	| ReturnType<typeof selectSeuilRevenus>
+	| ReturnType<typeof toggleActivité>
+	| ReturnType<typeof activitéVue>
+	| ReturnType<typeof changeCritèreExonération>
+
+export const selectSeuilRevenus = (activité, seuilAtteint: number) =>
+	({
+		type: 'SELECT_SEUIL_REVENUS_ATTEINT',
+		activité,
+		seuilAtteint
+	} as const)
+
+export const toggleActivité = activité =>
+	({
+		type: 'TOGGLE_ACTIVITÉ_EFFECTUÉE',
+		activité
+	} as const)
+
+export const activitéVue = activité =>
+	({
+		type: 'ACTIVITÉ_VUE',
+		activité
+	} as const)
+
+export const changeCritèreExonération = (activité, index, estRespecté) =>
+	({
+		type: 'CHANGE_CRITÈRE_EXONÉRATION',
+		activité,
+		index,
+		estRespecté
+	} as const)
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.ts
similarity index 95%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.ts
index 2adc2c79b..586042852 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/activitésData.ts
@@ -4,7 +4,7 @@ import activités from './activités.yaml'
 
 export { activités }
 export const flatActivités = pipe(
-	map(a => (a.activités ? [a, ...a.activités] : [a])),
+	map((a: any) => (a.activités ? [a, ...a.activités] : [a])),
 	unnest
 )(activités)
 
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/index.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/index.tsx
similarity index 100%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/index.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/index.tsx
diff --git a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.js b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.ts
similarity index 71%
rename from source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.js
rename to source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.ts
index adb26eb42..fc3f0857a 100644
--- a/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.js
+++ b/source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/reducer.ts
@@ -1,5 +1,6 @@
 import reduceReducers from 'reduce-reducers'
 import { combineReducers } from 'redux'
+import { Action } from './actions'
 import {
 	flatActivités,
 	getActivité,
@@ -9,11 +10,11 @@ import {
 
 const activitéReducer = reducerActivité =>
 	combineReducers({
-		effectuée: (state = false, { type, activité }) =>
+		effectuée: (state: boolean = false, { type, activité }: Action): boolean =>
 			type === 'TOGGLE_ACTIVITÉ_EFFECTUÉE' && reducerActivité === activité
 				? !state
 				: state,
-		vue: (state = false, { type, activité }) => {
+		vue: (state: boolean = false, { type, activité }: Action): boolean => {
 			if (type === 'ACTIVITÉ_VUE' && reducerActivité === activité) {
 				return true
 			}
@@ -27,22 +28,23 @@ const activitéReducer = reducerActivité =>
 		},
 		seuilRevenus: (
 			state = getMinimumDéclaration(reducerActivité),
-			{ type, activité, seuilAtteint }
+			action: Action
 		) =>
-			type === 'SELECT_SEUIL_REVENUS_ATTEINT' && reducerActivité === activité
-				? seuilAtteint
+			action.type === 'SELECT_SEUIL_REVENUS_ATTEINT' &&
+			reducerActivité === action.activité
+				? action.seuilAtteint
 				: state,
 		critèresExonération: (
-			state = new Array(
+			state: Array<boolean> = new Array(
 				(getActivité(reducerActivité)['exonérée sauf si'] || []).length
 			).fill(true),
-			{ activité, type, index, estRespecté }
+			action: Action
 		) => {
 			if (
-				type === 'CHANGE_CRITÈRE_EXONÉRATION' &&
-				reducerActivité === activité
+				action.type === 'CHANGE_CRITÈRE_EXONÉRATION' &&
+				reducerActivité === action.activité
 			) {
-				state[index] = estRespecté
+				state[action.index] = action.estRespecté
 				return [...state]
 			}
 			return state
@@ -50,7 +52,7 @@ const activitéReducer = reducerActivité =>
 	})
 
 let reducer = reduceReducers(
-	(state, { type, activité }) => {
+	(state, { type, activité }: Action) => {
 		if (type === 'TOGGLE_ACTIVITÉ_EFFECTUÉE' && state[activité].effectuée) {
 			return getSousActivités(activité).reduce(
 				(newState, sousActivité) => ({
diff --git a/source/sites/mon-entreprise.fr/sitePaths.ts b/source/sites/mon-entreprise.fr/sitePaths.ts
index 6d13642b5..a4858206b 100644
--- a/source/sites/mon-entreprise.fr/sitePaths.ts
+++ b/source/sites/mon-entreprise.fr/sitePaths.ts
@@ -124,7 +124,7 @@ export const constructLocalizedSitePath = (language: string) => {
 
 export type SitePathsType = ReturnType<typeof constructLocalizedSitePath>
 
-const deepReduce = (fn, initialValue, object) =>
+const deepReduce = (fn, initialValue?: any, object?: any) =>
 	reduce(
 		(acc, [key, value]) =>
 			typeof value === 'object'
@@ -134,18 +134,28 @@ const deepReduce = (fn, initialValue, object) =>
 		toPairs(object)
 	)
 
-export const generateSiteMap = (sitePaths: Object) =>
-	deepReduce((paths, path) => [...paths, ...[path]], [], sitePaths)
-
 type SiteMap = Array<string>
-const enSiteMap: SiteMap = generateSiteMap(
-	constructLocalizedSitePath('en')
-).map(path => (process.env.EN_SITE || '').replace('${path}', path))
-const frSiteMap: SiteMap = generateSiteMap(
-	constructLocalizedSitePath('fr')
-).map(path => (process.env.FR_SITE || '').replace('${path}', path))
+export const generateSiteMap = (sitePaths: SitePathsType): SiteMap =>
+	deepReduce(
+		(paths: Array<string>, path: string) => [...paths, ...[path]],
+		[],
+		sitePaths
+	)
+
+const enSiteMap = generateSiteMap(constructLocalizedSitePath('en')).map(path =>
+	(process.env.EN_SITE || '').replace('${path}', path)
+)
+const frSiteMap = generateSiteMap(constructLocalizedSitePath('fr')).map(path =>
+	(process.env.FR_SITE || '').replace('${path}', path)
+)
 
 export const hrefLangLink = {
-	en: zipObj(enSiteMap, frSiteMap.map(href => [{ href, hrefLang: 'fr' }])),
-	fr: zipObj(frSiteMap, enSiteMap.map(href => [{ href, hrefLang: 'en' }]))
+	en: zipObj(
+		enSiteMap,
+		frSiteMap.map(href => [{ href, hrefLang: 'fr' }])
+	),
+	fr: zipObj(
+		frSiteMap,
+		enSiteMap.map(href => [{ href, hrefLang: 'en' }])
+	)
 }
diff --git a/source/types/ActionsTypes.js b/source/types/ActionsTypes.js
deleted file mode 100644
index afd24018d..000000000
--- a/source/types/ActionsTypes.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { SitePaths } from 'Components/utils/withSitePaths'
-import type { RouterHistory } from 'react-router'
-
-
-export type LoadPreviousSimulationAction = {
-	type: 'LOAD_PREVIOUS_SIMULATION'
-}
-
-export type ResetSimulationAction = {
-	type: 'RESET_SIMULATION'
-}
-export type SetSimulationConfigAction = {
-	type: 'SET_SIMULATION',
-	config: Object
-}
-export type DeletePreviousSimulationAction = {
-	type: 'DELETE_PREVIOUS_SIMULATION'
-}
-export type SetSituationBranchAction = {
-	type: 'SET_SITUATION_BRANCH',
-	id: number
-}
-export type StepAction = {
-	type: 'STEP_ACTION',
-	name: 'fold' | 'unfold',
-	step: string
-}
-
-export type Action =
-	| SetSituationBranchAction
-	| LoadPreviousSimulationAction
-	| ResetSimulationAction
-	| DeletePreviousSimulationAction
-	| StepAction
-
-export type Thunk<Action: Object> = (
-	dispatch: (Action) => void,
-	getState: () => any,
-	{ history: RouterHistory, sitePaths: SitePaths }
-) => void
diff --git a/source/types/Analysis.js b/source/types/Analysis.js
deleted file mode 100644
index cb7800c27..000000000
--- a/source/types/Analysis.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export type Analysis = {
-	cache: { [string]: Object },
-	targets: Array<Object>
-}
diff --git a/source/types/CDD.js b/source/types/CDD.js
deleted file mode 100644
index 7ef5d9d34..000000000
--- a/source/types/CDD.js
+++ /dev/null
@@ -1,26 +0,0 @@
-
-export type Événements =
-	| 'poursuite du CDD en CDI'
-	| 'refus CDI avantageux'
-	| 'rupture anticipée salarié'
-	| 'rupture pour faute grave ou force majeure'
-	| 'rupture pendant période essai'
-	| 'non'
-
-export type Motifs =
-	| 'contrat aidé'
-	| 'complément formation'
-	| "issue d'apprentissage "
-	| MotifsClassiques
-
-export type MotifsClassiques =
-	| 'remplacement'
-	| 'accroissement activité'
-	| 'saisonnier'
-	| 'usage'
-	| 'mission'
-
-export type CDD = {
-	événements: Événements,
-	motif: Motifs
-}
diff --git a/source/types/ContratSalarié.js b/source/types/ContratSalarié.js
deleted file mode 100644
index b0a37a8aa..000000000
--- a/source/types/ContratSalarié.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { OuiNon } from './shared'
-import type { CDD } from './CDD'
-
-export type ContratSalarié = {
-	'salaire total'?: string,
-	'CDD'?: OuiNon,
-	'temps partiel'?: OuiNon,
-	'heure par semaine'?: string,
-	'statut cadre'?: OuiNon,
-	'statut JEI'?: OuiNon,
-	'complémentaire santé'?: {
-		forfait?: string
-	},
-	ATMP: {
-		'taux collectif ATMP': string
-	},
-	CDD: CDD
-}
diff --git a/source/types/Entreprise.js b/source/types/Entreprise.js
deleted file mode 100644
index 1ecd7b6e4..000000000
--- a/source/types/Entreprise.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { OuiNon } from './shared'
-export type Entreprise = {
-	effectif: string,
-	'association non lucrative': OuiNon
-}
diff --git a/source/types/RegleTypes.ts b/source/types/RegleTypes.ts
deleted file mode 100644
index a224378a8..000000000
--- a/source/types/RegleTypes.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Règle {
-	dottedName: string
-	title: string
-}
diff --git a/source/types/Situation.ts b/source/types/Situation.ts
deleted file mode 100644
index de55b8bd4..000000000
--- a/source/types/Situation.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ContratSalarié } from './ContratSalarié'
-import { Entreprise } from './Entreprise'
-
-export type Situation = {
-	'contrat salarié'?: ContratSalarié
-	établissement: {
-		'code commune': string
-	}
-	entreprise?: Entreprise
-}
diff --git a/source/types/State.ts b/source/types/State.ts
deleted file mode 100644
index 619b356cd..000000000
--- a/source/types/State.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Situation } from './Situation.js'
-
-export type TargetInput =
-	| 'contrat salarié . salaire de base'
-	| 'contrat salarié . salaire total'
-	| 'contrat salarié . salaire de net'
-
-export type SavedSimulation = {
-	situation: Situation
-	activeTargetInput: TargetInput
-	foldedSteps: Array<string>
-}
-
-export type FlatRules = {
-	[name: string]: {
-		titre: string
-	}
-}
-export type State = {
-	previousSimulation?: SavedSimulation
-	conversationSteps: {
-		foldedSteps: Array<string>
-		currentQuestion?: string
-	}
-	activeTargetInput: TargetInput
-}
diff --git a/source/types/app-env.d.ts b/source/types/app-env.d.ts
new file mode 100644
index 000000000..9208b9579
--- /dev/null
+++ b/source/types/app-env.d.ts
@@ -0,0 +1,8 @@
+declare module NodeJS {
+	interface ProcessEnv {
+		EN_SITE: string
+		FR_SITE: string
+		NODE_ENV: 'development' | 'production'
+		MASTER: boolean
+	}
+}
diff --git a/source/types/companyCreationChecklistTypes.js b/source/types/companyCreationChecklistTypes.js
deleted file mode 100644
index fc54839fb..000000000
--- a/source/types/companyCreationChecklistTypes.js
+++ /dev/null
@@ -1,16 +0,0 @@
-
-export type InitializeCompanyCreationChecklistAction = {
-	type: 'INITIALIZE_COMPANY_CREATION_CHECKLIST',
-	checklistItems: Array<string>,
-	statusName: string
-}
-
-export type CheckCompanyCreationItemAction = {
-	type: 'CHECK_COMPANY_CREATION_ITEM',
-	name: string,
-	checked: boolean
-}
-
-export type Action =
-	| InitializeCompanyCreationChecklistAction
-	| CheckCompanyCreationItemAction
diff --git a/source/types/typescript/css-prop.d.ts b/source/types/css-prop.d.ts
similarity index 100%
rename from source/types/typescript/css-prop.d.ts
rename to source/types/css-prop.d.ts
diff --git a/source/types/hiringChecklistTypes.js b/source/types/hiringChecklistTypes.js
deleted file mode 100644
index 1179ff78f..000000000
--- a/source/types/hiringChecklistTypes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-
-export type InitializeHiringChecklistAction = {
-	type: 'INITIALIZE_HIRING_CHECKLIST',
-	checklistItems: Array<string>
-}
-
-export type CheckHiringItemAction = {
-	type: 'CHECK_HIRING_ITEM',
-	name: string,
-	checked: boolean
-}
-
-export type Action = InitializeHiringChecklistAction | CheckHiringItemAction
diff --git a/source/types/typescript/import-images.d.ts b/source/types/import-images.d.ts
similarity index 100%
rename from source/types/typescript/import-images.d.ts
rename to source/types/import-images.d.ts
diff --git a/source/types/typescript/import-yaml.ts b/source/types/import-yaml.ts
similarity index 100%
rename from source/types/typescript/import-yaml.ts
rename to source/types/import-yaml.ts
diff --git a/source/types/typescript/react-easy-emoji.d.ts b/source/types/react-easy-emoji.d.ts
similarity index 100%
rename from source/types/typescript/react-easy-emoji.d.ts
rename to source/types/react-easy-emoji.d.ts
diff --git a/source/types/rule.ts b/source/types/rule.ts
new file mode 100644
index 000000000..5dffa6695
--- /dev/null
+++ b/source/types/rule.ts
@@ -0,0 +1,16 @@
+// TODO : it is possible to have a better typing of the DottedName (ie having
+// the exact list of rule names). It works by default with a JSON import (using
+// keyof JsonRules) but not with Yaml. There are some discussions on the
+// TypeScript bug tracker to add support for loader plugins that would allow
+// yaml typings. Another solution is to persist a json on the file system, but
+// we have to keep it in sync with the yaml.
+export type DottedName = string
+
+export type Rule = {
+	dottedName: DottedName
+	nodeValue?: number
+	question?: string
+	unit: string
+	name?: string
+	title?: string
+}
diff --git a/source/types/shared.js b/source/types/shared.js
deleted file mode 100644
index ca498f296..000000000
--- a/source/types/shared.js
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export type OuiNon = 'oui' | 'non'
diff --git a/source/utils.ts b/source/utils.ts
index 8c878f381..33fec2834 100644
--- a/source/utils.ts
+++ b/source/utils.ts
@@ -1,18 +1,18 @@
-export let capitalise0 = (name: string) =>
+export let capitalise0 = (name: string): string =>
 	name && name[0].toUpperCase() + name.slice(1)
 
 export function debounce<ArgType>(
 	timeout: number,
 	fn: (arg: ArgType) => void
 ): (arg: ArgType) => void {
-	let timeoutId
+	let timeoutId: ReturnType<typeof setTimeout>
 	return (...args) => {
 		clearTimeout(timeoutId)
 		timeoutId = setTimeout(() => fn(...args), timeout)
 	}
 }
 
-export function isIE() {
+export function isIE(): boolean {
 	return (
 		navigator.appName == 'Microsoft Internet Explorer' ||
 		(navigator.appName == 'Netscape' &&
@@ -22,7 +22,7 @@ export function isIE() {
 	)
 }
 
-export function inIframe() {
+export function inIframe(): boolean {
 	try {
 		return window.self !== window.top
 	} catch (e) {
diff --git a/tsconfig.json b/tsconfig.json
index a30a2d415..74ee03918 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,11 +5,8 @@
 		"target": "es2019",
 		"jsx": "react",
 		"baseUrl": "source",
-		// We add the `node` types in order to support `process.env` but this is not
-		// really what we want since our app is client-side and we only have access
-		// to process.env and not to other NodeJS variables.
-		"types": ["node"],
-		"typeRoots": ["source/types/typescript"],
+		"types": ["webpack-env"],
+		"typeRoots": ["source/types"],
 		"allowSyntheticDefaultImports": true,
 		"forceConsistentCasingInFileNames": true,
 		"paths": {
@@ -25,9 +22,5 @@
 			"Types/*": ["types/*"]
 		}
 	},
-	"include": ["source/types/typescript"],
-	"files": [
-		"source/sites/mon-entreprise.fr/entry.fr.tsx",
-		"source/sites/mon-entreprise.fr/entry.en.tsx"
-	]
+	"include": ["source"]
 }
diff --git a/yarn.lock b/yarn.lock
index b705e951b..fc3d66672 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1279,6 +1279,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/classnames@^2.2.9":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
+  integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
+
 "@types/history@*":
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
@@ -1322,11 +1327,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.12.tgz#cc791b402360db1eaf7176479072f91ee6c6c7ca"
   integrity sha512-Uy0PN4R5vgBUXFoJrKryf5aTk3kJ8Rv3PdlHjl6UaX+Cqp1QE0yPQ68MPXGrZOfG7gZVNDIJZYyot0B9ubXUrQ==
 
-"@types/node@^12.11.7":
-  version "12.11.7"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.11.7.tgz#57682a9771a3f7b09c2497f28129a0462966524a"
-  integrity sha512-JNbGaHFCLwgHn/iCckiGSOZ1XYHsKFwREtzPwSGCVld1SGhOlmZw2D4ZI94HQCrBHbADzW9m4LER/8olJTRGHA==
-
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -1339,6 +1339,14 @@
   dependencies:
     ts-toolbelt "^4.7.7"
 
+"@types/raven-for-redux@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/raven-for-redux/-/raven-for-redux-1.1.1.tgz#205799891d6d13550741ef44b13cd0c43c6e86d3"
+  integrity sha512-ixEimiif0DRrLweycnU/sLmpOyjunIsmSEUkkaaBlqW3pH8RaAvwSfqIjHeTrfMCsy6s5gB9+B5WdB8HOu9fmA==
+  dependencies:
+    raven-js ">=3.21.0"
+    redux ">=3.7.2"
+
 "@types/react-addons-css-transition-group@^15.0.5":
   version "15.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-addons-css-transition-group/-/react-addons-css-transition-group-15.0.5.tgz#73665af6b8efb47730ab583ead4bed5373dae686"
@@ -1354,6 +1362,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-color@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
+  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.3":
   version "16.9.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.3.tgz#4006ff0e13958af91313869077c04cb20d9b9d04"
@@ -1425,6 +1440,11 @@
     "@types/react-native" "*"
     csstype "^2.2.0"
 
+"@types/webpack-env@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
+  integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
+
 "@types/yargs-parser@*":
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
@@ -6766,11 +6786,6 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.2.1:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
-  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -6856,7 +6871,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.15, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.17.15, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -8464,10 +8479,10 @@ prerender-spa-plugin@^3.4.0:
     "@prerenderer/renderer-puppeteer" "^0.2.0"
     html-minifier "^3.5.16"
 
-prettier@^1.16.4:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
-  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
+prettier@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -8776,7 +8791,7 @@ raven-for-redux@^1.3.1:
   resolved "https://registry.yarnpkg.com/raven-for-redux/-/raven-for-redux-1.4.0.tgz#37cf4fc7bdde227ce5cc8fa29942f21ea517b7fb"
   integrity sha512-BYe+nvctbC+6YgaP6hxMJci96bE3782ldGsXmLbw6uhOBDVV80t4Q2kPG613dbe2ldyXdrbpxLf9O/vKqusgww==
 
-raven-js@^3.26.4:
+raven-js@>=3.21.0, raven-js@^3.26.4:
   version "3.27.2"
   resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.2.tgz#6c33df952026cd73820aa999122b7b7737a66775"
   integrity sha512-mFWQcXnhRFEQe5HeFroPaEghlnqy7F5E2J3Fsab189ondqUzcjwSVi7el7F36cr6PvQYXoZ1P2F5CSF2/azeMQ==
@@ -8935,10 +8950,10 @@ react-markdown@^4.1.0:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-number-format@^4.0.8:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.2.0.tgz#297efac961504b72cdd3fd0c33442302191c52d8"
-  integrity sha512-LJY0+JUEdQG1Taj6qbL1Cd/8CfBn3X4ohBPGewWNRyRAGyxV/+zP02CQrMkCfPh1iXXx6V3oguJcZWXUwpQ3ow==
+react-number-format@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.3.1.tgz#eccfc851d88d74c894ba463620ccb467defbdefb"
+  integrity sha512-ze6Lp7SGM71Jr0uZhUaN6grthv08NKTfJezS26zAWZq63ubmJ++FOX7ueGSK27EvpT7/e3ce9L3jlqr1YMFS7Q==
   dependencies:
     prop-types "^15.7.2"
 
@@ -9170,27 +9185,17 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
-reduce-reducers@^0.1.2:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.5.tgz#ff77ca8068ff41007319b8b4b91533c7e0e54576"
-  integrity sha512-uoVmQnZQ+BtKKDKpBdbBri5SLNyIK9ULZGOA504++VbHcwouWE+fJDIo8AuESPF9/EYSkI0v05LDEQK6stCbTA==
+reduce-reducers@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-1.0.4.tgz#fb77e751a9eb0201760ac5a605ca8c9c2d0537f8"
+  integrity sha512-Mb2WZ2bJF597exiqX7owBzrqJ74DHLK3yOQjCyPAaNifRncE8OD0wFIuoMhXxTnHK07+8zZ2SJEKy/qtiyR7vw==
 
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
-  dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
-
-redux@^4.0.0:
+redux@>=3.7.2, redux@^4.0.0, redux@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
   integrity sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==
@@ -10346,7 +10351,7 @@ symbol-observable@1.0.1:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
-symbol-observable@^1.0.3, symbol-observable@^1.2.0:
+symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -10675,10 +10680,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.7.1-rc:
-  version "3.7.1-rc"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.1-rc.tgz#2054b872d67f8dc732e36c1df397f9327f37ada0"
-  integrity sha512-2rMtWppLsaPvmpXsoIAXWDBQVnJMw1ITGGSnidMuayLj9iCmMRT69ncKZw/Mk5rXfJkilApKucWQZxproALoRw==
+typescript@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
+  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
 
 uglify-js@3.4.x:
   version "3.4.10"