📏 Active le mode strict de TypeScript sur la partie mon-entreprise

.yarnclean

@@ -0,0 +1 @@
+@types/react-native

mon-entreprise/package.json

@@ -26,14 +26,15 @@
 		"@babel/preset-typescript": "^7.9.0",
 		"@types/cheerio": "^0.22.18",
 		"@types/js-yaml": "^3.12.2",
-		"@types/react": "^16.9.11",
+		"@types/react": "^17.0.0",
 		"@types/react-color": "^3.0.1",
-		"@types/react-dom": "^16.9.3",
+		"@types/react-dom": "^17.0.0",
 		"@types/react-helmet": "^5.0.13",
-		"@types/react-redux": "^7.1.5",
+		"@types/react-redux": "^7.1.11",
 		"@types/react-router": "^5.1.2",
-		"@types/recharts": "^1.8.9",
-		"@types/styled-components": "^5.1.0",
+		"@types/recharts": "^1.8.16",
+		"@types/redux-sentry-middleware": "^0.1.2",
+		"@types/styled-components": "^5.1.4",
 		"@types/webpack": "^4.41.10",
 		"@typescript-eslint/eslint-plugin": "^4.0.1",
 		"@typescript-eslint/parser": "^4.0.1",
@@ -44,7 +45,7 @@
 		"cypress-plugin-tab": "^1.0.5",
 		"eslint-plugin-react": "^7.12.4",
 		"html-webpack-plugin": "^3.2.0",
-		"i18next-parser": "^1.0.6",
+		"i18next-parser": "^3.3.0",
 		"intl-locales-supported": "^1.0.0",
 		"mock-local-storage": "^1.0.5",
 		"monaco-editor-webpack-plugin": "^1.9.0",
@@ -79,7 +80,7 @@
 		"react-helmet": "6.0.0-beta",
 		"react-i18next": "^11.0.0",
 		"react-markdown": "^4.1.0",
-		"react-monaco-editor": "^0.36.0",
+		"react-monaco-editor": "^0.40.0",
 		"react-number-format": "^4.3.1",
 		"react-redux": "^7.0.3",
 		"react-router-dom": "^5.1.1",

mon-entreprise/source/actions/existingCompanyActions.ts

@@ -0,0 +1,69 @@
+import { ApiCommuneJson } from 'Components/conversation/select/SelectCommune'
+import { fetchCompanyDetails } from '../api/sirene'
+
+const fetchCommuneDetails = function(codeCommune: string) {
+	return fetch(
+		`https://geo.api.gouv.fr/communes/${codeCommune}?fields=departement,region`
+	).then(response => {
+		return response.json()
+	})
+}
+
+export type ActionExistingCompany =
+	| ReturnType<typeof specifyIfAutoEntrepreneur>
+	| ReturnType<typeof specifyIfDirigeantMajoritaire>
+	| ReturnType<typeof resetEntreprise>
+	| {
+			type: 'EXISTING_COMPANY::SET_SIREN'
+			siren: string
+	  }
+	| {
+			type: 'EXISTING_COMPANY::SET_DETAILS'
+			catégorieJuridique: string
+			dateDeCréation: string
+	  }
+	| {
+			type: 'EXISTING_COMPANY::ADD_COMMUNE_DETAILS'
+			details: ApiCommuneJson
+	  }
+
+export const setEntreprise = (siren: string) => async (
+	dispatch: (action: ActionExistingCompany) => void
+) => {
+	dispatch({
+		type: 'EXISTING_COMPANY::SET_SIREN',
+		siren
+	} as ActionExistingCompany)
+	const companyDetails = await fetchCompanyDetails(siren)
+	dispatch({
+		type: 'EXISTING_COMPANY::SET_DETAILS',
+		catégorieJuridique: companyDetails.categorie_juridique,
+		dateDeCréation: companyDetails.date_creation
+	})
+	const communeDetails: ApiCommuneJson = await fetchCommuneDetails(
+		companyDetails.etablissement_siege.code_commune
+	)
+	dispatch({
+		type: 'EXISTING_COMPANY::ADD_COMMUNE_DETAILS',
+		details: communeDetails
+	} as ActionExistingCompany)
+}
+
+export const specifyIfAutoEntrepreneur = (isAutoEntrepreneur: boolean) =>
+	({
+		type: 'EXISTING_COMPANY::SPECIFY_AUTO_ENTREPRENEUR',
+		isAutoEntrepreneur
+	} as const)
+
+export const specifyIfDirigeantMajoritaire = (
+	isDirigeantMajoritaire: boolean
+) =>
+	({
+		type: 'EXISTING_COMPANY::SPECIFY_DIRIGEANT_MAJORITAIRE',
+		isDirigeantMajoritaire
+	} as const)
+
+export const resetEntreprise = () =>
+	({
+		type: 'EXISTING_COMPANY::RESET'
+	} as const)

mon-entreprise/source/components/NewsletterRegister.tsx

@@ -14,7 +14,7 @@ const formInfos = {
 }
 
 export default function NewsletterRegister() {
-	const [userIsRegistered, setUserIsRegistered] = usePersistingState(
+	const [userIsRegistered, setUserIsRegistered] = usePersistingState<boolean>(
 		'app::newsletter::registered',
 		false
 	)

mon-entreprise/source/components/Overlay.tsx

@@ -1,5 +1,6 @@
 import * as animate from 'Components/ui/animate'
 import FocusTrap from 'focus-trap-react'
+import { PageInfo } from 'iframe-resizer'
 import React, { useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 
@@ -16,7 +17,7 @@ const useIFrameOffset = () => {
 			setOffset(0)
 			return
 		}
-		window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }) => {
+		window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }: PageInfo) => {
 			setOffset(scrollTop - offsetTop)
 			window.parentIFrame.getPageInfo(false)
 		})
@@ -127,8 +128,9 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 			max-width: 40em;
 			min-height: 6em;
 		}
-	.ui__.card[aria-modal='true'] {
-		padding-bottom: 2rem;
-		margin-bottom: 2rem;
+		.ui__.card[aria-modal='true'] {
+			padding-bottom: 2rem;
+			margin-bottom: 2rem;
+		}
 	}
 `

mon-entreprise/source/components/PercentageField.tsx

@@ -2,9 +2,16 @@ import { formatValue } from 'publicodes'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce as debounceFn } from '../utils'
+import { InputCommonProps } from './conversation/RuleInput'
 import './PercentageField.css'
 
-export default function PercentageField({ onChange, value, debounce = 0 }) {
+type PercentageFieldProps = InputCommonProps & { debounce: number }
+
+export default function PercentageField({
+	onChange,
+	value,
+	debounce = 0
+}: PercentageFieldProps) {
 	const [localValue, setLocalValue] = useState(value)
 	const debouncedOnChange = useCallback(
 		debounce ? debounceFn(debounce, onChange) : onChange,

mon-entreprise/source/components/TargetSelection.tsx

@@ -11,6 +11,7 @@ import {
 	useInversionFail
 } from 'Components/utils/EngineContext'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
+import { EvaluatedNode } from 'publicodes'
 import { EvaluatedRule, formatValue } from 'publicodes'
 import { isNil } from 'ramda'
 import { Fragment, useCallback, useContext } from 'react'
@@ -300,7 +301,9 @@ function AidesGlimpse() {
 	// faisons un lien direct vers cette aide, plutôt qu'un lien vers la liste qui
 	// est une somme des aides qui sont toutes nulle sauf l'aide active.
 	const aidesDetail = aides?.formule.explanation.explanation
-	const aidesNotNul = aidesDetail?.filter(node => node.nodeValue !== false)
+	const aidesNotNul = aidesDetail?.filter(
+		(node: EvaluatedNode) => node.nodeValue !== false
+	)
 	const aideLink = aidesNotNul?.length === 1 ? aidesNotNul[0] : aides
 
 	if (!aides?.nodeValue) return null

mon-entreprise/source/components/conversation/Conversation.tsx

@@ -3,7 +3,7 @@ import {
 	updateSituation,
 	validateStepWithValue
 } from 'Actions/actions'
-import RuleInput from 'Components/conversation/RuleInput'
+import RuleInput, { RuleInputProps } from 'Components/conversation/RuleInput'
 import QuickLinks from 'Components/QuickLinks'
 import * as Animate from 'Components/ui/animate'
 import { EngineContext } from 'Components/utils/EngineContext'
@@ -38,9 +38,12 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 	}, [dispatch, currentQuestion])
 	const setDefault = () =>
 		dispatch(
+			// TODO: Skiping a question shouldn't be equivalent to answering the
+			// default value (for instance the question shouldn't appear in the
+			// answered questions).
 			validateStepWithValue(
 				currentQuestion,
-				rules[currentQuestion]['par défaut']
+				rules[currentQuestion].defaultValue
 			)
 		)
 	const goToPrevious = () =>
@@ -55,7 +58,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 		})
 	}
 
-	const onChange = value => {
+	const onChange: RuleInputProps['onChange'] = value => {
 		dispatch(updateSituation(currentQuestion, value))
 	}
 

mon-entreprise/source/components/conversation/Input.tsx

@@ -1,22 +1,22 @@
-import { formatValue } from 'publicodes'
+import { formatValue, Unit } from 'publicodes'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import NumberFormat from 'react-number-format'
 import { currencyFormat, debounce } from '../../utils'
 import InputSuggestions from './InputSuggestions'
+import { InputCommonProps } from './RuleInput'
 
 // TODO: fusionner Input.js et CurrencyInput.js
 export default function Input({
 	suggestions,
 	onChange,
 	onSubmit,
-	dottedName,
 	id,
 	value,
 	defaultValue,
 	autoFocus,
 	unit
-}) {
+}: InputCommonProps & { unit?: Unit; onSubmit: (source: string) => void }) {
 	const debouncedOnChange = useCallback(debounce(550, onChange), [])
 	const { language } = useTranslation().i18n
 	const { thousandSeparator, decimalSeparator } = currencyFormat(language)

mon-entreprise/source/components/conversation/ParagrapheInput.tsx

@@ -1,14 +1,14 @@
 import { useCallback } from 'react'
 import { debounce } from '../../utils'
+import { InputCommonProps } from './RuleInput'
 
 export default function ParagrapheInput({
 	onChange,
-	dottedName,
 	value,
 	id,
 	defaultValue,
 	autoFocus
-}) {
+}: InputCommonProps) {
 	const debouncedOnChange = useCallback(debounce(1000, onChange), [])
 
 	return (