parent
ced589ad74
commit
b6c2cedb6f
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue