✨ Subscribe page

2024-04-02 16:07:25 +02:00 · 2024-04-02 16:07:25 +02:00 · e94648e2b8
commit e94648e2b8
parent 7ce6941030
9 changed files with 611 additions and 87 deletions
--- a/src/front/Components/LayoutTemplates/DefaultTemplate/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultTemplate/classes.module.scss
@ -4,7 +4,6 @@
 	margin: var(--root-margin);
 	max-width: var(--root-max-width);
 	min-width: 100%;
-	min-height: calc(100vh - 83px);

 	&.padding {
 		padding: var(--root-padding);
@ -17,4 +16,4 @@
 			padding: 0 16px;
 		}
 	}
-}
+}
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeCheckoutTicket/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeCheckoutTicket/classes.module.scss
@ -0,0 +1,63 @@
+@import "@Themes/constants.scss";
+
+.root {
+	width: 372px;
+
+	@media (max-width: $screen-s) {
+		width: 100%;
+	}
+	.container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 32px;
+		box-shadow: 0px 8px 10px 0px #00000012;
+		padding: 22px 40px;
+		border-radius: 16px;
+
+		@media (max-width: $screen-s) {
+			box-shadow: none;
+			padding: 0px;
+		}
+
+		.forfeit-type {
+			text-align: center;
+		}
+
+		.container-frequency {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.separator {
+			width: 100%;
+			height: 1px;
+			background-color: gray;
+		}
+
+		.container-line {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+			.line {
+				display: flex;
+				justify-content: space-between;
+
+				.line-sub-container {
+					display: flex;
+					flex-direction: column;
+				}
+			}
+		}
+
+		.container-tight {
+			gap: 8px;
+		}
+
+		.payment-button {
+			@media (max-width: $screen-s) {
+				display: none;
+			}
+		}
+	}
+}
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeCheckoutTicket/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeCheckoutTicket/index.tsx
@ -1,11 +1,178 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { EForfeitType } from "../../SubscriptionFacturation";
 import classes from "./classes.module.scss";
+import { useEffect, useState } from "react";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Button from "@Front/Components/DesignSystem/Button";
+import classnames from "classnames";
+
+export const forfeitsPrices: Record<EForfeitType, number> = {
+	[EForfeitType.standard]: 99,
+	[EForfeitType.unlimited]: 249,
+};
+
+export const collaboratorPrice = 6.99;

 type IProps = {
 	forfeitType: EForfeitType;
+	numberOfCollaborators: number;
+	defaultFrequency?: EPaymentFrequency;
 };
-export default function SubscribeCheckoutTicket(props: IProps) {
-	const { forfeitType } = props;

-	return <div className={classes["root"]}></div>;
+export enum EPaymentFrequency {
+	monthly,
+	yearly,
+}
+
+export default function SubscribeCheckoutTicket(props: IProps) {
+	const { forfeitType, numberOfCollaborators } = props;
+	const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(props.defaultFrequency ?? EPaymentFrequency.monthly);
+	const [multiplier, setMultiplier] = useState<number>(1);
+
+	useEffect(() => {
+		setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
+	}, [paymentFrequency]);
+
+	const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
+	};
+
+	const formatFloat = (value: number) => {
+		return value.toFixed(2).replace(".", ",");
+	};
+
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["container"]}>
+				<div className={classes["forfeit-type"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						{forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"}
+					</Typography>
+				</div>
+				<div className={classes["separator"]} />
+				<div className={classes["container-frequency"]}>
+					<RadioBox
+						name="paymentFrequency"
+						value={EPaymentFrequency.yearly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
+						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+					</RadioBox>
+					<RadioBox
+						name="paymentFrequency"
+						value={EPaymentFrequency.monthly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
+						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+					</RadioBox>
+				</div>
+				<div className={classes["separator"]} />
+				<div className={classes["container-line"]}>
+					<div className={classes["line"]}>
+						<div className={classes["line-sub-container"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
+							</Typography>
+							{paymentFrequency === EPaymentFrequency.yearly && (
+								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
+									{forfeitType === EForfeitType.standard
+										? forfeitsPrices[EForfeitType.standard]
+										: forfeitsPrices[EForfeitType.unlimited]}
+									&nbsp;€ x 12
+								</Typography>
+							)}
+						</div>
+
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							{forfeitType === EForfeitType.standard
+								? forfeitsPrices[EForfeitType.standard] * multiplier
+								: forfeitsPrices[EForfeitType.unlimited] * multiplier}
+							€
+						</Typography>
+					</div>
+					{forfeitType === EForfeitType.standard && (
+						<div className={classes["line"]}>
+							<div className={classes["line-sub-container"]}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+									{numberOfCollaborators} collaborateurs
+								</Typography>
+								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
+									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}
+								</Typography>
+							</div>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								{formatFloat(collaboratorPrice * numberOfCollaborators * multiplier)}&nbsp;€
+							</Typography>
+						</div>
+					)}
+				</div>
+				{forfeitType === EForfeitType.standard && (
+					<>
+						<div className={classes["separator"]} />
+						<div className={classnames(classes["container-line"], classes["container-tight"])}>
+							<div className={classes["line"]}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+									Total HT
+								</Typography>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									{formatFloat(
+										(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * multiplier,
+									)}
+									&nbsp;€
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+									TVA 20%
+								</Typography>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									{formatFloat(
+										(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) *
+											0.2 *
+											multiplier,
+									)}
+									&nbsp;€
+								</Typography>
+							</div>
+						</div>
+					</>
+				)}
+				<div className={classes["separator"]} />
+				<div className={classnames(classes["container-line"], classes["container-tight"])}>
+					{forfeitType === EForfeitType.unlimited && (
+						<div className={classes["line"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								TVA 20%
+							</Typography>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 0.2 * multiplier)}&nbsp;€
+							</Typography>
+						</div>
+					)}
+					<div className={classes["line"]}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+							Total TTC
+						</Typography>
+						{forfeitType === EForfeitType.standard && (
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								{formatFloat(
+									(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * 1.2 * multiplier,
+								)}
+								&nbsp;€
+							</Typography>
+						)}
+						{forfeitType === EForfeitType.unlimited && (
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplier)}
+								&nbsp;€
+							</Typography>
+						)}
+					</div>
+				</div>
+				<Button fullwidth className={classes["payment-button"]}>
+					Passer au paiement
+				</Button>
+			</div>
+		</div>
+	);
 }
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/classes.module.scss
@ -1,9 +1,20 @@
@import "@Themes/constants.scss";

 .root {
-	max-width: 1024px;
 	display: flex;
+	justify-content: space-between;
 	gap: 104px;
+
+	@media (max-width: $screen-m) {
+		margin-top: 40px;
+		margin-bottom: 40px;
+		gap: 72px;
+	}
+
+	@media (max-width: $screen-s) {
+		margin-bottom: 50px;
+	}
+
 	.left {
 		display: flex;
 		gap: 40px;
@ -13,6 +24,10 @@
 			flex-direction: column;
 			gap: 16px;
 			.line {
+				svg {
+					min-width: 24px;
+					min-height: 24px;
+				}
 				display: flex;
 				gap: 16px;
 			}
@ -21,5 +36,62 @@

 	.right {
 		width: 372px;
+		@media (max-width: $screen-m) {
+			margin-top: 50px;
+		}
+
+		@media (max-width: $screen-s) {
+			display: none;
+		}
+	}
+
+	button {
+		@media (max-width: $screen-s) {
+			display: none;
+		}
+	}
+}
+
+.bottom {
+	display: none;
+	position: sticky;
+	bottom: 0px;
+	flex-direction: column;
+	justify-content: center;
+	gap: 32px;
+	box-shadow: 0px 8px 10px 0px #00000012;
+	padding: 22px 16px;
+	border-radius: 16px 16px 0 0;
+	background: white;
+
+	@media (max-width: $screen-s) {
+		display: flex;
+	}
+
+	box-shadow: 0px 4px 24px 0px #00000026;
+
+	.forfeit-type {
+		text-align: center;
+	}
+
+	.container-frequency {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.separator {
+		width: 100%;
+		height: 1px;
+		background-color: gray;
+	}
+
+	.container-line {
+		display: flex;
+		justify-content: space-between;
+		gap: 24px;
+	}
+
+	.container-tight {
+		gap: 8px;
 	}
 }
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/index.tsx
@ -2,54 +2,125 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import NavTab from "@Front/Components/Elements/NavTab";
-import CheckIcon from "@Assets/Icons/check.svg";
-import Image from "next/image";
+import SubscribeCheckoutTicket, { EPaymentFrequency, forfeitsPrices } from "../SubscribeCheckoutTicket";
+import { EForfeitType } from "../../SubscriptionFacturation";
+import { useEffect, useState } from "react";
+import Check from "@Front/Components/Elements/Icons/Check";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import useOpenable from "@Front/Hooks/useOpenable";

 export default function SubscribeIllimity() {
+	const { close, isOpen, open } = useOpenable();
+
+	const formatFloat = (value: number) => {
+		return value.toFixed(2).replace(".", ",");
+	};
+
+	const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(EPaymentFrequency.monthly);
+	const [multiplier, setMultiplier] = useState<number>(1);
+
+	useEffect(() => {
+		setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
+	}, [paymentFrequency]);
+
+	const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
+	};
+
 	return (
-		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
-			<div className={classes["root"]}>
-				<div className={classes["left"]}>
-					<NavTab
-						items={[
-							{ label: "Forfait standard", path: "/subscription/subscribe/standard" },
-							{ label: "Forfait illimité", path: "/subscription/subscribe/illimity" },
-						]}
-					/>
-					<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
-						Nombre de collaborateurs illimités
-					</Typography>
-					<div className={classes["infos-container"]}>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
-								main optimale de l'application
-							</Typography>
-						</div>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Support technique : notre équipe support est disponible pour vous assister en cas d’incident
-							</Typography>
-						</div>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières fonctionnalités,
-								améliorations de sécurité et performances optimisées
-							</Typography>
-						</div>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
-								Sans limite d'utilisateurs
-							</Typography>
+		<>
+			<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
+				<div className={classes["root"]}>
+					<div className={classes["left"]}>
+						<NavTab
+							items={[
+								{ label: "Forfait standard", path: "/subscription/subscribe/standard" },
+								{ label: "Forfait illimité", path: "/subscription/subscribe/illimity" },
+							]}
+						/>
+						<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							Nombre de collaborateurs illimité
+						</Typography>
+						<div className={classes["infos-container"]}>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
+									main optimale de l'application
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
+									fonctionnalités, améliorations de sécurité et performances optimisées
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.BLACK} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+									Sans limite d'utilisateurs
+								</Typography>
+							</div>
 						</div>
 					</div>
+					<div className={classes["right"]}>
+						<SubscribeCheckoutTicket forfeitType={EForfeitType.unlimited} numberOfCollaborators={1} />
+					</div>
+					<Button fullwidth>Passer au paiement</Button>
+				</div>
+			</DefaultTemplate>
+			<Confirm isOpen={isOpen} onClose={close} showCancelButton={false} confirmText={"Passer au paiement"} closeBtn onAccept={close}>
+				<SubscribeCheckoutTicket
+					forfeitType={EForfeitType.unlimited}
+					numberOfCollaborators={1}
+					defaultFrequency={paymentFrequency}
+				/>
+			</Confirm>
+			<div className={classes["bottom"]}>
+				<div className={classes["container-frequency"]}>
+					<RadioBox
+						name="paymentFrequencyInSubscription"
+						value={EPaymentFrequency.yearly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
+						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+					</RadioBox>
+					<RadioBox
+						name="paymentFrequencyInSubscription"
+						value={EPaymentFrequency.monthly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
+						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+					</RadioBox>
+				</div>
+				<div className={classes["separator"]} />
+				<div className={classes["container-line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Total TTC
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplier)}
+						&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["voir-recap"]}>
+					<Button fullwidth variant={EButtonVariant.LINE} onClick={open}>
+						Voir le récapitulatif plus en détail
+					</Button>
+				</div>
+				<div className={classes["payment-button"]}>
+					<Button fullwidth>Passer au paiement</Button>
 				</div>
-				<div className={classes["right"]}></div>
 			</div>
-		</DefaultTemplate>
+		</>
 	);
 }
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/classes.module.scss
@ -1,9 +1,20 @@
@import "@Themes/constants.scss";

 .root {
-	max-width: 1024px;
 	display: flex;
+	justify-content: space-between;
 	gap: 104px;
+
+	@media (max-width: $screen-m) {
+		margin-top: 40px;
+		margin-bottom: 40px;
+		gap: 72px;
+	}
+
+	@media (max-width: $screen-s) {
+		margin-bottom: 50px;
+	}
+
 	.left {
 		display: flex;
 		gap: 40px;
@ -13,6 +24,10 @@
 			flex-direction: column;
 			gap: 16px;
 			.line {
+				svg {
+					min-width: 24px;
+					min-height: 24px;
+				}
 				display: flex;
 				gap: 16px;
 			}
@ -21,5 +36,62 @@

 	.right {
 		width: 372px;
+		@media (max-width: $screen-m) {
+			margin-top: 50px;
+		}
+
+		@media (max-width: $screen-s) {
+			display: none;
+		}
+	}
+
+	button {
+		@media (max-width: $screen-s) {
+			display: none;
+		}
+	}
+}
+
+.bottom {
+	display: none;
+	position: sticky;
+	bottom: 0px;
+	flex-direction: column;
+	justify-content: center;
+	gap: 32px;
+	box-shadow: 0px 8px 10px 0px #00000012;
+	padding: 22px 16px;
+	border-radius: 16px 16px 0 0;
+	background: white;
+
+	@media (max-width: $screen-s) {
+		display: flex;
+	}
+
+	box-shadow: 0px 4px 24px 0px #00000026;
+
+	.forfeit-type {
+		text-align: center;
+	}
+
+	.container-frequency {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.separator {
+		width: 100%;
+		height: 1px;
+		background-color: gray;
+	}
+
+	.container-line {
+		display: flex;
+		justify-content: space-between;
+		gap: 24px;
+	}
+
+	.container-tight {
+		gap: 8px;
 	}
 }
--- a/src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/index.tsx
@ -2,50 +2,127 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import NavTab from "@Front/Components/Elements/NavTab";
-import CheckIcon from "@Assets/Icons/check.svg";
-import Image from "next/image";
 import NumberPicker from "@Front/Components/Elements/NumberPicker";
+import SubscribeCheckoutTicket, { EPaymentFrequency, collaboratorPrice, forfeitsPrices } from "../SubscribeCheckoutTicket";
+import { EForfeitType } from "../../SubscriptionFacturation";
+import { useEffect, useState } from "react";
+import Check from "@Front/Components/Elements/Icons/Check";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import useOpenable from "@Front/Hooks/useOpenable";
+
+export default function SubscribeStandard() {
+	const [numberOfCollaborators, setNumberOfCollaborators] = useState(1);
+	const { close, isOpen, open } = useOpenable();
+	const handleCollaboratorsChange = (value: number) => {
+		setNumberOfCollaborators(value);
+	};
+
+	const formatFloat = (value: number) => {
+		return value.toFixed(2).replace(".", ",");
+	};
+
+	const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(EPaymentFrequency.monthly);
+	const [multiplier, setMultiplier] = useState<number>(1);
+
+	useEffect(() => {
+		setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
+	}, [paymentFrequency]);
+
+	const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
+	};

-export default function SubscribeIllimity() {
 	return (
-		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
-			<div className={classes["root"]}>
-				<div className={classes["left"]}>
-					<NavTab
-						items={[
-							{ label: "Forfait standard", path: "/subscription/subscribe/standard" },
-							{ label: "Forfait illimité", path: "/subscription/subscribe/illimity" },
-						]}
-					/>
-					<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
-						Choisissez le nombre de collaborateurs pour votre abonnement
-					</Typography>
-					<NumberPicker defaultValue={1} onChange={() => {}} min={1} />
-					<div className={classes["infos-container"]}>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
-								main optimale de l'application
-							</Typography>
-						</div>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Support technique : notre équipe support est disponible pour vous assister en cas d’incident
-							</Typography>
-						</div>
-						<div className={classes["line"]}>
-							<Image src={CheckIcon} alt="Check icon" />
-							<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-								Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières fonctionnalités,
-								améliorations de sécurité et performances optimisées
-							</Typography>
+		<>
+			<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
+				<div className={classes["root"]}>
+					<div className={classes["left"]}>
+						<NavTab
+							items={[
+								{ label: "Forfait standard", path: "/subscription/subscribe/standard" },
+								{ label: "Forfait illimité", path: "/subscription/subscribe/illimity" },
+							]}
+						/>
+						<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							Choisissez le nombre de collaborateurs pour votre abonnement
+						</Typography>
+						<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
+						<div className={classes["infos-container"]}>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
+									main optimale de l'application
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
+								</Typography>
+							</div>
+							<div className={classes["line"]}>
+								<Check color={ITypoColor.GREY} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
+									fonctionnalités, améliorations de sécurité et performances optimisées
+								</Typography>
+							</div>
 						</div>
 					</div>
+					<div className={classes["right"]}>
+						<SubscribeCheckoutTicket forfeitType={EForfeitType.standard} numberOfCollaborators={numberOfCollaborators} />
+					</div>
+					<Button fullwidth>Passer au paiement</Button>
+				</div>
+			</DefaultTemplate>
+			<Confirm isOpen={isOpen} onClose={close} showCancelButton={false} confirmText={"Passer au paiement"} closeBtn onAccept={close}>
+				<SubscribeCheckoutTicket
+					forfeitType={EForfeitType.standard}
+					numberOfCollaborators={numberOfCollaborators}
+					defaultFrequency={paymentFrequency}
+				/>
+			</Confirm>
+			<div className={classes["bottom"]}>
+				<div className={classes["container-frequency"]}>
+					<RadioBox
+						name="paymentFrequencyInSubscription"
+						value={EPaymentFrequency.yearly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
+						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+					</RadioBox>
+					<RadioBox
+						name="paymentFrequencyInSubscription"
+						value={EPaymentFrequency.monthly.toString()}
+						onChange={handleFrequencyChange}
+						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
+						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+					</RadioBox>
+				</div>
+				<div className={classes["separator"]} />
+				<div className={classes["container-line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Total TTC
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						{formatFloat(
+							(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * 1.2 * multiplier,
+						)}
+						&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["voir-recap"]}>
+					<Button fullwidth variant={EButtonVariant.LINE} onClick={open}>
+						Voir le récapitulatif plus en détail
+					</Button>
+				</div>
+				<div className={classes["payment-button"]}>
+					<Button fullwidth>Passer au paiement</Button>
 				</div>
-				<div className={classes["right"]}></div>
 			</div>
-		</DefaultTemplate>
+		</>
 	);
 }
--- a/src/front/Themes/modes.scss
+++ b/src/front/Themes/modes.scss
@ -4,6 +4,8 @@ body.body {
 	//   --black: #000000;

 	--green-flash: #{green-flash};
+	--black: #{$black};
+
 	//   --blue-flash: #005176;
 	//   --turquoise-flash: #3fa79e;
 	//   --purple-flash: #320756;
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@ -31,5 +31,6 @@
 	--grey-medium: #{$grey-medium};
 	--grey-soft: #{$grey-soft};

+	--black: #{$black};
 	--white: #{$white};
 }