🎨 Possibilité d'imprimer directement

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

@@ -4,7 +4,7 @@ import Warning from 'Components/ui/WarningBlock'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
 import InputComponent from 'Engine/RuleInput'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'
@@ -18,6 +18,7 @@ import styled from 'styled-components'
 import { DottedName, Rule } from 'Types/rule'
 import Animate from 'Ui/animate'
 import { useRule } from '../Simulateurs/ArtisteAuteur'
+import { AideDéclarationIndépendantsRécapitulatif } from './AideDéclarationIndépendantsRécapitulatif'
 import { simulationConfig } from './AideDéclarationIndépendantsSimulationConfig'
 import { Results } from './AideDéclarationIndépentantsResult'
 import { CompanySection } from './Home'
@@ -63,6 +64,7 @@ export default function AideDéclarationIndépendant() {
 		updateIncome,
 		currentIncome
 	} = lauchComputationWhenResultsInViewport()
+	const printComponentRef = useRef<HTMLDivElement>(null)
 	return (
 		<>
 			<ScrollToTop />
@@ -171,7 +173,12 @@ export default function AideDéclarationIndépendant() {
 					</Animate.fromTop>
 
 					<div ref={resultsRef}>
-						<Results récapitulatif={true} />
+						<div style={{ display: 'none' }}>
+							<div ref={printComponentRef}>
+								<AideDéclarationIndépendantsRécapitulatif />
+							</div>
+						</div>
+						<Results récapitulatif={true} componentRef={printComponentRef} />
 					</div>
 				</>
 			)}

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

@@ -12,8 +12,8 @@ export function AideDéclarationIndépendantsRécapitulatif() {
 	const siren = useSelector(
 		(state: RootState) => state.inFranceApp.existingCompany?.siren
 	)
-	console.log(situation)
 	const componentRef = useRef<HTMLDivElement>(null)
+
 	return (
 		<div ref={componentRef}>
 			<h1>
@@ -116,7 +116,6 @@ type SimpleFieldProps = {
 function SimpleField({ label, dottedName, unit }: SimpleFieldProps) {
 	const situation = useSelector(situationSelector)
 	const value = situation[dottedName]
-	console.log(situation)
 	return value && (value === 'oui' || unit === '€') ? (
 		<p>
 			<span>

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

@@ -69,27 +69,24 @@ export function Results({ récapitulatif, componentRef }: ResultsProp) {
 					{!onGoingComputation && (
 						<div css="text-align: center">
 							{récapitulatif && (
-								<Link
-									className="ui__ simple button"
-									to={sitePaths.gérer.déclarationIndépendant.récapitulatif}
-								>
-									{emoji('📋')} Récapitulatif
-								</Link>
+								<>
+									<Link
+										className="ui__ simple button"
+										to={sitePaths.gérer.déclarationIndépendant.récapitulatif}
+									>
+										{emoji('📋')} Récapitulatif
+									</Link>
+								</>
 							)}
 							<style>{`@media print {.button.print{display: none;} body {margin: 40px;}}`}</style>
-							{!récapitulatif && (
-								<ReactToPrint
-									trigger={() => (
-										<button
-											className="ui__ simple button print"
-											onClick={() => window.print()}
-										>
-											{emoji('🖨')} Imprimer
-										</button>
-									)}
-									content={() => componentRef.current}
-								/>
-							)}
+							<ReactToPrint
+								trigger={() => (
+									<button className="ui__ simple button print">
+										{emoji('🖨')} Imprimer
+									</button>
+								)}
+								content={() => componentRef.current}
+							/>
 						</div>
 					)}
 				</Animate.fromTop>