From 90add26103f5fc0de047a805907f0922cd8864f8 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 30 Aug 2018 18:09:15 +0200 Subject: [PATCH] =?UTF-8?q?:art:=20Am=C3=A9liore=20le=20style=20de=20infra?= =?UTF-8?q?nce?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/Simu.css | 2 +- source/components/Simu.js | 5 +- source/components/ui/Checklist/index.css | 6 +- source/components/ui/Checklist/index.js | 15 +- source/components/ui/Typography.css | 21 ++- source/components/ui/index.css | 8 - .../pages/Company/CreationChecklist.js | 161 +++++++----------- .../pages/Company/Home.js | 8 +- .../pages/Company/LegalStatusChoice.js | 5 +- .../pages/Company/index.js | 2 + 10 files changed, 102 insertions(+), 131 deletions(-) diff --git a/source/components/Simu.css b/source/components/Simu.css index b60b20ea3..91ad5963d 100644 --- a/source/components/Simu.css +++ b/source/components/Simu.css @@ -1,5 +1,5 @@ #simu { - margin: 0 auto; + margin: 1rem auto; max-width: 40em; } .change-answer-link { diff --git a/source/components/Simu.js b/source/components/Simu.js index 9d1827707..50c24e047 100644 --- a/source/components/Simu.js +++ b/source/components/Simu.js @@ -1,5 +1,4 @@ import { startConversation } from 'Actions/actions' -import { ScrollToElement } from 'Components/utils/Scroll' import withColours from 'Components/utils/withColours' import withLanguage from 'Components/utils/withLanguage' import React, { Component } from 'react' @@ -71,7 +70,6 @@ export default class Simu extends Component { )} - {firstValidInputEntered && } diff --git a/source/components/ui/Checklist/index.css b/source/components/ui/Checklist/index.css index fb444b192..177ca03b0 100644 --- a/source/components/ui/Checklist/index.css +++ b/source/components/ui/Checklist/index.css @@ -62,7 +62,7 @@ } ul.ui__.checklist { - padding-left: 0; + padding-left: 0.3rem; } .ui__.checklist-button { @@ -95,7 +95,7 @@ ul.ui__.checklist { } .ui__.checklist-explanation { - padding-left: 1.4rem; + padding-left: 1rem; border-left: 2px dashed var(--colour); - margin: -0.6rem 0 -0.6rem 8px; + margin: 0 0 -0.6rem 8px; } diff --git a/source/components/ui/Checklist/index.js b/source/components/ui/Checklist/index.js index e1dcfe037..98493d732 100644 --- a/source/components/ui/Checklist/index.js +++ b/source/components/ui/Checklist/index.js @@ -61,13 +61,14 @@ export class CheckItem extends Component { {this.props.title} - {this.state.displayExplanations && ( - -
- {this.props.explanations} -
- - )} + {this.state.displayExplanations && + this.props.explanations && ( + +
+ {this.props.explanations} +
+ + )} ) } diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index 9580f5512..e72df18f9 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -25,16 +25,16 @@ body { h1 { margin-top: 2rem; - margin-bottom: 1.5rem; + margin-bottom: 1rem; font-size: 2.8rem; } h2 { - margin-top: 1.4rem; - margin-bottom: 1.2rem; - font-size: 2.1rem; + margin-top: 2rem; + margin-bottom: 1rem; + font-size: 1.7rem; } h3 { - font-size: 1.7rem; + font-size: 1.5rem; } h4 { font-size: 1.3rem; @@ -66,7 +66,7 @@ button { p, ul { line-height: 1.7rem; - margin: 1rem 0; + margin: 0 0 1em; } p.ui__.lead { font-size: 1.7rem; @@ -78,8 +78,15 @@ ul { padding-left: 1.4rem; } li { - margin: 0.5rem 0; + padding: 0.2em 0; } +li:last-of-type { + padding-bottom: 0; +} +li:first-of-type { + padding-top: 0; +} + a { border: none; display: inline-block; diff --git a/source/components/ui/index.css b/source/components/ui/index.css index 216e231fb..0bb0e5c72 100644 --- a/source/components/ui/index.css +++ b/source/components/ui/index.css @@ -24,14 +24,6 @@ button { justify-content: flex-end; } -.ui__.route-trans { - display: flex; -} -.ui__.route-trans > * { - min-width: 100%; - margin-right: 2em; -} - .ui__.container { max-width: 45em; margin-right: auto; diff --git a/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js index 83e375d3c..1c2537297 100644 --- a/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js +++ b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js @@ -1,14 +1,16 @@ /* @flow */ +import { + checkCompanyCreationItem, + initializeCompanyCreationChecklist +} from 'Actions/companyCreationChecklistActions' +import { goToCompanyStatusChoice } from 'Actions/companyStatusActions' import Scroll from 'Components/utils/Scroll' import React from 'react' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import * as Animate from 'Ui/animate' -import { Checklist, CheckItem } from 'Ui/Checklist' +import { CheckItem, Checklist } from 'Ui/Checklist' import type { Match } from 'react-router' -import { checkCompanyCreationItem, initializeCompanyCreationChecklist } from 'Actions/companyCreationChecklistActions' -import { goToCompanyStatusChoice } from 'Actions/companyStatusActions' -import siret from './siret.jpg' type Props = { statusChooserCompleted: boolean, @@ -98,12 +100,12 @@ const CreateCompany = ({ match, statusChooserCompleted, onChecklistInitializatio written in French, describing the status choice, naming the associate(s) and the contributed capital. It is recommanded to ask the help of a lawyer for the redaction.{' '} - {SARL && ( + {status === 'SARL' && ( Example of status for a SARL )} - {EURL && ( + {status === 'EURL' && ( Example of status for an EURL @@ -174,6 +176,7 @@ const CreateCompany = ({ match, statusChooserCompleted, onChecklistInitializatio } /> )} + -

+

- Register your company + Start registration process -

+
} /> -

After registration

-

- {' '} - Once your business has been officially registered, you will receive: -

+

+ Recommended before starting your activity +

+ - - Your Siret number, which identifies your company - - } - explanations={ - <> -

- The Siren number identifies your company while the Siret number - identifies each place of business operated by the same company. - Siret and siren number -

- - } - /> - - Your APE code, which defines your business sector - - } - explanations={ - <> -

- The APE code for the business sector to which - your company belong. The APE is used to classify your company’s - main operations in relation to the French business nomenclature - system (« NAF » code). It also determines the applicable - collective agreement as well as the industrial accident rate in - the field to which you or your company belong. -

- - } - /> - {!microenterprise && ( + {status !== 'microenterprise' && ( - Your Kbis, which certifies that your company is - properly registrated - - } + name="chooseCertifiedAccountant" + title="Choose a certified accountant" explanations={ - <> -

- When creating a business or declaring an activity, the - entrepreneur whose professional activity consists of - commercial acts must register with the RCS. -

-

- The proof of registration in the RCS is made by the - presentation of a document delivered by the clerk's office of - the court of commerce: the Kbis. -

-

- It is the only official document attesting to the legal - existence of a commercial enterprise. -

-

- In most cases, to be opposable and authentic for - administrative procedures, the extract must be less than 3 - months old. -

-

- This document is generally requested when applying for a - public tender, opening a professional bank account, purchasing - professional equipment from distributors, etc. -

- +

+ Managing a company brings a number of{' '} + + accounting obligations + + . It is advisable to call in a competent person that can handle + accounting for you. +

} /> )} + +

+ An SME or self-employed person must protect themselves against + the main risks to which they are exposed and take out guarantee + contracts. Whether it is a tenant or owner of its walls, the + company must insure its buildings, its professional equipment, + its goods, its raw materials, its vehicles, as well as in terms + of civil liability of the company and its managers or in terms + of operating loss. +

+ + More information + + + } + /> +

+ You can use these lists to track down your advancement in the business + creation process. This page automatically saves your progress. +

- - Continue to social security › + + After registration ›

) } -export default connect(state => ({ - companyCreationChecklist: state.inFranceApp.companyCreationChecklist, - statusChooserCompleted: - Object.keys(state.inFranceApp.companyLegalStatus).length !== 0 -}), { - onChecklistInitialization: initializeCompanyCreationChecklist, - onItemCheck: checkCompanyCreationItem, - onStatusChange: goToCompanyStatusChoice, -})(CreateCompany) +export default connect( + state => ({ + companyCreationChecklist: state.inFranceApp.companyCreationChecklist, + statusChooserCompleted: + Object.keys(state.inFranceApp.companyLegalStatus).length !== 0 + }), + { + onChecklistInitialization: initializeCompanyCreationChecklist, + onItemCheck: checkCompanyCreationItem, + onStatusChange: goToCompanyStatusChoice + } +)(CreateCompany) diff --git a/source/sites/mycompanyinfrance.fr/pages/Company/Home.js b/source/sites/mycompanyinfrance.fr/pages/Company/Home.js index 97df03748..2677ea9eb 100644 --- a/source/sites/mycompanyinfrance.fr/pages/Company/Home.js +++ b/source/sites/mycompanyinfrance.fr/pages/Company/Home.js @@ -16,9 +16,11 @@ type Props = { const CreateMyCompany = ({ match, nextQuestionUrl, history }: Props) => ( <>

Create your company

- - My company is already registered with the French Administration - +

+ + My company is already registered with the French Administration + +

The French business law defines more than 20 possible legal statuses to declare a company with various acronyms and processes : SAS, SARL, SA, diff --git a/source/sites/mycompanyinfrance.fr/pages/Company/LegalStatusChoice.js b/source/sites/mycompanyinfrance.fr/pages/Company/LegalStatusChoice.js index 0999c97a2..7e76814cd 100644 --- a/source/sites/mycompanyinfrance.fr/pages/Company/LegalStatusChoice.js +++ b/source/sites/mycompanyinfrance.fr/pages/Company/LegalStatusChoice.js @@ -27,14 +27,13 @@ const LegalStatusChoice = ({ return ( !!Object.keys(legalStatus).length && ( <> +

Company status requirement

- Company status requirement - :