diff --git a/source/components/CompanyDetails.js b/source/components/CompanyDetails.js index 26110c02b..598a749ad 100644 --- a/source/components/CompanyDetails.js +++ b/source/components/CompanyDetails.js @@ -33,17 +33,18 @@ export default function CompanyDetails({ siren, denomination }) { ({siren}) ) : ( - - )} + + )} - + +

Crée le{' '} {company ? ( DateFormatter.format(new Date(company.date_creation)) ) : ( - - )} + + )} , domiciliée à{' '} {company ? ( @@ -52,9 +53,10 @@ export default function CompanyDetails({ siren, denomination }) { {company.etablissement_siege.code_postal}) ) : ( - - )} - + + )} +

+ ) } diff --git a/source/components/FindCompany.js b/source/components/FindCompany.js index cf28812f2..b4bfa10bc 100644 --- a/source/components/FindCompany.js +++ b/source/components/FindCompany.js @@ -13,7 +13,7 @@ export default function Search() { const [isLoading, setLoadingState] = useState(false) const handleSearch = useCallback( - function(value) { + function (value) { searchDenominationOrSiren(value).then(results => { setLoadingState(false) setSearchResults(results) @@ -77,7 +77,7 @@ export default function Search() { css={` text-align: left; width: 100%; - padding: 0.4rem; + padding: 0 0.4rem; border-radius: 0.3rem; :hover, :focus { diff --git a/source/components/Overlay.css b/source/components/Overlay.css index c98ad9e1a..5c4fb526f 100644 --- a/source/components/Overlay.css +++ b/source/components/Overlay.css @@ -5,6 +5,7 @@ right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); + overflow: auto; z-index: 1; } #overlayContent { diff --git a/source/components/Overlay.js b/source/components/Overlay.js index 9dfb9f3ea..f513c0a6c 100644 --- a/source/components/Overlay.js +++ b/source/components/Overlay.js @@ -1,9 +1,17 @@ import FocusTrap from 'focus-trap-react' -import React from 'react' +import React, { useEffect } from 'react' import * as animate from 'Ui/animate' import { LinkButton } from 'Ui/Button' import './Overlay.css' export default function Overlay({ onClose, children, ...otherProps }) { + useEffect(() => { + const body = document.getElementsByTagName('body')[0] + body.classList.add('no-scroll'); + return () => { + body.classList.remove('no-scroll') + } + } + , []) return (
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js index 98daa45bb..68eec907a 100644 --- a/source/components/rule/Rule.js +++ b/source/components/rule/Rule.js @@ -4,11 +4,7 @@ import withColours from 'Components/utils/withColours' import withSitePaths from 'Components/utils/withSitePaths' import Value from 'Components/Value' import knownMecanisms from 'Engine/known-mecanisms.yaml' -import { - encodeRuleName, - findRuleByDottedName, - findRuleByNamespace -} from 'Engine/rules' +import { encodeRuleName, findRuleByDottedName, findRuleByNamespace } from 'Engine/rules' import { compose, isEmpty } from 'ramda' import React, { Suspense, useState } from 'react' import emoji from 'react-easy-emoji' @@ -16,12 +12,7 @@ import { Helmet } from 'react-helmet' import { Trans, useTranslation } from 'react-i18next' import { connect } from 'react-redux' import { Link } from 'react-router-dom' -import { - exampleAnalysisSelector, - flatRulesSelector, - noUserInputSelector, - ruleAnalysisSelector -} from 'Selectors/analyseSelectors' +import { exampleAnalysisSelector, flatRulesSelector, noUserInputSelector, ruleAnalysisSelector } from 'Selectors/analyseSelectors' import Animate from 'Ui/animate' import { AttachDictionary } from '../AttachDictionary' import RuleLink from '../RuleLink' @@ -96,37 +87,37 @@ export default compose( ) : ( -
- - - +
+ + + -
-
+
- - -
- {displayedRule.defaultValue != null && ( -
- par défaut :{' '} +
- )} - {!valuesToShow && ( -
- - Faire une simulation - -
- )} - - {displayedRule['rend non applicable'] && ( -
-

- Rend non applicable les règles suivantes :{' '} -

-
    - {displayedRule['rend non applicable'].map(ruleName => ( -
  • - -
    • - ))} -
-
- )} - {flatRule.note && ( -
-

Note :

- -
- )} - - {!isEmpty(namespaceRules) && ( - - )} - {renderReferences(flatRule)} -
- {renderToggleSourceButton()} - -
- )} + {displayedRule.defaultValue != null && ( +
+ par défaut :{' '} + +
+ )} + {!valuesToShow && ( +
+ + Faire une simulation + +
+ )} + + {displayedRule['rend non applicable'] && ( +
+

+ Rend non applicable les règles suivantes :{' '} +

+
    + {displayedRule['rend non applicable'].map(ruleName => ( +
  • + +
    • + ))} +
+
+ )} + {flatRule.note && ( +
+

Note :

+ +
+ )} + + {!isEmpty(namespaceRules) && ( + + )} + {renderReferences(flatRule)} + + {renderToggleSourceButton()} + +
+ )} ) }) @@ -260,13 +251,13 @@ let Period = ({ period, valuesToShow }) => valuesToShow && period === 'flexible' ? ( ) : ( - - - {period} + + + {period} + - - ) + ) ) : null diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index 7c152c554..f3841e985 100644 --- a/source/components/ui/Button/button.css +++ b/source/components/ui/Button/button.css @@ -93,7 +93,7 @@ } .ui__.button.cta, .ui__.inverted-button.cta { - margin: 1rem; + margin: 1rem 0; display: inline-block; align-self: center; font-size: 120%; @@ -203,27 +203,14 @@ padding: 0.4rem 0.8rem; border-radius: 0.3rem; } -.ui__.button-choice:first-of-type { - margin-top: 2rem; -} -.ui__.button-choice:last-of-type { - margin-bottom: 2rem; -} + .ui__.button-choice { - display: flex; padding-top: 1rem; - padding-bottom: 1rem; - align-items: baseline; color: inherit; - line-height: 2rem; + padding-bottom: 1rem; margin: 1rem 0; position: relative; text-decoration: none; - font-size: 1.15rem; -} -.ui__.button-choice small { - margin-left: 0.2rem; - flex-grow: 1; } .ui__.button-choice--soon { @@ -240,20 +227,6 @@ filter: saturate(0%); } -.ui__.button-choice img { - margin-right: 2rem !important; - margin-left: 0.5rem !important; - transform: scale(1.5) translateY(0.1em); -} - -@media (min-width: 600px) { - .ui__.button-choice:not(.button-choice--soon)::after { - content: '›'; - position: absolute; - right: 20px; - font-size: 2rem; - } -} @keyframes push-button-down { from { diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index b606c1790..a51c2bac6 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -75,10 +75,16 @@ button { } p, +a, ul { line-height: 1.7rem; + +} + +p, ul { margin: 0 0 0.6rem; } + p.ui__.lead { font-size: 120%; line-height: 2rem; @@ -127,4 +133,5 @@ small, color: rgba(0, 0, 0, 0.6); color: var(--lighterTextColour); font-size: 85%; + line-height: 1.2rem; } diff --git a/source/components/ui/index.css b/source/components/ui/index.css index 96618bf9f..02356e4f1 100644 --- a/source/components/ui/index.css +++ b/source/components/ui/index.css @@ -64,6 +64,12 @@ blockquote { flex-wrap: wrap; } +@media (max-width: 850px) { + .ui__.hide-mobile { + display: none; + } +} + section { padding: 1rem 0; } @@ -104,3 +110,7 @@ span.ui__.enumeration:not(:last-of-type)::after { border-radius: 0.3rem; text-align: center; } + +.no-scroll { + overflow: hidden; +} diff --git a/source/components/utils/withSitePaths.js b/source/components/utils/withSitePaths.js index 4d28a5907..1f5904a49 100644 --- a/source/components/utils/withSitePaths.js +++ b/source/components/utils/withSitePaths.js @@ -2,33 +2,33 @@ import React, { Component, createContext } from 'react' import i18n from '../../i18n' -const SitePathsContext: React$Context = createContext({}) +export const SitePathsContext: React$Context = createContext({}) export const SitePathProvider = SitePathsContext.Provider -export default function withSitePaths( +export default function withSitePaths ( WrappedComponent: React$ComponentType -): React$ComponentType<$Diff> { - class WithSitePaths extends Component< - $Diff +): React$ComponentType < $Diff < Props, { sitePaths: SitePaths } >> { + class WithSitePaths extends Component < + $Diff < Props, { sitePaths: SitePaths }> > { - displayName = `withSitePaths(${WrappedComponent.displayName || ''})` + displayName = `withSitePaths(${WrappedComponent.displayName || ''})` constructor(props) { - super(props) - i18n.on('languageChanged', () => { - this.forceUpdate() - }) - } + super(props) + i18n.on('languageChanged', () => { + this.forceUpdate() + }) + } render() { - return ( - - {sitePaths => ( - - )} - - ) - } - } - return WithSitePaths + return ( + + {sitePaths => ( + + )} + + ) + } + } +return WithSitePaths } export type SitePaths = Object diff --git a/source/locales/en.yaml b/source/locales/en.yaml index 5a00b0b26..610a5a5cf 100644 --- a/source/locales/en.yaml +++ b/source/locales/en.yaml @@ -502,26 +502,28 @@ path: statutDirigeant: '/directors-status' nombreAssociés: '/multiple-associates' autoEntrepreneur: '/auto-entrepreneur' - sécuritéSociale: - index: '/social-security' + gérer: + index: '/manage' + embaucher: '/hiring' + selection: '/social-scheme-selection' + sécuritéSociale: '/social-security' + simulateurs: + index: /simulators assimilé-salarié: '/assimilated-salaried' indépendant: '/self-employed' auto-entrepreneur: '/auto-entrepreneur' salarié: '/salaried' - selection: '/social-scheme-selection' comparaison: '/social-scheme-comparaison' - démarcheEmbauche: - index: '/hiring-process' documentation: exemples: '/examples' - privacy: - index: '/privacy' integration: index: '/integration' iframe: '/iframe' library: '/library' + économieCollaborative: index: '/sharing-economy' + votreSituation: '/your-situation' Auto-entrepreneur en EIRL: Auto-entrepreneur with EIRL option auto-entrepreneur-EIRL: auto-entrepreneur-EIRL diff --git a/source/sites/mon-entreprise.fr/App.js b/source/sites/mon-entreprise.fr/App.js index 5541a6796..a9dfdb66e 100644 --- a/source/sites/mon-entreprise.fr/App.js +++ b/source/sites/mon-entreprise.fr/App.js @@ -1,5 +1,6 @@ import Route404 from 'Components/Route404' import withSitePaths from 'Components/utils/withSitePaths' +import { rules as baseRulesEn, rulesFr as baseRulesFr } from 'Engine/rules' import 'iframe-resizer' import { compose } from 'ramda' import createRavenMiddleware from 'raven-for-redux' @@ -10,21 +11,12 @@ import { useTranslation } from 'react-i18next' import { Route, Switch } from 'react-router-dom' import 'Ui/index.css' import Provider from '../../Provider' -import { - persistEverything, - retrievePersistedState -} from '../../storage/persistEverything' -import { - persistSimulation, - retrievePersistedSimulation -} from '../../storage/persistSimulation' +import { persistEverything, retrievePersistedState } from '../../storage/persistEverything' +import { persistSimulation, retrievePersistedSimulation } from '../../storage/persistSimulation' import Tracker, { devTracker } from '../../Tracker' -import { inIframe, getSessionStorage } from '../../utils' +import { getSessionStorage, inIframe } from '../../utils' import './App.css' import Footer from './layout/Footer/Footer' -import { PrivacyContent } from './layout/Footer/Privacy' -import Header from './layout/Header/Header' -import Navigation from './layout/Navigation/Navigation' import trackSimulatorActions from './middlewares/trackSimulatorActions' import CompanyIndex from './pages/Company' import Couleur from './pages/Dev/Couleur' @@ -32,14 +24,15 @@ import IntegrationTest from './pages/Dev/IntegrationTest' import Personas from './pages/Dev/Personas' import Sitemap from './pages/Dev/Sitemap' import Documentation from './pages/Documentation' -import HiringProcess from './pages/HiringProcess' +import Gérer from './pages/Gérer' import Iframes from './pages/Iframes' -import Landing from './pages/Landing/Landing.js' import Integration from './pages/integration/index' -import SocialSecurity from './pages/SocialSecurity' +import Landing from './pages/Landing/Landing.js' +import Simulateurs from './pages/Simulateurs' import ÉconomieCollaborative from './pages/ÉconomieCollaborative' import { constructLocalizedSitePath } from './sitePaths' -import { rules as baseRulesEn, rulesFr as baseRulesFr } from 'Engine/rules' + + if (process.env.NODE_ENV === 'production') { Raven.config( @@ -59,7 +52,7 @@ const middlewares = [ function InFranceRoute({ basename, language }) { useEffect(() => { - getSessionStorage()?.setItem('lang', language) + getSessionStorage() ?.setItem('lang', language) }, [language]) const paths = constructLocalizedSitePath(language) const rules = language === 'en' ? baseRulesEn : baseRulesFr @@ -87,7 +80,6 @@ function InFranceRoute({ basename, language }) { let RouterSwitch = () => { return ( <> - {!inIframe() && } @@ -105,29 +97,28 @@ const App = compose(withSitePaths)(({ sitePaths }) => { {/* Passing location down to prevent update blocking */}
- {!inIframe() &&
}
- + + - { const hrefLink = hrefLangLink[i18n.language][ - decodeURIComponent( - (process.env.NODE_ENV === 'production' - ? window.location.protocol + '//' + window.location.host - : '') + window.location.pathname - ).replace(/\/$/, '') + decodeURIComponent( + (process.env.NODE_ENV === 'production' + ? window.location.protocol + '//' + window.location.host + : '') + window.location.pathname + ).replace(/\/$/, '') ] || [] return (
@@ -108,8 +108,8 @@ const Footer = ({ sitePaths }) => { ) : hrefLang === 'en' ? ( <> Switch to English {emoji('🇬🇧')} ) : ( - hrefLang - )} + hrefLang + )} ))}

diff --git a/source/sites/mon-entreprise.fr/layout/Header/Header.css b/source/sites/mon-entreprise.fr/layout/Header/Header.css deleted file mode 100644 index 5049a32f6..000000000 --- a/source/sites/mon-entreprise.fr/layout/Header/Header.css +++ /dev/null @@ -1,63 +0,0 @@ -.steps-header { - margin: 0.6rem 0 1rem; - margin-left: 2.5rem; /* Let some space for the menu button */ -} -.steps-header nav { - max-width: 100%; - display: flex; - margin: auto; - justify-content: space-between; - background: white; -} - -.steps-header a { - display: flex; - padding-right: 0.8rem; - text-decoration: none; - flex-shrink: 0; - text-align: center; - align-items: center; -} - -.steps-header a:focus { - outline: none; -} - -.steps-header a:last-child { - margin-right: 0; -} - -.steps-header a img { - height: 3rem; -} -.steps-header a { - border-bottom: 2px solid; - transition: border-bottom 0.2s; -} -.steps-header a > * { - transition: transform 0.2s; - will-change: transform; -} -.steps-header a:hover > * { - /* padding-bottom: 3px; */ - transform: translateY(-3px); -} -.steps-header a.active { - font-weight: 500; -} -.steps-header a:not(.active) { - border-color: transparent; -} - -@media (max-width: 850px) { - .steps-header a > img { - display: none; - } - .steps-header a > div { - max-width: 4.5em; - } - - .steps-header a { - padding: 0 0.8rem; - } -} diff --git a/source/sites/mon-entreprise.fr/layout/Header/Header.js b/source/sites/mon-entreprise.fr/layout/Header/Header.js deleted file mode 100644 index dad91239a..000000000 --- a/source/sites/mon-entreprise.fr/layout/Header/Header.js +++ /dev/null @@ -1,64 +0,0 @@ -/* @flow */ - -import { React, T } from 'Components' -import withSitePaths from 'Components/utils/withSitePaths' -import withTracker from 'Components/utils/withTracker' -import companySvg from 'Images/company.svg' -import estimateSvg from 'Images/estimate.svg' -import hiringSvg from 'Images/hiring.svg' -import { compose } from 'ramda' -import { NavLink } from 'react-router-dom' -import './Header.css' - -import type { Tracker } from 'Components/utils/withTracker' - -type OwnProps = {} -type Props = OwnProps & { - tracker: Tracker, - sitePaths: Object -} -const StepsHeader = ({ tracker, sitePaths }: Props) => ( -
- -
-) - -export default (compose( - withTracker, - - withSitePaths -)(StepsHeader): React$ComponentType) diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/NavOpener.js b/source/sites/mon-entreprise.fr/layout/Navigation/NavOpener.js deleted file mode 100644 index 8d9314f41..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/NavOpener.js +++ /dev/null @@ -1,124 +0,0 @@ -/* @flow */ - -import classnames from 'classnames' -import withTracker from 'Components/utils/withTracker' -import { compose } from 'ramda' -import React, { Component } from 'react' -import { withRouter } from 'react-router' -import { NavLink } from 'react-router-dom' -import type { Tracker } from 'Components/utils/withTracker' -import type { Location } from 'react-router-dom' -import type { ChildrenArray, Node, Element } from 'react' - -type OwnProps = { - children: ChildrenArray>, - to?: ?string, - title: Node -} -type Props = OwnProps & { - location: Location, - tracker: Tracker -} -type State = { - opened: boolean, - previousLocation: Location, - controlled: boolean -} - -const containsActiveChildren = ( - children: ChildrenArray>, - currentLocation: Location -) => - React.Children.toArray(children).some(child => { - if (!React.isValidElement(child)) { - return false - } - if (child.props.to === currentLocation.pathname) { - return true - } - return containsActiveChildren(child.props.children, currentLocation) - }) - -class NavOpener extends Component { - constructor(props) { - super(props) - const containingActiveChildren = containsActiveChildren( - props.children, - props.location - ) - this.state = { - opened: containingActiveChildren, - previousLocation: props.location, - controlled: false - } - } - static getDerivedStateFromProps(props, state) { - const containingActiveChildren = containsActiveChildren( - props.children, - props.location - ) - return state.previousLocation !== props.location - ? { - previousLocation: props.location, - opened: state.opened || containingActiveChildren - } - : null - } - handleToggle = event => { - this.props.tracker.push([ - 'trackEvent', - 'Sidebar', - 'click', - event.target.textContent - ]) - this.setState(({ opened }) => ({ opened: !opened, controlled: true })) - } - - render() { - const parentClassNames = { - opened: this.state.controlled - ? this.state.opened - : containsActiveChildren(this.props.children, this.props.location), - active: this.props.location.pathname === this.props.to - } - return ( - <> - - - {this.props.to ? ( - - this.props.tracker.push([ - 'trackEvent', - 'Sidebar', - 'click', - event.target.textContent - ]) - } - exact - className="ui__ text-button"> - {this.props.title} - - ) : ( - - )} - - {this.props.children} - - ) - } -} - -export default (compose( - withTracker, - withRouter -)(NavOpener): React$ComponentType) diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.css b/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.css deleted file mode 100644 index 387d3285b..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.css +++ /dev/null @@ -1,118 +0,0 @@ -.navigation .progress { - height: 2px; - position: absolute; - bottom: 5px; - background: rgba(41, 117, 209, 0.2); - border-radius: 0.1rem; - width: 100%; -} - -.navigation .progress .bar { - transition: width 0.3s; - background-color: rgb(41, 117, 209); - height: 100%; -} -.navigation__container { - display: flex; - flex-direction: column; - align-items: flex-end; - flex-shrink: 0; - min-height: 100%; - background-color: rgb(227, 237, 249); - background-color: var(--lighterColour); -} - -.navigation { - padding: 1rem 2rem 3rem 0.6rem; - flex: 1; - min-width: 20rem; -} - -.navigation ul { - list-style: none; - margin: 0; - padding-left: 1.2rem; -} -.navigation li { - padding: 0; -} -.navigation > ul > li > ul { - visibility: visible !important; - height: auto !important; -} -.navigation__item:not(.opened) + ul { - visibility: hidden; - height: 0; -} -.navigation__item:hover { - opacity: 0.8; -} -.navigation__item:hover * { - opacity: 1 !important; -} - -.navigation__caret { - width: 30px; - text-align: center !important; - transition: transform 0.2s; - font-size: 120% !important; -} -.navigation__item.opened .navigation__caret { - transform: rotate(90deg) translateX(1px) translateY(-1px); -} -.navigation__item { - left: -30px; - white-space: nowrap; - position: relative; -} -.navigation__item.active { - color: rgb(41, 117, 209); - color: var(--colour); -} - -.navigation li > :first-child { - position: relative; - display: inline-block; - text-decoration: none; - width: 100%; - padding: 0.2rem 0; -} -.navigation > ul > li ul > li > :first-child:not(.active):not(:hover) { - opacity: 0.6; -} -.navigation a:not(.active) { - color: inherit; -} -.navigation a:hover { - text-decoration: underline; -} -.navigation > ul > li > :first-child, -.navigation > ul > li > :first-child * { - text-decoration: none !important; - line-height: 2rem; - font-family: 'Montserrat', sans-serif; - font-weight: 600; - color: var(--darkColour); - font-size: 1.3rem; -} -.navigation > ul > li > :first-child .navigation__caret { - visibility: hidden; -} -.navigation > ul > li > .navigation__item.opened { - color: var(--colour); - color: rgb(41, 117, 209); -} - -.navigation__container .mobile__menu { - display: none; - height: 48px; - width: 48px; -} -@media (max-width: 500px) { - .navigation__container header { - background: transparent; - } - .navigation__container { - margin-right: 1rem; - } -} diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.js b/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.js deleted file mode 100644 index 15523513b..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/Navigation.js +++ /dev/null @@ -1,286 +0,0 @@ -/* @flow */ -import { React, T } from 'Components' -import withSitePaths from 'Components/utils/withSitePaths' -import companySvg from 'Images/company.svg' -import estimateSvg from 'Images/estimate.svg' -import hiringSvg from 'Images/hiring.svg' -import { compose } from 'ramda' -import { useTranslation } from 'react-i18next' -import { connect } from 'react-redux' -import { NavLink } from 'react-router-dom' -import './Navigation.css' -import NavOpener from './NavOpener' -import SideBar from './SideBar' - -type OwnProps = {} -type Props = OwnProps & { - companyProgress: number, - estimationProgress: number, - sitePaths: Object, - hiringProgress: number, - companyStatusChoice: string -} -const Navigation = ({ sitePaths, companyStatusChoice }: Props) => { - const { t } = useTranslation() - return ( - -
- -
- - ) -} - -export default (compose( - withSitePaths, - connect( - state => ({ - companyStatusChoice: state.inFranceApp.companyStatusChoice - }), - {} - ) -)(Navigation): React$ComponentType) diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css b/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css deleted file mode 100644 index 35969ee3d..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css +++ /dev/null @@ -1,59 +0,0 @@ -.sidebar__container { - height: 100%; - position: absolute; - left: 0; - top: 0; - transform: translate(-100%); - /* let the browser know we plan to animate - each view in and out */ - will-change: transform; - transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); - z-index: 1; -} -.sidebar__container.opened { - transform: translate(0%); -} - -.sidebar__container + * { - will-change: transform; - transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); -} -.sidebar__container.opened + * { - transform: translateX(100%); - overflow: hidden; -} -.menu__button { - position: absolute; - top: 0; - height: 2.5rem; - padding: 0.6rem; - width: 2.5rem; - right: calc(-2.5rem); - background: radial-gradient( - circle, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 0) 70% - ); -} -.menu__button:hover { - opacity: 0.8; -} -.menu__button img { - height: 100%; -} -.sidebar { - overflow: auto; - height: 100%; -} - -@media (min-width: 500px) { - .sidebar__container.opened + * { - transform: none; - } -} -@media (max-width: 1500px) { - .sidebar__container.opened + * { - opacity: 0.5; - pointer-events: none; - } -} diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js b/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js deleted file mode 100644 index 008456a7a..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js +++ /dev/null @@ -1,91 +0,0 @@ -/* @flow */ - -import classnames from 'classnames' -import withTracker from 'Components/utils/withTracker' -import { compose } from 'ramda' -import React, { useCallback, useEffect, useRef, useState } from 'react' -import { useLocation } from 'react-router' -import backSvg from './back.svg' -import mobileMenuSvg from './mobile-menu.svg' -import './SideBar.css' -import type Tracker from '../../../../Tracker' - -type OwnProps = {| - children: React$Node -|} - -type Props = OwnProps & { - tracker: Tracker -} - -const bigScreen = window.matchMedia('(min-width: 1500px)') -const isParent = (parentNode, children) => { - if (children === parentNode) { - return true - } - if (!children) { - return false - } - return isParent(parentNode, children.parentNode) -} - -function SideBar({ tracker, children }: Props) { - const location = useLocation() - const [opened, setOpened] = useState(false) - const [sticky, setSticky] = useState(bigScreen.matches) - const [previousLocation, setPreviousLocation] = useState(location) - const ref = useRef() - - useEffect(() => { - const handleClick = event => { - if (!sticky && !isParent(ref.current, event.target) && opened) { - handleClose() - } - } - - window.addEventListener('click', handleClick) - bigScreen.addListener(handleMediaQueryChange) - - return () => { - window.removeEventListener('click', handleClick) - bigScreen.removeListener(handleMediaQueryChange) - } - }, [handleClose, opened, sticky]) - - useEffect(() => { - if (!sticky && previousLocation !== location) { - setOpened(false) - } - setPreviousLocation(location) - }, [sticky, previousLocation, location]) - - const handleMediaQueryChange = () => { - setSticky(bigScreen.matches) - } - const handleClose = useCallback(() => { - tracker.push(['trackEvent', 'Sidebar', 'close']) - setOpened(false) - }, [tracker]) - const handleOpen = () => { - tracker.push(['trackEvent', 'Sidebar', 'open']) - setOpened(true) - } - - return ( -
-
{children}
- -
- ) -} - -export default (compose(withTracker)(SideBar): React$ComponentType) diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/back.svg b/source/sites/mon-entreprise.fr/layout/Navigation/back.svg deleted file mode 100644 index 721a6163f..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/back.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/mobile-menu.svg b/source/sites/mon-entreprise.fr/layout/Navigation/mobile-menu.svg deleted file mode 100644 index c2a1a954d..000000000 --- a/source/sites/mon-entreprise.fr/layout/Navigation/mobile-menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js b/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js index 343c56860..e3bef9988 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js +++ b/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js @@ -3,11 +3,11 @@ import { React, T } from 'Components' import { ScrollToTop } from 'Components/utils/Scroll' import withSitePaths from 'Components/utils/withSitePaths' import { compose } from 'ramda' +import { useTranslation } from 'react-i18next' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import Animate from 'Ui/animate' import siret from './siret.jpg' -import { useTranslation } from 'react-i18next' type OwnProps = {} type Props = { @@ -70,7 +70,7 @@ const AfterRegistration = ({ companyStatusChoice, sitePaths }: Props) => { @@ -119,11 +119,6 @@ const AfterRegistration = ({ companyStatusChoice, sitePaths }: Props) => { className="ui__ simple skip button left"> ← Démarche de création - - Estimez vos cotisations → -

) diff --git a/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js b/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js index 6fdc780b7..cc9eeb76f 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js +++ b/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js @@ -31,8 +31,8 @@ const StatusButton = withSitePaths( {status.includes('auto-entrepreneur') ? ( Devenir ) : ( - Créer une - )}{' '} + Créer une + )}{' '} {t(status)}
@@ -126,11 +126,6 @@ const SetMainStatus = ({ className="ui__ simple small skip button left"> ← Précédent - - Choisir plus tard → -
) diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.js b/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.js new file mode 100644 index 000000000..be9e54dd9 --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Gérer/Embaucher.js @@ -0,0 +1,213 @@ +/* @flow */ +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 +}) => ( + + + + {t(['embauche.tâches.page.titre', `Les formalités pour embaucher`])} + + + +

+ Les formalités pour embaucher +

+

+ + Toutes les étapes nécessaires à l'embauche de votre premier employé. + +

+ + + Signer un contrat de travail avec votre employé + + } + explanations={ +

+ + {' '} + Plus d'informations + +

+ } + /> + + Déclarer l'embauche à l'administration sociale + + } + explanations={ +

+ + Ceci peut être fait par le biais du formulaire appelé DPAE, doit + être complété dans les 8 jours avant toute embauche, et peut{' '} + + être effectué en ligne + + . + +

+ } + /> + + Choisir un logiciel de paie + + } + explanations={ +

+ + Les fiches de paie et les déclarations peuvent être traitées en + ligne gratuitement par le{' '} + + Tese + + . Vous pouvez aussi utiliser un{' '} + + logiciel de paie privé. + + +

+ } + /> + + Tenir un registre des employés à jour + + } + explanations={ +

+ + Plus d'informations + +

+ } + /> + + Prendre contact avec l'institution de prévoyance complémentaire + obligatoire qui vous est assignée + + } + explanations={ +

+ + + Trouver mon institution de prévoyance + + + {/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */} +

+ } + /> + + Choisir une complémentaire santé + + } + explanations={ +

+ + 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. + +

+ } + /> + + S'inscrire à un bureau de médecine du travail + + } + explanations={ +

+ + N'oubliez pas de planifier un rendez-vous initial pour chaque + nouvelle embauche.{' '} + + Plus d'infos. + + +

+ } + /> + + +

Tous les mois

+
    +
  • + Utiliser un logiciel de paie pour calculer les cotisations sociales et + les transmettre via la déclaration sociale nominative (DSN) +
    • +
  • Remettre la fiche de paie à votre employé
    • +
+ + Obtenir un exemple de fiche de paie + + + + ) + +export default compose( + withTranslation(), + withSitePaths, + connect( + state => ({ hiringChecklist: state.inFranceApp.hiringChecklist }), + { + onChecklistInitialization: initializeHiringChecklist, + onItemCheck: checkHiringItem + } + ) +)(Embaucher) diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/Home.js b/source/sites/mon-entreprise.fr/pages/Gérer/Home.js new file mode 100644 index 000000000..66f6c5aa2 --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Gérer/Home.js @@ -0,0 +1,214 @@ + +import { resetEntreprise, specifyIfAutoEntrepreneur } 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)) { + return 'indépendant' + } + + if (['SASU', 'SAS'].includes(company.statutJuridique)) { + return 'assimilé-salarié' + } + + 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) + + return ( + <> + + + {t('gérer.index.page.titre', 'Gérer mon activité')} + + + + +

+ + Gérer mon activité + +

+
+
{!company &&

+ + Vous souhaitez vous verser un revenu ou embaucher ?
+ Vous aurez à payer des cotisations et des impôts.
+ Pour anticiper leur montant, nous avons conçu des simulateurs adaptés à votre situation. + +

} + +
+ + +
+ + <> +

Simulateurs

+ {!!régime && +

+ Calculer mon revenu net +

+ + Estimez précisément le montant de vos cotisations grâce au simulateur {régime} de l’URSSAF + + + } + {régime !== 'auto-entrepreneur' && +

Estimer le montant d’une embauche

+ Découvrez le montant total dépensé par l’entreprise pour rémunérer votre prochain employé + } +

Liens utiles

+ +

Découvrir les démarches d’embauche

+ La liste des choses à faire pour être sûr de ne rien oublier lors de l’embauche d’un nouveau salarié + + + } + + + ) +} + +const CompanySection = ({ company }) => { + const [searchModal, showSearchModal] = useState(false) + const [autoEntrepreneurModal, showAutoEntrepreneurModal] = 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 + ) { + showAutoEntrepreneurModal(true) + } + } + }, [company, searchModal]) + + const dispatch = useDispatch(company) + const handleAnswerAutoEntrepreneur = isAutoEntrepreneur => { + dispatch(specifyIfAutoEntrepreneur(isAutoEntrepreneur)) + showAutoEntrepreneurModal(false) + } + + return ( + <> + {autoEntrepreneurModal && ( + <> + + +

Êtes-vous auto-entrepreneur ?

+
+ + +
+ + + )} + {searchModal && ( + <> + + showSearchModal(false)}> + + + + )} + {company ? ( + <> + +

{company.statutJuridique !== 'NON_IMPLÉMENTÉ' && + <> + + {company.isAutoEntrepreneur ? + 'Auto-entrepreneur' + : + company.statutJuridique} + + + } +

+ + + ) : ( + +

+ + +

+ + )} + + ) +} + + diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeSelection.js b/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.js similarity index 89% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeSelection.js rename to source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.js index 895490654..26924e3b9 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeSelection.js +++ b/source/sites/mon-entreprise.fr/pages/Gérer/SchemeSelection.js @@ -21,7 +21,7 @@ const SchemeChoice = compose(

{emoji('☂')} @@ -36,7 +36,7 @@ const SchemeChoice = compose( {emoji('👩‍🔧')} @@ -51,7 +51,7 @@ const SchemeChoice = compose( {emoji('🚶‍♂️')} Auto-entrepreneur @@ -65,7 +65,7 @@ const SchemeChoice = compose(

+ to={sitePaths.simulateurs.comparaison}> Comparer les régimes

diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/SécuritéSociale.js b/source/sites/mon-entreprise.fr/pages/Gérer/SécuritéSociale.js new file mode 100644 index 000000000..191624d0b --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Gérer/SécuritéSociale.js @@ -0,0 +1,42 @@ + +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 function SocialSecurity() { + const { t } = useTranslation() + return ( + <> + + + {t('sécu.page.titre', "Sécurité sociale")} + + + + + + +

Protection sociale

+

+ En France, tous les travailleurs bénéficient d'une protection + sociale de qualité. Ce système obligatoire repose sur la solidarité + et vise à assurer le{' '} + bien-être général de la population. +

+

+ En contrepartie du paiement de{' '} + contributions sociales, le cotisant est couvert sur + la maladie, les accidents du travail, chômage ou encore la retraite. +

+ + +
+
+ + + ) +} diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/Video.js b/source/sites/mon-entreprise.fr/pages/Gérer/Video.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/Video.js rename to source/sites/mon-entreprise.fr/pages/Gérer/Video.js diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/businessPlan.svg b/source/sites/mon-entreprise.fr/pages/Gérer/businessPlan.svg new file mode 100644 index 000000000..fd9a9fc98 --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Gérer/businessPlan.svg @@ -0,0 +1 @@ +business plan \ No newline at end of file diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/index.js b/source/sites/mon-entreprise.fr/pages/Gérer/index.js new file mode 100644 index 000000000..344d91fe2 --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Gérer/index.js @@ -0,0 +1,32 @@ +import { ScrollToTop } from 'Components/utils/Scroll' +import { SitePathsContext } from 'Components/utils/withSitePaths' +import React, { useContext } from 'react' +import { Route, Switch } from 'react-router' +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); + return ( + <> + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/source/sites/mon-entreprise.fr/pages/HiringProcess.js b/source/sites/mon-entreprise.fr/pages/HiringProcess.js deleted file mode 100644 index 949b32b1e..000000000 --- a/source/sites/mon-entreprise.fr/pages/HiringProcess.js +++ /dev/null @@ -1,216 +0,0 @@ -/* @flow */ -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 HiringProcess = ({ - onChecklistInitialization, - sitePaths, - onItemCheck, - hiringChecklist, - t -}) => ( - - - - {t(['embauche.tâches.page.titre', `Les formalités pour embaucher`])} - - - -

- Les formalités pour embaucher -

-

- - Toutes les étapes nécessaires à l'embauche de votre premier employé. - -

- - - Signer un contrat de travail avec votre employé - - } - explanations={ -

- - {' '} - Plus d'informations - -

- } - /> - - Déclarer l'embauche à l'administration sociale - - } - explanations={ -

- - Ceci peut être fait par le biais du formulaire appelé DPAE, doit - être complété dans les 8 jours avant toute embauche, et peut{' '} - - être effectué en ligne - - . - -

- } - /> - - Choisir un logiciel de paie - - } - explanations={ -

- - Les fiches de paie et les déclarations peuvent être traitées en - ligne gratuitement par le{' '} - - Tese - - . Vous pouvez aussi utiliser un{' '} - - logiciel de paie privé. - - -

- } - /> - - Tenir un registre des employés à jour - - } - explanations={ -

- - Plus d'informations - -

- } - /> - - Prendre contact avec l'institution de prévoyance complémentaire - obligatoire qui vous est assignée - - } - explanations={ -

- - - Trouver mon institution de prévoyance - - - {/* // The AGIRC-ARRCO complementary pension is mandatory. Those are only federations,{' '} */} -

- } - /> - - Choisir une complémentaire santé - - } - explanations={ -

- - 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. - -

- } - /> - - S'inscrire à un bureau de médecine du travail - - } - explanations={ -

- - N'oubliez pas de planifier un rendez-vous initial pour chaque - nouvelle embauche.{' '} - - Plus d'infos. - - -

- } - /> - - -

Tous les mois

-
    -
  • - Utiliser un logiciel de paie pour calculer les cotisations sociales et - les transmettre via la déclaration sociale nominative (DSN) -
    • -
  • Remettre la fiche de paie à votre employé
    • -
- - Obtenir un exemple de fiche de paie - - - -) - -export default compose( - withTranslation(), - withSitePaths, - connect( - state => ({ hiringChecklist: state.inFranceApp.hiringChecklist }), - { - onChecklistInitialization: initializeHiringChecklist, - onItemCheck: checkHiringItem - } - ) -)(HiringProcess) diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.js b/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.js index 25c0a096b..c24342687 100644 --- a/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.js +++ b/source/sites/mon-entreprise.fr/pages/Iframes/IframeFooter.js @@ -5,9 +5,9 @@ import urssafSvg from 'Images/urssaf.svg' import React, { useEffect, useState } from 'react' import emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' -import { Link } from 'react-router-dom' import screenfull from 'screenfull' import { isIE } from '../../../../utils' +import Privacy from '../../layout/Footer/Privacy' export default function IframeFooter() { const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen) @@ -62,9 +62,7 @@ export default function IframeFooter() { {emoji('🖨')} Imprimer - - Vie privée - +
) diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.js b/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.js index bd987fd60..ed1323c53 100644 --- a/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.js +++ b/source/sites/mon-entreprise.fr/pages/Iframes/SimulateurEmbauche.js @@ -4,7 +4,7 @@ import { compose } from 'ramda' import React from 'react' import { Helmet } from 'react-helmet' import { connect } from 'react-redux' -import { SalarySimulation } from '../SocialSecurity/Salarié' +import { SalarySimulation } from '../Simulateurs/Salarié' export default compose( withSitePaths, @@ -15,7 +15,7 @@ export default compose( return ( <> - + {showMonEntrepriseLink && ( diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/index.js b/source/sites/mon-entreprise.fr/pages/Iframes/index.js index 95789c93b..334cb2036 100644 --- a/source/sites/mon-entreprise.fr/pages/Iframes/index.js +++ b/source/sites/mon-entreprise.fr/pages/Iframes/index.js @@ -1,9 +1,9 @@ import { IsEmbeddedContext } from 'Components/utils/embeddedContext' import React from 'react' import { Route } from 'react-router' -import SimulateurAssimiléSalarié from '../SocialSecurity/AssimiléSalarié' -import SimulateurAutoEntrepreneur from '../SocialSecurity/AutoEntrepreneur' -import SimulateurIndépendant from '../SocialSecurity/Indépendant' +import SimulateurAssimiléSalarié from '../Simulateurs/AssimiléSalarié' +import SimulateurAutoEntrepreneur from '../Simulateurs/AutoEntrepreneur' +import SimulateurIndépendant from '../Simulateurs/Indépendant' import IframeFooter from './IframeFooter' import SimulateurEmbauche from './SimulateurEmbauche' diff --git a/source/sites/mon-entreprise.fr/pages/Landing/Landing.js b/source/sites/mon-entreprise.fr/pages/Landing/Landing.js index 85ea924e7..2eb9f7d6c 100644 --- a/source/sites/mon-entreprise.fr/pages/Landing/Landing.js +++ b/source/sites/mon-entreprise.fr/pages/Landing/Landing.js @@ -85,7 +85,7 @@ export default withSitePaths(({ sitePaths }: Props) => { + to={sitePaths.gérer.index}>
{emoji('💶')}

Gérer mon activité

diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/AssimiléSalarié.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/AssimiléSalarié.js rename to source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.js diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/AutoEntrepreneur.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/AutoEntrepreneur.js rename to source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.js diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/Indépendant.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/Indépendant.js rename to source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.js diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/Salarié.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/Salarié.js rename to source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.js diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/SchemeComparaison.js similarity index 100% rename from source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js rename to source/sites/mon-entreprise.fr/pages/Simulateurs/SchemeComparaison.js diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js new file mode 100644 index 000000000..c1ebd00bb --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js @@ -0,0 +1,38 @@ +import { ScrollToTop } from 'Components/utils/Scroll' +import { SitePathsContext } from 'Components/utils/withSitePaths' +import React, { useContext } from 'react' +import { Route, Switch } from 'react-router' +import AssimiléSalarié from './AssimiléSalarié' +import AutoEntrepreneur from './AutoEntrepreneur' +import Indépendant from './Indépendant' +import Salarié from './Salarié' +import SchemeComparaison from './SchemeComparaison' + +export default function Simulateurs() { + const sitePaths = useContext(SitePathsContext); + return ( + <> + + + {/* */} + + + + + + + + ) +} \ No newline at end of file diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/Home.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/Home.js deleted file mode 100644 index fa7592d15..000000000 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/Home.js +++ /dev/null @@ -1,240 +0,0 @@ -/* @flow */ - -import { - resetEntreprise, - specifyIfAutoEntrepreneur -} 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 withSitePaths from 'Components/utils/withSitePaths' -import { useEffect, useRef, useState } from 'react' -import emoji from 'react-easy-emoji' -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 Video from './Video' - -import type { Match, Location } from 'react-router' - -const infereRégimeFromCompanyDetails = ( - company -): 'indépendant' | 'assimilé-salarié' | 'auto-entrepreneur' | null => { - if (!company) { - return null - } - if (company.isAutoEntrepreneur) { - return 'auto-entrepreneur' - } - if (['EI', 'EURL'].includes(company.statutJuridique)) { - return 'indépendant' - } - - if (['SASU', 'SAS'].includes(company.statutJuridique)) { - return 'assimilé-salarié' - } - - return null -} - -type Props = { - match: Match, - location: Location, - showFindYourCompanyLink: boolean, - legalStatus: string, - régime: 'indépendant' | 'assimilé-salarié' | 'auto-entrepreneur' | null, - sitePaths: Object -} - -function SocialSecurity({ sitePaths }: Props) { - const { t } = useTranslation() - const company = useSelector(state => state.inFranceApp.existingCompany) - const régime = infereRégimeFromCompanyDetails(company) - - return ( - <> - - - {t('sécu.page.titre', "Sécurité sociale et coût d'embauche")} - - - - - - - -

Protection sociale

-

- En France, tous les travailleurs bénéficient d'une protection - sociale de qualité. Ce système obligatoire repose sur la solidarité - et vise à assurer le{' '} - bien-être général de la population. -

-

- En contrepartie du paiement de{' '} - contributions sociales, le cotisant est couvert sur - la maladie, les accidents du travail, chômage ou encore la retraite. -

- - - -
-
- {régime === 'auto-entrepreneur' ? ( - - {emoji('🚶')}{' '} - - Estimer ma rémunération en tant qu'auto-entrepreneur - - - ) : ( - <> -

- Que souhaitez-vous estimer ? -

- - {emoji('💰')}{' '} - {company?.statutJuridique && - company.statutJuridique !== 'NON_IMPLÉMENTÉ' - ? t( - [ - 'sécu.choix.dirigeant1', - `Mon revenu en tant que dirigeant de {{legalStatus}}` - ], - { legalStatus: t(company.statutJuridique) } - ) - : t( - 'sécu.choix.dirigeant2', - `Mon revenu en tant que chef d'entreprise` - )} - - - {emoji('👥')}{' '} - Le salaire d'un employé - - - )} -
-
-
-
- - - ) -} - -const CompanySection = ({ company }) => { - const [searchModal, showSearchModal] = useState(false) - const [autoEntrepreneurModal, showAutoEntrepreneurModal] = 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 - ) { - showAutoEntrepreneurModal(true) - } - } - }, [company, searchModal]) - - const dispatch = useDispatch(company) - const handleAnswerAutoEntrepreneur = isAutoEntrepreneur => { - dispatch(specifyIfAutoEntrepreneur(isAutoEntrepreneur)) - showAutoEntrepreneurModal(false) - } - - return ( - <> - {autoEntrepreneurModal && ( - <> - - -

Êtes-vous auto-entrepreneur ?

-
- - -
- - - )} - {searchModal && ( - <> - - showSearchModal(false)}> - - - - )} - {company ? ( - <> -

- Votre entreprise -

- -
- - - ) : ( - <> -

- Simulations personnalisées -

-

- - Si vous possédez déjà une entreprise, nous pouvons{' '} - automatiquement personnaliser vos simulations à - votre situation. - -

-
- -
- - )} - - ) -} - -export default withSitePaths(SocialSecurity) diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/index.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/index.js deleted file mode 100644 index 10adfbf76..000000000 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import { ScrollToTop } from 'Components/utils/Scroll' -import withSitePaths from 'Components/utils/withSitePaths' -import React from 'react' -import { Route, Switch } from 'react-router' -import AssimiléSalarié from './AssimiléSalarié' -import AutoEntrepreneur from './AutoEntrepreneur' -import Home from './Home' -import Indépendant from './Indépendant' -import Salarié from './Salarié' -import SchemeComparaison from './SchemeComparaison' -import SchemeSelection from './SchemeSelection' - -const SocialSecurityRoutes = ({ sitePaths }) => ( - <> - - - - - - - - - - - -) - -export default withSitePaths(SocialSecurityRoutes) diff --git a/source/sites/mon-entreprise.fr/sitePaths.js b/source/sites/mon-entreprise.fr/sitePaths.js index 9508f491e..ffdc422ee 100644 --- a/source/sites/mon-entreprise.fr/sitePaths.js +++ b/source/sites/mon-entreprise.fr/sitePaths.js @@ -31,28 +31,28 @@ export const constructLocalizedSitePath = (language: string) => { créer: (companyStatus: LegalStatus | ':status') => companyStatus === ':status' ? [ - t('path.entreprise.créer', '/créer-une-{{companyStatus}}', { - companyStatus: ':status' - }), - t( - 'path.entreprise.devenirAutoEntrepreneur', - '/devenir-{{autoEntrepreneur}}', - { - autoEntrepreneur: ':status' - } - ) - ] + t('path.entreprise.créer', '/créer-une-{{companyStatus}}', { + companyStatus: ':status' + }), + t( + 'path.entreprise.devenirAutoEntrepreneur', + '/devenir-{{autoEntrepreneur}}', + { + autoEntrepreneur: ':status' + } + ) + ] : companyStatus.includes('auto-entrepreneur') - ? t( + ? t( 'path.entreprise.devenirAutoEntrepreneur', '/devenir-{{autoEntrepreneur}}', { autoEntrepreneur: companyStatus } - ) - : t('path.entreprise.créer', '/créer-une-{{companyStatus}}', { + ) + : t('path.entreprise.créer', '/créer-une-{{companyStatus}}', { companyStatus - }), + }), après: t('path.entreprise.après', '/après-la-création'), statutJuridique: { @@ -80,26 +80,28 @@ export const constructLocalizedSitePath = (language: string) => { ) } }, - sécuritéSociale: { - index: t('path.sécuritéSociale.index', '/sécurité-sociale'), + gérer: { + index: t('path.gérer.index', '/gérer'), + embauche: t('path.gérer.embaucher', '/embaucher'), + selection: t('path.gérer.selection', '/sélection-du-régime'), + sécuritéSociale: t('path.gérer.selection', '/sécurité-sociale'), + }, + simulateurs: { + index: t('path.simulateurs.index', '/simulateurs'), 'assimilé-salarié': t( - 'path.sécuritéSociale.assimilé-salarié', + 'path.simulateurs.assimilé-salarié', '/assimilé-salarié' ), - indépendant: t('path.sécuritéSociale.indépendant', '/indépendant'), + indépendant: t('path.simulateurs.indépendant', '/indépendant'), 'auto-entrepreneur': t( - 'path.sécuritéSociale.auto-entrepreneur', + 'path.simulateurs.auto-entrepreneur', '/auto-entrepreneur' ), comparaison: t( - 'path.sécuritéSociale.comparaison', + 'path.simulateurs.comparaison', '/comparaison-régimes-sociaux' ), - selection: t('path.sécuritéSociale.selection', '/sélection-du-régime'), - salarié: t('path.sécuritéSociale.salarié', '/salarié') - }, - démarcheEmbauche: { - index: t('path.démarcheEmbauche.index', '/démarches-embauche') + salarié: t('path.simulateurs.salarié', '/salarié') }, économieCollaborative: { index: t('path.économieCollaborative.index', '/économie-collaborative'), @@ -112,9 +114,6 @@ export const constructLocalizedSitePath = (language: string) => { exemples: t('path.documentation.exemples', '/exemples'), index: t('path.documentation.index', '/documentation') }, - privacy: { - index: t('path.privacy.index', '/vie-privée') - }, integration: { index: t('path.integration.index', '/intégration'), iframe: t('path.integration.iframe', '/iframe'),