🎨 vue mobile

source/components/ComparativeTargets.js

@@ -29,9 +29,6 @@ const connectRègles = (situationBranchName: string) =>
 			prélèvements: règleAvecValeurSelector(state, {
 				situationBranchName
 			})('ratio de prélèvements'),
-			analysis: branchAnalyseSelector(state, {
-				situationBranchName
-			})
 		}),
 		{
 			setSituationBranch,
@@ -40,7 +37,16 @@ const connectRègles = (situationBranchName: string) =>
 		}
 	)
 
-const ComparativeTargets = () => (
+const ComparativeTargets = connect(state => {
+	const analyse = branchAnalyseSelector(state, {
+		situationBranchName: 'Micro-entreprise'
+	});
+	return { 
+		plafondMicroEntrepriseDépassé: analyse.controls && analyse.controls.find(({ test }) =>
+			test.includes('base des cotisations > plafond')
+		)
+	}
+})(({plafondMicroEntrepriseDépassé}) => (
 	<Animate.fromBottom config={config.gentle}>
 		<div
 			className="ui__ full-width"
@@ -50,12 +56,14 @@ const ComparativeTargets = () => (
 				justifyContent: 'center',
 				alignItems: 'stretch'
 			}}>
-			<MicroEntreprise branchIndex={0} />
+			{!plafondMicroEntrepriseDépassé && <MicroEntreprise branchIndex={0}/>}
 			<AssimiléSalarié branchIndex={2} />
 			<Indépendant branchIndex={1} />
+			{plafondMicroEntrepriseDépassé && <MicroEntreprise branchIndex={0} plafondDépassé={plafondMicroEntrepriseDépassé.message}/>}
+
 		</div>
 	</Animate.fromBottom>
-)
+))
 
 const Indépendant = connectRègles('Indépendant')(
 	({
@@ -133,27 +141,15 @@ const MicroEntreprise = connectRègles('Micro-entreprise')(
 		setSituationBranch,
 		companyIsMicroenterprise,
 		branchIndex,
-		analysis
+		plafondDépassé,
 	}) => {
-		const disabledMessage = (
-			(analysis.controls &&
-				analysis.controls.find(({ test }) =>
-					test.includes('base des cotisations > plafond')
-				)) ||
-			{}
-		).message
+		
 		return (
 			<SchemeCard
 				title="Micro-entreprise"
 				subtitle="Pour les petites activités"
 				onAmountClick={() => setSituationBranch(branchIndex)}
-				disabled={
-					disabledMessage && (
-						<a href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F32353">
-							{disabledMessage}
-						</a>
-					)
-				}
+				disabled={plafondDépassé}
 				amountDesc={<RuleLink {...revenuDisponible} />}
 				icon="🚶‍♂️"
 				amountNotice={<PrélèvementNotice prélèvements={prélèvements} />}

source/components/ui/SchemeCard.css

@@ -1,6 +1,6 @@
 .scheme-card__container {
 	width: 24rem;
-	margin: 1.2rem;
+	margin: 1rem;
 	display: flex;
 	flex-direction: column;
 }
@@ -60,3 +60,52 @@
 	width: fit-content;
 	margin: 1rem auto;
 }
+
+@media (max-width: 800px) {
+	.scheme-card__content {
+		display: none;
+	}
+	.scheme-card__icon {
+		/* display: none; */
+		order: 1;
+		margin-left: 0.6rem;
+	}
+	.scheme-card__subtitle {
+		order: -1;
+		margin: 0;
+		font-size: 1.2rem;
+		/* max-width: 50%; */
+	}
+	.scheme-card__container {
+		margin: 0;
+	}
+	.scheme-card__container + .scheme-card__container--top-text {
+		margin-top: 2rem;
+	}
+	.scheme-card__header {
+		display: flex;
+		order: -2;
+		align-items: center;
+		font-size: 1rem;
+	}
+	.scheme-card__header + div {
+		/* flex: 1; */
+		text-align: center;
+		width: 100%;
+	}
+	.scheme-card__amount {
+		flex-direction: row;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+	.scheme-card__amount p {
+		margin: 0;
+	}
+	.scheme-card__amount + p {
+		margin: 0;
+	}
+	.scheme-card__cta {
+		display: none;
+	}
+}

source/components/ui/SchemeCard.js

@@ -39,7 +39,8 @@ const SchemeCard = ({
 	<div
 		className={classnames('scheme-card__container', {
 			'ui__ card coloured': featured,
-			'ui__ card disabled': disabled
+			'ui__ card disabled': disabled,
+			'scheme-card__container--top-text': featured || disabled
 		})}>
 		<div
 			className={`scheme-card__top-text scheme-card__top-text--${
@@ -52,13 +53,15 @@ const SchemeCard = ({
 			className={classnames('scheme-card__inside', {
 				'ui__ card': !featured && !disabled
 			})}>
-			<span className="scheme-card__icon">{emoji(icon)} </span>
-			<h3 className="scheme-card__title">{title}</h3>
+			<header className="scheme-card__header">
+				<span className="scheme-card__icon">{emoji(icon)} </span>
+				<h3 className="scheme-card__title">{title}</h3>
+			</header>
 			{amount && (
 				<div onClick={onAmountClick}>
 					<div className="ui__ card plain scheme-card__amount">
 						{amountDesc}
-						<p className="ui__ lead" style={{ margin: '0.6rem 0 0' }}>
+						<p className="ui__ lead">
 							<AnimatedTargetValue value={amount} />
 						</p>
 					</div>
@@ -73,7 +76,7 @@ const SchemeCard = ({
 					<li key={index}>{feature}</li>
 				))}
 			</ul>
-			<p style={{ textAlign: 'center' }}>
+			<p className="scheme-card__cta">
 				<button
 					onClick={onSchemeChoice}
 					className={'ui__ button ' + (disabled ? 'simple' : ' plain')}>

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

@@ -38,22 +38,17 @@ const DefineDirectorStatus = ({ defineDirectorStatus, t }: Props) => (
 			<ul>
 				<li>
 					<strong>Assimilé salarié :</strong> Le dirigeant de l'entreprise est
-					couvert par le régime général de la Sécurité sociale française. Les
-					cotisations sont calculées sur la base de la rémunération du dirigeant
-					et sont payés mensuellement. Bien qu'il soit plus coûteux, ce
-					programme offre une protection sociale complète (à l'exception du
-					chômage).
+					couvert par le régime général de la Sécurité sociale française.
 				</li>
 				<li>
 					<strong>Indépendant :</strong> Le dirigeant de l'entreprise est
 					couvert par le régime de la Sécurité sociale des travailleurs
-					indépendants. Les cotisations dues sont généralement calculées en
-					fonction des revenus professionnels déclarés à l'administration
-					fiscale. Bien que moins coûteux, ce régime offre une protection
-					sociale limitée (des options supplémentaires et une assurance privée
-					sont recommandées).
+					indépendants.
 				</li>
 			</ul>
+			<p>
+				<button className="ui__ button plain">Découvrir les différences</button>
+			</p>
 		</T>
 		<div className="ui__ answer-group">
 			<button