🔥 Supprime l'impression du formulaire DNRTI

Et simplification du code
pull/1038/head
Maxime Quandalle 2020-05-13 10:38:10 +02:00
parent ced589ad74
commit b6c2cedb6f
7 changed files with 87 additions and 138 deletions

View File

@ -49,7 +49,6 @@
"react-router-hash-link": "^1.2.2",
"react-spring": "=8.0.27",
"react-syntax-highlighter": "^10.1.1",
"react-to-print": "^2.5.1",
"react-transition-group": "^2.2.1",
"recharts": "^1.8.5",
"reduce-reducers": "^1.0.4",

View File

@ -68,13 +68,13 @@
z-index: -1;
}
.step.input {
.step .input {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
}
.step.input > :first-child {
.step .input > :first-child {
text-align: right;
}

View File

@ -1,88 +0,0 @@
import RuleLink from 'Components/RuleLink'
import { useEvaluation } from 'Components/utils/EngineContext'
import { formatValue } from 'publicodes'
import React from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import Skeleton from 'react-loading-skeleton'
import ReactToPrint from 'react-to-print'
import Animate from 'Components/ui/animate'
import simulationConfig from './config.yaml'
import { DottedName } from 'Rules'
type ResultsProp = {
componentRef?: any
}
export function Results({ componentRef }: ResultsProp) {
const results = useEvaluation(simulationConfig.objectifs as Array<DottedName>)
const onGoingComputation = !results.filter(node => node.nodeValue != null)
.length
return (
<div
className="ui__ card lighter-bg"
css="margin-top: 3rem; padding: 1rem 0"
>
<h1 css="text-align: center; margin-bottom: 2rem">
<Trans i18nKey="aide-déclaration-indépendant.results.title">
Aide à la déclaration
</Trans>
{emoji('📄')}
</h1>
{onGoingComputation && (
<h2>
<small>
<Trans i18nKey="aide-déclaration-indépendant.results.ongoing">
Calcul en cours...
</Trans>
</small>
</h2>
)}
<>
<Animate.fromTop>
{results.map(r => (
<React.Fragment key={r.title}>
<h4>
{r.title} <small>{r.summary}</small>
</h4>
{r.description && <p className="ui__ notice">{r.description}</p>}
<p className="ui__ lead" css="margin-bottom: 1rem;">
<RuleLink dottedName={r.dottedName}>
{r.nodeValue != null ? (
formatValue({
nodeValue: r.nodeValue || 0,
language: 'fr',
unit: '€',
precision: 0
})
) : (
<Skeleton width={80} />
)}
</RuleLink>
</p>
</React.Fragment>
))}
<p className="ui__ notice">
Résultats calculés le {new Date().toLocaleDateString()}
</p>
{!onGoingComputation && (
<div css="text-align: center">
<style>
{
'@media print {.button.print{display: none;} body {margin: 40px;}}'
}
</style>
<ReactToPrint
trigger={() => (
<button className="ui__ simple button print">
{emoji('🖨')} Imprimer
</button>
)}
content={() => componentRef.current}
/>
</div>
)}
</Animate.fromTop>
</>
</div>
)
}

View File

@ -8,13 +8,7 @@ import { ScrollToTop } from 'Components/utils/Scroll'
import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
import RuleInput from 'Components/conversation/RuleInput'
import { ParsedRule } from 'publicodes'
import React, {
useCallback,
useEffect,
useRef,
useState,
useContext
} from 'react'
import React, { useCallback, useEffect, useState, useContext } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
@ -24,8 +18,11 @@ import styled from 'styled-components'
import Animate from 'Components/ui/animate'
import { CompanySection } from '../Home'
import simulationConfig from './config.yaml'
import { Results } from './Result'
import { useNextQuestions } from 'Components/utils/useNextQuestion'
import emoji from 'react-easy-emoji'
import RuleLink from 'Components/RuleLink'
import { formatValue } from 'Engine/format'
import Skeleton from 'react-loading-skeleton'
export default function() {
const dispatch = useDispatch()
@ -37,37 +34,30 @@ export default function() {
dispatch(setSimulationConfig(simulationConfig, true))
}, [])
const { resultsRef, displayForm, updateIncome, currentIncome } = (() => {
const dottedName = 'dirigeant . rémunération totale'
const [resultsRef, resultsInViewPort] = useDisplayOnIntersecting({
threshold: 0.5,
unobserve: false
})
const value = useSelector(situationSelector)[dottedName]
const [currentIncome, setCurrentIncome] = useState(value)
const [displayForm, setDisplayForm] = useState(currentIncome != null)
const updateIncome = useCallback(
income => {
setDisplayForm(income != null)
setCurrentIncome(income)
},
[setDisplayForm, setCurrentIncome]
)
const dispatch = useDispatch()
useEffect(() => {
if (resultsInViewPort && displayForm) {
dispatch(updateSituation(dottedName, currentIncome))
} else {
dispatch(updateSituation(dottedName, null))
}
}, [resultsInViewPort, displayForm, currentIncome])
const dottedName = 'dirigeant . rémunération totale'
const [resultsRef, resultsInViewPort] = useDisplayOnIntersecting({
threshold: 0.5,
unobserve: false
})
const value = useSelector(situationSelector)[dottedName]
const [currentIncome, setCurrentIncome] = useState(value)
const displayForm = currentIncome != null
const updateIncome = useCallback(
income => {
setCurrentIncome(income)
},
[setCurrentIncome]
)
useEffect(() => {
if (resultsInViewPort && displayForm) {
dispatch(updateSituation(dottedName, currentIncome))
} else {
dispatch(updateSituation(dottedName, null))
}
}, [resultsInViewPort, displayForm, currentIncome])
return { updateIncome, resultsRef, displayForm, currentIncome }
})()
const printComponentRef = useRef<HTMLDivElement>(null)
return (
<div ref={printComponentRef}>
<div>
<ScrollToTop />
<Trans i18nKey="aide-déclaration-indépendant.description">
<h1>Aide à la déclaration de revenus au titre de l'année 2019</h1>
@ -197,7 +187,7 @@ export default function() {
</Animate.fromTop>
<div ref={resultsRef}>
<Results componentRef={printComponentRef} />
<Results />
</div>
<Aide />
</>
@ -308,6 +298,60 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
)
}
function Results() {
const results = useEvaluation(simulationConfig.objectifs as Array<DottedName>)
const onGoingComputation = !results.filter(node => node.nodeValue != null)
.length
return (
<div
className="ui__ card lighter-bg"
css="margin-top: 3rem; padding: 1rem 0"
>
<h1 css="text-align: center; margin-bottom: 2rem">
<Trans i18nKey="aide-déclaration-indépendant.results.title">
Aide à la déclaration
</Trans>
{emoji('📄')}
</h1>
{onGoingComputation && (
<h2>
<small>
<Trans i18nKey="aide-déclaration-indépendant.results.ongoing">
Calcul en cours...
</Trans>
</small>
</h2>
)}
<>
<Animate.fromTop>
{results.map(r => (
<React.Fragment key={r.title}>
<h4>
{r.title} <small>{r.summary}</small>
</h4>
{r.description && <p className="ui__ notice">{r.description}</p>}
<p className="ui__ lead" css="margin-bottom: 1rem;">
<RuleLink dottedName={r.dottedName}>
{r.nodeValue != null ? (
formatValue({
nodeValue: r.nodeValue || 0,
language: 'fr',
unit: '€',
precision: 0
})
) : (
<Skeleton width={80} />
)}
</RuleLink>
</p>
</React.Fragment>
))}
</Animate.fromTop>
</>
</div>
)
}
const FormBlock = styled.section`
max-width: 500px;
padding: 0;

View File

@ -317,7 +317,7 @@ export const CompanySection = ({ company }: CompanySectionProps) => {
<ScrollToTop />
<Overlay>
<Trans i18nKey="gérer.entreprise.dirigeant">
<h2> Êtes-vous dirigeant majoritaire ? </h2>
<h2>Êtes-vous dirigeant majoritaire ?</h2>
<p>
Si vous êtes administrateur majoritaire ou si vous faites partie
d'un conseil d'administration majoritaire, vous n'aurez pas le

View File

@ -33,7 +33,8 @@ export function inIframe(): boolean {
// This is different from the process.env.NODE_ENV in that a feature branch may
// be build in production mode (with the NODE_ENV) but we may still want to show
// or hide some features.
export const productionMode = ['master', 'next'].includes(process.env.HEAD)
export const productionMode =
process.env.HEAD && ['master', 'next'].includes(process.env.HEAD)
export function softCatch<ArgType, ReturnType>(
fn: (arg: ArgType) => ReturnType

View File

@ -9673,13 +9673,6 @@ react-test-renderer@^16.0.0-0:
react-is "^16.8.6"
scheduler "^0.19.1"
react-to-print@^2.5.1:
version "2.7.0"
resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.7.0.tgz#3afca47ac857c72d9b76f9944b0793d27714bcc5"
integrity sha512-1GdEskOHtQs7EMj9t7OYSiMcAjzGCZyasb1H6kJQf5GaRpoM3Qr4OLbxGQSHK659Sp1PRZMVSD9+DWu4atVOIw==
dependencies:
prop-types "^15.7.2"
react-transition-group@^2.2.1, react-transition-group@^2.5.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"