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

🔥 remplace le composant <T> par <Trans> 

Afin de faciliter l'analyse statique des clés de traduction
pull/855/head
Johan Girod 2020-01-21 19:15:23 +01:00
parent efbaaa742e
commit 829ac4aa6f
58 changed files with 730 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
i18next-parser.config.js Normal file
View File

@ -0,0 +1,75 @@
// i18next-parser.config.js
module.exports = {
contextSeparator: '_',
// Key separator used in your translation keys
createOldCatalogs: true,
// Save the \_old files
defaultNamespace: 'translation',
// Default namespace used in your i18next config
defaultValue: 'NO_TRANSLATION',
// Default value to give to empty keys
indentation: 2,
// Indentation of the catalog files
keepRemoved: false,
// Keep keys from the catalog that are no longer in code
keySeparator: '.',
// Key separator used in your translation keys
// If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
// see below for more details
lexers: {
hbs: ['HandlebarsLexer'],
handlebars: ['HandlebarsLexer'],
htm: ['HTMLLexer'],
html: ['HTMLLexer'],
mjs: ['JavascriptLexer'],
js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
ts: ['JavascriptLexer'],
jsx: ['JsxLexer'],
tsx: ['JsxLexer'],
default: ['JavascriptLexer']
},
lineEnding: 'auto',
// Control the line ending. See options at https://github.com/ryanve/eol
locales: ['en', 'fr'],
// An array of the locales in your applications
namespaceSeparator: ':',
// Namespace separator used in your translation keys
// If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
output: 'locales/$LOCALE.yaml',
// Supports $LOCALE and $NAMESPACE injection
// Supports JSON (.json) and YAML (.yml) file formats
// Where to write the locale files relative to process.cwd()
input: undefined,
// An array of globs that describe where to look for source files
// relative to the location of the configuration file
reactNamespace: false,
// For react file, extract the defaultNamespace - https://react.i18next.com/components/translate-hoc.html
// Ignored when parsing a `.jsx` file and namespace is extracted from that file.
sort: false,
// Whether or not to sort the catalog
useKeysAsDefaultValue: false,
// Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
// The option `defaultValue` will not work if this is set to true
verbose: false
// Display info about the parsing including some stats
}

7
source/components/CompanyDetails.tsx
View File

@ -1,6 +1,5 @@
import { T } from 'Components'
import React, { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import Skeleton from 'react-loading-skeleton'
import { Etablissement, fetchCompanyDetails } from '../api/sirene'
@ -36,7 +35,7 @@ export default function CompanyDetails({ siren, denomination }: Etablissement) {
</h3>
<p className="ui__ notice">
<T>Crée le</T>{' '}
<Trans>Crée le</Trans>{' '}
<strong>
{company ? (
DateFormatter.format(new Date(company.date_creation))
@ -44,7 +43,7 @@ export default function CompanyDetails({ siren, denomination }: Etablissement) {
<Skeleton width={80} />
)}
</strong>
, <T>domiciliée à</T>{' '}
, <Trans>domiciliée à</Trans>{' '}
{company ? (
<>
<strong>{company.etablissement_siege.libelle_commune}</strong> (

12
source/components/FindCompany.tsx
View File

@ -1,7 +1,7 @@
import { setEntreprise } from 'Actions/existingCompanyActions'
import { T } from 'Components'
import CompanyDetails from 'Components/CompanyDetails'
import React, { useCallback, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { Etablissement, searchDenominationOrSiren } from '../api/sirene'
import { debounce } from '../utils'
@ -28,17 +28,17 @@ export default function Search() {
return (
<>
<h1>
<T k="trouver.titre">Retrouver mon entreprise</T>
<Trans key="trouver.titre">Retrouver mon entreprise</Trans>
</h1>
<p>
<T k="trouver.description">
<Trans key="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.
</T>
</Trans>
</p>
<label className="ui__ notice">
<T>Nom de l'entreprise ou SIREN </T>:{' '}
<Trans>Nom de l'entreprise ou SIREN </Trans>:{' '}
</label>
<br />
<input
@ -69,7 +69,7 @@ export default function Search() {
/>
{!isLoading && searchResults === null && (
<p>
<T>Aucun résultat</T>
<Trans>Aucun résultat</Trans>
</p>
)}

11
source/components/NewsletterRegister.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import { usePersistingState } from 'Components/utils/persistState'
import { TrackerContext } from 'Components/utils/withTracker'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
export default function Newsletter() {
const [registered, setUserRegistered] = usePersistingState(
@ -25,15 +24,15 @@ export default function Newsletter() {
<>
{' '}
<h2>
<T k="newsletter.register.titre">Restez informé</T>
<Trans key="newsletter.register.titre">Restez informé</Trans>
</h2>
<div className="footer__newsletterContainer">
<p>
<T k="newsletter.register.description">
<Trans key="newsletter.register.description">
Inscrivez-vous à notre newsletter mensuelle pour recevoir des{' '}
<strong>conseils officiels sur la création d’entreprise</strong> et
accéder aux nouvelles fonctionnalités en avant-première.
</T>
</Trans>
</p>
<form
@ -47,7 +46,7 @@ export default function Newsletter() {
>
<div>
<label htmlFor="mce-EMAIL">
<T>Votre adresse e-mail</T>
<Trans>Votre adresse e-mail</Trans>
</label>
<div className="footer__registerField">
<input type="email" name="EMAIL" id="mce-EMAIL" />

6
source/components/PaySlipSections.js
View File

@ -1,6 +1,6 @@
import { T } from 'Components'
import Value from 'Components/Value'
import React from 'react'
import { Trans } from 'react-i18next'
import RuleLink from './RuleLink'
export let SalaireBrutSection = ({ getRule }) => {
@ -17,7 +17,7 @@ export let SalaireBrutSection = ({ getRule }) => {
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<T>Salaire</T>
<Trans>Salaire</Trans>
</h4>
<Line rule={salaireDeBase} />
{!!avantagesEnNature?.nodeValue && (
@ -55,7 +55,7 @@ export let SalaireNetSection = ({ getRule }) => {
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<T>Salaire net</T>
<Trans>Salaire net</Trans>
</h4>
{netImposable && <Line rule={netImposable} />}
{avantagesEnNature.nodeValue && (

4
source/components/QuickLinks.tsx
View File

@ -1,7 +1,7 @@
import { goToQuestion } from 'Actions/actions'
import { T } from 'Components'
import { contains, filter, pipe, reject, toPairs } from 'ramda'
import React from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
import {
@ -46,7 +46,7 @@ export default function QuickLinks() {
css="margin: 0 0.4rem !important"
onClick={() => dispatch(goToQuestion(dottedName))}
>
<T k={'quicklinks.' + label}>{label}</T>
<Trans key={'quicklinks.' + label}>{label}</Trans>
</button>
))}{' '}
{/* <button className="ui__ link-button">Voir la liste</button> */}

9
source/components/Route404.tsx
View File

@ -1,7 +1,7 @@
import { T } from 'Components'
import image from 'Images/map-directions.png'
import React from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { Link } from 'react-router-dom'
export default () => (
@ -11,16 +11,17 @@ export default () => (
margin: '15% auto',
width: '15em',
textAlign: 'center'
}}>
}}
>
<p>
<T k="404.message">Cette page n'existe pas ou n'existe plus</T>
<Trans key="404.message">Cette page n'existe pas ou n'existe plus</Trans>
{emoji(' 🙅')}
</p>
<Link to="/">
{/* TODO: credits for the image to add: https://thenounproject.com/term/treasure-map/96666/ */}
<img style={{ margin: '3%' }} width="100%" src={image} />
<em>
<T k="404.action">Revenir en lieu sûr</T>
<Trans key="404.action">Revenir en lieu sûr</Trans>
</em>
</Link>
</div>

5
source/components/SalaryExplanation.tsx
View File

@ -1,4 +1,3 @@
import { T } from 'Components'
import Distribution from 'Components/Distribution'
import PaySlip from 'Components/PaySlip'
import StackedBarChart from 'Components/StackedBarChart'
@ -57,7 +56,7 @@ export default function SalaryExplanation() {
})
}
>
{emoji('📊')} <T>Voir la répartition des cotisations</T>
{emoji('📊')} <Trans>Voir la répartition des cotisations</Trans>
</button>
</div>
<PaySlipSection />
@ -104,7 +103,7 @@ function RevenueRepatitionSection() {
return (
<section>
<h2>
<T k="payslip.repartition">Répartition du total chargé</T>
<Trans key="payslip.repartition">Répartition du total chargé</Trans>
</h2>
<StackedBarChart
data={[

208
source/components/SchemeComparaison.tsx
View File

@ -1,7 +1,9 @@
import { setSimulationConfig, setSituationBranch } from 'Actions/actions'
import { defineDirectorStatus, isAutoentrepreneur } from 'Actions/companyStatusActions'
import {
defineDirectorStatus,
isAutoentrepreneur
} from 'Actions/companyStatusActions'
import classnames from 'classnames'
import { T } from 'Components'
import Conversation from 'Components/conversation/Conversation'
import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
import PeriodSwitch from 'Components/PeriodSwitch'
@ -12,10 +14,14 @@ import { encodeRuleName, getRuleFromAnalysis } from 'Engine/rules.js'
import revenusSVG from 'Images/revenus.svg'
import { default as React, useCallback, useContext, useState } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
import { analysisWithDefaultsSelector, branchAnalyseSelector } from 'Selectors/analyseSelectors'
import {
analysisWithDefaultsSelector,
branchAnalyseSelector
} from 'Selectors/analyseSelectors'
import { DottedName } from 'Types/rule'
import Animate from 'Ui/animate'
import InfoBulle from 'Ui/InfoBulle'
@ -69,109 +75,111 @@ export default function SchemeComparaison({
})}
>
<h2 className="AS">
{emoji('☂')} <T>Assimilé salarié</T>
{emoji('☂')} <Trans>Assimilé salarié</Trans>
<small>
<T k="comparaisonRégimes.AS.tagline">Le régime tout compris</T>
<Trans key="comparaisonRégimes.AS.tagline">
Le régime tout compris
</Trans>
</small>
</h2>
<h2 className="indep">
{emoji('👩‍🔧')}{' '}
{hideAssimiléSalarié ? (
<T>Entreprise Individuelle</T>
<Trans>Entreprise Individuelle</Trans>
) : (
<T>Indépendant</T>
<Trans>Indépendant</Trans>
)}
<small>
<T k="comparaisonRégimes.indep.tagline">
<Trans key="comparaisonRégimes.indep.tagline">
La protection sociale à la carte
</T>
</Trans>
</small>
</h2>
<h2 className="auto">
{emoji('🚶‍♂️')} <T>Auto-entrepreneur</T>
{emoji('🚶‍♂️')} <Trans>Auto-entrepreneur</Trans>
<small>
<T k="comparaisonRégimes.auto.tagline">
<Trans key="comparaisonRégimes.auto.tagline">
Pour commencer sans risques
</T>
</Trans>
</small>
</h2>
<h3 className="legend">
<T k="comparaisonRégimes.status.legend">
<Trans key="comparaisonRégimes.status.legend">
Statuts juridiques possibles
</T>
</Trans>
</h3>
<div className="AS">
<div>
<T k="comparaisonRégimes.status.AS">
<Trans key="comparaisonRégimes.status.AS">
SAS, SASU ou SARL avec gérant minoritaire
</T>
</Trans>
</div>
</div>
<div className="indep">
<div>
{hideAssimiléSalarié ? (
<T k="comparaisonRégimes.status.indep.2">EI ou EIRL</T>
<Trans key="comparaisonRégimes.status.indep.2">EI ou EIRL</Trans>
) : (
<T k="comparaisonRégimes.status.indep.1">
<Trans key="comparaisonRégimes.status.indep.1">
EI, EIRL, EURL ou SARL avec gérant majoritaire
</T>
</Trans>
)}
</div>
</div>
<div className="auto">
<T k="comparaisonRégimes.status.auto">Auto-entreprise</T>
<Trans key="comparaisonRégimes.status.auto">Auto-entreprise</Trans>
</div>
<T k="comparaisonRégimes.AT">
<Trans key="comparaisonRégimes.AT">
<h3 className="legend">Couverture accidents du travail</h3>
</T>
</Trans>
<div className="AS">
<T>
<T>Oui</T>
</T>
<Trans>
<Trans>Oui</Trans>
</Trans>
</div>
<div className="indep-et-auto">
<T>Non</T>
<Trans>Non</Trans>
</div>
<T k="comparaisonRégimes.assuranceMaladie">
<Trans key="comparaisonRégimes.assuranceMaladie">
<h3 className="legend">
Assurance maladie{' '}
<small>(médicaments, soins, hospitalisations)</small>
</h3>
<div className="AS-indep-et-auto">Identique pour tous</div>
</T>
<T k="comparaisonRégimes.mutuelle">
</Trans>
<Trans key="comparaisonRégimes.mutuelle">
<h3 className="legend">
Mutuelle santé
<small />
</h3>
<div className="AS">Obligatoire</div>
<div className="indep-et-auto">Fortement conseillée</div>
</T>
</Trans>
<T k="comparaisonRégimes.indemnités">
<Trans key="comparaisonRégimes.indemnités">
<h3 className="legend">Indemnités journalières</h3>
</T>
</Trans>
<div className="green AS">++</div>
<div className="green indep">++</div>
<div className="green auto">+</div>
<T k="comparaisonRégimes.retraite">
<Trans key="comparaisonRégimes.retraite">
<h3 className="legend">Retraite</h3>
</T>
</Trans>
<div className="green AS">+++</div>
<div className="green indep">++</div>
<div className="green auto">+</div>
{showMore ? (
<>
<T k="comparaisonRégimes.ACRE">
<Trans key="comparaisonRégimes.ACRE">
<h3 className="legend">ACRE</h3>
<div className="all">
1 an <small>(sous conditions d'éligibilité)</small>
</div>
</T>
<T k="comparaisonRégimes.déduction">
</Trans>
<Trans key="comparaisonRégimes.déduction">
<h3 className="legend">Déduction des charges</h3>
<div className="AS-et-indep">
Oui <small>(régime fiscal du réel)</small>
@ -183,9 +191,9 @@ export default function SchemeComparaison({
revenu)
</small>
</div>
</T>
</Trans>
<T k="comparaisonRégimes.cotisations">
<Trans key="comparaisonRégimes.cotisations">
<h3 className="legend">Paiement des cotisations</h3>
<div className="AS">Mensuel</div>
<div className="indep">
@ -195,8 +203,8 @@ export default function SchemeComparaison({
</small>
</div>
<div className="auto">Mensuel ou trimestriel</div>
</T>
<T k="comparaisonRégimes.complémentaireDeductible">
</Trans>
<Trans key="comparaisonRégimes.complémentaireDeductible">
<h3 className="legend">
Contrats prévoyance et retraite facultatives déductibles
</h3>
@ -206,23 +214,23 @@ export default function SchemeComparaison({
<div className="indep">
Oui <small>(Loi Madelin)</small>
</div>
</T>
</Trans>
<div className="auto">
<T>Non</T>
<Trans>Non</Trans>
</div>
<T k="comparaisonRégimes.cotisationMinimale">
<Trans key="comparaisonRégimes.cotisationMinimale">
<h3 className="legend">Paiement de cotisations minimales</h3>
</T>
</Trans>
<div className="AS">
<T>Non</T>
<Trans>Non</Trans>
</div>
<div className="indep">
<T>Oui</T>
<Trans>Oui</Trans>
</div>
<div className="auto">
<T>Non</T>
<Trans>Non</Trans>
</div>
<T k="comparaisonRégimes.seuil">
<Trans key="comparaisonRégimes.seuil">
<h3 className="legend">
Revenu minimum pour l'ouverture des droits aux prestations
</h3>
@ -231,23 +239,23 @@ export default function SchemeComparaison({
Non <small>(cotisations minimales obligatoires)</small>
</div>
<div className="auto">Oui</div>
</T>
</Trans>
{!hideAutoEntrepreneur && (
<T k="comparaisonRégimes.plafondCA">
<Trans key="comparaisonRégimes.plafondCA">
<h3 className="legend">Plafond de chiffre d'affaires</h3>
<div className="AS-et-indep">
<T>Non</T>
<Trans>Non</Trans>
</div>
<div className="auto">
<T>Oui</T>
<Trans>Oui</Trans>
<small>
(70 000 € en services / 170 000 € en vente de biens,
restauration ou hébergement)
</small>
</div>
</T>
</Trans>
)}
<T k="comparaisonRégimes.comptabilité">
<Trans key="comparaisonRégimes.comptabilité">
<h3 className="legend">
Gestion comptable, sociale, juridique...
</h3>
@ -262,10 +270,10 @@ export default function SchemeComparaison({
Simplifiée{' '}
<small>(peut être gérée par l'auto-entrepreneur)</small>
</div>
</T>
</Trans>
</>
) : (
<T k="comparaisonRégimes.comparaisonDétaillée">
<Trans key="comparaisonRégimes.comparaisonDétaillée">
<div className="all">
<button
onClick={() => setShowMore(true)}
@ -274,13 +282,13 @@ export default function SchemeComparaison({
Afficher plus d'informations
</button>
</div>
</T>
</Trans>
)}
{conversationStarted && (
<>
<T k="comparaisonRégimes.période">
<Trans key="comparaisonRégimes.période">
<h3 className="legend">Unité</h3>
</T>
</Trans>
<div className="AS-indep-et-auto" style={{ alignSelf: 'start' }}>
<PeriodSwitch />
</div>
@ -289,7 +297,7 @@ export default function SchemeComparaison({
<div className="all colored">
{!conversationStarted ? (
<>
<T k="comparaisonRégimes.simulationText">
<Trans key="comparaisonRégimes.simulationText">
<h3>
Comparer mes revenus, pension de retraite et indemnité maladie
</h3>
@ -300,7 +308,7 @@ export default function SchemeComparaison({
>
Lancer la simulation
</button>
</T>
</Trans>
</>
) : (
<div className="ui__ container">
@ -310,12 +318,11 @@ export default function SchemeComparaison({
)}
</div>
{conversationStarted &&
!!getRule('assimilé', 'revenu net après impôt')
?.nodeValue && (
!!getRule('assimilé', 'revenu net après impôt')?.nodeValue && (
<>
<T k="comparaisonRégimes.revenuNetApresImpot">
<Trans key="comparaisonRégimes.revenuNetApresImpot">
<h3 className="legend">Revenu net après impôt</h3>
</T>
</Trans>
<div className="AS">
<Animate.appear className="ui__ plain card">
<RuleValueLink
@ -349,11 +356,11 @@ export default function SchemeComparaison({
)}
</Animate.appear>
</div>
<T k="comparaisonRégimes.revenuNetAvantImpot">
<Trans key="comparaisonRégimes.revenuNetAvantImpot">
<h3 className="legend">
Revenu net de cotisations <small>(avant impôts)</small>
</h3>
</T>
</Trans>
<div className="AS">
<RuleValueLink
branch="assimilé"
@ -377,10 +384,10 @@ export default function SchemeComparaison({
)}
</div>
<h3 className="legend">
<T k="comparaisonRégimes.retraiteEstimation.legend">
<Trans key="comparaisonRégimes.retraiteEstimation.legend">
<span>Pension de retraite</span>
<small>(avant impôts)</small>
</T>
</Trans>
</h3>
<div className="AS">
<span>
@ -389,10 +396,10 @@ export default function SchemeComparaison({
rule="protection sociale . retraite"
/>{' '}
<InfoBulle>
<T k="comparaisonRégimes.retraiteEstimation.infobulles.AS">
<Trans key="comparaisonRégimes.retraiteEstimation.infobulles.AS">
Pension calculée pour 172 trimestres cotisés au régime
général sans variations de revenus.
</T>
</Trans>
</InfoBulle>
</span>
</div>
@ -405,15 +412,15 @@ export default function SchemeComparaison({
rule="protection sociale . retraite"
/>{' '}
<InfoBulle>
<T k="comparaisonRégimes.retraiteEstimation.infobulles.indep">
<Trans key="comparaisonRégimes.retraiteEstimation.infobulles.indep">
Pension calculée pour 172 trimestres cotisés au régime
des indépendants sans variations de revenus.
</T>
</Trans>
</InfoBulle>
</span>
) : (
<span className="ui__ notice">
<T>Pas implémenté</T>
<Trans>Pas implémenté</Trans>
</span>
)}
</div>
@ -430,28 +437,28 @@ export default function SchemeComparaison({
rule="protection sociale . retraite"
/>{' '}
<InfoBulle>
<T k="comparaisonRégimes.retraiteEstimation.infobulles.auto">
<Trans key="comparaisonRégimes.retraiteEstimation.infobulles.auto">
Pension calculée pour 172 trimestres cotisés en
auto-entrepreneur sans variations de revenus.
</T>
</Trans>
</InfoBulle>
</span>
) : (
<span className="ui__ notice">
<T>Pas implémenté</T>
<Trans>Pas implémenté</Trans>
</span>
)}
</div>
<T k="comparaisonRégimes.trimestreValidés">
<Trans key="comparaisonRégimes.trimestreValidés">
<h3 className="legend">
Nombre de trimestres validés <small>(pour la retraite)</small>
</h3>
</T>
</Trans>
<div className="AS">
<RuleValueLink
branch="assimilé"
rule="protection sociale . retraite . trimestres validés par an"
appendText={<T>trimestres</T>}
appendText={<Trans>trimestres</Trans>}
unit={null}
/>
</div>
@ -459,7 +466,7 @@ export default function SchemeComparaison({
<RuleValueLink
branch="indépendant"
rule="protection sociale . retraite . trimestres validés par an"
appendText={<T>trimestres</T>}
appendText={<Trans>trimestres</Trans>}
unit={null}
/>
</div>
@ -470,24 +477,24 @@ export default function SchemeComparaison({
<RuleValueLink
branch="auto-entrepreneur"
rule="protection sociale . retraite . trimestres validés par an"
appendText={<T>trimestres</T>}
appendText={<Trans>trimestres</Trans>}
unit={null}
/>
)}
</div>
<T k="comparaisonRégimes.indemnités">
<Trans key="comparaisonRégimes.indemnités">
<h3 className="legend">
Indemnités journalières{' '}
<small>(en cas d'arrêt maladie)</small>
</h3>
</T>
</Trans>
<div className="AS">
<span>
<RuleValueLink
branch="assimilé"
appendText={
<>
/ <T>jour</T>
/ <Trans>jour</Trans>
</>
}
rule="protection sociale . santé . indemnités journalières"
@ -499,7 +506,10 @@ export default function SchemeComparaison({
branch="assimilé"
rule="protection sociale . accidents du travail et maladies professionnelles"
/>{' '}
<T>pour les accidents de trajet/travail et maladie pro</T>)
<Trans>
pour les accidents de trajet/travail et maladie pro
</Trans>
)
</small>
</div>
<div className="indep">
@ -512,7 +522,7 @@ export default function SchemeComparaison({
<RuleValueLink
appendText={
<>
/ <T>jour</T>
/ <Trans>jour</Trans>
</>
}
branch="indépendant"
@ -521,7 +531,7 @@ export default function SchemeComparaison({
</span>
) : (
<span className="ui__ notice">
<T>Pas implémenté</T>
<Trans>Pas implémenté</Trans>
</span>
)}
</span>
@ -536,7 +546,7 @@ export default function SchemeComparaison({
rule="protection sociale . santé . indemnités journalières"
appendText={
<>
/ <T>jour</T>
/ <Trans>jour</Trans>
</>
}
/>
@ -549,9 +559,9 @@ export default function SchemeComparaison({
<div className="ui__ container">
<br />
<h3>
<T k="comparaisonRégimes.titreSelection">
<Trans key="comparaisonRégimes.titreSelection">
Créer mon entreprise en tant que :
</T>
</Trans>
</h3>
<div className="ui__ answer-group">
{!hideAssimiléSalarié && (
@ -562,7 +572,9 @@ export default function SchemeComparaison({
!hideAutoEntrepreneur && dispatch(isAutoentrepreneur(false))
}}
>
<T k="comparaisonRégimes.choix.AS">Assimilé&nbsp;salarié</T>
<Trans key="comparaisonRégimes.choix.AS">
Assimilé&nbsp;salarié
</Trans>
</button>
)}
<button
@ -574,9 +586,11 @@ export default function SchemeComparaison({
}}
>
{hideAssimiléSalarié ? (
<T k="comparaisonRégimes.choix.EI">Entreprise individuelle</T>
<Trans key="comparaisonRégimes.choix.EI">
Entreprise individuelle
</Trans>
) : (
<T k="comparaisonRégimes.choix.indep">Indépendant</T>
<Trans key="comparaisonRégimes.choix.indep">Indépendant</Trans>
)}
</button>
{!hideAutoEntrepreneur && (
@ -588,7 +602,9 @@ export default function SchemeComparaison({
dispatch(isAutoentrepreneur(true))
}}
>
<T k="comparaisonRégimes.choix.auto">Auto-entrepreneur</T>
<Trans key="comparaisonRégimes.choix.auto">
Auto-entrepreneur
</Trans>
</button>
)}
</div>

28
source/components/SimulateurWarning.tsx
View File

@ -1,7 +1,7 @@
import { T } from 'Components'
import { usePersistingState } from 'Components/utils/persistState'
import React from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { SitePaths } from './utils/withSitePaths'
type SimulateurWarningProps = {
@ -25,14 +25,14 @@ export default function SimulateurWarning({
<p>
{emoji('🚩 ')}
<strong>
<T k="simulateurs.warning.titre">Avant de commencer...</T>
<Trans key="simulateurs.warning.titre">Avant de commencer...</Trans>
</strong>{' '}
{folded && (
<button
className="ui__ button simple small"
onClick={() => fold(false)}
>
<T k="simulateurs.warning.plus">Lire les précisions</T>
<Trans key="simulateurs.warning.plus">Lire les précisions</Trans>
</button>
)}
</p>
@ -45,7 +45,7 @@ export default function SimulateurWarning({
{simulateur == 'auto-entrepreneur' && (
<>
<li>
<T k="simulateurs.warning.auto-entrepreneur">
<Trans key="simulateurs.warning.auto-entrepreneur">
{' '}
Les auto-entrepreneurs ne peuvent pas déduire leurs charges
de leur chiffre d'affaires. Il faut donc{' '}
@ -53,10 +53,10 @@ export default function SimulateurWarning({
retrancher au net tous les coûts liés à l'entreprise pour
obtenir le revenu réellement perçu.
</strong>
</T>
</Trans>
</li>
<li>
<T k="simulateurs.warning.cfe">
<Trans key="simulateurs.warning.cfe">
Le simulateur n'intègre pas la cotisation foncière des
entreprise (CFE) qui est dûe dès la deuxième année
d'exercice. Son montant varie fortement en fonction du
@ -64,35 +64,35 @@ export default function SimulateurWarning({
<a href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F23547">
Plus d'infos.
</a>
</T>
</Trans>
</li>
</>
)}
{simulateur !== 'artiste-auteur' && (
<li>
<T k="simulateurs.warning.urssaf">
<Trans key="simulateurs.warning.urssaf">
Les calculs sont indicatifs et ne se substituent pas aux
décomptes réels des Urssaf, impots.gouv.fr, ou autres.
</T>
</Trans>
</li>
)}
{simulateur === 'artiste-auteur' && (
<>
<li>
<T k="simulateurs.warning.artiste-auteur">
<Trans key="simulateurs.warning.artiste-auteur">
Cette estimation est proposée à titre indicatif. Elle est
faite à partir des éléments réglementaires applicables et
des éléments que vous avez saisis, mais elle ne tient pas
compte de l'ensemble de votre situation. Le montant réel de
vos cotisations peut donc être différent.
</T>
</Trans>
</li>
<li>
<T k="simlateurs.warning.artiste-auteur">
<Trans key="simlateurs.warning.artiste-auteur">
Ce simulateur permet d'estimer le montant de vos cotisations
pour l'année 2020 à partir de votre revenu projeté
</T>
</Trans>
</li>
</>
)}
@ -102,7 +102,7 @@ export default function SimulateurWarning({
className="ui__ button simple small"
onClick={() => fold(true)}
>
<T>J'ai compris</T>
<Trans>J'ai compris</Trans>
</button>
</div>
</div>

10
source/components/Simulation.tsx
View File

@ -1,4 +1,3 @@
import { T } from 'Components'
import Controls from 'Components/Controls'
import Conversation, {
ConversationProps
@ -8,6 +7,7 @@ import PageFeedback from 'Components/Feedback/PageFeedback'
import SearchButton from 'Components/SearchButton'
import TargetSelection from 'Components/TargetSelection'
import React from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { firstStepCompletedSelector } from 'Selectors/analyseSelectors'
import { simulationProgressSelector } from 'Selectors/progressSelectors'
@ -43,9 +43,9 @@ export default function Simulation({
>
{progress < 1 ? (
<small css="padding: 0.4rem 0">
<T k="simulateurs.précision.défaut">
<Trans key="simulateurs.précision.défaut">
Affinez la simulation en répondant aux questions :
</T>
</Trans>
</small>
) : (
<span />
@ -64,9 +64,9 @@ export default function Simulation({
<br />
<PageFeedback
customMessage={
<T k="feedback.simulator">
<Trans key="feedback.simulator">
Êtes-vous satisfait de ce simulateur ?
</T>
</Trans>
}
customEventName="rate simulator"
/>{' '}

57
source/components/TargetSelection.tsx
View File

@ -1,29 +1,24 @@
import { setActiveTarget, updateSituation } from 'Actions/actions'
import { T } from 'Components'
import InputSuggestions from 'Components/conversation/InputSuggestions'
import PeriodSwitch from 'Components/PeriodSwitch'
import RuleLink from 'Components/RuleLink'
import { ThemeColorsContext } from 'Components/utils/colors'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { formatCurrency } from 'Engine/format'
import { encodeRuleName } from 'Engine/rules'
import { isEmpty, isNil } from 'ramda'
import React, { useContext, useEffect, useState } from 'react'
import emoji from 'react-easy-emoji'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
import {
analysisWithDefaultsSelector,
situationSelector,
useTarget
} from 'Selectors/analyseSelectors'
import { Rule } from 'Types/rule'
import Animate from 'Ui/animate'
import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
import CurrencyInput from './CurrencyInput/CurrencyInput'
import './TargetSelection.css'
import { setActiveTarget, updateSituation } from 'Actions/actions';
import InputSuggestions from 'Components/conversation/InputSuggestions';
import PeriodSwitch from 'Components/PeriodSwitch';
import RuleLink from 'Components/RuleLink';
import { ThemeColorsContext } from 'Components/utils/colors';
import { SitePathsContext } from 'Components/utils/withSitePaths';
import { formatCurrency } from 'Engine/format';
import { encodeRuleName } from 'Engine/rules';
import { isEmpty, isNil } from 'ramda';
import React, { useContext, useEffect, useState } from 'react';
import emoji from 'react-easy-emoji';
import { Trans, useTranslation } from "react-i18next";
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { RootState } from 'Reducers/rootReducer';
import { analysisWithDefaultsSelector, situationSelector, useTarget } from 'Selectors/analyseSelectors';
import { Rule } from 'Types/rule';
import Animate from 'Ui/animate';
import AnimatedTargetValue from 'Ui/AnimatedTargetValue';
import CurrencyInput from './CurrencyInput/CurrencyInput';
import './TargetSelection.css';
export default function TargetSelection() {
const [initialRender, setInitialRender] = useState(true)
@ -84,7 +79,7 @@ export default function TargetSelection() {
<div style={{ flex: 1 }}>
{nom && (
<h2 style={{ marginBottom: 0 }}>
{emoji(icône)} <T>{nom}</T>
{emoji(icône)} <Trans>{nom}</Trans>
</h2>
)}
</div>
@ -298,15 +293,15 @@ function AidesGlimpse() {
<Animate.appear>
<div className="aidesGlimpse">
<RuleLink {...aideLink}>
<T>en incluant</T>{' '}
<Trans>en incluant</Trans>{' '}
<strong>
<AnimatedTargetValue value={aides.nodeValue}>
<span>{formatCurrency(aides.nodeValue, language)}</span>
</AnimatedTargetValue>
<Trans>AnimatedTargetValue>
</strong>{' '}
<T>d'aides</T> {emoji(aides.explanation.icons)}
<Trans>d'aides</Trans> {emoji(aides.explanation.icons)}
</RuleLink>
</div>
</Animate.appear>
)
)<Trans>
}

5
source/components/Value.tsx
View File

@ -1,7 +1,6 @@
import { T } from 'Components'
import { formatValue, formatValueOptions } from 'Engine/format'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { EvaluatedRule } from 'Types/rule'
// let booleanTranslations = { true: '✅', false: '❌' }
@ -58,7 +57,7 @@ export default function Value({
let valueType = typeof nodeValue,
formattedValue =
valueType === 'string' ? (
<T>{nodeValue}</T>
<Trans>{nodeValue}</Trans>
) : valueType === 'object' ? (
(nodeValue as any).nom
) : valueType === 'boolean' ? (

14
source/components/conversation/Conversation.tsx
View File

@ -1,10 +1,10 @@
import { goToQuestion, validateStepWithValue } from 'Actions/actions'
import { T } from 'Components'
import QuickLinks from 'Components/QuickLinks'
import getInputComponent from 'Engine/getInputComponent'
import { findRuleByDottedName } from 'Engine/rules'
import React from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
import {
@ -60,7 +60,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
onClick={goToPrevious}
className="ui__ simple small push-left button"
>
← <T>Précédent</T>
← <Trans>Précédent</Trans>
</button>
</>
)}
@ -68,7 +68,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
onClick={setDefault}
className="ui__ simple small push-right button"
>
<T>Passer</T> →
<Trans>Passer</Trans> →
</button>
</div>
</React.Fragment>
@ -80,15 +80,17 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
<div style={{ textAlign: 'center' }}>
<h3>
{emoji('🌟')}{' '}
<T k="simulation-end.title">Vous avez complété cette simulation</T>{' '}
<Trans key="simulation-end.title">
Vous avez complété cette simulation
</Trans>{' '}
</h3>
<p>
{customEndMessages ? (
customEndMessages
) : (
<T k="simulation-end.text">
<Trans key="simulation-end.text">
Vous avez maintenant accès à l'estimation la plus précise possible.
</T>
</Trans>
)}
</p>
</div>

4
source/components/conversation/Question.js
View File

@ -1,8 +1,8 @@
import classnames from 'classnames'
import { T } from 'Components'
import { ThemeColorsContext } from 'Components/utils/colors'
import { compose, is } from 'ramda'
import React, { useCallback, useContext, useState } from 'react'
import { Trans } from 'react-i18next'
import Explicable from './Explicable'
import { FormDecorator } from './FormDecorator'
import './Question.css'
@ -145,7 +145,7 @@ function RadioLabelContent({ value, label, currentValue, onChange, submit }) {
style={labelStyle}
className={classnames('radio', 'userAnswerButton', { selected })}
>
<T>{label}</T>
<Trans>{label}</Trans>
<input
type="radio"
onClick={click(value)}

4
source/components/conversation/SeeAnswersButton.tsx
View File

@ -1,5 +1,5 @@
import { T } from 'Components'
import React, { useState } from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
import Answers from './AnswerList'
@ -17,7 +17,7 @@ export default function SeeAnswersButton() {
className="ui__ small simple button "
onClick={() => setShowAnswerModal(true)}
>
<T>Modifier mes réponses</T>
<Trans>Modifier mes réponses</Trans>
</button>
)}
{showAnswerModal && <Answers onClose={() => setShowAnswerModal(false)} />}

6
source/components/conversation/select/SelectGéo.js
View File

@ -1,5 +1,5 @@
import { T } from 'Components'
import React, { useCallback, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
import { debounce } from '../../../utils'
import { FormDecorator } from '../FormDecorator'
@ -101,9 +101,9 @@ export default FormDecorator('select')(function Select({
debouncedHandleSearch(e.target.value)
}}
/>
{!isLoading && (searchResults && searchResults.length === 0) && (
{!isLoading && searchResults && searchResults.length === 0 && (
<p>
<T>Aucun résultat</T>
<Trans>Aucun résultat</Trans>
</p>
)}

4
source/components/conversation/select/SelectTauxRisque.js
View File

@ -1,5 +1,5 @@
import { T } from 'Components'
import React, { useEffect, useState } from 'react'
import { Trans } from 'react-i18next'
import Worker from 'worker-loader!./SelectTauxRisque.worker.js'
import { FormDecorator } from '../FormDecorator'
const worker = new Worker()
@ -50,7 +50,7 @@ function SelectComponent({ setFormValue, submit, options }) {
/>
{searchResults && searchResults.length === 0 && (
<p>
<T>Aucun résultat</T>
<Trans>Aucun résultat</Trans>
</p>
)}

8
source/components/index.tsx
View File

@ -1,8 +0,0 @@
import React from 'react'
import { Trans, TransProps } from 'react-i18next'
type TProps = { k?: TransProps['i18nKey'] } & TransProps
const T = ({ k, ...props }: TProps) => <Trans i18nKey={k} {...props} />
export { T }

18
source/components/rule/Algorithm.tsx
View File

@ -1,5 +1,4 @@
import classNames from 'classnames'
import { T } from 'Components'
import { makeJsx } from 'Engine/evaluation'
import { any, identity, path } from 'ramda'
import React from 'react'
@ -15,10 +14,15 @@ let Conditions = ({
'non applicable si': notApplicable
}) => {
let listElements = [
...parentDependencies.map(parentDependency =>
parentDependency.nodeValue === false && (
<ShowIfDisabled dependency={parentDependency} key="parent dependency" />
)),
...parentDependencies.map(
parentDependency =>
parentDependency.nodeValue === false && (
<ShowIfDisabled
dependency={parentDependency}
key="parent dependency"
/>
)
),
...disabledBy?.explanation?.isDisabledBy?.map(
(dependency, i) =>
dependency?.nodeValue === true && (
@ -43,9 +47,9 @@ function ShowIfDisabled({ dependency }) {
return (
<li>
<span css="background: yellow">
<T>Désactivée</T>
<Trans>Désactivée</Trans>
</span>{' '}
<T>car dépend de</T> {makeJsx(dependency)}
<Trans>car dépend de</Trans> {makeJsx(dependency)}
</li>
)
}

5
source/components/rule/Rule.js
View File

@ -1,4 +1,3 @@
import { T } from 'Components'
import { ThemeColorsContext } from 'Components/utils/colors'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import Value from 'Components/Value'
@ -166,7 +165,7 @@ export default AttachDictionary(knownMecanisms)(function Rule({ dottedName }) {
sitePaths.simulateurs.index
}
>
<T>Faire une simulation</T>
<Trans>Faire une simulation</Trans>
</Link>
</div>
)}
@ -177,7 +176,7 @@ export default AttachDictionary(knownMecanisms)(function Rule({ dottedName }) {
{displayedRule['rend non applicable'] && (
<section id="non-applicable">
<h3>
<T>Rend non applicable les règles suivantes</T> :{' '}
<Trans>Rend non applicable les règles suivantes</Trans> :{' '}
</h3>
<ul>
{displayedRule['rend non applicable'].map(ruleName => (

4
source/engine/parseRule.tsx
View File

@ -1,10 +1,10 @@
import { T } from 'Components'
import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
import RuleLink from 'Components/RuleLink'
import evaluate from 'Engine/evaluateRule'
import { parse } from 'Engine/parse'
import { evolve, map } from 'ramda'
import React from 'react'
import { Trans } from 'react-i18next'
import { coerceArray } from '../utils'
import { evaluateNode, makeJsx, mergeAllMissing } from './evaluation'
import { Node } from './mecanismViews/common'
@ -153,7 +153,7 @@ export default (rules, rule, parsedRules) => {
<>
<h3>Exception{isDisabledBy.length > 1 && 's'}</h3>
<p>
<T>Cette règle ne s'applique pas pour</T> :{' '}
<Trans>Cette règle ne s'applique pas pour</Trans> :{' '}
{isDisabledBy.map((rule, i) => (
<React.Fragment key={i}>
{i > 0 && ', '}

16
source/engine/units.ts
View File

@ -1,4 +1,16 @@
import { countBy, equals, flatten, isEmpty, keys, map, pipe, remove, uniq, unnest, without } from 'ramda'
import {
countBy,
equals,
flatten,
isEmpty,
keys,
map,
pipe,
remove,
uniq,
unnest,
without
} from 'ramda'
import i18n from '../i18n'
type BaseUnit = string
@ -100,7 +112,7 @@ export let inferUnit = (
return undefined
}
export let removeOnce = <T>(
export let removeOnce = <Trans>(
element: T,
eqFn: (a: T, b: T) => boolean = equals
) => (list: Array<T>): Array<T> => {

9
source/sites/mon-entreprise.fr/layout/Footer/Privacy.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import Overlay from 'Components/Overlay'
import { ScrollToTop } from 'Components/utils/Scroll'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
export default function Privacy() {
const [opened, setOpened] = useState(false)
@ -18,7 +17,7 @@ export default function Privacy() {
return (
<>
<button onClick={handleOpen} className="ui__ link-button">
<T>Vie privée</T>
<Trans>Vie privée</Trans>
</button>
{opened && (
<Overlay onClose={handleClose} style={{ textAlign: 'left' }}>
@ -32,7 +31,7 @@ export default function Privacy() {
export let PrivacyContent = ({ language }: { language: string }) => (
<>
<T k="privacyContent">
<Trans key="privacyContent">
<h1>Vie privée</h1>
<p>
Nous recueillons des statistiques anonymes sur l'utilisation du site,
@ -48,7 +47,7 @@ export let PrivacyContent = ({ language }: { language: string }) => (
Vous pouvez vous soustraire de cette mesure d'utilisation du site
ci-dessous.
</p>
</T>
</Trans>
<iframe
style={{
border: 0,

33
source/sites/mon-entreprise.fr/pages/Créer/AfterRegistration.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
@ -27,14 +26,14 @@ export default function AfterRegistration() {
activeClassName="ui__ hide"
className="ui__ simple small button"
>
← <T>Retour à la création</T>
← <Trans>Retour à la création</Trans>
</NavLink>
</div>
<h1>
<T k="après.titre">Après la création</T>
<Trans key="après.titre">Après la création</Trans>
</h1>
<p>
<T k="après.intro">
<Trans key="après.intro">
Une fois votre{' '}
{{
statutChoisi: isAutoentrepreneur
@ -42,18 +41,18 @@ export default function AfterRegistration() {
: statutChoisi || t(['après.entreprise', 'entreprise'])
}}{' '}
créée, vous recevez les informations suivantes :
</T>
</Trans>
</p>
<h2>
<T k="après.siret.titre">Le numéro SIRET</T>
<Trans key="après.siret.titre">Le numéro SIRET</Trans>
</h2>
<p>
<T k="après.siret.description">
<Trans key="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
entreprise. Le SIRET commence par le SIREN, auquel on ajoute le numéro
d'établissement (NIC).
</T>
</Trans>
<br />
<img
src={siret}
@ -62,10 +61,10 @@ export default function AfterRegistration() {
/>
</p>
<h2>
<T k="après.ape.titre">Le code APE</T>
<Trans key="après.ape.titre">Le code APE</Trans>
</h2>
<p>
<T k="après.ape.description">
<Trans key="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
dans la nomenclature nationale d'activités françaises « NAF » (
@ -91,15 +90,15 @@ export default function AfterRegistration() {
</a>{' '}
à l'INSEE.
</p>
</T>
</Trans>
</p>
{statutChoisi && !statutChoisi.includes('auto-entrepreneur') && (
<>
<h2>
<T k="après.kbis.titre">Le Kbis</T>
<Trans key="après.kbis.titre">Le Kbis</Trans>
</h2>
<p>
<T k="après.kbis.description.1">
<Trans key="après.kbis.description.1">
C'est le document officiel qui atteste de{' '}
<strong>l'existence légale d'une entreprise commerciale</strong>.
Le plus souvent, pour être valable par les procédures
@ -107,14 +106,14 @@ export default function AfterRegistration() {
<a href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F21000">
Plus d'infos.
</a>
</T>
</Trans>
</p>
<p>
<T k="après.kbis.description.2">
<Trans key="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.
</T>
</Trans>
</p>
</>
)}

143
source/sites/mon-entreprise.fr/pages/Créer/CreationChecklist.tsx
View File

@ -3,13 +3,12 @@ import {
initializeCompanyCreationChecklist
} from 'Actions/companyCreationChecklistActions'
import { goToCompanyStatusChoice } from 'Actions/companyStatusActions'
import { T } from 'Components'
import Scroll from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { connect, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
@ -78,7 +77,7 @@ function CreateCompany({
onClick={onStatusChange}
className="ui__ simple small push-left button"
>
<T k="entreprise.retour">← Choisir un autre statut</T>
<Trans key="entreprise.retour">← Choisir un autre statut</Trans>
</button>
</div>
@ -89,14 +88,16 @@ function CreateCompany({
<h2>
{emoji('📋')}{' '}
<T k="entreprise.tâches.titre">À faire pour créer votre entreprise</T>
<Trans key="entreprise.tâches.titre">
À faire pour créer votre entreprise
</Trans>
</h2>
<p className="ui__ notice">
<T k="entreprise.tâches.avancement">
<Trans key="entreprise.tâches.avancement">
Utilisez cette liste pour suivre votre avancement dans les démarches.
Votre progression est automatiquement sauvegardée dans votre
navigateur.
</T>
</Trans>
</p>
<Checklist
key={statut}
@ -108,19 +109,21 @@ function CreateCompany({
name="legalStatus"
defaultChecked={true}
title={
<T k="entreprise.tâches.formeJuridique.titre">
<Trans key="entreprise.tâches.formeJuridique.titre">
Choisir la forme juridique
</T>
</Trans>
}
/>
{!isEI && (
<CheckItem
name="corporateName"
title={
<T k="entreprise.tâches.nom.titre">Trouver un nom d'entreprise</T>
<Trans key="entreprise.tâches.nom.titre">
Trouver un nom d'entreprise
</Trans>
}
explanations={
<T k="entreprise.tâches.nom.description">
<Trans key="entreprise.tâches.nom.description">
<p>
<strong>La dénomination sociale</strong> est le nom de votre
entreprise aux yeux de la loi, écrit sur tous vos documents
@ -134,7 +137,7 @@ function CreateCompany({
de domaine Internet, etc. Vous pouvez vérifier dans la base de
données <a href="https://bases-marques.inpi.fr/">INPI</a>.
</p>
</T>
</Trans>
}
/>
)}
@ -142,17 +145,17 @@ function CreateCompany({
<CheckItem
name="corporatePurpose"
title={
<T k="entreprise.tâches.objetSocial.titre">
<Trans key="entreprise.tâches.objetSocial.titre">
Déterminer l'objet social
</T>
</Trans>
}
explanations={
<p>
<T k="entreprise.tâches.objetSocial.description">
<Trans key="entreprise.tâches.objetSocial.description">
L'
<strong>objet social</strong> est l'activité principale de
l'entreprise. Une activité secondaire peut être enregistrée.
</T>
</Trans>
</p>
}
/>
@ -160,12 +163,12 @@ function CreateCompany({
<CheckItem
name="companyAddress"
title={
<T k="entreprise.tâches.adresse.titre">
<Trans key="entreprise.tâches.adresse.titre">
Choisir une adresse pour le siège
</T>
</Trans>
}
explanations={
<T k="entreprise.tâches.adresse.description">
<Trans key="entreprise.tâches.adresse.description">
<p>
<strong>L'adresse</strong> est l'espace physique où votre
entreprise sera incorporée. Dans certains lieux et certaines
@ -175,7 +178,7 @@ function CreateCompany({
Plus d'infos
</a>
</p>
</T>
</Trans>
}
/>
)}
@ -183,11 +186,13 @@ function CreateCompany({
<CheckItem
name="statut"
title={
<T k="entreprise.tâches.statuts.titre">Écrire les statuts</T>
<Trans key="entreprise.tâches.statuts.titre">
Écrire les statuts
</Trans>
}
explanations={
<p>
<T k="entreprise.tâches.statuts.description">
<Trans key="entreprise.tâches.statuts.description">
Il s'agit d'un document officiel qui intègre la forme
juridique, nomme les associés et leurs contributions au
capital.{' '}
@ -200,7 +205,7 @@ function CreateCompany({
associés, il est recommandé de faire appel à un juriste pour
les rédiger.{' '}
</span>
</T>
</Trans>
{['SARL', 'EURL'].includes(statut) && (
<StatutsExample statut={statut} />
)}
@ -211,32 +216,34 @@ function CreateCompany({
<CheckItem
name="openBankAccount"
title={
<T k="entreprise.tâches.banque.titre">Ouvrir un compte bancaire</T>
<Trans key="entreprise.tâches.banque.titre">
Ouvrir un compte bancaire
</Trans>
}
explanations={
<>
<p>
<T k="entreprise.tâches.banque.description.1">
<Trans key="entreprise.tâches.banque.description.1">
Le but d'un <strong>compte bancaire d'entreprise</strong> est
de séparer les actifs de l'entreprise des vôtres.
</T>{' '}
</Trans>{' '}
{statut === 'EI' && (
<T k="entreprise.tâches.banque.description.EI">
<Trans key="entreprise.tâches.banque.description.EI">
Si son ouverture n'est pas obligatoire pour un IE, elle
reste fortement recommandée.{' '}
</T>
</Trans>
)}
<T k="entreprise.tâches.banque.description.2">
<Trans key="entreprise.tâches.banque.description.2">
Le compte d'entreprise vous permet de :
</T>
</Trans>
</p>
<ul>
<T k="entreprise.tâches.banque.description.liste">
<Trans key="entreprise.tâches.banque.description.liste">
<li>
Différencier vos opérations privées et professionnelles
</li>
<li>Faciliter les déclarations fiscales</li>
</T>
</Trans>
</ul>
</>
}
@ -245,10 +252,12 @@ function CreateCompany({
<CheckItem
name="fundsDeposit"
title={
<T k="entreprise.tâches.capital.titre">Déposer le capital</T>
<Trans key="entreprise.tâches.capital.titre">
Déposer le capital
</Trans>
}
explanations={
<T k="entreprise.tâches.capital.description">
<Trans key="entreprise.tâches.capital.description">
<p>
Le <strong>dépôt du capital social</strong> doit être fait au
moment de la constitution d'une société par une personne
@ -265,7 +274,7 @@ function CreateCompany({
ou d'un notaire, qui doit alors fournir un certificat de dépôt
du capital.
</p>
</T>
</Trans>
}
/>
)}
@ -273,12 +282,12 @@ function CreateCompany({
<CheckItem
name="declarationOfAssignement"
title={
<T k="entreprise.tâches.affectation.titre">
<Trans key="entreprise.tâches.affectation.titre">
Effectuer une déclaration d'affectation de patrimoine
</T>
</Trans>
}
explanations={
<T k="entreprise.tâches.affectation.description">
<Trans key="entreprise.tâches.affectation.description">
<p>
La <strong>déclaration d'affectation du patrimoine</strong>{' '}
permet de séparer le patrimoine professionnel de votre
@ -300,20 +309,20 @@ function CreateCompany({
Plus d'informations
</a>
</p>
</T>
</Trans>
}
/>
)}
{!isEI && (
<CheckItem
title={
<T k="entreprise.tâches.journal.titre">
<Trans key="entreprise.tâches.journal.titre">
Publier une annonce de création dans un journal
</T>
</Trans>
}
name="publishCreationNotice"
explanations={
<T k="entreprise.tâches.journal.description">
<Trans key="entreprise.tâches.journal.description">
<p>
Vous devez publier la création de votre entreprise dans un
journal d'annonces légales (« JAL »), pour un coût de
@ -343,7 +352,7 @@ function CreateCompany({
immatriculée
</li>
</ul>
</T>
</Trans>
}
/>
)}
@ -351,12 +360,12 @@ function CreateCompany({
<CheckItem
name="registerCompanyOnline"
title={
<T k="entreprise.tâches.formulaire.titre">
<Trans key="entreprise.tâches.formulaire.titre">
Créer mon entreprise en ligne
</T>
</Trans>
}
explanations={
<T k="entreprise.tâches.formulaire.description">
<Trans key="entreprise.tâches.formulaire.description">
<p>
Vous pouvez faire votre inscription en ligne à tout moment,
l'enregistrer et y revenir comme vous le souhaitez.
@ -374,15 +383,15 @@ function CreateCompany({
Faire la démarche en ligne
</a>
</div>
</T>
</Trans>
}
/>
</Checklist>
<h2>
{emoji('💭')}{' '}
<T k="entreprise.tâches.titre2">
<Trans key="entreprise.tâches.titre2">
Recommandé avant le début de l'activité
</T>
</Trans>
</h2>
<Checklist>
@ -390,18 +399,20 @@ function CreateCompany({
<CheckItem
name="chooseCertifiedAccountant"
title={
<T k="entreprise.tâches.comptable.titre">Choisir un comptable</T>
<Trans key="entreprise.tâches.comptable.titre">
Choisir un comptable
</Trans>
}
explanations={
<p>
<T k="entreprise.tâches.comptable.description">
<Trans key="entreprise.tâches.comptable.description">
La gestion d'une entreprise impose un certain nombre d'
<a href="https://www.economie.gouv.fr/entreprises/obligations-comptables">
obligations comptables
</a>
. Il est conseillé de faire appel aux services d'un comptable
ou d'un logiciel de comptabilité en ligne.
</T>
</Trans>
</p>
}
/>
@ -409,12 +420,12 @@ function CreateCompany({
<CheckItem
name="checkoutProfessionalAssuranceNeeds"
title={
<T k="entreprise.tâches.assurance.titre">
<Trans key="entreprise.tâches.assurance.titre">
Juger de la nécessité de prendre une assurance
</T>
</Trans>
}
explanations={
<T k="entreprise.tâches.assurance.description">
<Trans key="entreprise.tâches.assurance.description">
<p>
Une PME ou un travailleur indépendant doit se protéger contre
les principaux risques auxquels il est exposé et souscrire des
@ -427,12 +438,12 @@ function CreateCompany({
<a href="https://www.economie.gouv.fr/entreprises/assurances-obligatoires">
Plus d'infos
</a>
</T>
</Trans>
}
/>
</Checklist>
<h2>
{emoji('🧰')} <T>Ressources utiles</T>
{emoji('🧰')} <Trans>Ressources utiles</Trans>
</h2>
<div
css={`
@ -452,13 +463,13 @@ function CreateCompany({
state: { fromCréer: true }
}}
>
<T k="entreprise.ressources.simu.autoEntrepreneur">
<Trans key="entreprise.ressources.simu.autoEntrepreneur">
<p>Simulateur de revenus auto-entrepreneur</p>
<small>
Simuler le montant de vos cotisations sociales et de votre impôt
et estimez votre futur revenu net.
</small>
</T>
</Trans>
</Link>
)}
{['EI', 'EIRL', 'EURL'].includes(statut) && (
@ -469,13 +480,13 @@ function CreateCompany({
state: { fromCréer: true }
}}
>
<T k="entreprise.ressources.simu.indépendant">
<Trans key="entreprise.ressources.simu.indépendant">
<p>Simulateur de cotisations indépendant</p>
<small>
Simuler le montant de vos cotisations sociales pour bien
préparer votre business plan.
</small>
</T>
</Trans>
</Link>
)}
{['SAS', 'SASU'].includes(statut) && (
@ -486,26 +497,26 @@ function CreateCompany({
state: { fromCréer: true }
}}
>
<T k="entreprise.ressources.simu.assimilé">
<Trans key="entreprise.ressources.simu.assimilé">
<p>Simulateur de cotisations assimilé-salarié</p>
<small>
Simuler le montant de vos cotisations sociales pour bien
préparer votre business plan.
</small>
</T>
</Trans>
</Link>
)}
<Link
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.créer.après}
>
<T k="entreprise.ressources.après">
<Trans key="entreprise.ressources.après">
<p>Après la création</p>
<small>
SIREN, SIRET, code APE, KBis. Un petit glossaire des termes que
vous pourrez (éventuellement) rencontrer après la création.
</small>
</T>
</Trans>
</Link>
{i18n.language === 'fr' && (
<a
@ -546,7 +557,9 @@ let StatutsExample = ({ statut }) => {
return (
<a target="_blank" href={links[statut]}>
<T k="entreprise.tâches.statuts.exemple">Exemple de statuts pour votre</T>{' '}
<Trans key="entreprise.tâches.statuts.exemple">
Exemple de statuts pour votre
</Trans>{' '}
{statut}
</a>
)

11
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/AutoEntrepreneur.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import SchemeComparaison from 'Components/SchemeComparaison'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
export default function Autoentrepreneur() {
const { t } = useTranslation()
@ -19,11 +18,11 @@ export default function Autoentrepreneur() {
/>
</Helmet>
<h2>
<T k="autoentrepreneur.titre">
<Trans key="autoentrepreneur.titre">
Entreprise individuelle ou auto-entrepreneur
</T>
</Trans>
</h2>
<T k="autoentrepreneur.description">
<Trans key="autoentrepreneur.description">
<p>
À la différence de l'entreprise individuelle, l'auto-entrepreneur
bénéficie d'un régime simplifié de déclaration et de paiement : les
@ -44,7 +43,7 @@ export default function Autoentrepreneur() {
</a>
).
</p>
</T>
</Trans>
<div className="ui__ full-width">
<SchemeComparaison hideAssimiléSalarié />
</div>

11
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/DirectorStatus.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import SchemeComparaison from 'Components/SchemeComparaison'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
export default function DefineDirectorStatus() {
const { t } = useTranslation()
@ -21,9 +20,11 @@ export default function DefineDirectorStatus() {
/>
</Helmet>
<h2>
<T k="statut du dirigeant.titre">Définir le statut du dirigeant</T>
<Trans key="statut du dirigeant.titre">
Définir le statut du dirigeant
</Trans>
</h2>
<T k="statut du dirigeant.description">
<Trans key="statut du dirigeant.description">
<p>
Ce choix est important car il détermine le régime de sécurité sociale
et la couverture sociale du dirigeant. Le montant et les modalités de
@ -32,7 +33,7 @@ export default function DefineDirectorStatus() {
<div className="ui__ full-width">
<SchemeComparaison hideAutoEntrepreneur />
</div>
</T>
</Trans>
</>
)
}

21
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/MinorityDirector.tsx
View File

@ -1,8 +1,7 @@
import { directorIsInAMinority } from 'Actions/companyStatusActions'
import { T } from 'Components'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
export default function MinorityDirector() {
@ -26,9 +25,11 @@ export default function MinorityDirector() {
/>
</Helmet>
<h2>
<T k="gérant minoritaire.titre">Gérant majoritaire ou minoritaire</T>{' '}
<Trans key="gérant minoritaire.titre">
Gérant majoritaire ou minoritaire
</Trans>{' '}
</h2>
<T k="gérant minoritaire.description">
<Trans key="gérant minoritaire.description">
<p>
Certaines règles spéciales s'appliquent selon le nombre d'actions
détenues.
@ -45,22 +46,24 @@ export default function MinorityDirector() {
d'administration minoritaire ou égalitaire).
</li>
</ul>
</T>
</Trans>
<div className="ui__ answer-group">
<button
onClick={() => {
dispatch(directorIsInAMinority(false))
}}
className="ui__ button">
<T>Gérant majoritaire</T>
className="ui__ button"
>
<Trans>Gérant majoritaire</Trans>
</button>
<button
onClick={() => {
dispatch(directorIsInAMinority(true))
}}
className="ui__ button">
<T>Gérant minoritaire</T>
className="ui__ button"
>
<Trans>Gérant minoritaire</Trans>
</button>
</div>
</>

26
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/NumberOfAssociate.tsx
View File

@ -1,8 +1,7 @@
import { companyHasMultipleAssociates } from 'Actions/companyStatusActions'
import { T } from 'Components'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { connect } from 'react-redux'
const NumberOfAssociates = ({ companyHasMultipleAssociates }) => {
@ -25,9 +24,9 @@ const NumberOfAssociates = ({ companyHasMultipleAssociates }) => {
/>
</Helmet>
<h2>
<T k="associés.titre">Seul ou à plusieurs</T>
<Trans key="associés.titre">Seul ou à plusieurs</Trans>
</h2>
<T k="associés.description">
<Trans key="associés.description">
<p>
Une entreprise avec un seul associé est plus simple à créer et gérer.
Un associé peut-être une personne physique (un individu) ou une
@ -38,29 +37,30 @@ const NumberOfAssociates = ({ companyHasMultipleAssociates }) => {
votre société seul, et accueillir de nouveaux associés au cours de
votre développement.
</p>
</T>
</Trans>
<div className="ui__ answer-group">
<button
onClick={() => {
companyHasMultipleAssociates(false)
}}
className="ui__ button">
<T k="associés.choix1">Seul</T>
className="ui__ button"
>
<Trans key="associés.choix1">Seul</Trans>
</button>
<button
onClick={() => {
companyHasMultipleAssociates(true)
}}
className="ui__ button">
<T k="associés.choix2">Plusieurs personnes</T>
className="ui__ button"
>
<Trans key="associés.choix2">Plusieurs personnes</Trans>
</button>
</div>
</>
)
}
export default connect(
null,
{ companyHasMultipleAssociates }
)(NumberOfAssociates)
export default connect(null, { companyHasMultipleAssociates })(
NumberOfAssociates
)

15
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PickLegalStatus.tsx
View File

@ -1,9 +1,8 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { filter } from 'ramda'
import React, { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import {
@ -23,9 +22,9 @@ const StatutButton = ({ statut }: StatutButtonProps) => {
<div className="ui__ answer-group">
<Link to={sitePaths.créer[statut]} className="ui__ button">
{statut.includes('auto-entrepreneur') ? (
<T>Devenir</T>
<Trans>Devenir</Trans>
) : (
<T>Créer une</T>
<Trans>Créer une</Trans>
)}{' '}
{t(statut)}
</Link>
@ -74,12 +73,12 @@ const StatutTitle = ({ statut, language }: StatutTitleProps) =>
<>SNC - Société en nom collectif {language !== 'fr' && '(Partnership)'}: </>
) : statut === 'auto-entrepreneur' ? (
<>
<T>Auto-entrepreneur</T>
<Trans>Auto-entrepreneur</Trans>
{language === 'fr' && ' '}:{' '}
</>
) : statut === 'auto-entrepreneur-EIRL' ? (
<>
<T>Auto-entrepreneur en EIRL</T>
<Trans>Auto-entrepreneur en EIRL</Trans>
{language === 'fr' && ' '}
{':'}
</>
@ -100,9 +99,9 @@ export default function SetMainStatus() {
</Helmet>
<h2>
{Object.keys(possibleStatus).every(Boolean) ? (
<T> Liste des statuts juridiques </T>
<Trans> Liste des statuts juridiques </Trans>
) : (
<T>Votre forme juridique</T>
<Trans>Votre forme juridique</Trans>
)}
</h2>

28
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers.tsx
View File

@ -1,7 +1,7 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { isNil } from 'ramda'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
@ -13,23 +13,35 @@ const requirementToText = (
) => {
switch (key) {
case 'multipleAssociates':
return value ? <T>Plusieurs associés</T> : <T>Un seul associé</T>
return value ? (
<Trans>Plusieurs associés</Trans>
) : (
<Trans>Un seul associé</Trans>
)
case 'soleProprietorship':
return value ? (
<T k="responsabilité.bouton2">Entreprise individuelle</T>
<Trans key="responsabilité.bouton2">Entreprise individuelle</Trans>
) : (
<T k="responsabilité.bouton1">Société</T>
<Trans key="responsabilité.bouton1">Société</Trans>
)
case 'directorStatus':
return value === 'SELF_EMPLOYED' ? (
<T>Indépendant</T>
<Trans>Indépendant</Trans>
) : (
<T>Assimilé salarié</T>
<Trans>Assimilé salarié</Trans>
)
case 'autoEntrepreneur':
return value ? <T>Auto-entrepreneur</T> : <T>Pas en auto-entrepreneur</T>
return value ? (
<Trans>Auto-entrepreneur</Trans>
) : (
<Trans>Pas en auto-entrepreneur</Trans>
)
case 'minorityDirector':
return value ? <T>Gérant minoritaire</T> : <T>Gérant majoritaire</T>
return value ? (
<Trans>Gérant minoritaire</Trans>
) : (
<Trans>Gérant majoritaire</Trans>
)
}
}

23
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/SoleProprietorship.tsx
View File

@ -1,9 +1,8 @@
import { isSoleProprietorship } from 'Actions/companyStatusActions'
import { T } from 'Components'
import { compose } from 'ramda'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { connect } from 'react-redux'
const SoleProprietorship = ({ isSoleProprietorship }) => {
@ -31,18 +30,20 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
/>
</Helmet>
<h2>
<T k="responsabilité.titre">Entreprise individuelle ou société ?</T>
<Trans key="responsabilité.titre">
Entreprise individuelle ou société ?
</Trans>
</h2>
<p>
<T k="responsabilité.intro">
<Trans key="responsabilité.intro">
Ce choix determine votre degré de responsabilité et votre capacité à
accueillir de nouveaux associés dans le futur{' '}
</T>
</Trans>
:
</p>
<ul>
<li>
<T k="responsabilité.entreprise-individuelle">
<Trans key="responsabilité.entreprise-individuelle">
<strong>Entreprise individuelle : </strong>
Une activité économique exercée par une seule personne physique, en
son nom propre. Moins de formalités, mais plus de risques en cas de
@ -52,17 +53,17 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
Vous ne pouvez pas accueillir de nouveaux associés en entreprise
individuelle.
</strong>
</T>
</Trans>
</li>
<li>
<T k="responsabilité.société">
<Trans key="responsabilité.société">
<strong>Société : </strong>
Vous ne pouvez pas être tenu personnellement responsable des dettes
ou obligations de la société. En revanche, les démarches de création
sont un peu plus lourdes, puisqu'elles incluent notamment la
rédaction de statuts et le dépôt d'un capital.
</T>
</Trans>
</li>
</ul>
<div className="ui__ answer-group">
@ -72,7 +73,7 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
}}
className="ui__ button"
>
<T k="responsabilité.bouton2">Entreprise individuelle</T>
<Trans key="responsabilité.bouton2">Entreprise individuelle</Trans>
</button>
<button
onClick={() => {
@ -80,7 +81,7 @@ const SoleProprietorship = ({ isSoleProprietorship }) => {
}}
className="ui__ button"
>
<T k="responsabilité.bouton1">Société</T>
<Trans key="responsabilité.bouton1">Société</Trans>
</button>
</div>
{/* this is an economic activity conducted by a single natural person, in his own name ; */}

11
source/sites/mon-entreprise.fr/pages/Créer/GuideStatut/index.tsx
View File

@ -1,11 +1,11 @@
import { resetCompanyStatusChoice } from 'Actions/companyStatusActions'
import { T } from 'Components'
import Animate from 'Ui/animate'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { toPairs } from 'ramda'
import React, { useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { NavLink, Route, Switch, useLocation } from 'react-router-dom'
import Animate from 'Ui/animate'
import AutoEntrepreneur from './AutoEntrepreneur'
import DirectorStatus from './DirectorStatus'
import MinorityDirector from './MinorityDirector'
@ -40,12 +40,13 @@ export default function Créer() {
to={sitePaths.créer.index}
exact
activeClassName="ui__ hide"
className="ui__ simple push-left small button">
← <T>Retour</T>
className="ui__ simple push-left small button"
>
← <Trans>Retour</Trans>
</NavLink>
</div>
<h1>
<T k="formeJuridique.titre">Choix du statut juridique</T>
<Trans key="formeJuridique.titre">Choix du statut juridique</Trans>
</h1>
<PreviousAnswers />
<Animate.fromBottom key={location.pathname}>

27
source/sites/mon-entreprise.fr/pages/Créer/Home.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
@ -27,16 +26,16 @@ export default function Créer() {
</Helmet>
<h1>
<T k="créer.titre">Créer une entreprise</T>
<Trans key="créer.titre">Créer une entreprise</Trans>
</h1>
<div css="display: flex; align-items: flex-start; justify-content: space-between">
<div>
<p className="ui__ lead">
<T k="créer.description">
<Trans key="créer.description">
Avant d'entamer les démarches administratives pour créer votre
entreprise, vous devez choisir un statut juridique adapté à votre
activité
</T>
</Trans>
</p>
<Link
className="ui__ button plain cta"
@ -51,10 +50,10 @@ export default function Créer() {
: t('créer.cta.continue', 'Continuer le guide')}
</Link>
<p className="ui__ notice">
<T k="créer.warningPL">
<Trans key="créer.warningPL">
Le cas des professions libérales réglementées n'est pas encore
traité
</T>
</Trans>
</p>
</div>
@ -65,7 +64,7 @@ export default function Créer() {
/>
</div>
<h2>
<T>Ressources utiles</T>
<Trans>Ressources utiles</Trans>
</h2>
<div
css={`
@ -81,13 +80,13 @@ export default function Créer() {
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.créer.guideStatut.liste}
>
<T k="créer.ressources.listeStatuts">
<Trans key="créer.ressources.listeStatuts">
<p>Liste des statuts juridiques </p>
<small>
Vous savez déjà quel statut choisir ? Accédez directement à la
liste des démarches associées
</small>
</T>
</Trans>
</Link>
<Link
className="ui__ interactive card button-choice lighter-bg"
@ -96,26 +95,26 @@ export default function Créer() {
state: { fromCréer: true }
}}
>
<T k="créer.ressources.comparaison">
<Trans key="créer.ressources.comparaison">
<p>Comparateur de régimes</p>
<small>
Indépendant, assimilé-salarié ou auto-entrepreneur ? Calculez les
différences en terme de revenus, cotisations, retraite, etc
</small>
</T>
</Trans>
</Link>
<Link
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.créer['auto-entrepreneur']}
>
<T k="créer.ressources.autoEntrepreneur">
<Trans key="créer.ressources.autoEntrepreneur">
<p>Démarche auto-entrepreneur</p>
<small>
Vous souhaitez devenir auto-entrepreneur ? Découvrez les étapes
pour bien démarrer votre activité
</small>
</T>
</Trans>
</Link>
</div>
</Animate.fromBottom>

42
source/sites/mon-entreprise.fr/pages/Créer/StatutDescription.tsx
View File

@ -1,5 +1,5 @@
import { T } from 'Components'
import React from 'react'
import { Trans } from 'react-i18next'
import { LegalStatus } from 'Selectors/companyStatusSelectors'
type Props = {
statut: LegalStatus
@ -7,35 +7,35 @@ type Props = {
const StatutDescription = ({ statut }: Props) =>
statut === 'EI' ? (
<T k="formeJuridique.EI">
<Trans key="formeJuridique.EI">
Aucun apport en capital n'est nécessaire. Le capital privé et le capital
de l'entreprise ne font qu'un.
</T>
</Trans>
) : statut === 'EIRL' ? (
<T k="formeJuridique.EIRL">
<Trans key="formeJuridique.EIRL">
Permet de protéger son patrimoine personnel en attribuant un capital
spécifique à son activité professionnelle. La société et l'individu
constituent la même personne. Ne convient pas si l'associé unique est une
personne morale (entreprise) ou si vous pensez accueillir d'autres
associés au cours de votre développement (choisissez EURL dans ce cas).
</T>
</Trans>
) : statut === 'EURL' ? (
<T k="formeJuridique.EURL">
<Trans key="formeJuridique.EURL">
L'entreprise n'a qu'un associé. La responsabilité est limitée au montant
de l'apport de capital. Evolue en SARL lors de l'arrivée de nouveaux
associés dans la société.
</T>
</Trans>
) : statut.includes('SARL') ? (
<T k="formeJuridique.SARL">
<Trans key="formeJuridique.SARL">
Société ayant au moins deux associés dont la responsabilité financière est
limitée au montant de leur apport au capital. Le capital minimum est fixé
librement dans les statuts. Les associés se répartissent des parts
sociales toutes identiques, et la société est dirigée par un ou plusieurs
gérants qui sont forcément des personnes physiques. Le fonctionnement
d'une SARL est encadré par le code du commerce.
</T>
</Trans>
) : statut === 'SAS' ? (
<T k="formeJuridique.SAS">
<Trans key="formeJuridique.SAS">
Société ayant au moins deux associés. La responsabilité financière des
associés est limitée au montant de leur apport au capital de la société.
Le capital minimum est fixé librement dans les statuts. Les associés se
@ -43,38 +43,38 @@ const StatutDescription = ({ statut }: Props) =>
société est dirigée par un président qui peut être une personne morale
(une autre société). La SAS se caractérise par une grande souplesse de
fonctionnement (statuts sur mesure).
</T>
</Trans>
) : statut === 'SASU' ? (
<T k="formeJuridique.SASU">
<Trans key="formeJuridique.SASU">
L'entreprise n'a qu'un associé. La responsabilité est limitée au montant
de l'apport de capital de l'unique associé (qui peut être une personne
morale).
</T>
</Trans>
) : statut === 'SA' ? (
<T k="formeJuridique.SA">
<Trans key="formeJuridique.SA">
Société ayant au moins deux actionnaires. C'est le seul statut qui permet
d'être coté en bourse (à partir de 7 actionnaires). Le capital social
minimum est de 37.000 €.
</T>
</Trans>
) : (statut as string) === 'SNC' ? (
<T k="formeJuridique.SNC">
<Trans key="formeJuridique.SNC">
La responsabilité des associés pour les dettes de la société est solidaire
(un seul associé peut être poursuivi pour la totalité de la dette) et
indéfinie (responsable sur la totalité de son patrimoine personnel).
</T>
</Trans>
) : statut === 'auto-entrepreneur' ? (
<T k="formeJuridique.micro">
<Trans key="formeJuridique.micro">
Un auto-entrepreneur exerce son activité en entreprise individuelle, avec
un régime forfaitaire pour ses cotisations sociales et un calcul
spécifique de l'impôt.
</T>
</Trans>
) : statut === 'auto-entrepreneur-EIRL' ? (
<T k="formeJuridique.micro-EIRL">
<Trans key="formeJuridique.micro-EIRL">
Un auto-entrepreneur option EIRL exerce son activité en entreprise
individuelle en choisissant l'option "Entrepreneur individuel à
responsabilité limitée", avec à un régime forfaitaire pour le calcul des
impôts et le paiement des cotisations de sécurité sociale.
</T>
</Trans>
) : /* Otherwise */ null
export default StatutDescription

4
source/sites/mon-entreprise.fr/pages/Documentation/ExampleSituations.tsx
View File

@ -1,9 +1,9 @@
// Page listing the engine's currently implemented mecanisms and their tests
import { T } from 'Components'
import { ThemeColorsContext } from 'Components/utils/colors'
import { analyseMany } from 'Engine/traverse'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import examples from 'Règles/cas-types.yaml'
import {
@ -18,7 +18,7 @@ export default function ExampleSituations() {
<div className="ui__ container" id="exampleSituations">
<h1>
{emoji('💡 ')}
<T>Quelques exemples de salaires</T>
<Trans>Quelques exemples de salaires</Trans>
</h1>
<ul>
{examples.map((ex: any) => (

4
source/sites/mon-entreprise.fr/pages/Documentation/RulesList.tsx
View File

@ -1,6 +1,6 @@
import { T } from 'Components'
import SearchBar from 'Components/SearchBar'
import React from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import './RulesList.css'
@ -10,7 +10,7 @@ export default function RulesList() {
return (
<div id="RulesList" className="ui__ container">
<h1>
<T>Explorez notre documentation</T>
<Trans>Explorez notre documentation</Trans>
</h1>
<SearchBar showDefaultList={true} rules={flatRules} />
</div>

65
source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.tsx
View File

@ -2,10 +2,9 @@ import {
checkHiringItem,
initializeHiringChecklist
} from 'Actions/hiringChecklistAction'
import { T } from 'Components'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { connect, useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
import Animate from 'Ui/animate'
@ -36,12 +35,12 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
/>
</Helmet>
<h1>
<T k="embauche.tâches.titre">Les formalités pour embaucher</T>
<Trans key="embauche.tâches.titre">Les formalités pour embaucher</Trans>
</h1>
<p>
<T k="embauche.tâches.description">
<Trans key="embauche.tâches.description">
Toutes les étapes nécessaires à l'embauche de votre premier employé.
</T>
</Trans>
</p>
<Checklist
onInitialization={onChecklistInitialization}
@ -51,9 +50,9 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
<CheckItem
name="contract"
title={
<T k="embauche.tâches.contrat.titre">
<Trans key="embauche.tâches.contrat.titre">
Signer un contrat de travail avec votre employé
</T>
</Trans>
}
explanations={
<p>
@ -63,7 +62,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
target="_blank"
>
{' '}
<T>Plus d'informations</T>
<Trans>Plus d'informations</Trans>
</a>
</p>
}
@ -71,33 +70,33 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
<CheckItem
name="dpae"
title={
<T k="embauche.tâches.dpae.titre">
<Trans key="embauche.tâches.dpae.titre">
Déclarer l'embauche à l'administration sociale
</T>
</Trans>
}
explanations={
<p>
<T k="embauche.tâches.dpae.description">
<Trans key="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{' '}
<a href="https://www.due.urssaf.fr" target="_blank">
être effectué en ligne
</a>
.
</T>
</Trans>
</p>
}
/>
<CheckItem
name="paySoftware"
title={
<T k="embauche.tâches.logiciel de paie.titre">
<Trans key="embauche.tâches.logiciel de paie.titre">
Choisir un logiciel de paie
</T>
</Trans>
}
explanations={
<p>
<T k="embauche.tâches.logiciel de paie.description">
<Trans key="embauche.tâches.logiciel de paie.description">
Les fiches de paie et les déclarations peuvent être traitées en
ligne gratuitement par le{' '}
<a href="http://www.letese.urssaf.fr" target="_blank">
@ -110,16 +109,16 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
>
logiciel de paie privé.
</a>
</T>
</Trans>
</p>
}
/>
<CheckItem
name="registre"
title={
<T k="embauche.tâches.registre.titre">
<Trans key="embauche.tâches.registre.titre">
Tenir un registre des employés à jour
</T>
</Trans>
}
explanations={
<p>
@ -128,7 +127,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
className="ui__ button"
target="_blank"
>
<T>Plus d'informations</T>
<Trans>Plus d'informations</Trans>
</a>
</p>
}
@ -136,10 +135,10 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
<CheckItem
name="complementaryPension"
title={
<T k="embauche.tâches.pension.titre">
<Trans key="embauche.tâches.pension.titre">
Prendre contact avec l'institution de prévoyance complémentaire
obligatoire qui vous est assignée
</T>
</Trans>
}
explanations={
<p>
@ -148,9 +147,9 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
className="ui__ button"
target="_blank"
>
<T k="embauche.tâches.pension.description">
<Trans key="embauche.tâches.pension.description">
Trouver mon institution de prévoyance
</T>
</Trans>
</a>
{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
</p>
@ -159,42 +158,42 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
<CheckItem
name="complementaryHealth"
title={
<T k="embauche.tâches.complémentaire santé.titre">
<Trans key="embauche.tâches.complémentaire santé.titre">
Choisir une complémentaire santé
</T>
</Trans>
}
explanations={
<p>
<T k="embauche.tâches.complémentaire santé.description">
<Trans key="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.
</T>
</Trans>
</p>
}
/>
<CheckItem
name="workMedicine"
title={
<T k="embauche.tâches.medecine.titre">
<Trans key="embauche.tâches.medecine.titre">
S'inscrire à un bureau de médecine du travail
</T>
</Trans>
}
explanations={
<p>
<T k="embauche.tâches.medecine.description">
<Trans key="embauche.tâches.medecine.description">
N'oubliez pas de planifier un rendez-vous initial pour chaque
nouvelle embauche.{' '}
<a href="https://www.service-public.fr/particuliers/vosdroits/F2211">
Plus d'infos.
</a>
</T>
</Trans>
</p>
}
/>
</Checklist>
<T k="embauche.chaque mois">
<Trans key="embauche.chaque mois">
<h2>Tous les mois</h2>
<ul>
<li>
@ -213,7 +212,7 @@ function Embaucher({ onChecklistInitialization, onItemCheck }: EmbaucherProps) {
</li>
<li>Remettre la fiche de paie à votre employé</li>
</ul>
</T>
</Trans>
</Animate.fromBottom>
)
}

63
source/sites/mon-entreprise.fr/pages/Gérer/Home.tsx
View File

@ -3,7 +3,6 @@ import {
specifyIfAutoEntrepreneur,
specifyIfDirigeantMajoritaire
} from 'Actions/existingCompanyActions'
import { T } from 'Components'
import CompanyDetails from 'Components/CompanyDetails'
import FindCompany from 'Components/FindCompany'
import Overlay from 'Components/Overlay'
@ -11,7 +10,7 @@ import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext, useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { Company } from 'Reducers/inFranceAppReducer'
@ -60,18 +59,18 @@ export default function SocialSecurity() {
<ScrollToTop />
<Animate.fromBottom>
<h1>
<T k="gérer.titre">Gérer mon activité</T>
<Trans key="gérer.titre">Gérer mon activité</Trans>
</h1>
<div css="display: flex; align-items: flex-start; justify-content: space-between">
<div>
{!company && (
<p className="ui__ lead">
<T k="gérer.description">
<Trans key="gérer.description">
Vous souhaitez vous verser un revenu ou embaucher ? <br />
Vous aurez à payer des cotisations et des impôts. <br />
Anticipez leurs montants grâce aux simulateurs adaptés à votre
situation.
</T>
</Trans>
</p>
)}
<CompanySection company={company} />
@ -86,7 +85,7 @@ export default function SocialSecurity() {
<>
<h2>
<T k="gérer.choix.titre">Que souhaitez-vous faire ?</T>
<Trans key="gérer.choix.titre">Que souhaitez-vous faire ?</Trans>
</h2>
{!!régime && (
<Link
@ -99,13 +98,13 @@ export default function SocialSecurity() {
}
}}
>
<T k="gérer.choix.revenus">
<Trans key="gérer.choix.revenus">
<p>Calculer mon revenu net</p>
<small>
Estimez précisément le montant de vos cotisations grâce au
simulateur {{ régime }} de l'Urssaf
</small>
</T>
</Trans>
</Link>
)}
{régime !== 'auto-entrepreneur' && (
@ -119,18 +118,18 @@ export default function SocialSecurity() {
}
}}
>
<T k="gérer.choix.embauche">
<Trans key="gérer.choix.embauche">
<p>Estimer le montant d’une embauche</p>
<small>
Calculez le montant total que votre entreprise devra dépenser
pour rémunérer votre prochain employé
</small>
</T>
</Trans>
</Link>
)}
<AideOrganismeLocal />
<h2>
<T>Ressources utiles</T>
<Trans>Ressources utiles</Trans>
</h2>
<div
css={`
@ -147,13 +146,13 @@ export default function SocialSecurity() {
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.gérer.embaucher}
>
<T k="gérer.ressources.embaucher">
<Trans key="gérer.ressources.embaucher">
<p>Découvrir les démarches d’embauche </p>
<small>
La liste des choses à faire pour être sûr de ne rien oublier
lors de l’embauche d’un nouveau salarié
</small>
</T>
</Trans>
</Link>
)}
{company?.isAutoEntrepreneur && (
@ -161,7 +160,7 @@ export default function SocialSecurity() {
className="ui__ interactive card button-choice lighter-bg"
href="https://autoentrepreneur.urssaf.fr"
>
<T k="gérer.ressources.autoEntrepreneur">
<Trans key="gérer.ressources.autoEntrepreneur">
<p>Accéder au site officiel auto-entrepreneur</p>
<small>
Vous pourrez effectuer votre déclaration de chiffre
@ -169,21 +168,21 @@ export default function SocialSecurity() {
toutes les informations relatives au statut
d'auto-entrepreneur
</small>
</T>
</Trans>
</a>
)}
<Link
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.gérer.sécuritéSociale}
>
<T k="gérer.ressources.sécuritéSociale">
<Trans key="gérer.ressources.sécuritéSociale">
<p>Comprendre la sécurité sociale </p>
<small>
A quoi servent les cotisations sociales ? Le point sur le
système de protection sociale dont bénéficient tous les
travailleurs en France
</small>
</T>
</Trans>
</Link>
</div>
</>
@ -242,20 +241,22 @@ const CompanySection = ({ company }: CompanySectionProps) => {
<ScrollToTop />
<Overlay>
<h2>
<T k="gérer.entreprise.auto">Êtes-vous auto-entrepreneur ? </T>
<Trans key="gérer.entreprise.auto">
Êtes-vous auto-entrepreneur ?{' '}
</Trans>
</h2>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(true)}
>
<T>Oui</T>
<Trans>Oui</Trans>
</button>
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(false)}
>
<T>Non</T>
<Trans>Non</Trans>
</button>
</div>
</Overlay>
@ -265,26 +266,26 @@ const CompanySection = ({ company }: CompanySectionProps) => {
<>
<ScrollToTop />
<Overlay>
<T k="gérer.entreprise.dirigeant">
<Trans key="gérer.entreprise.dirigeant">
<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
même régime de sécurité sociale que si vous êtes minoritaire.
</p>
</T>
</Trans>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(true)}
>
<T>Oui</T>
<Trans>Oui</Trans>
</button>
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(false)}
>
<T>Non</T>
<Trans>Non</Trans>
</button>
</div>
</Overlay>
@ -313,13 +314,13 @@ const CompanySection = ({ company }: CompanySectionProps) => {
{company.isDirigeantMajoritaire != null && (
<span css="margin-left: 1rem" className="ui__ label">
{company.isDirigeantMajoritaire ? (
<T k="gérer.entreprise.majoritaire">
<Trans key="gérer.entreprise.majoritaire">
Dirigeant majoritaire
</T>
</Trans>
) : (
<T k="gérer.entreprise.minoritaire">
<Trans key="gérer.entreprise.minoritaire">
Dirigeant minoritaire
</T>
</Trans>
)}
</span>
)}
@ -333,9 +334,9 @@ const CompanySection = ({ company }: CompanySectionProps) => {
showSearchModal(true)
}}
>
<T k="gérer.entreprise.changer">
<Trans key="gérer.entreprise.changer">
Changer l'entreprise sélectionnée
</T>
</Trans>
</button>
</>
) : (
@ -344,7 +345,7 @@ const CompanySection = ({ company }: CompanySectionProps) => {
onClick={() => showSearchModal(true)}
className="ui__ plain cta button"
>
<T k="gérer.cta">Renseigner mon entreprise</T>
<Trans key="gérer.cta">Renseigner mon entreprise</Trans>
</button>
</p>
)}

25
source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.tsx
View File

@ -1,9 +1,8 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import animate from 'Ui/animate'
@ -16,7 +15,9 @@ export default function SchemeChoice() {
<title>{t('selectionRégime.page.titre', 'Selection du régime')}</title>
</Helmet>
<h1>
<T k="selectionRégime.titre">Quel régime souhaitez-vous explorer ?</T>
<Trans key="selectionRégime.titre">
Quel régime souhaitez-vous explorer ?
</Trans>
</h1>
<p>
<Link
@ -25,12 +26,12 @@ export default function SchemeChoice() {
>
{emoji('☂')}
<span>
<T>Assimilé salarié</T>
<Trans>Assimilé salarié</Trans>
<small>
(
<T k="comparaisonRégimes.status.AS">
<Trans key="comparaisonRégimes.status.AS">
SAS, SASU ou SARL avec gérant minoritaire
</T>
</Trans>
)
</small>
</span>
@ -41,12 +42,12 @@ export default function SchemeChoice() {
>
{emoji('👩‍🔧')}
<span>
<T>Indépendant</T>
<Trans>Indépendant</Trans>
<small>
(
<T k="comparaisonRégimes.status.indep.1">
<Trans key="comparaisonRégimes.status.indep.1">
EI, EIRL, EURL ou SARL avec gérant majoritaire
</T>
</Trans>
)
</small>
</span>
@ -60,16 +61,16 @@ export default function SchemeChoice() {
</Link>
</p>
<h2>
<T k="selectionRégime.comparer.titre">
<Trans key="selectionRégime.comparer.titre">
Vous ne savez pas lequel choisir ?
</T>
</Trans>
</h2>
<p style={{ textAlign: 'center', marginTop: '1rem' }}>
<Link
className="ui__ plain cta button"
to={sitePaths.simulateurs.comparaison}
>
<T k="selectionRégime.comparer.cta">Comparer les régimes</T>
<Trans key="selectionRégime.comparer.cta">Comparer les régimes</Trans>
</Link>
</p>
</animate.fromBottom>

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

@ -1,8 +1,7 @@
import { T } from 'Components'
import * as Animate from 'Ui/animate'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import * as Animate from 'Ui/animate'
import Video from './Video'
export default function SocialSecurity() {
@ -14,7 +13,7 @@ export default function SocialSecurity() {
</Helmet>
<Animate.fromBottom>
<T k="sécu.contenu">
<Trans key="sécu.contenu">
<h1>Protection sociale </h1>
<p>
En France, tous les travailleurs bénéficient d'une protection
@ -27,7 +26,7 @@ export default function SocialSecurity() {
<strong>contributions sociales</strong>, le cotisant est couvert sur
la maladie, les accidents du travail, chômage ou encore la retraite.
</p>
</T>
</Trans>
<section style={{ marginTop: '2rem' }}>
<Video />

4
source/sites/mon-entreprise.fr/pages/Gérer/index.tsx
View File

@ -1,7 +1,7 @@
import { T } from 'Components'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { Route, Switch } from 'react-router'
import { NavLink, useLocation } from 'react-router-dom'
import Embaucher from './Embaucher'
@ -21,7 +21,7 @@ export default function Gérer() {
activeClassName="ui__ hide"
className="ui__ simple push-left small button"
>
← <T>Retour à mon activité</T>
← <Trans>Retour à mon activité</Trans>
</NavLink>
</div>
<Switch>

36
source/sites/mon-entreprise.fr/pages/Landing/Landing.tsx
View File

@ -1,8 +1,8 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import logoSvg from 'Images/logo.svg'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from 'Reducers/rootReducer'
@ -25,15 +25,15 @@ export default function Landing() {
/>
<header>
<h1>
<T k="landing.title">
<Trans key="landing.title">
L'assistant officiel du créateur d'entreprise
</T>
</Trans>
</h1>
<p className="ui__ lead">
<T k="landing.subtitle">
<Trans key="landing.subtitle">
Les ressources nécessaires pour développer votre activité, du
statut juridique à l'embauche.
</T>
</Trans>
</p>
</header>
<img src={illustrationSvg} className="landing-title__img" />
@ -46,28 +46,28 @@ export default function Landing() {
}
>
<div className="ui__ big box-icon">{emoji('💡')}</div>
<T k="landing.choice.create">
<Trans key="landing.choice.create">
<h3>Créer une entreprise</h3>
<p className="ui__ notice" css="flex: 1">
Un accompagnement au choix du statut juridique et la liste
complète des démarches de création
</p>
</T>
</Trans>
<div className="ui__ small simple button">
{statutChoisi ? <T>Continuer</T> : <T>Commencer</T>}
{statutChoisi ? <Trans>Continuer</Trans> : <Trans>Commencer</Trans>}
</div>
</Link>
<Link className="ui__ interactive card box " to={sitePaths.gérer.index}>
<div className="ui__ big box-icon">{emoji('💶')}</div>
<T k="landing.choice.manage">
<Trans key="landing.choice.manage">
<h3>Gérer mon activité</h3>
<p className="ui__ notice" css="flex: 1">
Des simulateurs pour anticiper le montant des cotisations sociales
à payer et mieux gérer votre trésorerie
</p>
</T>
</Trans>
<div className="ui__ small simple button">
<T>Commencer</T>
<Trans>Commencer</Trans>
</div>
</Link>
<Link
@ -75,15 +75,15 @@ export default function Landing() {
to={sitePaths.économieCollaborative.index}
>
<div className="ui__ big box-icon">{emoji('🙋')}</div>
<T k="landing.choice.declare">
<Trans key="landing.choice.declare">
<h3>Que dois-je déclarer ?</h3>
<p className="ui__ notice" css="flex: 1">
Un guide pour savoir comment déclarer vos revenus issus de
plateformes en ligne (AirBnb, leboncoin, blablacar, etc.)
</p>
</T>
</Trans>
<div className="ui__ small simple button">
<T>Commencer</T>
<Trans>Commencer</Trans>
</div>
</Link>
<div style={{ width: '100%', textAlign: 'center' }}>
@ -92,12 +92,14 @@ export default function Landing() {
className="ui__ small button "
>
{emoji('🧮')}{' '}
<T k="landing.seeSimulators">Voir la liste des simulateurs</T>
<Trans key="landing.seeSimulators">
Voir la liste des simulateurs
</Trans>
</Link>
</div>
</section>
<section className="ui__ container">
<T k="landing.aboutUs">
<Trans key="landing.aboutUs">
<h2>Qui sommes-nous ?</h2>
<p>
Nous avons développé ce site pour{' '}
@ -129,7 +131,7 @@ export default function Landing() {
</a>
.
</p>
</T>
</Trans>
</section>
<Footer />

7
source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx
View File

@ -1,12 +1,11 @@
import { setSimulationConfig } from 'Actions/actions'
import { T } from 'Components'
import SalaryExplanation from 'Components/SalaryExplanation'
import Warning from 'Components/SimulateurWarning'
import Simulation from 'Components/Simulation'
import assimiléConfig from 'Components/simulationConfigs/assimilé.yaml'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { useLocation } from 'react-router'
@ -35,9 +34,9 @@ export default function AssimiléSalarié() {
/>
</Helmet>
<h1>
<T k="simulateurs.assimilé-salarié.titre">
<Trans key="simulateurs.assimilé-salarié.titre">
Simulateur de revenus assimilé salarié
</T>
</Trans>
</h1>
<Warning simulateur="assimilé-salarié" />
<Simulation explanations={<SalaryExplanation />} />

7
source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx
View File

@ -1,5 +1,4 @@
import { setSimulationConfig } from 'Actions/actions'
import { T } from 'Components'
import Warning from 'Components/SimulateurWarning'
import Simulation from 'Components/Simulation'
import autoEntrepreneurConfig from 'Components/simulationConfigs/auto-entrepreneur.yaml'
@ -8,7 +7,7 @@ import { ThemeColorsContext } from 'Components/utils/colors'
import { getRuleFromAnalysis } from 'Engine/rules'
import { default as React, useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router'
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
@ -40,9 +39,9 @@ export default function AutoEntrepreneur() {
/>
</Helmet>
<h1>
<T k="simulateurs.auto-entrepreneur.titre">
<Trans key="simulateurs.auto-entrepreneur.titre">
Simulateur de revenus auto-entrepreneur
</T>
</Trans>
</h1>
<Warning simulateur="auto-entrepreneur" />
<Simulation explanations={<ExplanationSection />} />

31
source/sites/mon-entreprise.fr/pages/Simulateurs/Home.tsx
View File

@ -1,9 +1,8 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
export default function Simulateurs() {
@ -36,13 +35,13 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('☂️')}</div>
<T k="simulateurs.accueil.assimilé">
<Trans key="simulateurs.accueil.assimilé">
<h3>Assimilé salarié</h3>
<p className="ui__ notice" css="flex: 1">
Calculer le revenu d'un dirigeant de SAS, SASU ou SARL
minoritaire
</p>
</T>
</Trans>
</Link>
<Link
className="ui__ interactive card box"
@ -52,13 +51,13 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('🃏')}</div>
<T k="simulateurs.accueil.indépendant">
<Trans key="simulateurs.accueil.indépendant">
<h3>Indépendant</h3>
<p className="ui__ notice" css="flex: 1">
Calculer le revenu d'un dirigeant de EURL, EI, ou SARL
majoritaire
</p>
</T>
</Trans>
</Link>
<Link
className="ui__ interactive card box"
@ -68,13 +67,13 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('🧢')}</div>
<T k="simulateurs.accueil.auto">
<Trans key="simulateurs.accueil.auto">
<h3>Auto-entrepreneur</h3>
<p className="ui__ notice" css="flex: 1">
Calculer le revenu (ou le chiffre d'affaires) d'un
auto-entrepreneur
</p>
</T>
</Trans>
</Link>
<Link
className="ui__ interactive card box"
@ -84,13 +83,13 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('🤝')}</div>
<T k="simulateurs.accueil.salarié">
<Trans key="simulateurs.accueil.salarié">
<h3>Salarié</h3>
<p className="ui__ notice" css="flex: 1">
Calculer le salaire net, brut, ou total d'un salarié, stagiaire,
ou assimilé
</p>
</T>
</Trans>
</Link>
{i18n.language === 'fr' && (
<Link
@ -101,12 +100,12 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('👩‍🎨')}</div>
<T k="simulateurs.accueil.salarié">
<Trans key="simulateurs.accueil.salarié">
<h3>Artiste-auteur</h3>
<p className="ui__ notice" css="flex: 1">
Estimer les cotisations sociales d'un artiste ou auteur
</p>
</T>
</Trans>
</Link>
)}
<Link
@ -117,18 +116,18 @@ export default function Simulateurs() {
}}
>
<div className="ui__ big box-icon">{emoji('📊')}</div>
<T k="simulateurs.accueil.comparaison">
<Trans key="simulateurs.accueil.comparaison">
<h3>Comparaison statuts</h3>
<p className="ui__ notice" css="flex: 1">
Simulez les différences entre les régimes (cotisations,
retraite, maternité, maladie, etc.)
</p>
</T>
</Trans>
</Link>
</div>
</section>
<section>
<T k="simulateurs.accueil.description">
<Trans key="simulateurs.accueil.description">
<p>Tous les simulateurs sur ce site sont :</p>
<ul>
<li>
@ -143,7 +142,7 @@ export default function Simulateurs() {
Développés en <strong>partenariat avec l'Urssaf</strong>
</li>
</ul>
</T>
</Trans>
</section>
</>
)

7
source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx
View File

@ -1,5 +1,4 @@
import { setSimulationConfig } from 'Actions/actions'
import { T } from 'Components'
import Warning from 'Components/SimulateurWarning'
import Simulation from 'Components/Simulation'
import indépendantConfig from 'Components/simulationConfigs/indépendant.yaml'
@ -8,7 +7,7 @@ import { ThemeColorsContext } from 'Components/utils/colors'
import { getRuleFromAnalysis } from 'Engine/rules'
import { default as React, useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router'
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
@ -36,9 +35,9 @@ export default function Indépendant() {
/>
</Helmet>
<h1>
<T k="simulateurs.indépendant.titre">
<Trans key="simulateurs.indépendant.titre">
Simulateur de revenus pour indépendants
</T>
</Trans>
</h1>
<Warning simulateur="indépendant" />
<Simulation explanations={<ExplanationSection />} />

13
source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx
View File

@ -1,5 +1,4 @@
import { setSimulationConfig } from 'Actions/actions'
import { T } from 'Components'
import PreviousSimulationBanner from 'Components/PreviousSimulationBanner'
import SalaryExplanation from 'Components/SalaryExplanation'
import Simulation from 'Components/Simulation'
@ -11,7 +10,7 @@ import urlIllustrationNetBrutEn from 'Images/illustration-net-brut-en.png'
import urlIllustrationNetBrut from 'Images/illustration-net-brut.png'
import { default as React, useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { Link, useLocation } from 'react-router-dom'
@ -37,7 +36,9 @@ export default function Salarié() {
/>
</Helmet>
<h1>
<T k="simulateurs.salarié.titre">Simulateur de revenus pour salarié</T>
<Trans key="simulateurs.salarié.titre">
Simulateur de revenus pour salarié
</Trans>
</h1>
<div style={{ margin: '2rem' }} />
<SalarySimulation />
@ -103,15 +104,15 @@ export let SalarySimulation = () => {
explanations={<SalaryExplanation />}
customEndMessages={
<>
<T k="simulation-end.hiring.text">
<Trans key="simulation-end.hiring.text">
Vous pouvez maintenant concrétiser votre projet d'embauche.
</T>
</Trans>
<div style={{ textAlign: 'center', margin: '1rem' }}>
<Link
className="ui__ plain button"
to={sitePaths.gérer.embaucher}
>
<T k="simulation-end.cta">Connaître les démarches</T>
<Trans key="simulation-end.cta">Connaître les démarches</Trans>
</Link>
</div>
</>

11
source/sites/mon-entreprise.fr/pages/Simulateurs/SchemeComparaison.tsx
View File

@ -1,8 +1,7 @@
import { T } from 'Components'
import SchemeComparaison from 'Components/SchemeComparaison'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
export default function SchemeComparaisonPage() {
const { t } = useTranslation()
@ -24,19 +23,19 @@ export default function SchemeComparaisonPage() {
/>
</Helmet>
<h1>
<T k="comparaisonRégimes.titre">
<Trans key="comparaisonRégimes.titre">
Indépendant, assimilé salarié ou{' '}
<span style={{ whiteSpace: 'nowrap' }}>auto-entrepreneur</span> : quel
régime choisir ?
</T>
</Trans>
</h1>
<p>
<T k="comparaisonRégimes.description">
<Trans key="comparaisonRégimes.description">
Lorsque vous créez votre société, le choix du statut juridique va
déterminer à quel régime social le dirigeant est affilié. Il en existe
trois différents, avec chacun ses avantages et inconvénients. Avec ce
comparatif, trouvez celui qui vous correspond le mieux.
</T>
</Trans>
</p>
<br />
<div className="ui__ full-width">

8
source/sites/mon-entreprise.fr/pages/Simulateurs/index.tsx
View File

@ -1,8 +1,8 @@
import { T } from 'Components'
import { usePersistingState } from 'Components/utils/persistState'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
import { Route, Switch } from 'react-router'
import { Link, useLocation } from 'react-router-dom'
import ArtisteAuteur from './ArtisteAuteur'
@ -34,7 +34,7 @@ export default function Simulateurs() {
to={sitePaths.gérer.index}
className="ui__ simple small push-left button"
>
← <T>Retour à mon activité</T>
← <Trans>Retour à mon activité</Trans>
</Link>
)}
{lastState?.fromCréer && (
@ -42,7 +42,7 @@ export default function Simulateurs() {
to={sitePaths.créer.index}
className="ui__ simple small push-left button"
>
← <T>Retour à la création</T>
← <Trans>Retour à la création</Trans>
</Link>
)}
{!lastState ||
@ -51,7 +51,7 @@ export default function Simulateurs() {
to={sitePaths.simulateurs.index}
className="ui__ simple small push-left button"
>
← <T>Voir les autres simulateurs</T>
← <Trans>Voir les autres simulateurs</Trans>
</Link>
))}
</div>

6
source/sites/mon-entreprise.fr/pages/integration/Options.tsx
View File

@ -1,7 +1,7 @@
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { Link } from 'react-router-dom'
import illustration from './illustration.png'
@ -22,7 +22,7 @@ export default function Options() {
habituels de vos utilisateurs.
</p>
<Link className="ui__ button-choice" to={sitePaths.integration.iframe}>
{emoji('📱')} <T>Intégrer l'interface de simulation</T>
{emoji('📱')} <Trans>Intégrer l'interface de simulation</Trans>
</Link>
<p>Intégrer l'un de nos simulateurs en un clic dans votre site Web.</p>
<br />
@ -30,7 +30,7 @@ export default function Options() {
className="ui__ button-choice "
to={sitePaths.integration.library}
>
{emoji('🧰')} <T>Intégrer la bibliothèque de calcul</T>
{emoji('🧰')} <Trans>Intégrer la bibliothèque de calcul</Trans>
</Link>
<p css="margin-top: -1em">
Intégrer les calculs sans l'interface dans votre site Web ou sur votre

27
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/Activité.tsx
View File

@ -1,11 +1,10 @@
import { T } from 'Components'
import { Markdown } from 'Components/utils/markdown'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import Value from 'Components/Value'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { Redirect } from 'react-router-dom'
import Animate from 'Ui/animate'
import { selectSeuilRevenus } from './actions'
@ -36,9 +35,9 @@ export default function Activité({
<h1>{activité.titre}</h1>
<p>{activité.explication}</p>
<p>
<T k="économieCollaborative.activité.choix">
<Trans key="économieCollaborative.activité.choix">
Quelles sont plus précisément les activités exercées ?
</T>
</Trans>
</p>
<section className="ui__ full-width light-bg">
<ActivitéSelection
@ -72,24 +71,24 @@ export default function Activité({
/>
{estExonérée ? null : activité['seuil pro'] === 0 ? (
<T k="économieCollaborative.activité.pro">
<Trans key="économieCollaborative.activité.pro">
<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>.
</p>
</T>
</Trans>
) : activité['seuil déclaration'] === 0 && !activité['seuil pro'] ? (
<T k="économieCollaborative.activité.impôt">
<Trans key="économieCollaborative.activité.impôt">
<h2>Vous devez déclarez vos revenus aux impôts</h2>
<p>Les revenus de cette activité sont imposables.</p>
</T>
</Trans>
) : (
<>
<T k="économieCollaborative.activité.revenusAnnuels">
<Trans key="économieCollaborative.activité.revenusAnnuels">
<h2>Revenus annuels</h2>
<p>Vos revenus annuels pour cette activité sont :</p>
</T>
</Trans>
<ul
key={title}
css="
@ -110,7 +109,7 @@ export default function Activité({
value="AUCUN"
defaultChecked={seuilRevenus === 'AUCUN'}
/>{' '}
<T>inférieurs à</T>{' '}
<Trans>inférieurs à</Trans>{' '}
<Value maximumFractionDigits={0} unit="€">
{activité['seuil déclaration']}
</Value>
@ -125,7 +124,7 @@ export default function Activité({
value="IMPOSITION"
defaultChecked={seuilRevenus === 'IMPOSITION'}
/>{' '}
<T>inférieurs à</T>{' '}
<Trans>inférieurs à</Trans>{' '}
<Value maximumFractionDigits={0} unit="€">
{activité['seuil pro']}
</Value>
@ -142,7 +141,7 @@ export default function Activité({
seuilRevenus === 'RÉGIME_GÉNÉRAL_DISPONIBLE'
}
/>{' '}
<T>supérieurs à</T>{' '}
<Trans>supérieurs à</Trans>{' '}
<Value maximumFractionDigits={0} unit="€">
{activité['seuil pro']}
</Value>
@ -160,7 +159,7 @@ export default function Activité({
seuilRevenus === 'RÉGIME_GÉNÉRAL_NON_DISPONIBLE'
}
/>{' '}
<T>supérieurs à</T>{' '}
<Trans>supérieurs à</Trans>{' '}
<Value maximumFractionDigits={0} unit="€">
{activité['seuil régime général'] || activité['seuil pro']}
</Value>

17
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ActivitésSelection.tsx
View File

@ -1,12 +1,11 @@
import classnames from 'classnames'
import { T } from 'Components'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { intersection } from 'ramda'
import React, { useCallback, useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import Animate from 'Ui/animate'
import Checkbox from 'Ui/Checkbox'
@ -36,7 +35,7 @@ export default function ActivitésSelection() {
<ScrollToTop />
<h1>{titre}</h1>
<section css="margin-bottom: 2rem">
<T k="économieCollaborative.accueil.contenu">
<Trans key="économieCollaborative.accueil.contenu">
<p>
Vous avez des revenus issus des{' '}
<strong>plateformes en ligne</strong> (Airbnb, Abritel, Drivy,
@ -52,21 +51,21 @@ export default function ActivitésSelection() {
À partir de 2020, ces revenus seront communiqués automatiquement
par les plateformes à l’administration fiscale et à l’Urssaf.
</p>
</T>
</Trans>
</section>
<section className="ui__ full-width light-bg">
<h2 className="ui__ container" css="text-align: center">
<T k="économieCollaborative.accueil.question">
<Trans key="économieCollaborative.accueil.question">
Quels types d'activités avez-vous exercé ?
</T>
</Trans>
</h2>
<ActivitéSelection activités={activités.map(({ titre }) => titre)} />
<p className="ui__ container notice" css="text-align: center">
<T k="économieCollaborative.accueil.réassurance">
<Trans key="économieCollaborative.accueil.réassurance">
PS : cet outil est là uniquement pour vous informer, aucune donnée
ne sera transmise aux administrations
</T>{' '}
</Trans>{' '}
{emoji('😌')}
</p>
</section>
@ -168,7 +167,7 @@ export const ActivitéCard = ({
className="ui__ small simple button"
to={sitePaths.économieCollaborative.index + '/' + title}
>
<T>Modifier</T>
<Trans>Modifier</Trans>
</Link>
)}
</div>

10
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/ExceptionsExonération.tsx
View File

@ -1,5 +1,5 @@
import { T } from 'Components'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { CheckItem, Checklist } from 'Ui/Checklist'
import { changeCritèreExonération } from './actions'
import { StoreContext } from './StoreContext'
@ -17,9 +17,9 @@ export default function ExceptionsExonération({
return (
<>
<h2>
<T k="économieCollaborative.exonération.question">
<Trans key="économieCollaborative.exonération.question">
Êtes-vous dans un des cas suivants ?
</T>
</Trans>
</h2>
<Checklist
onItemCheck={(index, checked) =>
@ -37,10 +37,10 @@ export default function ExceptionsExonération({
))}
</Checklist>
<p className="ui__ notice">
<T k="économieCollaborative.exonération.notice">
<Trans key="économieCollaborative.exonération.notice">
Si aucun de ces cas ne s'appliquent à vous, vous n'aurez rien à
déclarer.
</T>
</Trans>
</p>
</>
)

8
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/NextButton.tsx
View File

@ -1,7 +1,7 @@
import classnames from 'classnames'
import { T } from 'Components'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { Link } from 'react-router-dom'
import { activitéVue } from './actions'
import { nextActivitéSelector } from './selectors'
@ -31,11 +31,11 @@ export default function NextButton({ activité, disabled }) {
}
>
{nextActivité || disabled ? (
<T>Continuer</T>
<Trans>Continuer</Trans>
) : (
<T k="économieCollaborative.activité.voirObligations">
<Trans key="économieCollaborative.activité.voirObligations">
Voir mes obligations
</T>
</Trans>
)}
</Link>
</p>

27
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/VotreSituation.tsx
View File

@ -1,9 +1,8 @@
import { T } from 'Components'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { Link, Redirect } from 'react-router-dom'
import Animate from 'Ui/animate'
import { ActivitéCard } from './ActivitésSelection'
@ -55,7 +54,7 @@ export default function VotreSituation() {
<section>
{déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE.length > 0 && (
<>
<T k="économieCollaborative.obligations.pro">
<Trans key="économieCollaborative.obligations.pro">
<h2>Déclarer en tant qu'activité professionnelle</h2>
<p>
Vos revenus sont considérés comme revenus professionnels, ils
@ -63,9 +62,9 @@ export default function VotreSituation() {
ouvrent vos droit à des prestations sociales (retraite,
assurance maladie, maternité, etc.).
</p>
</T>
</Trans>
<ActivitéList activités={déclarations.RÉGIME_GÉNÉRAL_DISPONIBLE} />
<T k="économieCollaborative.obligations.entreprise">
<Trans key="économieCollaborative.obligations.entreprise">
<h3>Avec une entreprise</h3>
<p>
Si vous possédez déjà une activité déclarée, vous pouvez ajouter
@ -81,10 +80,10 @@ export default function VotreSituation() {
>
Créer une entreprise
</Link>
</T>
</Trans>
{régimeGénéralDisponible && (
<T k="économieCollaborative.obligations.régimeGénéral">
<Trans key="économieCollaborative.obligations.régimeGénéral">
<h3>Avec l'option régime général</h3>
<p>
Pour certaines activités, vous pouvez déclarer vos revenus
@ -100,13 +99,13 @@ export default function VotreSituation() {
>
Déclarer au régime général
</a>
</T>
</Trans>
)}
</>
)}
{déclarations.IMPOSITION.length > 0 && (
<>
<T k="économieCollaborative.obligations.impôts">
<Trans key="économieCollaborative.obligations.impôts">
<h2>Déclarer vos revenus aux impôts</h2>
<p>
Pour ces activités, vous avez uniquement besoin de déclarer vos
@ -117,20 +116,20 @@ export default function VotreSituation() {
</a>
.
</p>
</T>
</Trans>
<ActivitéList activités={déclarations.IMPOSITION} />
</>
)}
{déclarations.AUCUN.length > 0 && (
<>
<T k="économieCollaborative.obligations.aucune">
<Trans key="économieCollaborative.obligations.aucune">
<h2>Rien à faire</h2>
<p>
Vous n'avez pas besoin de déclarer vos revenus pour ces
activités.
</p>
</T>
</Trans>
<ActivitéList activités={déclarations.AUCUN} />
</>
)}
@ -151,9 +150,9 @@ const ActivitéList = ({ activités }) => {
answered
label={
régimeGénéralDisponibleSelector(state, title) ? (
<T k="économieCollaborative.obligations.régimeGénéralDisponible">
<Trans key="économieCollaborative.obligations.régimeGénéralDisponible">
Régime général disponible
</T>
</Trans>
) : null
}
/>

33
source/sites/mon-entreprise.fr/pages/ÉconomieCollaborative/index.tsx
View File

@ -1,16 +1,16 @@
import { T } from 'Components';
import { SitePathsContext } from 'Components/utils/withSitePaths';
import React, { useContext } from 'react';
import { Route, Switch } from 'react-router';
import { NavLink } from 'react-router-dom';
import Activité from './Activité';
import ActivitésSelection from './ActivitésSelection';
import reducer from './reducer';
import { StoreProvider } from './StoreContext';
import VotreSituation from './VotreSituation';
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { Route, Switch } from 'react-router'
import { NavLink } from 'react-router-dom'
import Activité from './Activité'
import ActivitésSelection from './ActivitésSelection'
import reducer from './reducer'
import { StoreProvider } from './StoreContext'
import VotreSituation from './VotreSituation'
export default function ÉconomieCollaborative() {
const sitePaths = useContext(SitePathsContext);
const sitePaths = useContext(SitePathsContext)
return (
<>
<div css="transform: translateY(2rem)">
@ -18,13 +18,18 @@ export default function ÉconomieCollaborative() {
to={sitePaths.économieCollaborative.index}
exact
activeClassName="ui__ hide"
className="ui__ simple small push-left button ">
← <T k="économieCollaborative.retourAccueil">Retour à la selection d'activités</T>
className="ui__ simple small push-left button "
>
←{' '}
<Trans key="économieCollaborative.retourAccueil">
Retour à la selection d'activités
</Trans>
</NavLink>
</div>
<StoreProvider
reducer={reducer}
localStorageKey="app::économie-collaborative:v1">
localStorageKey="app::économie-collaborative:v1"
>
<Switch>
<Route
exact