Ajoute un bouton précédent pendant le guide du choix de status

source/actions/companyStatusActions.js

@@ -9,6 +9,7 @@ import type {
 	DirectorIsInAMinorityAction,
 	DefineDirectorStatusAction
 } from 'Types/companyTypes'
+import { last } from "ramda";
 import type { RouterHistory } from 'react-router'
 import { dropWhile } from "ramda";
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
@@ -88,3 +89,20 @@ export const resetCompanyStatusChoice = (from: string) => (
 		}: ResetCompanyStatusAction)
 	)
 }
+
+export const goBackToPreviousQuestion = () => (
+	dispatch: ResetCompanyStatusAction => void, 
+	getState: () => any,
+	history: RouterHistory
+) => {
+	const previousQuestion = last(Object.keys(getState().inFranceApp.companyLegalStatus));
+	if (previousQuestion) {
+		dispatch(
+			({
+				type: 'RESET_COMPANY_STATUS_CHOICE',
+				answersToReset: [previousQuestion],
+			}: ResetCompanyStatusAction)
+		)
+	}
+	history.push(sitePaths().entreprise.statusJuridique[previousQuestion || 'index'])
+}

source/components/ui/Typography.css

@@ -71,7 +71,7 @@ button {
 p,
 ul {
 	line-height: 1.7rem;
-	margin: 0 0 1em;
+	margin: 0 0 1rem;
 }
 p.ui__.lead {
 	font-size: 1.7rem;

source/components/ui/index.css

@@ -20,14 +20,15 @@ button {
 
 .ui__.answer-group {
 	display: flex;
-	flex-wrap: wrap;
 	justify-content: flex-end;
 }
 @media (max-width: 500px) {
 	.ui__.answer-group {
-		flex-direction: column;
+		flex-wrap: wrap;
 	}
 	.ui__.answer-group > * {
+		flex-grow: 1;
+		flex-shrink: 0;
 		margin-right: 0;
 	}
 }

source/sites/mycompanyinfrance.fr/pages/Company/CompanyStatusNavigation.js

@@ -0,0 +1,27 @@
+/* @flow */
+
+import { goBackToPreviousQuestion } from 'Actions/companyStatusActions'
+import { T } from 'Components'
+import React from 'react'
+import { connect } from 'react-redux'
+import { SkipButton } from 'Ui/Button'
+type ownProps = {
+	onSkip?: () => void
+}
+
+type Props = ownProps & {
+	goBackToPreviousQuestion: () => void
+}
+export default connect(
+	null,
+	{ goBackToPreviousQuestion }
+)(({ goBackToPreviousQuestion, onSkip }: Props) => (
+	<div className="ui__ answer-group">
+		<button
+			className="ui__ skip-button left"
+			onClick={goBackToPreviousQuestion}>
+			‹ <T>Précédent</T>
+		</button>
+		{onSkip && <SkipButton onClick={onSkip} />}
+	</div>
+))

source/sites/mycompanyinfrance.fr/pages/Company/DirectorStatus.js

@@ -5,7 +5,7 @@ import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
-import { SkipButton } from 'Ui/Button'
+import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { DirectorStatus } from 'Types/companyTypes'
 import type { TFunction } from 'react-i18next'
 
@@ -70,8 +70,8 @@ const DefineDirectorStatus = ({ defineDirectorStatus, t }: Props) => (
 				}}>
 				<T>Indépendant</T>
 			</button>
-			<SkipButton onClick={() => defineDirectorStatus(null)} />
 		</div>
+		<CompanyStatusNavigation onSkip={() => defineDirectorStatus(null)} />
 	</>
 )
 

source/sites/mycompanyinfrance.fr/pages/Company/Home.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
 import sitePaths from '../../sitePaths'
-import LegalStatusChoices from './LegalStatusChoice'
+import PreviousAnswers from './PreviousAnswers'
 import type { TFunction } from 'react-i18next'
 
 import type { Match, Location } from 'react-router'
@@ -81,7 +81,7 @@ const CreateMyCompany = ({
 					</div>
 				</>
 			)}
-			<LegalStatusChoices />
+			<PreviousAnswers />
 		</>
 	)
 }

source/sites/mycompanyinfrance.fr/pages/Company/Liability.js

@@ -5,7 +5,7 @@ import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
-import { SkipButton } from 'Ui/Button'
+import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { CompanyLiability } from 'Types/companyTypes'
 import type { TFunction } from 'react-i18next'
 
@@ -108,8 +108,8 @@ const Liability = ({
 				className="ui__ button">
 				<T k="responsabilité.bouton3">Responsabilité limitée</T>
 			</button>
-			<SkipButton onClick={() => chooseCompanyLiability(null)} />
 		</div>
+		<CompanyStatusNavigation onSkip={() => chooseCompanyLiability(null)} />
 		{/* this is an economic activity conducted by a single natural person, in his own name ; */}
 		{/* Company  : This is an economic activity conducted by a single partner - single member company with limited liability (EURL) - or several partners (limited liability company (SARL), public limited company (SA), simplified joint-stock company (SAS)...). */}
 	</>

source/sites/mycompanyinfrance.fr/pages/Company/Microenterprise.js

@@ -5,7 +5,8 @@ import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
-import { SkipButton } from 'Ui/Button'
+import CompanyStatusNavigation from './CompanyStatusNavigation'
+
 import type { TFunction } from 'react-i18next'
 
 type Props = {
@@ -95,8 +96,8 @@ const Microenterprise = ({ companyIsMicroenterprise, t }: Props) => (
 				className="ui__ button">
 				<T>Entreprise Individuelle</T>
 			</button>
-			<SkipButton onClick={() => companyIsMicroenterprise(null)} />
 		</div>
+		<CompanyStatusNavigation onSkip={() => companyIsMicroenterprise(null)}/>
 	</>
 )
 

source/sites/mycompanyinfrance.fr/pages/Company/MinorityDirector.js

@@ -5,7 +5,7 @@ import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
-import { SkipButton } from 'Ui/Button'
+import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { TFunction } from 'react-i18next'
 
 type Props = {
@@ -66,8 +66,8 @@ const MinorityDirector = ({ directorIsInAMinority, t }: Props) => (
 				className="ui__ button">
 				<T>Gérant minoritaire</T>
 			</button>
-			<SkipButton onClick={() => directorIsInAMinority(null)} />
 		</div>
+		<CompanyStatusNavigation onSkip={() => directorIsInAMinority(null)} />
 	</>
 )
 

source/sites/mycompanyinfrance.fr/pages/Company/NumberOfAssociate.js

@@ -6,7 +6,7 @@ import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
-import { SkipButton } from 'Ui/Button'
+import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { TFunction } from 'react-i18next'
 
 type Props = {
@@ -64,8 +64,10 @@ const NumberOfAssociates = ({ companyHasMultipleAssociates, t }: Props) => (
 				className="ui__ button">
 				<T k="associés.choix2">Plusieurs associés</T>
 			</button>
-			<SkipButton onClick={() => companyHasMultipleAssociates(null)} />
 		</div>
+		<CompanyStatusNavigation
+			onSkip={() => companyHasMultipleAssociates(null)}
+		/>
 	</>
 )
 

source/sites/mycompanyinfrance.fr/pages/Company/PickLegalStatus.js

@@ -13,12 +13,12 @@ import withLanguage from 'Components/utils/withLanguage'
 import type { TFunction } from 'react-i18next'
 
 import sitePaths from '../../sitePaths';
-import { goToCompanyStatusChoice } from 'Actions/companyStatusActions'
+import { goBackToPreviousQuestion } from 'Actions/companyStatusActions'
 
 type Props = {
 	history: RouterHistory,
 	possibleStatus: { [LegalStatus]: boolean },
-	onStartAgain: () => void,
+	goBackToPreviousQuestion: () => void,
 	setMainStatus: LegalStatus => void,
 	language: string,
 	t: TFunction
@@ -32,7 +32,7 @@ const StatusButton = withI18n()(
 	)
 )
 
-const SetMainStatus = ({ history, possibleStatus, onStartAgain, t, language }: Props) => {
+const SetMainStatus = ({ history, possibleStatus, goBackToPreviousQuestion, t, language }: Props) => {
 	return (
 		<>
 			<Helmet>
@@ -161,8 +161,8 @@ const SetMainStatus = ({ history, possibleStatus, onStartAgain, t, language }: P
 					justifyContent: 'space-between'
 				}}
 			>
-				<button onClick={onStartAgain} className="ui__ skip-button left">
-					‹ <T>Recommencer</T>
+				<button onClick={goBackToPreviousQuestion} className="ui__ skip-button left">
+					‹ <T>Précédent</T>
 				</button>
 				<Link to={sitePaths().sécuritéSociale.index} className="ui__ skip-button">
 					<T>Choisir plus tard</T> ›
@@ -177,6 +177,6 @@ export default compose(
 	withLanguage,
 	connect(
 		state => ({ possibleStatus: possibleStatusSelector(state) }),
-		{ onStartAgain: goToCompanyStatusChoice }
+		{ goBackToPreviousQuestion }
 	)
 )(SetMainStatus)

source/sites/mycompanyinfrance.fr/pages/Company/PreviousAnswers.js

@@ -1,4 +1,5 @@
 /* @flow */
+import { goToCompanyStatusChoice } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
 import { isNil } from 'ramda'
 import { connect } from 'react-redux'
@@ -35,33 +36,43 @@ const requirementToText = (key, value) => {
 
 type Props = CompanyLegalStatus & { goToCompanyStatusChoice: () => void }
 
-const LegalStatusChoice = ({ ...legalStatus }: Props) => {
+const PreviousAnswers = ({
+	goToCompanyStatusChoice,
+	...legalStatus
+}: Props) => {
 	return (
-		!!Object.keys(legalStatus).length && (
-			<>
-				<h2>
-					<T>Vos choix : </T>
-				</h2>
-				<ul>
-					<Animate.fromBottom>
-						{Object.entries(legalStatus).map(
-							([key, value]) =>
-								!isNil(value) && (
-									<li key={key}>
-										<Link to={sitePaths().entreprise.statusJuridique[key]}>
-											{requirementToText(key, value)}
-										</Link>
-									</li>
-								)
-						)}
-					</Animate.fromBottom>
-				</ul>
-			</>
-		)
+		<>
+			{!!Object.keys(legalStatus).length && (
+				<button onClick={goToCompanyStatusChoice} className="ui__ link-button">
+					<T>Recommencer</T>
+				</button>
+			)}
+			{Object.values(legalStatus).some(answer => answer !== null) && (
+				<>
+					<h2>
+						<T>Vos choix : </T>
+					</h2>
+					<ul>
+						<Animate.fromBottom>
+							{Object.entries(legalStatus).map(
+								([key, value]) =>
+									!isNil(value) && (
+										<li key={key}>
+											<Link to={sitePaths().entreprise.statusJuridique[key]}>
+												{requirementToText(key, value)}
+											</Link>
+										</li>
+									)
+							)}
+						</Animate.fromBottom>
+					</ul>
+				</>
+			)}
+		</>
 	)
 }
 
 export default connect(
 	state => state.inFranceApp.companyLegalStatus,
-	() => ({})
-)(LegalStatusChoice)
+	{ goToCompanyStatusChoice }
+)(PreviousAnswers)