betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 Présentation des institutions sous forme de tableau

pull/1727/head
Maxime Quandalle 2021-09-15 12:09:50 +02:00
parent 1cb84476bf
commit 62c65a34a8
1 changed files with 80 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
mon-entreprise/source/components/simulationExplanation/InstitutionsPartenaires.tsx
View File

@ -26,7 +26,7 @@ export default function InstitutionsPartenaires() {
Vos institutions partenaires
</Trans>
</h2>
<div className="ui__ full-width box-container">
<InstitutionsTable className="ui__ card">
<Condition expression="entreprise . activité . libérale réglementée">
<CotisationsUrssaf rule="dirigeant . indépendant . PL . cotisations Urssaf" />
<CaisseRetraite />
@ -36,13 +36,13 @@ export default function InstitutionsPartenaires() {
</WhenNotApplicable>
<ImpôtsDGFIP />
<Condition expression="dirigeant . indépendant . PL . PAMC . participation CPAM > 0">
<div className="ui__ card box">
<a
<InstitutionLine>
<InstitutionLogo
target="_blank"
href="https://www.ameli.fr/assure/droits-demarches/salaries-travailleurs-independants-et-personnes-sans-emploi/emploi-independant-non-salarie/praticien-auxiliaire-medical"
>
<LogoImg src={assuranceMaladieSrc} title="Logo CPAM" />
</a>
<img src={assuranceMaladieSrc} title="Logo CPAM" />
</InstitutionLogo>
<p className="ui__ notice">
<Trans i18nKey="simulateurs.explanation.institutions.cpam">
En tant que professionnel de santé conventionné, vous
@ -58,9 +58,9 @@ export default function InstitutionsPartenaires() {
expression="dirigeant . indépendant . PL . PAMC . participation CPAM"
/>
</p>
</div>
</InstitutionLine>
</Condition>
</div>
</InstitutionsTable>
<Condition expression="dirigeant . indépendant . cotisations et contributions . exonérations . ACRE > 0">
<p className="ui__ notice">
<Trans i18nKey="simulateurs.explanation.institutions.notice acre">
@ -77,19 +77,24 @@ export default function InstitutionsPartenaires() {
export function CotisationsUrssaf({ rule }: { rule: DottedName }) {
const unit = useSelector(targetUnitSelector)
return (
<div className="ui__ card box">
<a target="_blank" href="https://www.urssaf.fr/portail/home.html">
<LogoImg src={urssafSrc} title="logo Urssaf" />
</a>
<InstitutionLine>
<InstitutionLogo
target="_blank"
href="https://www.urssaf.fr/portail/home.html"
>
<img src={urssafSrc} title="logo Urssaf" />
</InstitutionLogo>
<p className="ui__ notice">
Les cotisations recouvrées par l'Urssaf, qui servent au financement de
la sécurité sociale (assurance maladie, allocations familiales,
dépendance)
<Trans i18nKey="simulateurs.explanation.institutions.urssaf">
Les cotisations recouvrées par l'Urssaf, qui servent au financement de
la sécurité sociale (assurance maladie, allocations familiales,
dépendance).
</Trans>
</p>
<p className="ui__ lead">
<Value unit={unit} displayedUnit="€" expression={rule} />
</p>
</div>
</InstitutionLine>
)
}
@ -97,10 +102,10 @@ export function ImpôtsDGFIP() {
const unit = useSelector(targetUnitSelector)
return (
<Condition expression="impôt > 0">
<div className="ui__ card box">
<a target="_blank" href="https://www.impots.gouv.fr">
<LogoImg src={dgfipSrc} title="logo DGFiP" />
</a>
<InstitutionLine>
<InstitutionLogo target="_blank" href="https://www.impots.gouv.fr">
<img src={dgfipSrc} title="logo DGFiP" />
</InstitutionLogo>
<p className="ui__ notice">
<Trans i18nKey="simulateurs.explanation.institutions.dgfip">
La direction générale des finances publiques (DGFiP) est l'organisme
@ -114,7 +119,7 @@ export function ImpôtsDGFIP() {
<p className="ui__ lead">
<Value unit={unit} displayedUnit="€" expression="impôt . montant" />
</p>
</div>
</InstitutionLine>
</Condition>
)
}
@ -139,13 +144,13 @@ function CaisseRetraite() {
const { description, références } = engine.getRule(dottedName).rawNode
return (
<Condition expression={dottedName} key={caisse}>
<div className="ui__ card box">
<a
<InstitutionLine>
<InstitutionLogo
target="_blank"
href={références && Object.values(références)[0]}
>
<LogoImg src={logosSrc[caisse]} title={`logo ${caisse}`} />
</a>
<img src={logosSrc[caisse]} title={`logo ${caisse}`} />
</InstitutionLogo>
<p className="ui__ notice">
{description}{' '}
<Trans i18nKey="simulateurs.explanation.CNAPL">
@ -161,7 +166,7 @@ function CaisseRetraite() {
expression="dirigeant . indépendant . PL . cotisations caisse de retraite"
/>
</p>
</div>
</InstitutionLine>
</Condition>
)
})}
@ -169,8 +174,54 @@ function CaisseRetraite() {
)
}
const LogoImg = styled.img`
padding: 1rem;
height: 5rem;
max-width: 100%;
const InstitutionsTable = styled.div`
padding-left: 0;
padding-right: 0;
`
const InstitutionLogo = styled.a`
img {
max-width: 100%;
}
`
const InstitutionLine = styled.div`
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
flex-wrap: wrap;
&:not(:first-child) {
border-top: 1px solid var(--lighterColor);
}
> ${InstitutionLogo} {
display: block;
width: 13ch;
text-align: center;
}
> .ui__.notice {
flex: 1;
padding: 0 4rem 0 2rem;
margin: 0;
}
> .ui__.lead {
font-weight: bold;
text-align: right;
}
@media (max-width: 680px) {
> .ui__.lead {
flex-grow: 9;
}
> .ui__.notice {
order: 3;
padding: 0;
min-width: 80vw;
}
}
`