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

Implemente les headers et quelques paragraphes

wip-johan
Alexandre Valsamou-Stanislawski 2021-10-18 17:52:19 +02:00
parent 92f4b2971f
commit 5224f2eb47
74 changed files with 497 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mon-entreprise/source/Provider.tsx
View File

@ -2,6 +2,7 @@ import { ErrorBoundary } from '@sentry/react'
import { ThemeColorsProvider } from 'Components/utils/colors'
import { DisableAnimationOnPrintProvider } from 'Components/utils/DisableAnimationContext'
import { SitePathProvider, SitePaths } from 'Components/utils/SitePathsContext'
import { H1 } from 'DesignSystem/typography/heading'
import { createBrowserHistory } from 'history'
import i18next from 'i18next'
import React, { createContext, useMemo } from 'react'
@ -130,7 +131,7 @@ export default function Provider({
src={logo}
style={{ maxWidth: '200px', width: '100%', marginTop: '1rem' }}
></img>
<h1>Une erreur est survenue</h1>
<H1>Une erreur est survenue</H1>
<p>
L'équipe technique de mon-entreprise.fr a été automatiquement
prévenue. Vous pouvez également nous contacter directement à

5
mon-entreprise/source/components/CompanyDetails.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import Skeleton from 'Components/ui/Skeleton'
import { Etablissement, fetchCompanyDetails } from '../api/sirene'
import { H3 } from 'DesignSystem/typography/heading'
type Company = {
denomination: string
@ -41,7 +42,7 @@ export default function CompanyDetails({ siren, denomination }: Etablissement) {
return (
<>
<h3>
<H3>
{denomination || company ? (
<>
{denomination ||
@ -53,7 +54,7 @@ export default function CompanyDetails({ siren, denomination }: Etablissement) {
) : (
<Skeleton width={400} />
)}
</h3>
</H3>
<p className="ui__ notice">
<Trans>Crée le</Trans>{' '}

14
mon-entreprise/source/components/FindCompany.tsx
View File

@ -1,5 +1,7 @@
import { useSetEntreprise } from 'Actions/companyStatusActions'
import CompanyDetails from 'Components/CompanyDetails'
import { H1 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
import { useCallback, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
import { Etablissement, searchDenominationOrSiren } from '../api/sirene'
@ -27,16 +29,16 @@ export default function Search() {
return (
<>
<h1>
<H1>
<Trans i18nKey="trouver.titre">Retrouver mon entreprise</Trans>
</h1>
<p>
</H1>
<Body>
<Trans i18nKey="trouver.description">
Grâce à la base SIREN, les données publiques sur votre entreprise
seront automatiquement disponibles pour la suite du parcours sur le
site.
</Trans>
</p>
</Body>
<label className="ui__ notice">
<Trans>Nom de l'entreprise ou SIREN </Trans>:{' '}
</label>
@ -68,9 +70,9 @@ export default function Search() {
}}
/>
{!isLoading && searchResults === null && (
<p>
<Body>
<Trans>Aucun résultat</Trans>
</p>
</Body>
)}
{searchResults &&

38
mon-entreprise/source/components/LegalNotice.tsx
View File

@ -1,36 +1,38 @@
import Overlay from 'Components/Overlay'
import { H1, H2 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
import { useState } from 'react'
import { Trans } from 'react-i18next'
export const LegalNoticeContent = () => (
<>
<h1>
<H1>
<Trans i18nKey="legalNotice.title">Mentions légales</Trans>
</h1>
<h2>
</H1>
<H2>
<Trans i18nKey="legalNotice.editeur.title">Editeur</Trans>
</h2>
<p>
</H2>
<Body>
Agence Centrale des Organismes de Sécurité Sociale (ACOSS)
<br />
36 rue de Valmy - 93108 Montreuil Cedex
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="legalNotice.publication.title">
Directeur de la publication
</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="legalNotice.publication.content">
M. Yann-Gaël Amghar, Directeur de l'Acoss
</Trans>
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="legalNotice.hosting.title">
Prestataire d'hébergement
</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="legalNotice.hosting.content">
Netlify
<br />
@ -42,17 +44,17 @@ export const LegalNoticeContent = () => (
https://www.netlify.com
</a>
</Trans>
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="legalNotice.contact.title">Contact</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="legalNotice.contact.content">
<a target="_blank" href="mailto:contact@mon-entreprise.beta.gouv.fr">
contact@mon-entreprise.beta.gouv.fr
</a>
</Trans>
</p>
</Body>
</>
)

13
mon-entreprise/source/components/MoreInfosOnUs.tsx
View File

@ -1,3 +1,4 @@
import { H2, H3 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Link, useLocation } from 'react-router-dom'
@ -21,16 +22,14 @@ export default function MoreInfosOnUs() {
margin-top: 3rem;
`}
>
<h3 style={{ textAlign: 'center', width: '100%' }}>
Plus d'infos sur mon-entreprise.fr
</h3>
<H2>Plus d'infos sur mon-entreprise.fr</H2>
<div className="ui__ full-width box-container">
{!pathname.startsWith(sitePaths.nouveautés) && (
<Link className="ui__ interactive card box" to={sitePaths.nouveautés}>
<div className="ui__ big box-icon">
<Emoji emoji={'✨'} />
</div>
<h3>Les nouveautés</h3>
<H3>Les nouveautés</H3>
<p className="ui__ notice">
Qu'avons-nous mis en production ces derniers mois ?
</p>
@ -42,7 +41,7 @@ export default function MoreInfosOnUs() {
<div className="ui__ big box-icon">
<Emoji emoji="📊" />
</div>
<h3>Les statistiques</h3>
<H3>Les statistiques</H3>
<p className="ui__ notice">Quel est notre impact ?</p>
<div className="ui__ small simple button">Découvrir</div>
</Link>
@ -52,7 +51,7 @@ export default function MoreInfosOnUs() {
<div className="ui__ big box-icon">
<Emoji emoji="💶" />
</div>
<h3>Le budget</h3>
<H3>Le budget</H3>
<p className="ui__ notice">
Quelles sont nos ressources et comment sont-elles employées ?
</p>
@ -79,7 +78,7 @@ export default function MoreInfosOnUs() {
</g>
</svg>
</div>
<h3>Le code source</h3>
<H3>Le code source</H3>
<p className="ui__ notice">
Nos travaux sont ouverts et libres de droit, ça se passe sur GitHub
</p>

3
mon-entreprise/source/components/PageHeader.tsx
View File

@ -1,3 +1,4 @@
import { H1 } from 'DesignSystem/typography/heading'
import { ReactNode } from 'react'
export default function PageHeader({
@ -12,7 +13,7 @@ export default function PageHeader({
return (
<header css="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; ">
<div>
{titre && <h1>{titre}</h1>}
{titre && <H1>{titre}</H1>}
{children}
</div>

17
mon-entreprise/source/components/PaySlip.tsx
View File

@ -1,6 +1,7 @@
import Value from 'Components/EngineValue'
import RuleLink from 'Components/RuleLink'
import { EngineContext, useEngine } from 'Components/utils/EngineContext'
import { H4, H5 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { ASTNode, formatValue, ParsedRules, reduceAST } from 'publicodes'
import { RuleNode } from 'publicodes/dist/types/rule'
@ -113,25 +114,25 @@ export default function PaySlip() {
<SalaireBrutSection />
{/* Section cotisations */}
<div className="payslip__cotisationsSection">
<h4>
<H4>
<Trans>Cotisations sociales</Trans>
</h4>
<h4>
</H4>
<H4>
<Trans>Part employeur</Trans>
</h4>
<h4>
</H4>
<H4>
<Trans>Part salarié</Trans>
</h4>
</H4>
{cotisationsBySection.map(([sectionDottedName, cotisations]) => {
const section = parsedRules[sectionDottedName]
return (
<Fragment key={section.dottedName}>
<h5 className="payslip__cotisationTitle">
<H5 className="payslip__cotisationTitle">
{section.title}{' '}
<em className="ui__ print-display-none">
<ExplicableRule dottedName={section.dottedName} />
</em>
</h5>
</H5>
{cotisations.map((cotisation) => (
<Cotisation key={cotisation} dottedName={cotisation} />
))}

9
mon-entreprise/source/components/PaySlipSections.tsx
View File

@ -1,5 +1,6 @@
import Value, { Condition, ValueProps } from 'Components/EngineValue'
import RuleLink from 'Components/RuleLink'
import { H4 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { isNotApplicable, isNotYetDefined } from 'publicodes'
import { Trans, useTranslation } from 'react-i18next'
@ -8,9 +9,9 @@ import { useEngine } from './utils/EngineContext'
export const SalaireBrutSection = () => {
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<H4 className="payslip__salaryTitle">
<Trans>Salaire</Trans>
</h4>
</H4>
<Line rule="contrat salarié . rémunération . brut de base" />
<Line rule="contrat salarié . rémunération . avantages en nature . montant" />
<Line rule="contrat salarié . activité partielle . retrait absence" />
@ -31,9 +32,9 @@ export const SalaireNetSection = () => {
const { t } = useTranslation()
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<H4 className="payslip__salaryTitle">
<Trans>Salaire net</Trans>
</h4>
</H4>
<Line rule="contrat salarié . rémunération . net imposable" />
<Condition
expression={{

77
mon-entreprise/source/components/SchemeComparaison.tsx
View File

@ -7,6 +7,7 @@ import classnames from 'classnames'
import Conversation from 'Components/conversation/Conversation'
import Value from 'Components/EngineValue'
import InfoBulle from 'Components/ui/InfoBulle'
import { H2, H3 } from 'DesignSystem/typography/heading'
import revenusSVG from 'Images/revenus.svg'
import { useCallback, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
@ -85,15 +86,15 @@ export default function SchemeComparaison({
hideAssimiléSalarié,
})}
>
<h2 className="AS">
<H2 className="AS">
<Emoji emoji="☂" /> <Trans>Assimilé salarié</Trans>
<small>
<Trans i18nKey="comparaisonRégimes.AS.tagline">
Le régime tout compris
</Trans>
</small>
</h2>
<h2 className="indep">
</H2>
<H2 className="indep">
<Emoji emoji="👩‍🔧" />{' '}
{hideAssimiléSalarié ? (
<Trans>Entreprise Individuelle</Trans>
@ -105,21 +106,21 @@ export default function SchemeComparaison({
La protection sociale à la carte
</Trans>
</small>
</h2>
<h2 className="auto">
</H2>
<H2 className="auto">
<Emoji emoji="🚶‍♂️" /> <Trans>Auto-entrepreneur</Trans>
<small>
<Trans i18nKey="comparaisonRégimes.auto.tagline">
Pour commencer sans risques
</Trans>
</small>
</h2>
</H2>
<h3 className="legend">
<H3 className="legend">
<Trans i18nKey="comparaisonRégimes.status.legend">
Statuts juridiques possibles
</Trans>
</h3>
</H3>
<div className="AS">
<div>
<Trans i18nKey="comparaisonRégimes.status.AS">
@ -147,7 +148,7 @@ export default function SchemeComparaison({
</div>
<Trans i18nKey="comparaisonRégimes.AT">
<h3 className="legend">Couverture accidents du travail</h3>
<H3 className="legend">Couverture accidents du travail</H3>
</Trans>
<div className="AS">
<Trans>
@ -158,29 +159,29 @@ export default function SchemeComparaison({
<Trans>Non</Trans>
</div>
<Trans i18nKey="comparaisonRégimes.assuranceMaladie">
<h3 className="legend">
<H3 className="legend">
Assurance maladie{' '}
<small>(médicaments, soins, hospitalisations)</small>
</h3>
</H3>
<div className="AS-indep-et-auto">Identique pour tous</div>
</Trans>
<Trans i18nKey="comparaisonRégimes.mutuelle">
<h3 className="legend">
<H3 className="legend">
Mutuelle santé
<small />
</h3>
</H3>
<div className="AS">Obligatoire</div>
<div className="indep-et-auto">Fortement conseillée</div>
</Trans>
<Trans i18nKey="comparaisonRégimes.indemnités">
<h3 className="legend">Indemnités journalières</h3>
<H3 className="legend">Indemnités journalières</H3>
</Trans>
<div className="green AS">++</div>
<div className="green indep">++</div>
<div className="green auto">+</div>
<Trans i18nKey="comparaisonRégimes.retraite">
<h3 className="legend">Retraite</h3>
<H3 className="legend">Retraite</H3>
</Trans>
<div className="green AS">+++</div>
<div className="green indep">++</div>
@ -189,7 +190,7 @@ export default function SchemeComparaison({
{showMore ? (
<>
<Trans i18nKey="comparaisonRégimes.ACRE">
<h3 className="legend">ACRE</h3>
<H3 className="legend">ACRE</H3>
<div className="AS-et-indep">
1 an <small>(automatique et inconditionnelle)</small>
</div>
@ -199,7 +200,7 @@ export default function SchemeComparaison({
</div>
</Trans>
<Trans i18nKey="comparaisonRégimes.déduction">
<h3 className="legend">Déduction des charges</h3>
<H3 className="legend">Déduction des charges</H3>
<div className="AS-et-indep">
Oui <small>(régime fiscal du réel)</small>
</div>
@ -213,7 +214,7 @@ export default function SchemeComparaison({
</Trans>
<Trans i18nKey="comparaisonRégimes.cotisations">
<h3 className="legend">Paiement des cotisations</h3>
<H3 className="legend">Paiement des cotisations</H3>
<div className="AS">Mensuel</div>
<div className="indep">
Provision mensuelle ou trimestrielle
@ -224,9 +225,9 @@ export default function SchemeComparaison({
<div className="auto">Mensuel ou trimestriel</div>
</Trans>
<Trans i18nKey="comparaisonRégimes.complémentaireDeductible">
<h3 className="legend">
<H3 className="legend">
Contrats prévoyance et retraite facultatives déductibles
</h3>
</H3>
<div className="AS">
Oui <small>(sous certaines conditions)</small>
</div>
@ -238,7 +239,7 @@ export default function SchemeComparaison({
<Trans>Non</Trans>
</div>
<Trans i18nKey="comparaisonRégimes.cotisationMinimale">
<h3 className="legend">Paiement de cotisations minimales</h3>
<H3 className="legend">Paiement de cotisations minimales</H3>
</Trans>
<div className="AS">
<Trans>Non</Trans>
@ -250,9 +251,9 @@ export default function SchemeComparaison({
<Trans>Non</Trans>
</div>
<Trans i18nKey="comparaisonRégimes.seuil">
<h3 className="legend">
<H3 className="legend">
Revenu minimum pour l'ouverture des droits aux prestations
</h3>
</H3>
<div className="AS">Oui</div>
<div className="indep">
Non <small>(cotisations minimales obligatoires)</small>
@ -261,7 +262,7 @@ export default function SchemeComparaison({
</Trans>
{!hideAutoEntrepreneur && (
<Trans i18nKey="comparaisonRégimes.plafondCA">
<h3 className="legend">Plafond de chiffre d'affaires</h3>
<H3 className="legend">Plafond de chiffre d'affaires</H3>
<div className="AS-et-indep">
<Trans>Non</Trans>
</div>
@ -275,9 +276,9 @@ export default function SchemeComparaison({
</Trans>
)}
<Trans i18nKey="comparaisonRégimes.comptabilité">
<h3 className="legend">
<H3 className="legend">
Gestion comptable, sociale, juridique...
</h3>
</H3>
<div className="AS-et-indep">
Accompagnement fortement conseillé
<small>
@ -307,9 +308,9 @@ export default function SchemeComparaison({
{!conversationStarted ? (
<>
<Trans i18nKey="comparaisonRégimes.simulationText">
<h3>
<H3>
Comparer mes revenus, pension de retraite et indemnité maladie
</h3>
</H3>
<img src={revenusSVG} css="height: 8rem" />
<button
className="ui__ cta plain button"
@ -374,9 +375,9 @@ export default function SchemeComparaison({
{displayResult && (
<>
<Trans i18nKey="comparaisonRégimes.revenuNetAvantImpot">
<h3 className="legend">
<H3 className="legend">
Revenu net de cotisations <small>(avant impôts)</small>
</h3>
</H3>
</Trans>
<div className="AS">
<Value
@ -409,12 +410,12 @@ export default function SchemeComparaison({
</>
</div>
<h3 className="legend">
<H3 className="legend">
<Trans i18nKey="comparaisonRégimes.retraiteEstimation.legend">
<span>Pension de retraite</span>
<small>(avant impôts)</small>
</Trans>
</h3>
</H3>
<div className="AS">
<Value
linkToRule={false}
@ -464,9 +465,9 @@ export default function SchemeComparaison({
)}
</div>
<Trans i18nKey="comparaisonRégimes.trimestreValidés">
<h3 className="legend">
<H3 className="legend">
Nombre de trimestres validés <small>(pour la retraite)</small>
</h3>
</H3>
</Trans>
<div className="AS">
<Value
@ -500,9 +501,9 @@ export default function SchemeComparaison({
)}
</div>
<Trans i18nKey="comparaisonRégimes.indemnités">
<h3 className="legend">
<H3 className="legend">
Indemnités journalières <small>(en cas d'arrêt maladie)</small>
</h3>
</H3>
</Trans>
<div className="AS">
<span>
@ -554,11 +555,11 @@ export default function SchemeComparaison({
</div>
<div className="ui__ container">
<br />
<h3>
<H3>
<Trans i18nKey="comparaisonRégimes.titreSelection">
Créer mon entreprise en tant que :
</Trans>
</h3>
</H3>
<div className="ui__ answer-group">
{!hideAssimiléSalarié && (
<button

5
mon-entreprise/source/components/SearchButton.tsx
View File

@ -1,3 +1,4 @@
import { H1 } from 'DesignSystem/typography/heading'
import { useEffect, useRef, useState } from 'react'
import { Trans } from 'react-i18next'
import { useLocation } from 'react-router'
@ -51,9 +52,9 @@ export default function SearchButton() {
<>
{visible && (
<Overlay onClose={close}>
<h1>
<H1>
<Trans>Que cherchez-vous ?</Trans>
</h1>
</H1>
<SearchRulesAndSimulators />
</Overlay>
)}

3
mon-entreprise/source/components/ShareSimulationBanner.tsx
View File

@ -1,3 +1,4 @@
import { H3 } from 'DesignSystem/typography/heading'
import React, { useContext, useEffect, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -56,7 +57,7 @@ export default function ShareOrSaveSimulationBanner() {
>
&times;
</button>
<h3>{t('shareSimulation.modal.title', 'Votre lien de partage')} </h3>
<H3>{t('shareSimulation.modal.title', 'Votre lien de partage')} </H3>
<p className="ui__ notice">
<Trans key="shareSimulation.modal.notice">
Voici le lien que vous pouvez envoyer pour accéder à votre

5
mon-entreprise/source/components/Simulation.tsx
View File

@ -6,6 +6,7 @@ import ShareOrSaveSimulationBanner from 'Components/ShareSimulationBanner'
import TargetSelection from 'Components/TargetSelection'
import Progress from 'Components/ui/Progress'
import { useSimulationProgress } from 'Components/utils/useNextQuestion'
import { H2 } from 'DesignSystem/typography/heading'
import React from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -115,7 +116,7 @@ export function Questions({
`}
>
{progress < 1 && (
<h2
<H2
css={`
font-family: 'roboto';
font-weight: normal;
@ -129,7 +130,7 @@ export function Questions({
Améliorez votre simulation en répondant aux questions
</Trans>
</small>
</h2>
</H2>
)}
<SeeAnswersButton />
</div>

5
mon-entreprise/source/components/TargetSelection.tsx
View File

@ -10,6 +10,7 @@ import {
useInversionFail,
} from 'Components/utils/EngineContext'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H2 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { Names } from 'modele-social/dist/names'
import { EvaluatedNode, formatValue, reduceAST, RuleNode } from 'publicodes'
@ -47,9 +48,9 @@ export default function TargetSelection({ showPeriodSwitch = true }) {
<div style={{ display: 'flex', alignItems: 'end' }}>
<div style={{ flex: 1 }}>
{nom && (
<h2 style={{ marginBottom: 0 }}>
<H2>
<Emoji emoji={icône} /> <Trans>{nom}</Trans>
</h2>
</H2>
)}
</div>
{index === 0 && showPeriodSwitch && <PeriodSwitch />}

7
mon-entreprise/source/components/conversation/Aide.tsx
View File

@ -8,6 +8,7 @@ import { References } from 'publicodes-react'
import { Trans } from 'react-i18next'
import './Aide.css'
import { EngineContext } from 'Components/utils/EngineContext'
import { H2, H3 } from 'DesignSystem/typography/heading'
export default function Aide() {
const explained = useSelector((state: RootState) => state.explainedVariable)
@ -29,13 +30,13 @@ export default function Aide() {
padding: 0.6rem;
`}
>
<h2>{rule.title}</h2>
<H2>{rule.title}</H2>
<Markdown source={text} />
{refs && (
<>
<h3>
<H3>
<Trans>En savoir plus</Trans>
</h3>
</H3>
<References refs={refs} />
</>
)}

9
mon-entreprise/source/components/conversation/AnswerList.tsx
View File

@ -9,6 +9,7 @@ import { DottedName } from 'modele-social'
import { situationSelector } from 'Selectors/simulationSelectors'
import './AnswerList.css'
import Emoji from 'Components/utils/Emoji'
import { H2 } from 'DesignSystem/typography/heading'
type AnswerListProps = {
onClose: () => void
@ -29,7 +30,7 @@ export default function AnswerList({ onClose }: AnswerListProps) {
<Overlay onClose={onClose} className="answer-list">
{!!answeredQuestions.length && (
<>
<h2>
<H2>
<Emoji emoji="📋 " />
<Trans>Mes réponses</Trans>
<small css="margin-left: 2em; img {font-size: .8em}">
@ -44,16 +45,16 @@ export default function AnswerList({ onClose }: AnswerListProps) {
<Trans>Tout effacer</Trans>
</button>
</small>
</h2>
</H2>
<StepsTable {...{ rules: answeredQuestions, onClose }} />
</>
)}
{!!nextSteps.length && (
<>
<h2>
<H2>
<Emoji emoji="🔮 " />
<Trans>Prochaines questions</Trans>
</h2>
</H2>
<StepsTable {...{ rules: nextSteps, onClose }} />
</>
)}

9
mon-entreprise/source/components/conversation/Conversation.tsx
View File

@ -6,6 +6,7 @@ import { FadeIn } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { EngineContext } from 'Components/utils/EngineContext'
import { useNextQuestions } from 'Components/utils/useNextQuestion'
import { H3 } from 'DesignSystem/typography/heading'
import { PublicodesExpression } from 'publicodes'
import React, { useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
@ -65,11 +66,11 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
<div style={{ outline: 'none' }} onKeyDown={handleKeyDown}>
<FadeIn>
<div className="step">
<h3>
<H3>
{engine.getRule(currentQuestion).rawNode.question}
&nbsp;
<ExplicableRule dottedName={currentQuestion} />
</h3>
</H3>
<fieldset>
<RuleInput
@ -118,12 +119,12 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
) : (
<div style={{ textAlign: 'center' }}>
<TrackPage name="simulation terminée" />
<h3>
<H3>
<Emoji emoji="🌟" />{' '}
<Trans i18nKey="simulation-end.title">
Vous avez complété cette simulation
</Trans>
</h3>
</H3>
<p>
{customEndMessages ? (
customEndMessages

7
mon-entreprise/source/components/conversation/Question.tsx
View File

@ -2,6 +2,7 @@ import classnames from 'classnames'
import { useDebounce } from 'Components/utils'
import Emoji from 'Components/utils/Emoji'
import { Markdown } from 'Components/utils/markdown'
import { H2, H3 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { EvaluatedNode, Rule, RuleNode, serializeEvaluation } from 'publicodes'
import { References } from 'publicodes-react'
@ -204,13 +205,13 @@ export const RadioLabel = (props: RadioLabelProps) => (
<RadioLabelContent {...props} />
{props.description && (
<Explicable>
<h2>{props.label}</h2>
<H2>{props.label}</H2>
<Markdown source={props.description} />
{props.références && (
<>
<h3>
<H3>
<Trans>En savoir plus</Trans>
</h3>
</H3>
<References refs={props.références} />
</>
)}

16
mon-entreprise/source/components/layout/Footer/Privacy.tsx
View File

@ -1,4 +1,6 @@
import Overlay from 'Components/Overlay'
import { H1 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
import { useCallback, useContext, useState } from 'react'
import { Trans } from 'react-i18next'
import { TrackingContext, TrackPage } from '../../../ATInternetTracking'
@ -49,8 +51,8 @@ function PrivacyContent() {
<>
<Trans i18nKey="privacyContent.texte">
<TrackPage chapter1="informations" name={'donnees_personnelles'} />
<h1>Données personnelles</h1>
<p>
<H1>Données personnelles</H1>
<Body>
Nous recueillons des statistiques anonymes sur l'utilisation du site,
que nous utilisons dans le seul but d'améliorer le service,
conformément aux{' '}
@ -59,12 +61,12 @@ function PrivacyContent() {
</a>{' '}
et au règlement RGPD. Ce sont les seules données qui quittent votre
navigateur.
</p>
<p>
</Body>
<Body>
Vous pouvez vous soustraire de cette mesure d'utilisation du site
ci-dessous :
</p>
<p>
</Body>
<Body>
<label>
<input
type="checkbox"
@ -77,7 +79,7 @@ function PrivacyContent() {
Je souhaite ne pas envoyer de données anonymes sur mon utilisation
du site à des fins de mesures d'audience
</label>
</p>
</Body>
</Trans>
{valueChanged && (
<small className="ui__ label ">

5
mon-entreprise/source/components/search/RulesInfiniteHits.tsx
View File

@ -8,6 +8,7 @@ import { Names } from '../../../../modele-social/dist/names'
import RuleLink from '../RuleLink'
import { Hit as AlgoliaHit } from 'react-instantsearch-core'
import { H2 } from 'DesignSystem/typography/heading'
type Hit = AlgoliaHit<{ objectID: Names; namespace?: string }>
@ -30,9 +31,9 @@ const HideableTitle = connectStats(({ nbHits }) => {
return nbHits === 0 ? (
<></>
) : (
<h2>
<H2>
<Trans>Règles de calculs</Trans>
</h2>
</H2>
)
})

5
mon-entreprise/source/components/search/SearchRules.tsx
View File

@ -6,6 +6,7 @@ import algoliasearch from 'algoliasearch/lite'
import { Trans, useTranslation } from 'react-i18next'
import { InstantSearch, SearchBox } from 'react-instantsearch-dom'
import { RulesInfiniteHits } from './RulesInfiniteHits'
import { H2 } from 'DesignSystem/typography/heading'
const ALGOLIA_APP_ID = process.env.ALGOLIA_APP_ID || ''
const ALGOLIA_SEARCH_KEY = process.env.ALGOLIA_SEARCH_KEY || ''
@ -27,9 +28,9 @@ export default function SearchRules() {
placeholder: t('Cherchez par mot-clef ou acronyme...'),
}}
/>
<h2>
<H2>
<Trans>Règles de calculs</Trans>
</h2>
</H2>
<RulesInfiniteHits />
</InstantSearch>
)

5
mon-entreprise/source/components/search/SimulatorHits.tsx
View File

@ -1,5 +1,6 @@
import Emoji from 'Components/utils/Emoji'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H2 } from 'DesignSystem/typography/heading'
import { path } from 'ramda'
import { useContext } from 'react'
import { Trans } from 'react-i18next'
@ -39,9 +40,9 @@ export const SimulatorHits = connectHits(({ hits }: SimulatorHitsProps) => {
return (
<>
{hits.length > 0 && (
<h2>
<H2>
<Trans>Simulateurs</Trans>
</h2>
</H2>
)}
<div className="ais-Hits-list">
{hits.map((hit) => (

3
mon-entreprise/source/components/simulationExplanation/IndépendantCotisationsForfaitaires.tsx
View File

@ -3,6 +3,7 @@ import { FromBottom } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { useEngine } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
import { H2 } from 'DesignSystem/typography/heading'
import { Trans } from 'react-i18next'
export default function CotisationsForfaitaires() {
@ -12,7 +13,7 @@ export default function CotisationsForfaitaires() {
return (
<FromBottom>
<div className="ui__ lighter-bg content card">
<h2>{rule.title}</h2>
<H2>{rule.title}</H2>
<p className="ui__ lead">
<Trans i18nKey="pages.simulateurs.indépendant.cotisations-forfaitaires">
Montant des cotisations forfaitaires :{' '}

3
mon-entreprise/source/components/simulationExplanation/IndépendantCotisationsRégularisation.tsx
View File

@ -2,6 +2,7 @@ import { FromBottom } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { useEngine } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
import { H2 } from 'DesignSystem/typography/heading'
import { Trans } from 'react-i18next'
export default function CotisationsRégularisation() {
@ -17,7 +18,7 @@ export default function CotisationsRégularisation() {
padding-top: 0.1rem;
`}
>
<h2>{rule.title}</h2>
<H2>{rule.title}</H2>
<div className="ui__ notice">
<Markdown source={rule.rawNode.description} />
</div>

5
mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx
View File

@ -9,6 +9,7 @@ import RuleLink from 'Components/RuleLink'
import StackedBarChart from 'Components/StackedBarChart'
import { ThemeColorsContext } from 'Components/utils/colors'
import { useEngine } from 'Components/utils/EngineContext'
import { H2 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { max } from 'ramda'
import { useContext } from 'react'
@ -36,7 +37,7 @@ export default function IndépendantExplanation() {
</section>
<Condition expression="dirigeant . rémunération . nette après impôt > 0 €/an">
<section>
<h2>Répartition du revenu</h2>
<H2>Répartition du revenu</H2>
<StackedBarChart
data={[
{
@ -166,7 +167,7 @@ function DroitsRetraite() {
}
return (
<Trans i18nKey="pages.simulateurs.indépendant.retraite-droits-acquis">
<h2>Retraite : droits acquis sur l'année 2021</h2>
<H2>Retraite : droits acquis sur l'année 2021</H2>
<ul>
<li>
Retraite de base :{' '}

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

@ -12,17 +12,18 @@ import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { targetUnitSelector } from 'Selectors/simulationSelectors'
import styled from 'styled-components'
import { H2, H3 } from 'DesignSystem/typography/heading'
export default function InstitutionsPartenaires() {
const unit = useSelector(targetUnitSelector)
return (
<section>
<FromBottom>
<h2>
<H2>
<Trans i18nKey="simulateurs.explanation.institutions.titre">
Vos institutions partenaires
</Trans>
</h2>
</H2>
<InstitutionsTable>
<Condition expression="entreprise . activité . libérale réglementée = oui">
<CotisationsUrssaf rule="dirigeant . indépendant . PL . cotisations Urssaf" />
@ -193,7 +194,7 @@ export function InstitutionsPartenairesArtisteAuteur() {
).rawNode
return (
<section>
<h3>Vos cotisations</h3>
<H3>Vos cotisations</H3>
<InstitutionsTable>
<CotisationsUrssaf
rule="artiste-auteur . cotisations"
@ -231,11 +232,11 @@ export function InstitutionsPartenairesAutoEntrepreneur() {
return (
<section>
<FromBottom>
<h2>
<H2>
<Trans i18nKey="simulateurs.explanation.institutions.titre">
Vos institutions partenaires
</Trans>
</h2>
</H2>
<InstitutionsTable>
<CotisationsUrssaf rule="dirigeant . auto-entrepreneur . cotisations et contributions" />
<ImpôtsDGFIP />

13
mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx
View File

@ -5,6 +5,7 @@ import { FromTop } from 'Components/ui/animate'
import { ThemeColorsContext } from 'Components/utils/colors'
import Emoji from 'Components/utils/Emoji'
import { useInversionFail } from 'Components/utils/EngineContext'
import { H2 } from 'DesignSystem/typography/heading'
import { useContext, useRef } from 'react'
import { Trans, useTranslation } from 'react-i18next'
@ -28,9 +29,9 @@ export default function SalaryExplanation() {
<DistributionSection />
<section ref={payslipRef}>
<h2>
<H2>
<Trans>Fiche de paie</Trans>
</h2>
</H2>
<PaySlip />
<p className="ui__ notice">
<Trans i18nKey="payslip.notice">
@ -72,7 +73,7 @@ function RevenueRepartitionSection(props: { onSeePayslip: () => void }) {
align-items: baseline;
`}
>
<h2
<H2
css={`
flex: 1;
`}
@ -80,7 +81,7 @@ function RevenueRepartitionSection(props: { onSeePayslip: () => void }) {
<Trans i18nKey="payslip.repartition">
Répartition du total chargé
</Trans>
</h2>
</H2>
<button
className="ui__ small simple button print-display-none"
onClick={props.onSeePayslip}
@ -116,9 +117,9 @@ export const DistributionSection = ({
children?: React.ReactNode
}) => (
<section>
<h2>
<H2>
<Trans>À quoi servent mes cotisations ?</Trans>
</h2>
</H2>
{children}
<p className="ui__ notice">
<Trans>

54
mon-entreprise/source/components/ui/Typography.css
View File

@ -1,59 +1,25 @@
html {
transition: none !important;
}
@media print {
html {
line-height: 1.5em;
}
}
@media screen {
html {
line-height: 1.7em;
}
}
@media screen and (max-width: 500px) {
html {
font-size: 0.9em;
}
}
@media screen and (min-width: 500px) and (max-width: 1920px) {
html {
font-size: 1.1em;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 1.16em;
}
}
button {
font-weight: normal;
}
p,
ul {
margin: 0 0 0.6rem;
}
p.ui__.lead {
font-size: 120%;
line-height: 2rem;
color: var(--darkColor);
}
ul {
list-style: '› ';
padding-left: 0.8rem;
}
ol {
margin: 0;
padding-left: 1.1rem;
}
li {
padding: 0.2em 0;
}
a {
border: none;
font-size: inherit;
@ -80,15 +46,3 @@ b {
textarea {
font-family: inherit;
}
small,
.ui__.notice {
color: rgba(0, 0, 0, 0.6);
color: var(--lighterTextColor);
font-size: 85%;
line-height: 1.5rem;
}
small {
display: inline-block;
}

2
mon-entreprise/source/components/utils/markdown.tsx
View File

@ -1,3 +1,4 @@
import Headings from 'DesignSystem/typography/heading'
import React, { useContext, useEffect } from 'react'
import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown'
import { useLocation } from 'react-router-dom'
@ -206,6 +207,7 @@ type HeadingProps = {
} & React.ComponentProps<'h1'>
function Heading({ level, children, ...otherProps }: HeadingProps) {
// FIXME update to design system
return React.createElement(`h${level}`, otherProps, children)
}

11
mon-entreprise/source/design-system/global-style.ts
View File

@ -82,7 +82,18 @@ export const GlobalStyle = createGlobalStyle`
font-display: swap;
}
html {
transition: none !important;
}
@media print {
html {
line-height: 1.5em;
}
}
body {
font-size: 16px;
}
`

15
mon-entreprise/source/pages/Accessibilité.tsx
View File

@ -1,10 +1,11 @@
import { H1, H2, H3 } from 'DesignSystem/typography/heading'
import { Trans } from 'react-i18next'
import { TrackPage } from '../ATInternetTracking'
export default function Accessibilité() {
return (
<Trans i18nKey="pages.accessibilité">
<h1>Accessibilité</h1>
<H1>Accessibilité</H1>
<TrackPage chapter1="informations" name="accessibilite" />
<p>
@ -17,7 +18,7 @@ export default function Accessibilité() {
sur le site conformément à la réglementation. Cette page est obligatoire
pour être conforme au RGAA 4.0.
</p>
<h2>Qu’est-ce que l’accessibilité numérique&nbsp;?</h2>
<H2>Qu’est-ce que l’accessibilité numérique&nbsp;?</H2>
<p>
Un site web accessible est un site qui permet à tous les internautes
d’accéder à ses contenus sans difficulté, y compris aux personnes qui
@ -39,7 +40,7 @@ export default function Accessibilité() {
écran tactile.
</li>
</ul>
<h2>Déclaration d’accessibilité</h2>
<H2>Déclaration d’accessibilité</H2>
<p>
L'Acoss s’engage à rendre ses sites internet accessibles conformément à
l’article 47 de la loi n° 2005-102 du 11 février 2005.
@ -59,7 +60,7 @@ export default function Accessibilité() {
Cette déclaration d’accessibilité s’applique à{' '}
<a href="https://mon-entreprise.fr">https://mon-entreprise.fr</a>.
</p>
<h3>État de conformité</h3>
<H3>État de conformité</H3>
<p>
<a href="https://mon-entreprise.fr">https://mon-entreprise.fr</a> n’est
actuellement pas en conformité avec le{' '}
@ -73,7 +74,7 @@ export default function Accessibilité() {
. L’audit de conformité sera prochainement planifié. Les corrections
seront prises en compte suite à l’audit.
</p>
<h3>Droit à la compensation</h3>
<H3>Droit à la compensation</H3>
<p>
Dans l’attente d’une mise en conformité totale, vous pouvez obtenir une
version accessible des documents ou des informations qui y seraient
@ -85,7 +86,7 @@ export default function Accessibilité() {
souhaiteriez obtenir. Les informations demandées vous seront transmises
dans les meilleurs délais.
</p>
<h3>Amélioration et contact</h3>
<H3>Amélioration et contact</H3>
<p>
Vous pouvez nous aider à améliorer l’accessibilité du site en nous
signalant les problèmes éventuels que vous rencontrez. Pour ce faire,
@ -95,7 +96,7 @@ export default function Accessibilité() {
</a>
.
</p>
<h3>Défenseur des droits</h3>
<H3>Défenseur des droits</H3>
<p>Cette procédure est à utiliser dans le cas suivant.</p>
<p>
Vous avez signalé au responsable du site internet un défaut

7
mon-entreprise/source/pages/Budget/Budget.tsx
View File

@ -2,6 +2,7 @@ import MoreInfosOnUs from 'Components/MoreInfosOnUs'
import Emoji from 'Components/utils/Emoji'
import { Markdown } from 'Components/utils/markdown'
import { ScrollToTop } from 'Components/utils/Scroll'
import { H1, H2 } from 'DesignSystem/typography/heading'
import { formatValue } from 'publicodes'
import { sum, uniq } from 'ramda'
import { useState } from 'react'
@ -46,9 +47,9 @@ export default function Budget() {
<title>Le budget de mon-entreprise.fr</title>
</Helmet>
<ScrollToTop />
<h1>
<H1>
Budget <Emoji emoji="💶" />
</h1>
</H1>
<Markdown source={intro} />
<label>
<Emoji emoji="📅" /> Année{' '}
@ -63,7 +64,7 @@ export default function Budget() {
))}
</select>
</label>
<h2>Budget consommé</h2>
<H2>Budget consommé</H2>
<Markdown source={ressources[selectedYear]} />
{selectedYear !== '2019' && (
<>

39
mon-entreprise/source/pages/Créer/AfterRegistration.tsx
View File

@ -1,6 +1,8 @@
import { FromBottom } from 'Components/ui/animate'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H2 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -31,10 +33,10 @@ export default function AfterRegistration() {
← <Trans>Retour à la création</Trans>
</NavLink>
</div>
<h1>
<H1>
<Trans i18nKey="après.titre">Après la création</Trans>
</h1>
<p>
</H1>
<Body>
<Trans i18nKey="après.intro">
Une fois votre{' '}
{{
@ -44,11 +46,11 @@ export default function AfterRegistration() {
}}{' '}
créée, vous recevez les informations suivantes :
</Trans>
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="après.siret.titre">Le numéro SIRET</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="après.siret.description">
Le numéro SIREN <strong>est l'identifiant de votre entreprise</strong>{' '}
tandis que le numéro SIRET identifie chaque établissement de la même
@ -61,11 +63,11 @@ export default function AfterRegistration() {
alt="SIRET and SIREN number"
style={{ maxWidth: '100%' }}
/>
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="après.ape.titre">Le code APE</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="après.ape.description">
Le code APE correspond au <strong>secteur d'activité</strong> de votre
entreprise. Il classifie la branche principale de votre entreprise
@ -93,12 +95,11 @@ export default function AfterRegistration() {
à l'INSEE.
</p>
</Trans>
</p>
<h2>
</Body>
<H2>
<Trans i18nKey="après.kbis.titre">Le Kbis</Trans>
</h2>
<p>
</H2>
<Body>
<Trans i18nKey="après.kbis.description.1">
C'est le document officiel qui atteste de{' '}
<strong>l'existence légale d'une entreprise commerciale</strong>. Le
@ -108,14 +109,14 @@ export default function AfterRegistration() {
Plus d'infos.
</a>
</Trans>
</p>
<p>
</Body>
<Body>
<Trans i18nKey="après.kbis.description.2">
Ce document est généralement demandé lors de la candidature à un appel
d'offre public, de l'ouverture d'un compte bancaire, d'achats
d'équipement professionnel auprès de fournisseurs, etc.
</Trans>
</p>
</Body>
</FromBottom>
)
}

41
mon-entreprise/source/pages/Créer/CreationChecklist.tsx
View File

@ -8,6 +8,7 @@ import { CheckItem, Checklist } from 'Components/ui/Checklist'
import Emoji from 'Components/utils/Emoji'
import Scroll from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H2, H3, H5 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
@ -89,17 +90,17 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
</button>
</div>
<h1>{titre}</h1>
<H1>{titre}</H1>
<p>
<StatutDescription statut={statut} />
</p>
<h2>
<H2>
<Emoji emoji="📋" />{' '}
<Trans i18nKey="entreprise.tâches.titre">
À faire pour créer votre entreprise
</Trans>
</h2>
</H2>
<p className="ui__ notice">
<Trans i18nKey="entreprise.tâches.avancement">
Utilisez cette liste pour suivre votre avancement dans les démarches.
@ -399,12 +400,12 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
}
/>
</Checklist>
<h2>
<H2>
<Emoji emoji="💭" />{' '}
<Trans i18nKey="entreprise.tâches.titre2">
Recommandé avant le début de l'activité
</Trans>
</h2>
</H2>
<Checklist>
{!isAutoentrepreneur && (
@ -454,9 +455,9 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
}
/>
</Checklist>
<h2 className="ui__ h h3">
<H3 as="h2">
<Emoji emoji="🧰" /> <Trans>Ressources utiles</Trans>
</h2>
</H3>
<div className="ui__ box-container">
{isAutoentrepreneur && (
<Link
@ -467,9 +468,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
}}
>
<Trans i18nKey="entreprise.ressources.simu.autoEntrepreneur">
<h3 className="ui__ h h5">
Simulateur de revenus auto-entrepreneur
</h3>
<H5 as="h3">Simulateur de revenus auto-entrepreneur</H5>
<p className="ui__ notice">
Simuler le montant de vos cotisations sociales et de votre impôt
et estimez votre futur revenu net.
@ -486,9 +485,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
}}
>
<Trans i18nKey="entreprise.ressources.simu.indépendant">
<h3 className="ui__ h h5">
Simulateur de cotisations indépendant
</h3>
<H5 as="h3">Simulateur de cotisations indépendant</H5>
<p className="ui__ notice">
Simuler le montant de vos cotisations sociales pour bien
préparer votre business plan.
@ -505,9 +502,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
}}
>
<Trans i18nKey="entreprise.ressources.simu.assimilé">
<h3 className="ui__ h h5">
Simulateur de rémunération pour dirigeant de SASU
</h3>
<H5 as="h3">Simulateur de rémunération pour dirigeant de SASU</H5>
<p className="ui__ notice">
Simuler le montant de vos cotisations sociales pour bien
préparer votre business plan.
@ -520,7 +515,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
to={sitePaths.créer.après}
>
<Trans i18nKey="entreprise.ressources.après">
<h3 className="ui__ h h5">Après la création</h3>
<H5 as="h3">Après la création</H5>
<p className="ui__ notice">
SIREN, SIRET, code APE, KBis. Un petit glossaire des termes que
vous pourrez (éventuellement) rencontrer après la création.
@ -533,7 +528,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
href="https://www.autoentrepreneur.urssaf.fr/portail/files/Guides/Metropole/Presentation_AE.pdf"
target="_blank"
>
<h3 className="ui__ h h5">Guide pratique Urssaf</h3>
<H5 as="h3">Guide pratique Urssaf</H5>
<p className="ui__ notice">
Des conseils pour les auto-entrepreneurs : comment préparer son
projet pour se lancer dans la création et une présentation
@ -550,9 +545,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
className="ui__ interactive card small box lighter-bg"
href="https://www.urssaf.fr/portail/files/live/sites/urssaf/files/documents/Diaporama_TI_statuts_hors_AE.pdf"
>
<h3 className="ui__ h h5">
Guide Urssaf pour les travailleur indépendant
</h3>
<H5 as="h3">Guide Urssaf pour les travailleur indépendant</H5>
<p className="ui__ notice">
Des conseils sur comment préparer son projet pour se lancer dans
la création et une présentation détaillée de votre protection
@ -600,7 +593,7 @@ export function RessourceAutoEntrepreneur() {
href="https://www.autoentrepreneur.urssaf.fr/portail/accueil/une-question/questions-frequentes.html"
target="_blank"
>
<h3 className="ui__ h h5">❓ Questions fréquentes</h3>
<H5 as="h3">❓ Questions fréquentes</H5>
<p className="ui__ notice">
Une liste exhaustive et maintenue à jour de toutes les questions
fréquentes (et moins fréquentes) que l'on est amené à poser en tant
@ -614,9 +607,7 @@ export function RessourceAutoEntrepreneur() {
target="_blank"
href="https://www.impots.gouv.fr/portail/professionnel/je-choisis-le-regime-du-micro-entrepreneur-auto-entrepreneur"
>
<h3 className="ui__ h h5">
📑 Comment déclarer son revenu aux impôts ?
</h3>
<H5 as="h3">📑 Comment déclarer son revenu aux impôts ?</H5>
<p className="ui__ notice">
Les informations officielles de l'administration fiscale concernant
les auto-entrepreneurs et le régime de la micro-entreprise.

5
mon-entreprise/source/pages/Créer/GuideStatut/AutoEntrepreneur.tsx
View File

@ -1,4 +1,5 @@
import SchemeComparaison from 'Components/SchemeComparaison'
import { H2 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../../ATInternetTracking'
@ -18,11 +19,11 @@ export default function Autoentrepreneur() {
)}
/>
</Helmet>
<h2>
<H2>
<Trans i18nKey="autoentrepreneur.titre">
Entreprise individuelle ou auto-entrepreneur
</Trans>
</h2>
</H2>
<Trans i18nKey="autoentrepreneur.description">
<p>
À la différence de l'entreprise individuelle, l'auto-entrepreneur

5
mon-entreprise/source/pages/Créer/GuideStatut/DirectorStatus.tsx
View File

@ -1,4 +1,5 @@
import SchemeComparaison from 'Components/SchemeComparaison'
import { H2 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../../ATInternetTracking'
@ -20,11 +21,11 @@ export default function DefineDirectorStatus() {
)}
/>
</Helmet>
<h2>
<H2>
<Trans i18nKey="statut du dirigeant.titre">
Définir le statut du dirigeant
</Trans>
</h2>
</H2>
<Trans i18nKey="statut du dirigeant.description">
<p>
Ce choix est important car il détermine le régime de sécurité sociale

5
mon-entreprise/source/pages/Créer/GuideStatut/MinorityDirector.tsx
View File

@ -2,6 +2,7 @@ import {
directorIsInAMinority,
useDispatchAndGoToNextQuestion,
} from 'Actions/companyStatusActions'
import { H2 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../../ATInternetTracking'
@ -27,11 +28,11 @@ export default function MinorityDirector() {
)}
/>
</Helmet>
<h2>
<H2>
<Trans i18nKey="gérant minoritaire.titre">
Gérant majoritaire ou minoritaire
</Trans>{' '}
</h2>
</H2>
<Trans i18nKey="gérant minoritaire.description">
<p>
Certaines règles spéciales s'appliquent selon le nombre d'actions

5
mon-entreprise/source/pages/Créer/GuideStatut/NumberOfAssociate.tsx
View File

@ -2,6 +2,7 @@ import {
companyHasMultipleAssociates,
useDispatchAndGoToNextQuestion,
} from 'Actions/companyStatusActions'
import { H2 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../../ATInternetTracking'
@ -27,9 +28,9 @@ export default function NumberOfAssociates() {
)}
/>
</Helmet>
<h2>
<H2>
<Trans i18nKey="associés.titre">Seul ou à plusieurs</Trans>
</h2>
</H2>
<Trans i18nKey="associés.description">
<p>
Une entreprise avec un seul associé est plus simple à créer et gérer.

5
mon-entreprise/source/pages/Créer/GuideStatut/PickLegalStatus.tsx
View File

@ -1,4 +1,5 @@
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H2 } from 'DesignSystem/typography/heading'
import { filter } from 'ramda'
import { useContext } from 'react'
import { Helmet } from 'react-helmet'
@ -99,13 +100,13 @@ export default function SetMainStatus() {
)}
</title>
</Helmet>
<h2>
<H2>
{Object.keys(possibleStatus).every(Boolean) ? (
<Trans>Liste des statuts juridiques</Trans>
) : (
<Trans>Votre forme juridique</Trans>
)}
</h2>
</H2>
<ul>
{Object.keys(filter(Boolean, possibleStatus)).map(

5
mon-entreprise/source/pages/Créer/GuideStatut/SoleProprietorship.tsx
View File

@ -2,6 +2,7 @@ import {
isSoleProprietorship,
useDispatchAndGoToNextQuestion,
} from 'Actions/companyStatusActions'
import { H2 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../../ATInternetTracking'
@ -32,11 +33,11 @@ export default function SoleProprietorship() {
)}
/>
</Helmet>
<h2>
<H2>
<Trans i18nKey="responsabilité.titre">
Entreprise individuelle ou société ?
</Trans>
</h2>
</H2>
<p>
<Trans i18nKey="responsabilité.intro">
Ce choix determine votre degré de responsabilité et votre capacité à

5
mon-entreprise/source/pages/Créer/GuideStatut/index.tsx
View File

@ -1,6 +1,7 @@
import { resetCompanyStatusChoice } from 'Actions/companyStatusActions'
import { FromBottom } from 'Components/ui/animate'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1 } from 'DesignSystem/typography/heading'
import { dropWhile, toPairs } from 'ramda'
import { useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
@ -59,9 +60,9 @@ export default function Créer() {
</NavLink>
</div>
<TrackChapter chapter2="guide" />
<h1>
<H1>
<Trans i18nKey="formeJuridique.titre">Choix du statut juridique</Trans>
</h1>
</H1>
<PreviousAnswers />
<FromBottom key={location.pathname}>
<Switch>

11
mon-entreprise/source/pages/Créer/Home.tsx
View File

@ -1,6 +1,7 @@
import PageHeader from 'Components/PageHeader'
import { FromBottom } from 'Components/ui/animate'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H3, H5 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
@ -57,16 +58,16 @@ export default function Créer() {
</p>
</PageHeader>
<h2 className="ui__ h h3">
<H3 as="h2">
<Trans>Ressources utiles</Trans>
</h2>
</H3>
<div className="ui__ box-container">
<Link
className="ui__ interactive card box lighter-bg"
to={sitePaths.créer.guideStatut.liste}
>
<Trans i18nKey="créer.ressources.listeStatuts">
<h3 className="ui__ h h5">Liste des statuts juridiques</h3>
<H5 as="h3">Liste des statuts juridiques</H5>
<small>
Vous savez déjà quel statut choisir ? Accédez directement à la
liste des démarches associées
@ -81,7 +82,7 @@ export default function Créer() {
}}
>
<Trans i18nKey="créer.ressources.comparaison">
<h3 className="ui__ h h5">Comparateur de régimes</h3>
<H5 as="h3">Comparateur de régimes</H5>
<small>
Indépendant, assimilé-salarié ou auto-entrepreneur ? Calculez les
différences en terme de revenus, cotisations, retraite, etc
@ -94,7 +95,7 @@ export default function Créer() {
to={sitePaths.créer['auto-entrepreneur']}
>
<Trans i18nKey="créer.ressources.autoEntrepreneur">
<h3 className="ui__ h h5">Démarche auto-entrepreneur</h3>
<H5 as="h3">Démarche auto-entrepreneur</H5>
<small>
Vous souhaitez devenir auto-entrepreneur ? Découvrez les étapes
pour bien démarrer votre activité

5
mon-entreprise/source/pages/Dev/IntegrationTest.tsx
View File

@ -1,3 +1,4 @@
import { H2 } from 'DesignSystem/typography/heading'
import { lazy, useState, useRef, useEffect, Suspense, useMemo } from 'react'
import useSimulatorsData from '../Simulateurs/metadata'
const LazyColorPicker = lazy(() => import('./ColorPicker'))
@ -29,14 +30,14 @@ export default function IntegrationTest() {
}, [version])
return (
<>
<h2>Quel module ?</h2>
<H2>Quel module ?</H2>
<select onChange={(event) => setCurrentModule(event.target.value)}>
{integrableModuleNames.map((name) => (
<option key={name}>{name}</option>
))}
</select>
<h2>Quelle couleur ?</h2>
<H2>Quelle couleur ?</H2>
<Suspense fallback={<div>Chargement...</div>}>
<LazyColorPicker color={color} onChange={setColor} />
</Suspense>

16
mon-entreprise/source/pages/Dev/Personas.tsx
View File

@ -1,10 +1,12 @@
import { H1, H2, H3 } from 'DesignSystem/typography/heading'
export default function Personas() {
return (
<>
<h1>Nos personas</h1>
<H1>Nos personas</H1>
<div className="ui__ card" css="margin-bottom: 2rem">
<h2>Jules 38 ans, Marseille</h2>
<H2>Jules 38 ans, Marseille</H2>
<p>
<em>
Après 15 ans dans un salon de coiffure, souhaite devenir coiffeur à
@ -31,7 +33,7 @@ export default function Personas() {
</div>
<div className="ui__ card" css="margin-bottom: 2rem">
<h2>Rania, 33 ans, Saint-Etienne</h2>
<H2>Rania, 33 ans, Saint-Etienne</H2>
<p>
<em>Aimerait créer une startup d’équipement sportif féminin</em>
</p>
@ -55,7 +57,7 @@ export default function Personas() {
</ul>
</div>
<div className="ui__ card" css="margin-bottom: 2rem">
<h2>Paul, 40 ans, Pau</h2>
<H2>Paul, 40 ans, Pau</H2>
<p>
<em>
Directeur d’une agence de voyage en Asie, a besoin d’informations
@ -81,7 +83,7 @@ export default function Personas() {
</ul>
</div>
<div className="ui__ card" css="margin-bottom: 2rem">
<h2>Valérie, 50 ans, Niort / Aidant</h2>
<H2>Valérie, 50 ans, Niort / Aidant</H2>
<p>
<em>
Conseille pôle emploi, accompagne plusieurs bénéficiaires dans la
@ -104,7 +106,7 @@ export default function Personas() {
</ul>
</div>
<h1>Et les usages que nous avons identifiés</h1>
<H1>Et les usages que nous avons identifiés</H1>
<ul>
<li>
<strong>Type d’entreprise :</strong> Airbnb vs Freelance vs Startup &
@ -128,7 +130,7 @@ export default function Personas() {
</li>
</ul>
<h3>Économie collaborative</h3>
<H3>Économie collaborative</H3>
<a href="https://github.com/betagouv/syso/files/3085598/Nouveau.document.2019-04-16.17.16.05.pdf">
Les personas détaillées

3
mon-entreprise/source/pages/Dev/Sitemap.tsx
View File

@ -1,4 +1,5 @@
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { generateSiteMap } from '../../sitePaths'
@ -6,7 +7,7 @@ export default function SiteMap() {
const sitePaths = useContext(SitePathsContext)
return (
<>
<h1>Sitemap</h1>
<H1>Sitemap</H1>
<pre>
{generateSiteMap(sitePaths).map((path) => (
<span key={path}>

10
mon-entreprise/source/pages/Documentation.tsx
View File

@ -13,6 +13,8 @@ import { RootState } from 'Reducers/rootReducer'
import { TrackPage } from '../ATInternetTracking'
import rules, { DottedName } from 'modele-social'
import RuleLink from '../components/RuleLink'
import { H1 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
export default function RulePage() {
const currentSimulation = useSelector(
@ -90,10 +92,10 @@ function DocumentationLanding() {
return (
<>
<TrackPage chapter1="documentation" name="accueil" />
<h1>
<H1>
<Trans i18nKey="page.documentation.title">Documentation</Trans>
</h1>
<p>Explorez toutes les règles de la documentation</p>
</H1>
<Body>Explorez toutes les règles de la documentation</Body>
<SearchRules />
</>
)
@ -103,7 +105,7 @@ function DocumentationRulesList() {
const ruleEntries = Object.keys(rules) as DottedName[]
return (
<>
<h1>Liste des règles</h1>
<H1>Liste des règles</H1>
{ruleEntries.map((name) => (
<RuleLink dottedName={name} key={name}>
{name}

3
mon-entreprise/source/pages/Gérer/AideDéclarationIndépendant/ExplicationResultatFiscal.tsx
View File

@ -1,10 +1,11 @@
import { Explicable } from 'Components/conversation/Explicable'
import { H2 } from 'DesignSystem/typography/heading'
export function ExplicationsResultatFiscal() {
return (
<Explicable>
<>
<h2>Quelles exonérations inclure ?</h2>
<H2>Quelles exonérations inclure ?</H2>
<p>
Pour calculer le montant du résultat fiscal avant déduction des
exonérations et des charges sociales à indiquer dans ce simulateur,

3
mon-entreprise/source/pages/Gérer/AideDéclarationIndépendant/Fields.tsx
View File

@ -4,6 +4,7 @@ import RuleInput from 'Components/conversation/RuleInput'
import { FromTop } from 'Components/ui/animate'
import { EngineContext } from 'Components/utils/EngineContext'
import { useNextQuestions } from 'Components/utils/useNextQuestion'
import { H3 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { RuleNode } from 'publicodes'
import { useCallback, useContext } from 'react'
@ -37,7 +38,7 @@ export function SubSection({
return (
<>
{!!subQuestions.length && title && <h3>{title}</h3>}
{!!subQuestions.length && title && <H3>{title}</H3>}
{subQuestions.map((dottedName) => (
<SimpleField key={dottedName} dottedName={dottedName} />
))}

13
mon-entreprise/source/pages/Gérer/AideDéclarationIndépendant/RésultatSimple.tsx
View File

@ -4,6 +4,7 @@ import { FromTop } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { useEngine } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
import { H2, H3 } from 'DesignSystem/typography/heading'
import { Trans } from 'react-i18next'
export default function ResultatsSimples() {
@ -23,12 +24,12 @@ export default function ResultatsSimples() {
flex-direction: column;
`}
>
<h2>
<H2>
<Emoji emoji="📄" />{' '}
<Trans i18nKey="aide-déclaration-indépendant.results.title">
Montants à reporter dans votre déclaration de revenus
</Trans>
</h2>
</H2>
<p>
L'ancienne Déclaration Sociale des Indépendant (DSI) qui était
précédemment à effectuer sur le site net-entreprises.fr est désormais
@ -65,7 +66,7 @@ export default function ResultatsSimples() {
margin: 1rem 0;
`}
>
<h3>
<H3>
{r.title}
<Condition
expression={{
@ -77,7 +78,7 @@ export default function ResultatsSimples() {
>
<small>{r.rawNode.résumé}</small>
</Condition>
</h3>
</H3>
<p className="ui__ lead" css="margin-bottom: 1rem;">
<strong>
<RuleLink dottedName={r.dottedName}>
@ -107,9 +108,9 @@ export default function ResultatsSimples() {
],
}}
>
<h2>
<H2>
<Emoji emoji="ℹ️" /> Pour votre information{' '}
</h2>
</H2>
<div
css={`
margin: 0 -0.5rem;

13
mon-entreprise/source/pages/Gérer/AideDéclarationIndépendant/RésultatsParFormulaire.tsx
View File

@ -5,6 +5,7 @@ import { FromTop } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { useEngine } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
import { H2, H3 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import { useMemo } from 'react'
import { Trans } from 'react-i18next'
@ -32,12 +33,12 @@ export default function ResultatsParFormulaire() {
flex-direction: column;
`}
>
<h2>
<H2>
<Emoji emoji="📄" />{' '}
<Trans i18nKey="aide-déclaration-indépendant.results.title">
Vos déclarations fiscales
</Trans>
</h2>
</H2>
<p>
Important : les montants affichés ici concernent uniquement le calcul
des cotisations de l'exploitant (et du conjoint collaborateur si
@ -58,9 +59,9 @@ export default function ResultatsParFormulaire() {
<DeclarationForm key={dottedName} dottedName={dottedName} />
))}
<Condition expression="aide déclaration revenu indépendant 2020 . informations résultat par formulaire">
<h3>
<H3>
<Emoji emoji="ℹ️" /> Pour votre information{' '}
</h3>
</H3>
<div className="ui__ box-container">
{informations.map((r) => (
<Condition key={r.dottedName} expression={r.dottedName}>
@ -123,9 +124,9 @@ function DeclarationForm({ dottedName }: { dottedName: DottedName }) {
margin: 1rem 0;
`}
>
<h3>
<H3>
{r.title} <small>{r.rawNode.résumé}</small>
</h3>
</H3>
<ul className="ui__ lead">
{rubriques
.map((dottedName) => engine.getRule(dottedName))

47
mon-entreprise/source/pages/Gérer/AideDéclarationIndépendant/index.tsx
View File

@ -8,6 +8,7 @@ import 'Components/TargetSelection.css'
import { FromTop } from 'Components/ui/animate'
import Warning from 'Components/ui/WarningBlock'
import useSimulationConfig from 'Components/utils/useSimulationConfig'
import { H2, H3 } from 'DesignSystem/typography/heading'
import { useCallback } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
@ -57,15 +58,15 @@ export default function AideDéclarationIndépendant() {
</p>
</PageHeader>
<Warning localStorageKey="aide-déclaration-indépendant.warning">
<h3>Cet outil vous concerne si vous êtes dans le cas suivant :</h3>
<H3>Cet outil vous concerne si vous êtes dans le cas suivant :</H3>
<ul>
<li>
vous cotisez au régime général des travailleurs indépendants
</li>
</ul>
<h3>
<H3>
Il ne vous concerne pas si vous êtes dans un des cas suivants :
</h3>
</H3>
<ul>
<li>
vous exercez une activité libérale relevant d’un régime de
@ -76,7 +77,7 @@ export default function AideDéclarationIndépendant() {
</Warning>
<PreviousSimulationBanner />
<h2>Imposition</h2>
<H2>Imposition</H2>
<p className="ui__ notice">
Ces quelques questions permettent de déterminer le type de déclaration
à remplir, ainsi que les modalités de calcul des cotisations sociales.
@ -94,7 +95,7 @@ export default function AideDéclarationIndépendant() {
<FormBlock>
<Condition expression="aide déclaration revenu indépendant 2020 . comptabilité . engagement">
<Trans i18nKey="aide-déclaration-indépendant.entreprise.titre">
<h2>Entreprise et activité</h2>
<H2>Entreprise et activité</H2>
</Trans>
<div>
{!company && (
@ -128,18 +129,18 @@ export default function AideDéclarationIndépendant() {
<SimpleField dottedName="dirigeant . indépendant . cotisations et contributions . déduction tabac" />
<SimpleField dottedName="dirigeant . indépendant . PL . régime général . taux spécifique retraite complémentaire" />
<h2>
<H2>
<Trans>Situation personnelle</Trans>
</h2>
</H2>
<SimpleField dottedName="situation personnelle . RSA" />
<Condition expression="entreprise . imposition . IR . micro-fiscal = non">
<SubSection dottedName="dirigeant . indépendant . IJSS" />
</Condition>
<SubSection dottedName="dirigeant . indépendant . conjoint collaborateur" />
<h2>
<H2>
<Trans>Exonérations</Trans>
</h2>
</H2>
<SimpleField dottedName="aide déclaration revenu indépendant 2020 . ACRE" />
<SimpleField dottedName="établissement . ZFU" />
<SubSection hideTitle dottedName="entreprise . effectif . seuil" />
@ -150,9 +151,9 @@ export default function AideDéclarationIndépendant() {
{FEATURE_FLAG_RESULTATS_COMPLETS && (
<SubSection dottedName="dirigeant . indépendant . cotisations facultatives" />
)}
<h2>
<H2>
<Trans>International</Trans>
</h2>
</H2>
<SimpleField dottedName="situation personnelle . domiciliation fiscale à l'étranger" />
<Condition expression="entreprise . imposition . IR . micro-fiscal = non">
<SubSection
@ -169,9 +170,9 @@ export default function AideDéclarationIndépendant() {
<SimpleField dottedName="dirigeant . indépendant . conjoint collaborateur" />
<SubSection dottedName="dirigeant . indépendant . cotisations facultatives" />
{/* We can't use a subsection here cause revenu étrangers is not missing when CSG is replaced */}
<h3>
<H3>
<Trans>Revenus étranger</Trans>
</h3>
</H3>
<SimpleField dottedName="dirigeant . indépendant . revenus étrangers" />
<Condition expression="dirigeant . indépendant . revenus étrangers">
<SimpleField dottedName="dirigeant . indépendant . revenus étrangers . montant" />
@ -238,9 +239,9 @@ function ImpositionSection() {
<Condition expression="entreprise . imposition . IR">
<SimpleField dottedName="entreprise . imposition . IR . micro-fiscal" />
<Condition expression="entreprise . imposition . IR . micro-fiscal">
<h2>
<H2>
Quel est votre chiffre d'affaires hors taxes en 2020 ?
</h2>
</H2>
<p className="ui__ notice">
Indiquez le montant hors taxes de votre chiffre d’affaires
ou de vos recettes bruts (avant déduction de l’abattement
@ -252,13 +253,13 @@ function ImpositionSection() {
<SimpleField dottedName="entreprise . chiffre d'affaires . service BNC" />
</Condition>
<Condition expression="entreprise . imposition . IR . micro-fiscal = non">
<h2>
<H2>
Quel est votre résultat fiscal en 2020 ?<br />
<small>
Charges sociales et exonérations fiscales non incluses{' '}
<ExplicationsResultatFiscal />
</small>
</h2>
</H2>
<p className="ui__ notice">
Le résultat fiscal correspond aux produits moins les
charges. Il peut être positif (bénéfice) ou négatif
@ -274,11 +275,11 @@ function ImpositionSection() {
</Condition>
</Condition>
<Condition expression="entreprise . imposition . IS">
<h2>
<H2>
Quel est le montant net de votre rémunération en 2020 ?
<br />
<small>Sans tenir compte des charges sociales</small>
</h2>
</H2>
<BigInput>
<RuleInput
dottedName="dirigeant . rémunération . nette"
@ -306,14 +307,6 @@ const FormBlock = styled.section`
max-width: 500px;
padding: 0;
h3 {
margin-top: 2rem;
}
h2 {
border-top: 1px solid var(--lighterColor);
padding-top: 2rem;
}
select,
input[type='text'] {
font-size: 1.05em;

5
mon-entreprise/source/pages/Gérer/AideOrganismeLocal.tsx
View File

@ -1,4 +1,5 @@
import { FromTop } from 'Components/ui/animate'
import { H2 } from 'DesignSystem/typography/heading'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
@ -34,10 +35,10 @@ export default function AideOrganismeLocal() {
className="ui__ hide-mobile"
css="width: 230px; position: absolute; left: -230px; bottom: 0; padding: 1rem;"
/>
<h2>
<H2>
COVID-19 et auto-entrepreneurs : l'Urssaf Midi-Pyrénées vous
accompagne
</h2>
</H2>
<p>
Assistez au webinar dédié aux auto-entrepreneur pour faire le point
sur vos échéances et les mesures d’accompagnement.

5
mon-entreprise/source/pages/Gérer/DemandeMobilite/EndBlock.tsx
View File

@ -4,6 +4,7 @@ import Checkbox from 'Components/ui/Checkbox'
import { ThemeColorsContext } from 'Components/utils/colors'
import Emoji from 'Components/utils/Emoji'
import { EngineContext, EngineProvider } from 'Components/utils/EngineContext'
import { H2 } from 'DesignSystem/typography/heading'
import { RuleNode } from 'publicodes/dist/types/rule'
import { lazy, Suspense, useContext, useRef, useState } from 'react'
import SignaturePad from 'react-signature-pad-wrapper'
@ -44,7 +45,7 @@ export default function EndBlock({ fields, isMissingValues }: EndBlockProps) {
}
return (
<>
<h2>Déclaration sur l'honneur</h2>
<H2>Déclaration sur l'honneur</H2>
<Checkbox
name="certified"
id="certified"
@ -115,7 +116,7 @@ export default function EndBlock({ fields, isMissingValues }: EndBlockProps) {
</p>
{showDownloadLink && (
<Overlay onClose={() => toggleDownloadLink(false)}>
<h2>Votre demande de mobilité</h2>
<H2>Votre demande de mobilité</H2>
<p>
Afin d’examiner votre situation au regard des règlements
communautaires UE/EEE de Sécurité sociale (CE 883/2004), veuillez

3
mon-entreprise/source/pages/Gérer/DemandeMobilite/index.tsx
View File

@ -7,6 +7,7 @@ import Emoji from 'Components/utils/Emoji'
import { EngineContext, EngineProvider } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
import { usePersistingState } from 'Components/utils/persistState'
import { H3 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import Engine, { UNSAFE_isNotApplicable } from 'publicodes'
import { equals, isEmpty, omit } from 'ramda'
@ -193,7 +194,7 @@ function FormulairePublicodes() {
</label>
{description && (
<Explicable>
<h3>{title}</h3>
<H3>{title}</H3>
<Markdown source={description} />
</Explicable>
)}

44
mon-entreprise/source/pages/Gérer/Embaucher.tsx
View File

@ -4,6 +4,8 @@ import {
} from 'Actions/hiringChecklistAction'
import { FromBottom } from 'Components/ui/animate'
import { CheckItem, Checklist, ChecklistProps } from 'Components/ui/Checklist'
import { H1, H3 } from 'DesignSystem/typography/heading'
import { Body } from 'DesignSystem/typography/paragraphs'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { connect, useSelector } from 'react-redux'
@ -36,16 +38,16 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
)}
/>
</Helmet>
<h1>
<H1>
<Trans i18nKey="embauche.tâches.titre">
Les formalités pour embaucher
</Trans>
</h1>
<p>
</H1>
<Body>
<Trans i18nKey="embauche.tâches.description">
Toutes les étapes nécessaires à l'embauche de votre premier employé.
</Trans>
</p>
</Body>
<Checklist
onInitialization={onChecklistInitialization}
onItemCheck={onItemCheck}
@ -59,7 +61,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<a
className="ui__ button"
href="https://www.service-public.fr/particuliers/vosdroits/N19871"
@ -68,7 +70,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
{' '}
<Trans>Plus d'informations</Trans>
</a>
</p>
</Body>
}
/>
<CheckItem
@ -79,7 +81,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<Trans i18nKey="embauche.tâches.dpae.description">
Ceci peut être fait par le biais du formulaire appelé DPAE, doit
être complété dans les 8 jours avant toute embauche, et peut{' '}
@ -88,7 +90,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</a>
.
</Trans>
</p>
</Body>
}
/>
<CheckItem
@ -99,7 +101,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<Trans i18nKey="embauche.tâches.logiciel de paie.description">
Les fiches de paie et les déclarations peuvent être traitées en
ligne gratuitement par le{' '}
@ -114,7 +116,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
logiciel de paie privé.
</a>
</Trans>
</p>
</Body>
}
/>
<CheckItem
@ -125,7 +127,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<a
href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F1784"
className="ui__ button"
@ -133,7 +135,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
>
<Trans>Plus d'informations</Trans>
</a>
</p>
</Body>
}
/>
<CheckItem
@ -145,7 +147,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<a
href="https://www.espace-entreprise.agirc-arrco.fr/simape/#/donneesDep"
className="ui__ button"
@ -156,7 +158,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
</a>
{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
</p>
</Body>
}
/>
<CheckItem
@ -167,14 +169,14 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<Trans i18nKey="embauche.tâches.complémentaire santé.description">
Vous devez couvrir vos salariés avec l'assurance complémentaire
santé privée de votre choix (aussi appelée "mutuelle"), pour
autant qu'elle offre un ensemble de garanties minimales.
L'employeur doit payer au moins la moitié du forfait.
</Trans>
</p>
</Body>
}
/>
<CheckItem
@ -185,7 +187,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</Trans>
}
explanations={
<p>
<Body>
<Trans i18nKey="embauche.tâches.medecine.description">
N'oubliez pas de planifier un rendez-vous initial pour chaque
nouvelle embauche.{' '}
@ -193,12 +195,12 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
Plus d'infos.
</a>
</Trans>
</p>
</Body>
}
/>
</Checklist>
<Trans i18nKey="embauche.chaque mois">
<h2>Tous les mois</h2>
<H2>Tous les mois</H2>
<ul>
<li>
Utiliser un logiciel de paie pour calculer les cotisations sociales
@ -218,9 +220,9 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</ul>
</Trans>
<h2 className="ui__ h h3">
<H3 as="h2">
<Trans>Ressources utiles</Trans>
</h2>
</H3>
<div className="ui__ box-container">
<SimulatorRessourceCard simulatorId="salarié" />

39
mon-entreprise/source/pages/Gérer/Home.tsx
View File

@ -11,6 +11,7 @@ import { FromBottom } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePaths, SitePathsContext } from 'Components/utils/SitePathsContext'
import { H2, H3, H5 } from 'DesignSystem/typography/heading'
import { useContext, useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
@ -102,7 +103,7 @@ export default function Gérer() {
<Emoji emoji="✍" />
</div>
<Trans i18nKey="gérer.choix.déclaration">
<h3>Remplir ma déclaration de revenus</h3>
<H3>Remplir ma déclaration de revenus</H3>
<p className="ui__ notice">
Calculez facilement les montants des charges sociales à
reporter dans votre déclaration de revenu au titre de
@ -129,7 +130,7 @@ export default function Gérer() {
<Emoji emoji="💶" />
</div>
<Trans i18nKey="gérer.choix.revenus">
<h3>Calculer mon revenu net de cotisations</h3>
<H3>Calculer mon revenu net de cotisations</H3>
<p className="ui__ notice">
Estimez précisément le montant de vos cotisations grâce au
simulateur {{ régime: dirigeant }} de l'Urssaf
@ -152,7 +153,7 @@ export default function Gérer() {
<Emoji emoji="🕟" />
</div>
<Trans i18nKey="gérer.choix.chomage-partiel">
<h3>Activité partielle</h3>
<H3>Activité partielle</H3>
<p className="ui__ notice">
Calculez le reste à payer après remboursement de l'État
lorsque vous activez le dispositif pour un employé.
@ -177,7 +178,7 @@ export default function Gérer() {
<Emoji emoji="🤝" />
</div>
<Trans i18nKey="gérer.choix.embauche">
<h3>Estimer le montant d’une embauche</h3>
<H3>Estimer le montant d’une embauche</H3>
<p className="ui__ notice">
Calculez le montant total que votre entreprise devra
dépenser pour rémunérer votre prochain employé
@ -200,7 +201,7 @@ export default function Gérer() {
<Emoji emoji="🗓" />
</div>
<Trans i18nKey="gérer.choix.is">
<h3>Estimer le montant de l’impôt sur les sociétés</h3>
<H3>Estimer le montant de l’impôt sur les sociétés</H3>
<p className="ui__ notice">
Calculez le montant de l'impôt sur les sociétés à partir
de votre bénéfice.
@ -216,10 +217,10 @@ export default function Gérer() {
</section>
<AideOrganismeLocal />
<h2 className="ui__ h h3">
<H3 as="h2">
<Emoji emoji="🧰" />
<Trans>Ressources utiles</Trans>
</h2>
</H3>
<div className="ui__ box-container">
{dirigeant === 'indépendant' &&
i18n.language === 'fr' &&
@ -229,9 +230,7 @@ export default function Gérer() {
to={sitePaths.gérer.formulaireMobilité}
>
<Trans i18nKey="gérer.ressources.embaucher">
<h3 className="ui__ h h5">
Exporter son activité en Europe
</h3>
<H5 as="h3">Exporter son activité en Europe</H5>
<p className="ui__ notice">
Le formulaire pour effectuer une demande de mobilité
internationale (détachement ou pluriactivité)
@ -245,9 +244,7 @@ export default function Gérer() {
to={sitePaths.gérer.embaucher}
>
<Trans i18nKey="gérer.ressources.embaucher">
<h3 className="ui__ h h5">
Découvrir les démarches d’embauche{' '}
</h3>
<H5 as="h3">Découvrir les démarches d’embauche </H5>
<p className="ui__ notice">
La liste des choses à faire pour être sûr de ne rien oublier
lors de l’embauche d’un nouveau salarié
@ -261,9 +258,7 @@ export default function Gérer() {
href="https://autoentrepreneur.urssaf.fr"
>
<Trans i18nKey="gérer.ressources.autoEntrepreneur">
<h3 className="ui__ h h5">
Accéder au site officiel auto-entrepreneur
</h3>
<H5 as="h3">Accéder au site officiel auto-entrepreneur</H5>
<p className="ui__ notice">
Vous pourrez effectuer votre déclaration de chiffre
d'affaires, payer vos cotisations, et plus largement trouver
@ -278,7 +273,7 @@ export default function Gérer() {
to={sitePaths.gérer.sécuritéSociale}
>
<Trans i18nKey="gérer.ressources.sécuritéSociale">
<h3 className="ui__ h h5">Comprendre la sécurité sociale </h3>
<H5 as="h3">Comprendre la sécurité sociale </H5>
<p className="ui__ notice">
A quoi servent les cotisations sociales ? Le point sur le
système de protection sociale dont bénéficient tous les
@ -296,7 +291,7 @@ export default function Gérer() {
rel="noreferrer noopener"
>
<Trans i18nKey="gérer.ressources.kbis-autoentrepreneur">
<h3 className="ui__ h h5">Récupérer un extrait de Kbis?</h3>
<H5 as="h3">Récupérer un extrait de Kbis?</H5>
<p className="ui__ notice">
Les auto-entrepreneurs n'ont pas de Kbis. Ils peuvent
cependant récupérer et présenter un extrait K. Voir le site
@ -312,7 +307,7 @@ export default function Gérer() {
rel="noreferrer noopener"
>
<Trans i18nKey="gérer.ressources.kbis">
<h3 className="ui__ h h5">Récupérer un extrait de Kbis</h3>
<H5 as="h3">Récupérer un extrait de Kbis</H5>
<p className="ui__ notice">
Le Kbis est un document permettant de justifier de
l'enregistrement de l'entreprise au{' '}
@ -381,11 +376,11 @@ export const CompanySection = ({ company }: CompanySectionProps) => {
<>
<ScrollToTop />
<Overlay>
<h2>
<H2>
<Trans i18nKey="gérer.entreprise.auto">
Êtes-vous auto-entrepreneur ?{' '}
</Trans>
</h2>
</H2>
<div className="ui__ answer-group">
<button
className="ui__ button"
@ -408,7 +403,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

3
mon-entreprise/source/pages/Gérer/SécuritéSociale.tsx
View File

@ -1,4 +1,5 @@
import { FromBottom } from 'Components/ui/animate'
import { H1 } from 'DesignSystem/typography/heading'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
import { TrackPage } from '../../ATInternetTracking'
@ -15,7 +16,7 @@ export default function SocialSecurity() {
<FromBottom>
<TrackPage name="securite_social" />
<Trans i18nKey="sécu.contenu">
<h1>Protection sociale </h1>
<H1>Protection sociale </H1>
<p>
En France, tous les travailleurs bénéficient d'une protection
sociale de qualité. Ce système obligatoire repose sur la solidarité

5
mon-entreprise/source/pages/Nouveautés/Nouveautés.tsx
View File

@ -4,6 +4,7 @@ import Emoji from 'Components/utils/Emoji'
import { MarkdownWithAnchorLinks } from 'Components/utils/markdown'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1 } from 'DesignSystem/typography/heading'
import { useContext, useEffect } from 'react'
import {
Link,
@ -54,9 +55,9 @@ export default function Nouveautés() {
<>
<TrackPage chapter1="informations" name="nouveautes" />
<ScrollToTop key={selectedRelease} />
<h1>
<H1>
Les nouveautés <Emoji emoji="✨" />
</h1>
</H1>
<p>
Nous améliorons le site en continu à partir de{' '}
<Link to={sitePaths.stats + '#demandes-utilisateurs'}>vos retours</Link>

22
mon-entreprise/source/pages/Simulateurs/AidesEmbauche.tsx
View File

@ -9,6 +9,7 @@ import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { useSimulationProgress } from 'Components/utils/useNextQuestion'
import { useParamsFromSituation } from 'Components/utils/useSearchParamsSimulationSharing'
import useSimulationConfig from 'Components/utils/useSimulationConfig'
import { H2, H3, H4 } from 'DesignSystem/typography/heading'
import { DottedName } from 'modele-social'
import Engine, { formatValue } from 'publicodes'
import { partition } from 'ramda'
@ -196,7 +197,7 @@ export default function AidesEmbauche() {
<Results />
<section>
<Trans i18nKey="pages.simulateurs.aides-embauche.outro">
<h2>En savoir plus sur les aides</h2>
<H2>En savoir plus sur les aides</H2>
<p>
Vous pouvez retrouver une liste plus complète des aides à l'embauche
existantes sur le portail{' '}
@ -244,28 +245,28 @@ function Results() {
return progress === 0 ? (
<>
<TrackPage name="accueil" />
<h3>
<H3>
<Trans i18nKey="pages.simulateurs.aides-embauche.titres.aides">
Les aides
</Trans>
</h3>
</H3>
<AidesGrid
aides={aides.map((aide) => ({ ...aide, engine: baseEngine }))}
/>
</>
) : (
<FromTop>
<h3>
<H3>
<Trans i18nKey="pages.simulateurs.aides-embauche.titres.aidesDisponibles">
Aides disponibles
</Trans>
</h3>
</H3>
<AidesGrid aides={aidesActives} />
<h3>
<H3>
<Trans i18nKey="pages.simulateurs.aides-embauche.titres.autresAides">
Les autres aides
</Trans>
</h3>
</H3>
<AidesGrid aides={aidesInactives} />
</FromTop>
)
@ -304,7 +305,7 @@ function ResultCard({
return (
<AideCard className="ui__ card box">
<h4>{title}</h4>
<H4>{title}</H4>
<p className="ui__ notice">
<Emoji emoji={'💶'} />
&nbsp;{' '}
@ -362,9 +363,4 @@ const AideCard = styled.div`
align-self: flex-start;
text-align: left;
}
h4,
.button {
align-self: center;
}
`

5
mon-entreprise/source/pages/Simulateurs/ArtisteAuteur.tsx
View File

@ -8,6 +8,7 @@ import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals'
import 'Components/TargetSelection.css'
import { EngineContext } from 'Components/utils/EngineContext'
import useSimulationConfig from 'Components/utils/useSimulationConfig'
import { H2 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Trans } from 'react-i18next'
import config from './configs/artiste-auteur.yaml'
@ -71,9 +72,9 @@ function RepartitionCotisations() {
const maximum = Math.max(...cotisations.map((x) => x.value))
return (
<section>
<h2>
<H2>
<Trans>À quoi servent mes cotisations ?</Trans>
</h2>
</H2>
<div className="distribution-chart__container">
{cotisations
.filter(({ value }) => Boolean(value))

11
mon-entreprise/source/pages/Simulateurs/AutoEntrepreneur.tsx
View File

@ -3,13 +3,12 @@ import { WhenAlreadyDefined } from 'Components/EngineValue'
import PeriodSwitch from 'Components/PeriodSwitch'
import SimulateurWarning from 'Components/SimulateurWarning'
import Simulation from 'Components/Simulation'
import InstitutionsPartenaires, {
InstitutionsPartenairesAutoEntrepreneur,
} from 'Components/simulationExplanation/InstitutionsPartenaires'
import { InstitutionsPartenairesAutoEntrepreneur } from 'Components/simulationExplanation/InstitutionsPartenaires'
import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals'
import StackedBarChart from 'Components/StackedBarChart'
import { ThemeColorsContext } from 'Components/utils/colors'
import { default as React, useContext } from 'react'
import { H2 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
export default function AutoEntrepreneur() {
@ -44,9 +43,9 @@ function Explanation() {
const { palettes } = useContext(ThemeColorsContext)
return (
<section>
<h2>
<H2>
<Trans>Répartition du chiffre d'affaires</Trans>
</h2>
</H2>
<StackedBarChart
data={[
{

9
mon-entreprise/source/pages/Simulateurs/Dividendes.tsx
View File

@ -12,6 +12,7 @@ import { useEngine } from 'Components/utils/EngineContext'
import { updateSituation } from 'Actions/actions'
import { HiddenOptionContext } from 'Components/conversation/Question'
import Warning from 'Components/ui/WarningBlock'
import { H2 } from 'DesignSystem/typography/heading'
export default function DividendesSimulation() {
return (
@ -139,15 +140,11 @@ const DividendesExplanation = () => {
align-items: baseline;
`}
>
<h2
css={`
flex: 1;
`}
>
<H2>
<Trans i18nKey="payslip.repartition">
Répartition du total chargé
</Trans>
</h2>
</H2>
</div>
<StackedBarChart
precision={0.1}

3
mon-entreprise/source/pages/Simulateurs/Home.tsx
View File

@ -5,6 +5,7 @@ import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
import Emoji from 'Components/utils/Emoji'
import { HeadingWithAnchorLink } from 'Components/utils/markdown'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H3 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
@ -151,7 +152,7 @@ export function SimulateurCard({
<Emoji emoji={icône} />
</div>
)}
<>{small ? name : <h3>{name}</h3>}</>
<>{small ? name : <H3>{name}</H3>}</>
{!small && meta?.description && (
<p className="ui__ notice">{meta.description}</p>
)}

4
mon-entreprise/source/pages/Simulateurs/PAMCHome.tsx
View File

@ -1,4 +1,4 @@
import { default as React } from 'react'
import { H2 } from 'DesignSystem/typography/heading'
import { TrackPage } from '../../ATInternetTracking'
import { SimulateurCard } from './Home'
import useSimulatorsData from './metadata'
@ -8,7 +8,7 @@ export default function SalariéSimulation() {
return (
<>
<TrackPage chapter1="simulateurs" name="accueil_pamc" />
<h2>Quelle profession exercez-vous ?</h2>
<H2>Quelle profession exercez-vous ?</H2>
<div className="ui__ small box-container">
<SimulateurCard small {...simulators['auxiliaire-médical']} />
<SimulateurCard small {...simulators['chirurgien-dentiste']} />

27
mon-entreprise/source/pages/Simulateurs/Page.tsx
View File

@ -8,6 +8,7 @@ import Meta from 'Components/utils/Meta'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import useSearchParamsSimulationSharing from 'Components/utils/useSearchParamsSimulationSharing'
import useSimulationConfig from 'Components/utils/useSimulationConfig'
import { H1, H2, H3, H5 } from 'DesignSystem/typography/heading'
import { default as React, useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Link, useLocation } from 'react-router-dom'
@ -69,15 +70,11 @@ export default function PageData({
{meta && <Meta {...meta} />}
{title && !inIframe && (
<>
<h1>{title}</h1>
<H1>{title}</H1>
{tooltip && (
<h2
css={`
margin-top: 0;
`}
>
<H2>
<small>{tooltip}</small>
</h2>
</H2>
)}
</>
)}
@ -120,9 +117,9 @@ function NextSteps({ iframePath, nextSteps }: NextStepsProps) {
}
return (
<section className="ui__ print-display-none">
<h2 className="ui__ h h3">
<H3 as="h2">
<Trans>Ressources utiles</Trans>
</h2>
</H3>
<div className="ui__ box-container">
<Condition expression="dirigeant . auto-entrepreneur">
<RessourceAutoEntrepreneur />
@ -133,9 +130,9 @@ function NextSteps({ iframePath, nextSteps }: NextStepsProps) {
href={guideUrssaf.url}
target="_blank"
>
<h3 className="ui__ h h5">
<H5 as="h3">
<Emoji emoji="📖" /> {guideUrssaf.title}
</h3>
</H5>
<p className="ui__ notice">
Des conseils pour se lancer dans la création et une présentation
détaillée de votre protection sociale.
@ -155,9 +152,9 @@ function NextSteps({ iframePath, nextSteps }: NextStepsProps) {
}}
>
<Trans i18nKey="nextSteps.integration-iframe">
<h3 className="ui__ h h5">
<H5 as="h3">
<Emoji emoji="📱" /> Intégrer le module web
</h3>
</H5>
<p className="ui__ notice">
Ajouter ce simulateur sur votre site internet en un clic via un
script clé en main.
@ -186,10 +183,10 @@ export function SimulatorRessourceCard({
pathname: simulator.path,
}}
>
<h3 className="ui__ h h5">
<H5 as="h3">
{simulator.icône && <Emoji emoji={simulator.icône} />}{' '}
{simulator.shortName}
</h3>
</H5>
<p className="ui__ notice">{simulator.meta?.description}</p>
</Link>
)

43
mon-entreprise/source/pages/Simulateurs/metadata.tsx
View File

@ -4,6 +4,7 @@ import Simulation from 'Components/Simulation'
import SalaryExplanation from 'Components/simulationExplanation/SalaryExplanation'
import Emoji from 'Components/utils/Emoji'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H2 } from 'DesignSystem/typography/heading'
import React, { useContext, useMemo } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { SimulationConfig } from 'Reducers/rootReducer'
@ -123,7 +124,7 @@ export function getSimulatorsData({
path: sitePaths.simulateurs.salarié,
seoExplanations: (
<Trans i18nKey="pages.simulateurs.salarié.seo">
<h2>Comment calculer le salaire net ?</h2>
<H2>Comment calculer le salaire net ?</H2>
<p>
Lors de l'entretien d'embauche l'employeur propose en général une
rémunération exprimée en « brut ». Le montant annoncé inclut ainsi
@ -166,7 +167,7 @@ export function getSimulatorsData({
</RuleLink>
.
</p>
<h2>Comment calculer le coût d'embauche ?</h2>
<H2>Comment calculer le coût d'embauche ?</H2>
<p>
Si vous cherchez à embaucher, vous pouvez calculer le coût total de
la rémunération de votre salarié, ainsi que les montants de
@ -206,10 +207,10 @@ export function getSimulatorsData({
path: sitePaths.simulateurs['entreprise-individuelle'],
seoExplanations: (
<Trans i18nKey="pages.simulateurs.ei.seo explanation">
<h2>
<H2>
Comment calculer le revenu net d'un dirigeant d'entreprise
individuelle (EI) ?
</h2>
</H2>
<p>
Un dirigeant d'entreprise individuelle doit payer des cotisations et
contributions sociales à l'administration. Ces cotisations servent
@ -240,10 +241,10 @@ export function getSimulatorsData({
</strong>
</blockquote>
</p>
<h2>
<H2>
Comment calculer les cotisations sociales d'une entreprise
individuelle ?
</h2>
</H2>
<p>
Le dirigeant d'une entreprise individuelle paye des cotisations
sociales, proportionnelle au{' '}
@ -300,7 +301,7 @@ export function getSimulatorsData({
},
seoExplanations: (
<Trans i18nKey="pages.simulateurs.sasu.seo-explanation">
<h2>Comment calculer le salaire d'un dirigeant de SASU ? </h2>
<H2>Comment calculer le salaire d'un dirigeant de SASU ? </H2>
<p>
Comme pour un salarié classique, le{' '}
<strong>dirigeant de sasu</strong> paye des cotisations sociales sur
@ -390,7 +391,7 @@ export function getSimulatorsData({
),
seoExplanations: (
<Trans i18nKey="pages.simulateurs.auto-entrepreneur.seo explanation">
<h2>Comment calculer le revenu net d'un auto-entrepreneur ?</h2>
<H2>Comment calculer le revenu net d'un auto-entrepreneur ?</H2>
<p>
Un auto-entrepreneur doit payer des cotisations et contributions
sociales à l'administration. Ces cotisations servent au financement
@ -422,9 +423,9 @@ export function getSimulatorsData({
</strong>
</blockquote>
</p>
<h2>
<H2>
Comment calculer l'impôt sur le revenu pour un auto-entrepreneur ?
</h2>
</H2>
<p>
Si vous avez opté pour le versement libératoire lors de la création
de votre auto-entreprise, l'impôt sur le revenu est payé en même
@ -484,7 +485,7 @@ export function getSimulatorsData({
},
seoExplanations: (
<Trans i18nKey="pages.simulateurs.chômage-partiel.seo">
<h2>Comment calculer l'indemnité d'activité partielle ?</h2>
<H2>Comment calculer l'indemnité d'activité partielle ?</H2>
<p>
L'indemnité d'activité partielle de base est fixée par la loi à{' '}
<strong>70% du brut</strong>. Elle est proratisée en fonction du
@ -505,7 +506,7 @@ export function getSimulatorsData({
Voir le détail du calcul de l'indemnité
</RuleLink>
</p>
<h2>Comment calculer la part remboursée par l'État ?</h2>
<H2>Comment calculer la part remboursée par l'État ?</H2>
<p>
L'État prend en charge une partie de l'indemnité partielle pour les
salaires allant jusqu'à <strong>4,5 SMIC</strong>, avec un minimum à
@ -522,7 +523,7 @@ export function getSimulatorsData({
Voir le détail du calcul du remboursement de l'indemnité
</RuleLink>
</p>
<h2>Comment déclarer une activité partielle ?</h2>
<H2>Comment déclarer une activité partielle ?</H2>
<p>
Face à la crise du coronavirus, les modalités de passage en activité
partielle ont été allégées. L'employeur est autorisé a placer ses
@ -538,11 +539,11 @@ export function getSimulatorsData({
Effectuer la demande de chômage partiel
</a>
</p>
<h2>
<H2>
{' '}
Quelles sont les cotisations sociales à payer pour l'indemnité
d'activité partielle ?
</h2>
</H2>
<p>
L'indemnité d'activité partielle est soumise à la CSG/CRDS et à une
contribution maladie dans certains cas. Pour en savoir plus, voir la
@ -737,7 +738,7 @@ export function getSimulatorsData({
component: ISSimulation,
seoExplanations: (
<Trans i18nKey="pages.simulateurs.is.seo">
<h2>Comment est calculé l’impôt sur les sociétés ?</h2>
<H2>Comment est calculé l’impôt sur les sociétés ?</H2>
<p>
L’impôt sur les sociétés s’applique aux bénéfices réalisés par les
sociétés de capitaux (SA, SAS, SASU, SARL, etc.) et sur option
@ -752,7 +753,7 @@ export function getSimulatorsData({
l’exercice, ce qui est pris en compte dans le simulateur en
modifiant les dates de début et de fin de l’exercice.
</p>
<h2>Taux réduit et régimes spécifiques</h2>
<H2>Taux réduit et régimes spécifiques</H2>
<p>
Les PME réalisant moins de 7,63 millions d’euros de chiffre
d’affaires et dont le capital est détenu à 75% par des personnes
@ -792,7 +793,7 @@ export function getSimulatorsData({
config: dividendesConfig,
seoExplanations: (
<Trans i18nKey="pages.simulateurs.dividendes.seo">
<h2>Les dividendes et distributions</h2>
<H2>Les dividendes et distributions</H2>
<p>
A la fin de l'exercice d'une société, le résultat de l'exercice
précédent peut être conservé en réserve (pour de futurs
@ -805,7 +806,7 @@ export function getSimulatorsData({
bénéficiaire personne physique et des dividendes décidés par la
société.
</p>
<h2>Comment sont calculés les prélèvements sur les dividendes ?</h2>
<H2>Comment sont calculés les prélèvements sur les dividendes ?</H2>
<p>
Les dividendes peuvent être soumis au prélèvement forfaitaire unique
de 30% incluant imposition et contributions sociales (aussi appelé
@ -825,9 +826,9 @@ export function getSimulatorsData({
</a>
.
</p>
<h2>
<H2>
Cas particulier du dirigeant au régime du travailleur indépendant
</h2>
</H2>
<p>
{' '}
Au régime du travailleur indépendant, la part des dividendes

13
mon-entreprise/source/pages/Simulateurs/ÉconomieCollaborative/Activité.tsx
View File

@ -3,6 +3,7 @@ import Emoji from 'Components/utils/Emoji'
import { Markdown } from 'Components/utils/markdown'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H2 } from 'DesignSystem/typography/heading'
import { formatValue } from 'publicodes'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
@ -39,7 +40,7 @@ export default function Activité({
<FromBottom>
<TrackPage name={activité.titre} />
<ScrollToTop />
<h1>{activité.titre}</h1>
<H1>{activité.titre}</H1>
<p>{activité.explication}</p>
<p>
<Trans i18nKey="économieCollaborative.activité.choix">
@ -63,9 +64,9 @@ export default function Activité({
<ScrollToTop />
<FromBottom>
<TrackPage name={activité.titre} />
<h1>
<H1>
<Emoji emoji={activité.icônes} /> {activité.titre}
</h1>
</H1>
<Markdown source={activité.explication} />
{activité.plateformes && (
<p className="ui__ notice">
@ -80,7 +81,7 @@ export default function Activité({
{estExonérée ? null : activité['seuil pro'] === 0 ? (
<Trans i18nKey="économieCollaborative.activité.pro">
<h2>Il s'agit d'une activité professionnelle</h2>
<H2>Il s'agit d'une activité professionnelle</H2>
<p>
Les revenus de cette activité sont considérés comme des{' '}
<strong>revenus professionnels dès le 1er euro gagné</strong>.
@ -88,13 +89,13 @@ export default function Activité({
</Trans>
) : activité['seuil déclaration'] === 0 && !activité['seuil pro'] ? (
<Trans i18nKey="économieCollaborative.activité.impôt">
<h2>Vous devez déclarez vos revenus aux impôts</h2>
<H2>Vous devez déclarez vos revenus aux impôts</H2>
<p>Les revenus de cette activité sont imposables.</p>
</Trans>
) : (
<>
<Trans i18nKey="économieCollaborative.activité.revenusAnnuels">
<h2>Revenus annuels</h2>
<H2>Revenus annuels</H2>
<p>Vos revenus annuels pour cette activité sont :</p>
</Trans>
<ul

11
mon-entreprise/source/pages/Simulateurs/ÉconomieCollaborative/ActivitésSelection.tsx
View File

@ -5,6 +5,7 @@ import InfoBulle from 'Components/ui/InfoBulle'
import Emoji from 'Components/utils/Emoji'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H2, H4 } from 'DesignSystem/typography/heading'
import { intersection } from 'ramda'
import React, { useCallback, useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
@ -32,7 +33,7 @@ export default function ActivitésSelection() {
<FromBottom>
<TrackPage name="accueil" />
<ScrollToTop />
<h1>{titre}</h1>
<H1>{titre}</H1>
<section css="margin-bottom: 2rem">
<Trans i18nKey="économieCollaborative.accueil.contenu">
<p>
@ -58,11 +59,11 @@ export default function ActivitésSelection() {
</section>
<section className="ui__ full-width light-bg">
<h2 className="ui__ container" css="text-align: center">
<H2>
<Trans i18nKey="économieCollaborative.accueil.question">
Quels types d'activités avez-vous exercé ?
</Trans>
</h2>
</H2>
<ActivitéSelection
activités={activités.map(({ titre }: Activity) => titre)}
/>
@ -194,12 +195,12 @@ const ActivitéContent = ({
label,
}: any) => (
<>
<h4 className="title">
<H4>
{titre}{' '}
<InfoBulle>
<div css="line-height: initial">{explication}</div>
</InfoBulle>
</h4>
</H4>
<p className="ui__ notice">{plateformes.join(', ')}</p>
{label && <div className="ui__ label"> {label}</div>}

5
mon-entreprise/source/pages/Simulateurs/ÉconomieCollaborative/ExceptionsExonération.tsx
View File

@ -4,6 +4,7 @@ import { CheckItem, Checklist } from 'Components/ui/Checklist'
import { changeCritèreExonération } from './actions'
import { StoreContext } from './StoreContext'
import { Activity } from './Activité'
import { H2 } from 'DesignSystem/typography/heading'
export default function ExceptionsExonération({
exceptionsExonération,
@ -17,11 +18,11 @@ export default function ExceptionsExonération({
return (
<>
<h2>
<H2>
<Trans i18nKey="économieCollaborative.exonération.question">
Êtes-vous dans un des cas suivants ?
</Trans>
</h2>
</H2>
<Checklist
onItemCheck={(index, checked) =>
dispatch(changeCritèreExonération(activité, index, !checked))

17
mon-entreprise/source/pages/Simulateurs/ÉconomieCollaborative/VotreSituation.tsx
View File

@ -2,6 +2,7 @@ import { FromBottom } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H2, H3 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { Trans, useTranslation } from 'react-i18next'
@ -52,7 +53,7 @@ export default function VotreSituation() {
<Helmet>
<title>{titre}</title>
</Helmet>
<h1>{titre}</h1>
<H1>{titre}</H1>
<div css="text-align: center">
<img css="height: 200px" src={illustration} />
</div>
@ -60,7 +61,7 @@ export default function VotreSituation() {
{déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE.length > 0 && (
<>
<Trans i18nKey="économieCollaborative.obligations.pro">
<h2>Déclarer en tant qu'activité professionnelle</h2>
<H2>Déclarer en tant qu'activité professionnelle</H2>
<p>
Vos revenus sont considérés comme revenus professionnels, ils
sont soumis aux cotisations sociales. En contrepartie, ils
@ -70,7 +71,7 @@ export default function VotreSituation() {
</Trans>
<ActivitéList activités={déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE} />
<Trans i18nKey="économieCollaborative.obligations.entreprise">
<h3>Avec une entreprise</h3>
<H3>Avec une entreprise</H3>
<p>
Si vous possédez déjà une activité déclarée, vous pouvez ajouter
ces revenus à ceux de l'entreprise. Il vous faudra seulement
@ -89,7 +90,7 @@ export default function VotreSituation() {
{régimeGénéralDisponible && (
<Trans i18nKey="économieCollaborative.obligations.régimeGénéral">
<h3>Avec l'option régime général</h3>
<H3>Avec l'option régime général</H3>
<p>
Pour certaines activités, vous pouvez déclarer vos revenus
directement sur le site de l'Urssaf. C'est une option
@ -111,7 +112,7 @@ export default function VotreSituation() {
{déclarations.IMPOSITION.length > 0 && (
<>
<Trans i18nKey="économieCollaborative.obligations.impôts">
<h2>Déclarer vos revenus aux impôts</h2>
<H2>Déclarer vos revenus aux impôts</H2>
<p>
Pour ces activités, vous avez uniquement besoin de déclarer vos
revenus sur votre feuille d'imposition. Pour en savoir plus,
@ -129,7 +130,7 @@ export default function VotreSituation() {
{déclarations.AUCUN.length > 0 && (
<>
<Trans i18nKey="économieCollaborative.obligations.aucune">
<h2>Rien à faire</h2>
<H2>Rien à faire</H2>
<p>
Vous n'avez pas besoin de déclarer vos revenus pour ces
activités.
@ -140,9 +141,9 @@ export default function VotreSituation() {
)}
</section>
<section>
<h2>
<H2>
<Emoji emoji="🧰" /> <Trans>Ressources utiles</Trans>
</h2>
</H2>
<div css="display: flex; flex-wrap: wrap; margin: 0 -1rem;">
<a
target="_blank"

7
mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx
View File

@ -1,24 +1,25 @@
import { FromTop } from 'Components/ui/animate'
import { H2, H3 } from 'DesignSystem/typography/heading'
import { useState } from 'react'
import stats from '../../data/stats.json'
export default function DemandeUtilisateurs() {
return (
<section>
<h2 id="demandes-utilisateurs">Demandes utilisateurs</h2>
<H2 id="demandes-utilisateurs">Demandes utilisateurs</H2>
<p>
<small>
Demandes formulées en utilisant le bouton "faire une suggestion"
présent sur toutes les pages
</small>
</p>
<h3>En attente d'implémentation</h3>
<H3>En attente d'implémentation</H3>
<Pagination
items={stats.retoursUtilisateurs.open}
itemComponent={Issue}
/>
<h3>Réalisées</h3>
<H3>Réalisées</H3>
<Pagination
items={stats.retoursUtilisateurs.closed}
itemComponent={Issue}

17
mon-entreprise/source/pages/Stats/Stats.tsx
View File

@ -6,6 +6,7 @@ import InfoBulle from 'Components/ui/InfoBulle'
import Emoji from 'Components/utils/Emoji'
import { useScrollToHash } from 'Components/utils/markdown'
import { ScrollToTop } from 'Components/utils/Scroll'
import { H1, H2 } from 'DesignSystem/typography/heading'
import { formatValue } from 'publicodes'
import { add, groupBy, mapObjIndexed, mergeWith, toPairs } from 'ramda'
import { useCallback, useEffect, useMemo, useState } from 'react'
@ -176,7 +177,7 @@ const StatsDetail = () => {
return (
<>
<h2>Statistiques détaillées</h2>
<H2>Statistiques détaillées</H2>
<p>
<strong>1. Sélectionner la fonctionnalité : </strong>
</p>
@ -221,7 +222,7 @@ const StatsDetail = () => {
<SelectedSimulator chapter2={chapter2} />
</div>
<div className="ui__ container">
<h2>Visites</h2>
<H2>Visites</H2>
<Chart
key={period + visites.length}
@ -232,7 +233,7 @@ const StatsDetail = () => {
endIndex={endDateIndex}
/>
<h2>
<H2>
Cumuls pour la période{' '}
{period === 'jours'
? `du ${formatDay(slicedVisits[0].date)} au ${formatDay(
@ -244,7 +245,7 @@ const StatsDetail = () => {
slicedVisits[slicedVisits.length - 1].date
)}`
: '')}
</h2>
</H2>
<Indicators>
<Indicator
main={formatValue(
@ -280,13 +281,13 @@ const StatsDetail = () => {
</Indicators>
{period === 'mois' && !!satisfaction.length && (
<>
<h2>Satisfaction</h2>
<H2>Satisfaction</H2>
<SatisfactionChart key={chapter2} data={satisfaction} />
</>
)}
{chapter2 === '' && period === 'mois' && (
<>
<h2>Simulateurs principaux</h2>
<H2>Simulateurs principaux</H2>
<PagesChart data={repartition} />
</>
)}
@ -308,9 +309,9 @@ export default function Stats() {
<TrackPage chapter1="informations" name="stats" />
<ScrollToTop />
<h1>
<H1>
Statistiques <Emoji emoji="📊" />
</h1>
</H1>
<p>
Découvrez nos statistiques d'utilisation mises à jour quotidiennement.
<br />

43
mon-entreprise/source/pages/integration/Iframe.tsx
View File

@ -5,6 +5,7 @@ import {
} from 'Components/utils/colors'
import Emoji from 'Components/utils/Emoji'
import { ScrollToTop } from 'Components/utils/Scroll'
import { H1, H2, H3 } from 'DesignSystem/typography/heading'
import urssafLogo from 'Images/Urssaf.svg'
import React, {
Suspense,
@ -54,9 +55,9 @@ function IntegrationCustomizer() {
const [color, setColor] = useState(defaultColor)
return (
<section>
<h2>
<H2>
<Trans>Personnalisez l'intégration</Trans>
</h2>
</H2>
<div
className="ui__ full-width"
css={`
@ -96,10 +97,10 @@ function IntegrationCustomizer() {
`}
>
<div className="ui__ left-side">
<h3>
<H3>
<Trans i18nKey="pages.développeurs.module">Quel module ?</Trans>
<Emoji emoji="🚩" />
</h3>
</H3>
<select
onChange={(event) => setCurrentModule(event.target.value)}
value={currentModule}
@ -109,21 +110,21 @@ function IntegrationCustomizer() {
))}
</select>
<h3>
<H3>
<Trans i18nKey="pages.développeurs.couleur">
Quelle couleur ?{' '}
</Trans>
<Emoji emoji="🎨" />
</h3>
</H3>
<Suspense fallback={<div>Chargement...</div>}>
<LazyColorPicker color={color} onChange={setColor} />
</Suspense>
<h3>
<H3>
<Trans i18nKey="pages.développeurs.code.titre">
Code d'intégration
</Trans>
<Emoji emoji="🛠" />
</h3>
</H3>
<p>
<Trans i18nKey="pages.développeurs.code.description">
Voici le code à copier-coller sur votre site&nbsp;:
@ -146,9 +147,9 @@ function IntegrationCustomizer() {
}
`}
>
<h3>
<H3>
<Trans>Prévisualisation</Trans>
</h3>
</H3>
<div
css={`
background-color: white;
@ -180,7 +181,7 @@ export default function Integration() {
<TrackPage name="module_web" />
<Trans i18nKey="pages.développeurs.iframe.intro">
<div>
<h1>Intégrez le module Web</h1>
<H1>Intégrez le module Web</H1>
<p>
Nos simulateurs sont intégrables de manière transparente en ajoutant
une simple ligne de code à votre page Web.
@ -203,50 +204,50 @@ export default function Integration() {
</p>
</Trans>
<section className="blocks" id="integrations">
<h2>
<H2>
<Trans>Quelques intégrations</Trans>
</h2>
</H2>
<div id="integrationList">
<article>
<a href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs">
<img src={urssafLogo} alt="urssaf.fr" />
<h2>Urssaf</h2>
<H2 as="h3">Urssaf</H2>
</a>
</article>
<article>
<a href="http://les-aides.fr/embauche">
<img src={cciLogo} alt="Les-aides.fr" />
<h2>CCI de France</h2>
<H2 as="h3">CCI de France</H2>
</a>
</article>
<article>
<a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche">
<img src={apecLogo} alt="" />
<h2>APEC</h2>
<H2 as="h3">APEC</H2>
</a>
</article>
<article>
<a href="https://code.travail.gouv.fr/outils/simulateur-embauche">
<img src={minTraLogo} alt="Ministère du travail" />
<h2>Code du travail numérique</h2>
<H2 as="h3">Code du travail numérique</H2>
</a>
</article>
<article>
<a href="https://entreprise.pole-emploi.fr/cout-salarie/">
<img src={poleEmploiLogo} alt="Pôle Emploi" />
<h2>Pôle Emploi</h2>
<H2 as="h3">Pôle Emploi</H2>
</a>
</article>
<article>
<a href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation">
<span className="question-mark">?</span>
<h2>
<H2 as="h3">
<Trans>
Une idée&nbsp;?
<br />
Contactez-nous&nbsp;!
</Trans>
</h2>
</H2>
</a>
</article>
</div>
@ -265,7 +266,7 @@ function EnSavoirPlusCSP() {
{opened && (
<Overlay onClose={() => setOpened(false)} style={{ textAlign: 'left' }}>
<Trans i18nKey="pages.développeurs.iframe.csp-1">
<h3>Intégration iframe et politique de sécurité de contenu</h3>
<H3>Intégration iframe et politique de sécurité de contenu</H3>
<p>
L'erreur ci-dessous qui s'affiche dans la console est liée à la
communication entre la page parente et l'iframe pour le

15
mon-entreprise/source/pages/integration/Library.tsx
View File

@ -1,13 +1,14 @@
import { ScrollToTop } from 'Components/utils/Scroll'
import Emoji from 'Components/utils/Emoji'
import { Trans } from 'react-i18next'
import { H1, H2, H3 } from 'DesignSystem/typography/heading'
export default function Library() {
return (
<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
<ScrollToTop />
<Trans i18nKey="pages.dévelopeurs.bibliothèque">
<h1>Intégrez notre bibliothèque de calcul</h1>
<H1>Intégrez notre bibliothèque de calcul</H1>
<p>
Si vous pensez que votre site ou service gagnerait à afficher des
calculs de salaire, par exemple passer du salaire brut au salaire net,
@ -19,7 +20,7 @@ export default function Library() {
</a>
.
</p>
<h2>Comment utiliser cette librairie ?</h2>
<H2>Comment utiliser cette librairie ?</H2>
<p>
Toutes nos règles de calculs sont écrites en `publicodes`, un language
déclaratif développé par beta.gouv.fr et l'Urssaf pour encoder des
@ -31,7 +32,7 @@ export default function Library() {
l'interpréteur publicodes, télécharger les règles utilisées sur
mon-entreprise, appeler la fonction d'évaluation.
</p>
<h3>Installation</h3>
<H3>Installation</H3>
<pre>
<code>npm install --save publicodes modele-social</code>
</pre>
@ -41,7 +42,7 @@ export default function Library() {
documentation dédiée
</a>
</em>
<h3>Lancer le calcul</h3>
<H3>Lancer le calcul</H3>
<p>
Il ne vous reste plus qu'à paramétrer le moteur avec les règles du
paquet `modele-social` et à appeler la fonction `evaluate` sur la
@ -60,7 +61,7 @@ export default function Library() {
title="mon-entreprise (exemple 1)"
></iframe>
</div>
<h2>Paramétrer le calcul</h2>
<H2>Paramétrer le calcul</H2>
<p>
Vous l'aurez constaté dans l'exemple précédent, la recette d'un calcul
est simple : des variables d'entrée (le salaire brut), une ou
@ -141,9 +142,9 @@ export default function Library() {
</a>
, composant qui fait aussi appel à l'API commune.
</p>
<h2>
<H2>
Faire des graphiques économiques <Emoji emoji="📈" />
</h2>
</H2>
<p>
Il est aussi possible d'utiliser la bibliothèque pour des calculs
d'analyse économique ou politique. Ici, on trace le prix du travail et

13
mon-entreprise/source/pages/integration/Options.tsx
View File

@ -1,6 +1,7 @@
import { icons } from 'Components/ui/SocialIcon'
import Emoji from 'Components/utils/Emoji'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { H1, H3 } from 'DesignSystem/typography/heading'
import { useContext } from 'react'
import { Trans } from 'react-i18next'
import { Link } from 'react-router-dom'
@ -10,9 +11,9 @@ export default function Options() {
const sitePaths = useContext(SitePathsContext)
return (
<>
<h1 css="margin-bottom: 0">
<H1>
<Trans>Outils pour les développeurs</Trans> <Emoji emoji="👨‍💻" />
</h1>
</H1>
<div css="display: flex; align-items: flex-start; justify-content: space-between">
<p
@ -40,7 +41,7 @@ export default function Options() {
<Emoji emoji="📱" />
</div>
<Trans i18nKey="pages.développeurs.home.choice.iframe">
<h3>Intégrer un simulateur</h3>
<H3>Intégrer un simulateur</H3>
<p className="ui__ notice">
Intégrer l'un de nos simulateurs en un clic dans votre site Web,
via un script clé en main.
@ -58,7 +59,7 @@ export default function Options() {
<Emoji emoji="🧰" />
</div>
<Trans i18nKey="pages.développeurs.choice.library">
<h3>Libraire de calcul</h3>
<H3>Libraire de calcul</H3>
<p className="ui__ notice">
L'intégralité du moteur de calcul socio-fiscal développé par
l'Urssaf, mis à disposition librement sous forme de bibliothèque
@ -89,7 +90,7 @@ export default function Options() {
</svg>
</div>
<Trans i18nKey="pages.développeurs.choice.github">
<h3>Contribuer sur GitHub</h3>
<H3>Contribuer sur GitHub</H3>
<p className="ui__ notice">
Tous nos outils sont ouverts et développés publiquement sur
GitHub.
@ -108,7 +109,7 @@ export default function Options() {
<Emoji emoji="📚" />
</div>
<Trans i18nKey="pages.développeurs.choice.publicodes">
<h3>Publicodes</h3>
<H3>Publicodes</H3>
<p className="ui__ notice">
Nos outils sont propulsés par Publicodes, un nouveau langage pour
encoder des algorithmes “explicables”.