🎨 WIP: Récapitulatif aide déclaration indépendants

package.json

@@ -53,6 +53,7 @@
 		"react-router-dom": "^5.1.1",
 		"react-spring": "=8.0.27",
 		"react-syntax-highlighter": "^10.1.1",
+		"react-to-print": "^2.5.1",
 		"react-transition-group": "^2.2.1",
 		"react-virtualized": "^9.20.0",
 		"react-virtualized-select": "^3.1.3",

source/locales/en.yaml

@@ -872,7 +872,9 @@ path:
     exemples: /examples
     index: /documentation
   gérer:
-    déclaration-indépendant: /declaration-aid-independent
+    déclaration-indépendant:
+      index: /declaration-aid-independent
+      récapitulatif: /summary
     embaucher: /hiring
     index: /manage
     sécuritéSociale: /social-security

source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendants.tsx

@@ -4,16 +4,17 @@ import 'Components/TargetSelection.css'
 import Warning from 'Components/ui/WarningBlock'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
+import { SitePathsContext } from 'Components/utils/withSitePaths'
 import { formatValue } from 'Engine/format'
 import InputComponent from 'Engine/RuleInput'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import Skeleton from 'react-loading-skeleton'
 import { useDispatch, useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { RootState } from 'Reducers/rootReducer'
 import {
-	analysisWithDefaultsSelector,
 	flatRulesSelector,
 	nextStepsSelector,
 	ruleAnalysisSelector,
@@ -40,6 +41,7 @@ const simulationConfig = {
 	},
 	'unités par défaut': ['€/an']
 }
+
 const lauchComputationWhenResultsInViewport = () => {
 	const dottedName = 'dirigeant . rémunération totale'
 	const [resultsRef, resultsInViewPort] = useDisplayOnIntersecting({
@@ -70,7 +72,6 @@ const lauchComputationWhenResultsInViewport = () => {
 
 export default function AideDéclarationIndépendant() {
 	const dispatch = useDispatch()
-	const analysis = useSelector(analysisWithDefaultsSelector)
 	const rules = useSelector(flatRulesSelector)
 	const company = useSelector(
 		(state: RootState) => state.inFranceApp.existingCompany
@@ -281,7 +282,6 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
 					onChange={update}
 					value={currentValue}
 				/>
-				{/* <Field dottedName={dottedName} onChange={onChange} /> */}
 			</Question>
 		</Animate.fromTop>
 	)
@@ -293,6 +293,7 @@ function Results() {
 	)
 	const onGoingComputation = !results.filter(node => node.nodeValue != null)
 		.length
+	const sitePaths = useContext(SitePathsContext)
 	return (
 		<div
 			className="ui__ card lighter-bg"
@@ -340,8 +341,16 @@ function Results() {
 					{!onGoingComputation && (
 						<div css="text-align: center">
 							<button className="ui__ simple button">
-								{emoji('🖨')}&nbsp;
-								<Trans i18nKey="imprimer">Imprimer</Trans>
+								{emoji('🔗')} Obtenir le lien
+							</button>
+							<Link
+								className="ui__ simple button"
+								to={sitePaths.gérer.déclarationIndépendant.récapitulatif}
+							>
+								{emoji('📋')} Récapitulatif
+							</Link>
+							<button className="ui__ simple button">
+								{emoji('🖨')} Imprimer
 							</button>
 						</div>
 					)}

source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendantsRécapitulatif.tsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { getSessionStorage } from '../../../../utils'
+import { constructLocalizedSitePath } from '../../sitePaths'
+
+type ProviderProps = {
+	situation
+}
+
+export class AideDéclarationIndépendantsRécapitulatif extends Component<
+	ProviderProps
+> {
+	render() {
+		const lang = getSessionStorage()?.getItem('lang')
+		const sitePaths = constructLocalizedSitePath(lang ? lang : 'fr')
+		return (
+			<>
+				<Link to={sitePaths.gérer.déclarationIndépendant.index}>Retour</Link>
+				<h1>Aide à la déclaration de revenus au titre de l'année 2019</h1>
+			</>
+		)
+	}
+}

source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx

@@ -96,7 +96,7 @@ export default function SocialSecurity() {
 									<Link
 										className="ui__ interactive card box"
 										to={{
-											pathname: sitePaths.gérer.déclarationIndépendant
+											pathname: sitePaths.gérer.déclarationIndépendant.index
 										}}
 									>
 										<div className="ui__ big box-icon">{emoji('✍')}</div>

source/sites/mon-entreprise.fr/pages/Gérer/index.tsx

@@ -2,9 +2,12 @@ import { ScrollToTop } from 'Components/utils/Scroll'
 import { SitePathsContext } from 'Components/utils/withSitePaths'
 import React, { useContext } from 'react'
 import { Trans } from 'react-i18next'
+import { useSelector } from 'react-redux'
 import { Route, Switch } from 'react-router'
 import { NavLink, useLocation } from 'react-router-dom'
+import { situationSelector } from 'Selectors/analyseSelectors'
 import AideDéclarationIndépendant from './AideDéclarationIndépendants'
+import { AideDéclarationIndépendantsRécapitulatif } from './AideDéclarationIndépendantsRécapitulatif'
 import Embaucher from './Embaucher'
 import Home from './Home'
 import SécuritéSociale from './SécuritéSociale'
@@ -12,6 +15,7 @@ import SécuritéSociale from './SécuritéSociale'
 export default function Gérer() {
 	const sitePaths = useContext(SitePathsContext)
 	const location = useLocation()
+	const situation = useSelector(situationSelector)
 	return (
 		<>
 			<ScrollToTop key={location.pathname} />
@@ -33,9 +37,16 @@ export default function Gérer() {
 				/>
 				<Route path={sitePaths.gérer.embaucher} component={Embaucher} />
 				<Route
-					path={sitePaths.gérer.déclarationIndépendant}
+					exact
+					path={sitePaths.gérer.déclarationIndépendant.index}
 					component={AideDéclarationIndépendant}
 				/>
+				<Route
+					path={sitePaths.gérer.déclarationIndépendant.récapitulatif}
+					render={() => (
+						<AideDéclarationIndépendantsRécapitulatif situation={situation} />
+					)}
+				/>
 			</Switch>
 		</>
 	)

source/sites/mon-entreprise.fr/sitePaths.ts

@@ -89,10 +89,16 @@ export const constructLocalizedSitePath = (language: string) => {
 			index: t('path.gérer.index', '/gérer'),
 			embaucher: t('path.gérer.embaucher', '/embaucher'),
 			sécuritéSociale: t('path.gérer.sécuritéSociale', '/sécurité-sociale'),
-			déclarationIndépendant: t(
-				'path.gérer.déclaration-indépendant',
-				'/aide-declaration-independants'
-			)
+			déclarationIndépendant: {
+				index: t(
+					'path.gérer.déclaration-indépendant.index',
+					'/aide-declaration-independants'
+				),
+				récapitulatif: t(
+					'path.gérer.déclaration-indépendant.récapitulatif',
+					'/récapitulatif'
+				)
+			}
 		},
 		simulateurs: {
 			index: t('path.simulateurs.index', '/simulateurs'),

yarn.lock

@@ -9044,6 +9044,13 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.18.0"
 
+react-to-print@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.5.1.tgz#eaaff4248910f179788ab15a593ceb3e07527b8c"
+  integrity sha512-HhuujwTmuGYB+yBq52y1pwiv0aooaLTqksMJ6cGKWy+aT+x6zponitZd54swiAeILndxJ7oO+X1F/93XyfT/JA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-transition-group@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"