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

Nouvelle navigation avec boutons retours pour le parcours gérer

pull/640/head
Johan Girod 2019-10-17 16:51:23 +02:00
parent 3eda3ae705
commit 1aa05d1d1b
17 changed files with 560 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -9,4 +9,4 @@
"arrowParens": "avoid",
"proseWrap": "preserve",
"tabWidth": 2
}
}

10
.vscode/settings.json vendored
View File

@ -1,8 +1,12 @@
{
"editor.formatOnSave": true,
"spellright.language": ["fr"],
"spellright.documentTypes": ["yaml"],
"spellright.language": [
"fr"
],
"spellright.documentTypes": [
"yaml"
],
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
}
}

3
source/components/ui/Button/button.css
View File

@ -208,8 +208,9 @@
padding-top: 1rem;
color: inherit;
padding-bottom: 1rem;
margin: 1rem 0;
margin-bottom: 1rem;
position: relative;
margin-right: 1rem;
text-decoration: none;
}

3
source/components/ui/index.css
View File

@ -67,6 +67,9 @@ blockquote {
flex-wrap: wrap;
}
.ui__ .hide {
display: none;
}
@media (max-width: 850px) {
.ui__.hide-mobile {
display: none;

2
source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js
View File

@ -70,7 +70,7 @@ const AfterRegistration = ({ companyStatusChoice, sitePaths }: Props) => {
<span
style={
companyStatusChoice &&
companyStatusChoice.match(/auto-entrepreneur|EI/)
companyStatusChoice.match(/auto-entrepreneur|EI/)
? { display: 'none' }
: {}
}>

75
source/sites/mon-entreprise.fr/pages/Company/CreationChecklist.js
View File

@ -1,5 +1,8 @@
/* @flow */
import { checkCompanyCreationItem, initializeCompanyCreationChecklist } from 'Actions/companyCreationChecklistActions'
import {
checkCompanyCreationItem,
initializeCompanyCreationChecklist
} from 'Actions/companyCreationChecklistActions'
import { goToCompanyStatusChoice } from 'Actions/companyStatusActions'
import { React, T } from 'Components'
import Route404 from 'Components/Route404'
@ -22,11 +25,11 @@ type Props = {
statusChooserCompleted: boolean,
match: Match,
onChecklistInitialization: (string, Array<string>) => void,
onStatusChange: () => void,
sitePaths: Object,
onItemCheck: (name: string, checked: boolean) => void,
t: TFunction,
companyCreationChecklist: { [string]: boolean }
onStatusChange: () => void,
sitePaths: Object,
onItemCheck: (name: string, checked: boolean) => void,
t: TFunction,
companyCreationChecklist: { [string]: boolean }
}
const CreateCompany = ({
@ -53,23 +56,23 @@ const CreateCompany = ({
}
const titre = isAutoentrepreneur
? t(
[
'entreprise.tâches.page.autoEntrepreneur.titre',
'Comment devenir {{autoEntrepreneur}}'
],
{
autoEntrepreneur: t(companyStatus)
}
)
[
'entreprise.tâches.page.autoEntrepreneur.titre',
'Comment devenir {{autoEntrepreneur}}'
],
{
autoEntrepreneur: t(companyStatus)
}
)
: t(
[
'entreprise.tâches.page.entreprise.titre',
'Créer une {{companyStatus}}'
],
{
companyStatus: t(companyStatus)
}
)
[
'entreprise.tâches.page.entreprise.titre',
'Créer une {{companyStatus}}'
],
{
companyStatus: t(companyStatus)
}
)
return (
<Animate.fromBottom>
<Helmet>
@ -79,25 +82,27 @@ const CreateCompany = ({
content={
isAutoentrepreneur
? t(
[
'entreprise.tâches.page.autoEntrepreneur.description',
'La liste complète des démarches à faire pour devenir {{autoEntrepreneur}}.'
],
{ autoEntrepreneur: t(companyStatus) }
)
[
'entreprise.tâches.page.autoEntrepreneur.description',
'La liste complète des démarches à faire pour devenir {{autoEntrepreneur}}.'
],
{ autoEntrepreneur: t(companyStatus) }
)
: t(
[
'entreprise.tâches.page.description',
'La liste complète des démarches à faire pour créer une {{companyStatus}} auprès de l\'administration française.'
],
{ companyStatus: t(companyStatus) }
)
[
'entreprise.tâches.page.description',
"La liste complète des démarches à faire pour créer une {{companyStatus}} auprès de l'administration française."
],
{ companyStatus: t(companyStatus) }
)
}
/>
</Helmet>
<Scroll.toTop />
<h1>{titre}</h1>
<p><StatusDescription status={companyStatus} /></p>
<p>
<StatusDescription status={companyStatus} />
</p>
<button
onClick={onStatusChange}
className="ui__ simple small skip button left">

2
source/sites/mon-entreprise.fr/pages/Company/MinorityDirector.js
View File

@ -2,7 +2,7 @@
import { directorIsInAMinority } from 'Actions/companyStatusActions'
import { React, T } from 'Components'
import { compose } from 'ramda'
import {Helmet} from 'react-helmet'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import CompanyStatusNavigation from './CompanyStatusNavigation'

2
source/sites/mon-entreprise.fr/pages/Company/NumberOfAssociate.js
View File

@ -3,7 +3,7 @@
import { companyHasMultipleAssociates } from 'Actions/companyStatusActions'
import { React, T } from 'Components'
import { compose } from 'ramda'
import {Helmet} from 'react-helmet'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import CompanyStatusNavigation from './CompanyStatusNavigation'

4
source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js
View File

@ -31,8 +31,8 @@ const StatusButton = withSitePaths(
{status.includes('auto-entrepreneur') ? (
<T>Devenir</T>
) : (
<T>Créer une</T>
)}{' '}
<T>Créer une</T>
)}{' '}
{t(status)}
</Link>
</div>

339
source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.js
View File

@ -1,208 +1,205 @@
/* @flow */
import { checkHiringItem, initializeHiringChecklist } from 'Actions/hiringChecklistAction'
import {
checkHiringItem,
initializeHiringChecklist
} from 'Actions/hiringChecklistAction'
import { React, T } from 'Components'
import withSitePaths from 'Components/utils/withSitePaths'
import { compose } from 'ramda'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Animate from 'Ui/animate'
import { CheckItem, Checklist } from 'Ui/Checklist'
const Embaucher = ({
onChecklistInitialization,
sitePaths,
onItemCheck,
hiringChecklist,
t
}) => (
<Animate.fromBottom>
<Helmet>
<title>
{t(['embauche.tâches.page.titre', `Les formalités pour embaucher`])}
</title>
<meta
name="description"
content={t(
'embauche.tâches.page.description',
`Toutes les démarches nécessaires à l'embauche de votre premier salarié.`
)}
/>
</Helmet>
<h1>
<T k="embauche.tâches.titre">Les formalités pour embaucher</T>
</h1>
<p>
<T k="embauche.tâches.description">
Toutes les étapes nécessaires à l'embauche de votre premier employé.
<Animate.fromBottom>
<Helmet>
<title>
{t(['embauche.tâches.page.titre', 'Les formalités pour embaucher'])}
</title>
<meta
name="description"
content={t(
'embauche.tâches.page.description',
"Toutes les démarches nécessaires à l'embauche de votre premier salarié."
)}
/>
</Helmet>
<h1>
<T k="embauche.tâches.titre">Les formalités pour embaucher</T>
</h1>
<p>
<T k="embauche.tâches.description">
Toutes les étapes nécessaires à l'embauche de votre premier employé.
</T>
</p>
<Checklist
onInitialization={onChecklistInitialization}
onItemCheck={onItemCheck}
defaultChecked={hiringChecklist}>
<CheckItem
name="contract"
title={
<T k="embauche.tâches.contrat.titre">
Signer un contrat de travail avec votre employé
</p>
<Checklist
onInitialization={onChecklistInitialization}
onItemCheck={onItemCheck}
defaultChecked={hiringChecklist}>
<CheckItem
name="contract"
title={
<T k="embauche.tâches.contrat.titre">
Signer un contrat de travail avec votre employé
</T>
}
explanations={
<p>
<a
className="ui__ button"
href="https://www.service-public.fr/particuliers/vosdroits/N19871"
target="_blank">
{' '}
<T>Plus d'informations</T>
</a>
</p>
}
/>
<CheckItem
name="dpae"
title={
<T k="embauche.tâches.dpae.titre">
Déclarer l'embauche à l'administration sociale
}
explanations={
<p>
<a
className="ui__ button"
href="https://www.service-public.fr/particuliers/vosdroits/N19871"
target="_blank">
{' '}
<T>Plus d'informations</T>
</a>
</p>
}
/>
<CheckItem
name="dpae"
title={
<T k="embauche.tâches.dpae.titre">
Déclarer l'embauche à l'administration sociale
</T>
}
explanations={
<p>
<T k="embauche.tâches.dpae.description">
Ceci peut être fait par le biais du formulaire appelé DPAE, doit
}
explanations={
<p>
<T k="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 href="https://www.due.urssaf.fr" target="_blank">
être effectué en ligne
</a>
.
.
</T>
</p>
}
/>
<CheckItem
name="paySoftware"
title={
<T k="embauche.tâches.logiciel de paie.titre">
Choisir un logiciel de paie
</p>
}
/>
<CheckItem
name="paySoftware"
title={
<T k="embauche.tâches.logiciel de paie.titre">
Choisir un logiciel de paie
</T>
}
explanations={
<p>
<T k="embauche.tâches.logiciel de paie.description">
Les fiches de paie et les déclarations peuvent être traitées en
}
explanations={
<p>
<T k="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">
Tese
<a href="http://www.letese.urssaf.fr" target="_blank">
Tese
</a>
. Vous pouvez aussi utiliser un{' '}
<a
href="http://www.dsn-info.fr/convention-charte.htm"
target="_blank">
logiciel de paie privé.
</a>
</T>
</p>
}
/>
<CheckItem
name="registre"
title={
<T k="embauche.tâches.registre.titre">
Tenir un registre des employés à jour
</T>
}
explanations={
<p>
. Vous pouvez aussi utiliser un{' '}
<a
href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F1784"
className="ui__ button"
href="http://www.dsn-info.fr/convention-charte.htm"
target="_blank">
<T>Plus d'informations</T>
logiciel de paie privé.
</a>
</p>
}
/>
<CheckItem
name="complementaryPension"
title={
<T k="embauche.tâches.pension.titre">
Prendre contact avec l'institution de prévoyance complémentaire
obligatoire qui vous est assignée
</T>
}
explanations={
<p>
<a
href="https://www.espace-entreprise.agirc-arrco.fr/simape/#/donneesDep"
className="ui__ button"
target="_blank">
<T k="embauche.tâches.pension.description">
Trouver mon institution de prévoyance
</T>
</a>
{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
</p>
}
/>
<CheckItem
name="complementaryHealth"
title={
<T k="embauche.tâches.complémentaire santé.titre">
Choisir une complémentaire santé
</T>
}
explanations={
<p>
<T k="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>
</p>
}
/>
<CheckItem
name="workMedicine"
title={
<T k="embauche.tâches.medecine.titre">
S'inscrire à un bureau de médecine du travail
</p>
}
/>
<CheckItem
name="registre"
title={
<T k="embauche.tâches.registre.titre">
Tenir un registre des employés à jour
</T>
}
explanations={
<p>
<T k="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>
}
explanations={
<p>
<a
href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F1784"
className="ui__ button"
target="_blank">
<T>Plus d'informations</T>
</a>
</p>
}
/>
<CheckItem
name="complementaryPension"
title={
<T k="embauche.tâches.pension.titre">
Prendre contact avec l'institution de prévoyance complémentaire
obligatoire qui vous est assignée
</T>
}
explanations={
<p>
<a
href="https://www.espace-entreprise.agirc-arrco.fr/simape/#/donneesDep"
className="ui__ button"
target="_blank">
<T k="embauche.tâches.pension.description">
Trouver mon institution de prévoyance
</T>
</p>
}
/>
</Checklist>
<T k="embauche.chaque mois">
<h2>Tous les mois</h2>
<ul>
<li>
Utiliser un logiciel de paie pour calculer les cotisations sociales et
les transmettre via la déclaration sociale nominative (DSN)
</a>
{/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */}
</p>
}
/>
<CheckItem
name="complementaryHealth"
title={
<T k="embauche.tâches.complémentaire santé.titre">
Choisir une complémentaire santé
</T>
}
explanations={
<p>
<T k="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>
</p>
}
/>
<CheckItem
name="workMedicine"
title={
<T k="embauche.tâches.medecine.titre">
S'inscrire à un bureau de médecine du travail
</T>
}
explanations={
<p>
<T k="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>
</p>
}
/>
</Checklist>
<T k="embauche.chaque mois">
<h2>Tous les mois</h2>
<ul>
<li>
Utiliser un logiciel de paie pour calculer les cotisations sociales et
les transmettre via la déclaration sociale nominative (DSN)
</li>
<li>Remettre la fiche de paie à votre employé</li>
</ul>
<Link className="ui__ button" to={sitePaths.simulateurs.salarié}>
Obtenir un exemple de fiche de paie
</Link>
</T>
</Animate.fromBottom>
)
<li>Remettre la fiche de paie à votre employé</li>
</ul>
</T>
</Animate.fromBottom>
)
export default compose(
withTranslation(),
withSitePaths,
connect(
state => ({ hiringChecklist: state.inFranceApp.hiringChecklist }),
{

530
source/sites/mon-entreprise.fr/pages/Gérer/Home.js
View File

@ -1,267 +1,307 @@
import {
resetEntreprise,
specifyIfAutoEntrepreneur,
specifyIfDirigeantMajoritaire
} from 'Actions/existingCompanyActions'
import { React, T } from 'Components'
import CompanyDetails from 'Components/CompanyDetails'
import FindCompany from 'Components/FindCompany'
import Overlay from 'Components/Overlay'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import { useContext, useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import * as Animate from 'Ui/animate'
import businessPlan from './businessPlan.svg'
import { resetEntreprise, specifyIfAutoEntrepreneur, specifyIfDirigeantMajoritaire } from 'Actions/existingCompanyActions';
import { React, T } from 'Components';
import CompanyDetails from 'Components/CompanyDetails';
import FindCompany from 'Components/FindCompany';
import Overlay from 'Components/Overlay';
import { ScrollToTop } from 'Components/utils/Scroll';
import { SitePathsContext } from 'Components/utils/withSitePaths';
import { useContext, useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import * as Animate from 'Ui/animate';
import businessPlan from './businessPlan.svg';
const infereRégimeFromCompanyDetails = company => {
if (!company) {
return null
}
if (company.isAutoEntrepreneur) {
return 'auto-entrepreneur'
}
if (
['EI', 'EURL'].includes(company.statutJuridique) ||
(company.statutJuridique === 'SARL' && company.isDirigeantMajoritaire)
) {
return 'indépendant'
}
if (
['SASU', 'SAS'].includes(company.statutJuridique) ||
(company.statutJuridique === 'SARL' && !company.isDirigeantMajoritaire)
) {
return 'assimilé-salarié'
}
const infereRégimeFromCompanyDetails = (
company
) => {
if (!company) {
return null
}
if (company.isAutoEntrepreneur) {
return 'auto-entrepreneur'
}
if (['EI', 'EURL'].includes(company.statutJuridique) || company.statutJuridique === 'SARL' && company.isDirigeantMajoritaire) {
return 'indépendant'
}
if (['SASU', 'SAS'].includes(company.statutJuridique) || company.statutJuridique === 'SARL' && !company.isDirigeantMajoritaire) {
return 'assimilé-salarié'
}
return null
return null
}
export default function SocialSecurity() {
const { t } = useTranslation()
const company = useSelector(state => state.inFranceApp.existingCompany)
const sitePaths = useContext(SitePathsContext)
const régime = infereRégimeFromCompanyDetails(company)
const { t } = useTranslation()
const company = useSelector(state => state.inFranceApp.existingCompany)
const sitePaths = useContext(SitePathsContext)
const régime = infereRégimeFromCompanyDetails(company)
return (
<>
<Helmet>
<title>
{t('gérer.index.page.titre', 'Gérer mon activité')}
</title>
</Helmet>
<ScrollToTop />
<Animate.fromBottom>
<h1>
<T k="gérer.index.page.titre">
Gérer mon activité
</T>
</h1>
<div css="display: flex; align-items: flex-start; justify-content: space-between">
<div>{!company && <p className="ui__ lead" >
<T k="gérer.index.content.entreprise">
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>
</p>}
<CompanySection company={company} />
</div>
return (
<>
<Helmet>
<title>{t('gérer.index.page.titre', 'Gérer mon activité')}</title>
</Helmet>
<ScrollToTop />
<Animate.fromBottom>
<h1>
<T k="gérer.index.page.titre">Gérer mon activité</T>
</h1>
<div css="display: flex; align-items: flex-start; justify-content: space-between">
<div>
{!company && (
<p className="ui__ lead">
<T k="gérer.index.content.entreprise">
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>
</p>
)}
<CompanySection company={company} />
</div>
<img
className="ui__ hide-mobile"
src={businessPlan}
css="max-width: 30%; transform: translateX(1.5rem) scale(1.5);" />
</div>
<img
className="ui__ hide-mobile"
src={businessPlan}
css="margin-left: 3rem; max-width: 15rem; transform: translateX(2rem) scale(1.4);"
/>
</div>
<>
<h2>Simulateurs</h2>
{!!régime && <Link
className="ui__ interactive card button-choice light-bg"
css="width: 100%"
to={
régime && sitePaths.simulateurs[régime]
}>
<p><T k='sécu.choix.dirigeant2'>
Calculer mon revenu net
</T></p>
<small>
Estimez précisément le montant de vos cotisations grâce au simulateur {régime} de l’URSSAF
</small>
</Link>
}
{régime !== 'auto-entrepreneur' && <Link
className="ui__ interactive card button-choice light-bg "
css="width: 100%"
to={sitePaths.simulateurs.salarié}>
<p><T k="sécu.choix.employé">Estimer le montant d’une embauche</T></p>
<small>Découvrez le montant total dépensé par l’entreprise pour rémunérer votre prochain employé</small>
</Link>}
<h2>Ressources utiles</h2>
<div css={`
display: flex;
margin: 0 -1rem;
> * {
margin: 1rem !important;
flex: 1;
}
`}>
{!company ?.isAutoEntrepreneur && <Link
className="ui__ interactive card button-choice light-bg"
to={sitePaths.gérer.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>
</Link>}
{company ?.isAutoEntrepreneur && <a
className="ui__ interactive card button-choice light-bg"
href="https://autoentrepreneur.urssaf.fr"
>
<p>Accéder au site officiel auto-entrepreneur</p>
<small>Vous pourrez effectuer votre déclaration de chiffre d'affaire, payer vos cotisations, et plus largement trouver toutes les informations relatives au statut d'auto-entrepreneur</small>
</a>}
<Link
className="ui__ interactive card button-choice light-bg"
to={sitePaths.gérer.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 touts les travailleurs en France</small>
</Link>
</div>
</>
</Animate.fromBottom>
</>
)
<>
<h2>Que souhaitez-vous faire ? </h2>
{!!régime && (
<Link
className="ui__ interactive card button-choice lighter-bg"
css="width: 100%"
to={{
pathname: sitePaths.simulateurs[régime],
state: {
fromGérer: true
}
}}>
<p>
<T k="sécu.choix.dirigeant2">Calculer mon revenu net</T>
</p>
<small>
Estimez précisément le montant de vos cotisations grâce au
simulateur {régime} de l’URSSAF
</small>
</Link>
)}
{régime !== 'auto-entrepreneur' && (
<Link
className="ui__ interactive card button-choice lighter-bg "
css="width: 100%"
to={{
pathname: sitePaths.simulateurs.salarié,
state: {
fromGérer: true
}
}}>
<p>
<T k="sécu.choix.employé">Estimer le montant d’une embauche</T>
</p>
<small>
Découvrez le montant total dépensé par l’entreprise pour
rémunérer votre prochain employé
</small>
</Link>
)}
<h2>Ressources utiles</h2>
<div
css={`
display: flex;
margin-right: -1rem;
> * {
flex: 1;
}
`}>
{!company?.isAutoEntrepreneur && (
<Link
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.gérer.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>
</Link>
)}
{company?.isAutoEntrepreneur && (
<a
className="ui__ interactive card button-choice lighter-bg"
href="https://autoentrepreneur.urssaf.fr">
<p>Accéder au site officiel auto-entrepreneur</p>
<small>
Vous pourrez effectuer votre déclaration de chiffre d'affaire,
payer vos cotisations, et plus largement trouver toutes les
informations relatives au statut d'auto-entrepreneur
</small>
</a>
)}
<Link
className="ui__ interactive card button-choice lighter-bg"
to={sitePaths.gérer.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 touts les
travailleurs en France
</small>
</Link>
</div>
</>
</Animate.fromBottom>
</>
)
}
const CompanySection = ({ company }) => {
const [searchModal, showSearchModal] = useState(false)
const [autoEntrepreneurModal, showAutoEntrepreneurModal] = useState(false)
const [DirigeantMajoritaireModal, showDirigeantMajoritaireModal] = useState(false)
const [searchModal, showSearchModal] = useState(false)
const [autoEntrepreneurModal, showAutoEntrepreneurModal] = useState(false)
const [DirigeantMajoritaireModal, showDirigeantMajoritaireModal] = useState(
false
)
const companyRef = useRef(null)
useEffect(() => {
if (companyRef.current !== company) {
companyRef.current = company
if (searchModal && company) {
showSearchModal(false)
}
if (
company ?.statutJuridique === 'EI' &&
company ?.isAutoEntrepreneur == null
const companyRef = useRef(null)
useEffect(() => {
if (companyRef.current !== company) {
companyRef.current = company
if (searchModal && company) {
showSearchModal(false)
}
if (
company?.statutJuridique === 'EI' &&
company?.isAutoEntrepreneur == null
) {
showAutoEntrepreneurModal(true)
}
if (
company ?.statutJuridique === 'SARL' && company ?.isDirigeantMajoritaire == null
showAutoEntrepreneurModal(true)
}
if (
company?.statutJuridique === 'SARL' &&
company?.isDirigeantMajoritaire == null
) {
showDirigeantMajoritaireModal(true)
}
}
}, [company, searchModal])
showDirigeantMajoritaireModal(true)
}
}
}, [company, searchModal])
const dispatch = useDispatch(company)
const handleAnswerAutoEntrepreneur = isAutoEntrepreneur => {
dispatch(specifyIfAutoEntrepreneur(isAutoEntrepreneur))
showAutoEntrepreneurModal(false)
}
const handleAnswerDirigeantMajoritaire = DirigeantMajoritaire => {
dispatch(specifyIfDirigeantMajoritaire(DirigeantMajoritaire))
showDirigeantMajoritaireModal(false)
}
const dispatch = useDispatch(company)
const handleAnswerAutoEntrepreneur = isAutoEntrepreneur => {
dispatch(specifyIfAutoEntrepreneur(isAutoEntrepreneur))
showAutoEntrepreneurModal(false)
}
const handleAnswerDirigeantMajoritaire = DirigeantMajoritaire => {
dispatch(specifyIfDirigeantMajoritaire(DirigeantMajoritaire))
showDirigeantMajoritaireModal(false)
}
return (
<>
{autoEntrepreneurModal && (
<>
<ScrollToTop />
<Overlay>
<h2> Êtes-vous auto-entrepreneur ? </h2>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(true)}>
Oui
return (
<>
{autoEntrepreneurModal && (
<>
<ScrollToTop />
<Overlay>
<h2> Êtes-vous auto-entrepreneur ? </h2>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(true)}>
Oui
</button>
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(false)}>
Non
<button
className="ui__ button"
onClick={() => handleAnswerAutoEntrepreneur(false)}>
Non
</button>
</div>
</Overlay>
</>
)}
{DirigeantMajoritaireModal && (
<>
<ScrollToTop />
<Overlay>
<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 statut que si vous êtes minoritaire.</p>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(true)}>
Oui
</div>
</Overlay>
</>
)}
{DirigeantMajoritaireModal && (
<>
<ScrollToTop />
<Overlay>
<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 statut que si vous êtes minoritaire.
</p>
<div className="ui__ answer-group">
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(true)}>
Oui
</button>
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(false)}>
Non
<button
className="ui__ button"
onClick={() => handleAnswerDirigeantMajoritaire(false)}>
Non
</button>
</div>
</Overlay>
</>
)}
{searchModal && (
<>
<ScrollToTop />
<Overlay onClose={() => showSearchModal(false)}>
<FindCompany />
</Overlay>
</>
)}
{company ? (
<>
<CompanyDetails siren={company.siren} />
<p> {company.statutJuridique !== 'NON_IMPLÉMENTÉ' &&
<>
<span className="ui__ label">
{company.isAutoEntrepreneur ?
'Auto-entrepreneur'
:
company.statutJuridique}
</span>
{company.isDirigeantMajoritaire != null && <span css="margin-left: 1rem" className="ui__ label">
{company.isDirigeantMajoritaire ? 'Dirigeant majoritaire' : 'Dirigeant minoritaire'}
</span>}
</>
}
</p>
<button
className="ui__ simple small button"
onClick={() => {
dispatch(resetEntreprise())
showSearchModal(true)
}}>
<T>Changer l'entreprise sélectionnée</T>
</button>
</>
) : (
<p>
<button
onClick={() => showSearchModal(true)}
className="ui__ plain cta button">
<T>Renseigner mon entreprise</T>
</button>
</p>
)}
</>
)
</div>
</Overlay>
</>
)}
{searchModal && (
<>
<ScrollToTop />
<Overlay onClose={() => showSearchModal(false)}>
<FindCompany />
</Overlay>
</>
)}
{company ? (
<>
<CompanyDetails siren={company.siren} />
<p>
{' '}
{company.statutJuridique !== 'NON_IMPLÉMENTÉ' && (
<>
<span className="ui__ label">
{company.isAutoEntrepreneur
? 'Auto-entrepreneur'
: company.statutJuridique}
</span>
{company.isDirigeantMajoritaire != null && (
<span css="margin-left: 1rem" className="ui__ label">
{company.isDirigeantMajoritaire
? 'Dirigeant majoritaire'
: 'Dirigeant minoritaire'}
</span>
)}
</>
)}
</p>
<button
className="ui__ simple small button"
onClick={() => {
dispatch(resetEntreprise())
showSearchModal(true)
}}>
<T>Changer l'entreprise sélectionnée</T>
</button>
</>
) : (
<p>
<button
onClick={() => showSearchModal(true)}
className="ui__ plain cta button">
<T>Renseigner mon entreprise</T>
</button>
</p>
)}
</>
)
}

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

@ -1,19 +1,15 @@
import { React, T } from 'Components'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import * as Animate from 'Ui/animate'
import Video from './Video'
export default function SocialSecurity() {
const { t } = useTranslation()
return (
<>
<Helmet>
<title>
{t('sécu.page.titre', 'Sécurité sociale')}
</title>
<title>{t('sécu.page.titre', 'Sécurité sociale')}</title>
<meta name="description" content={t('sécu.page.description')} />
</Helmet>

2
source/sites/mon-entreprise.fr/pages/Gérer/businessPlan.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

28
source/sites/mon-entreprise.fr/pages/Gérer/index.js
View File

@ -1,32 +1,40 @@
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Route, Switch } from 'react-router'
import { NavLink, useLocation } from 'react-router-dom'
import Embaucher from './Embaucher'
import Home from './Home'
import SchemeSelection from './SchemeSelection'
import SécuritéSociale from './SécuritéSociale'
export default function Gérer() {
const sitePaths = useContext(SitePathsContext);
const sitePaths = useContext(SitePathsContext)
const location = useLocation()
return (
<>
<ScrollToTop />
<ScrollToTop key={location.pathname} />
<div css="transform: translateY(2rem)">
{' '}
<NavLink
to={sitePaths.gérer.index}
exact
activeClassName="ui__ hide"
className="ui__ simple small button">
{emoji('⬅️')} Retour à mon activité
</NavLink>
</div>
<Switch>
<Route exact path={sitePaths.gérer.index} component={Home} />
<Route
path={sitePaths.gérer.selection}
component={SchemeSelection}
/>
<Route path={sitePaths.gérer.selection} component={SchemeSelection} />
<Route
path={sitePaths.gérer.sécuritéSociale}
component={SécuritéSociale}
/>
<Route path={sitePaths.gérer.embaucher} component={Embaucher} />
</Switch>
</>
);
}
)
}

6
source/sites/mon-entreprise.fr/pages/Landing/Landing.js
View File

@ -9,7 +9,7 @@ import illustrationSvg from './illustration.svg'
import './Landing.css'
export default function Landing() {
const sitePaths = useContext(SitePathsContext);
const sitePaths = useContext(SitePathsContext)
return (
<div className="app-content">
<section className="ui__ container landing-title">
@ -49,9 +49,7 @@ export default function Landing() {
<T>Commencer</T>
</div>
</Link>
<Link
className="ui__ interactive card box "
to={sitePaths.gérer.index}>
<Link className="ui__ interactive card box " to={sitePaths.gérer.index}>
<div className="ui__ big box-icon">{emoji('💶')}</div>
<T k="landing.choice.manage">
<h3>Gérer mon activité</h3>

25
source/sites/mon-entreprise.fr/pages/Simulateurs/index.js
View File

@ -1,7 +1,10 @@
import { usePersistingState } from 'Components/utils/persistState'
import { ScrollToTop } from 'Components/utils/Scroll'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Route, Switch } from 'react-router'
import { Link, useLocation } from 'react-router-dom'
import AssimiléSalarié from './AssimiléSalarié'
import AutoEntrepreneur from './AutoEntrepreneur'
import Indépendant from './Indépendant'
@ -9,12 +12,28 @@ import Salarié from './Salarié'
import SchemeComparaison from './SchemeComparaison'
export default function Simulateurs() {
const sitePaths = useContext(SitePathsContext);
const sitePaths = useContext(SitePathsContext)
const { state } = useLocation()
const [lastState] = usePersistingState(
'navigation::simulateurs::locationState::v2',
state
)
return (
<>
<ScrollToTop />
<div css="transform: translateY(2rem);">
{lastState ?.fromGérer && (
<Link to={sitePaths.gérer.index} className="ui__ simple small button">
{emoji('⬅️')} Retour à mon activité
</Link>
)}
{lastState ?.fromCréer && (
<Link to={sitePaths.gérer.index} className="ui__ simple small button">
{emoji('⬅️')} Retour à la création
</Link>
)}
</div>
<Switch>
{/* <Route exact path={sitePaths.simulateurs.index} component={Home} /> */}
<Route path={sitePaths.simulateurs.salarié} component={Salarié} />
<Route
path={sitePaths.simulateurs.comparaison}
@ -35,4 +54,4 @@ export default function Simulateurs() {
</Switch>
</>
)
}
}

10
source/webpack.common.js
View File

@ -88,12 +88,12 @@ module.exports.commonLoaders = ({ legacy = false } = {}) => {
{
targets: !legacy
? {
esmodules: true
}
esmodules: true
}
: {
esmodules: false,
browsers: ['ie 11']
},
esmodules: false,
browsers: ['ie 11']
},
useBuiltIns: 'entry',
corejs: '3'
}