✨ Refacto components

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/classes.module.scss

@@ -0,0 +1,98 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	justify-content: space-between;
+	gap: 104px;
+	max-width: 1400px;
+	margin: auto;
+	@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;
+		flex-direction: column;
+		.infos-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			.line {
+				svg {
+					min-width: 24px;
+					min-height: 24px;
+				}
+				display: flex;
+				gap: 16px;
+			}
+		}
+	}
+
+	.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;
+	}
+}

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx

@@ -0,0 +1,130 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import NavTab from "@Front/Components/Elements/NavTab";
+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";
+
+type IProps = {
+	hasNavTab?: boolean;
+};
+export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps) {
+	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" hasBackArrow>
+				<div className={classes["root"]}>
+					<div className={classes["left"]}>
+						{hasNavTab && (
+							<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>
+				</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>
+		</>
+	);
+}

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/classes.module.scss

@@ -0,0 +1,98 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	justify-content: space-between;
+	gap: 104px;
+	max-width: 1400px;
+	margin: auto;
+	@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;
+		flex-direction: column;
+		.infos-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			.line {
+				svg {
+					min-width: 24px;
+					min-height: 24px;
+				}
+				display: flex;
+				gap: 16px;
+			}
+		}
+	}
+
+	.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;
+	}
+}

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx

@@ -0,0 +1,134 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import NavTab from "@Front/Components/Elements/NavTab";
+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";
+// import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
+// import { EType } from "le-coffre-resources/dist/Admin/Subscription";
+
+type IProps = {
+	hasNavTab?: boolean;
+};
+export default function SubscribeStandardComponent({ hasNavTab = true }: IProps) {
+	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);
+	};
+
+	return (
+		<>
+			<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
+				<div className={classes["root"]}>
+					<div className={classes["left"]}>
+						{hasNavTab && (
+							<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>
+				</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>
+		</>
+	);
+}

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageIllimity/index.tsx

@@ -0,0 +1,5 @@
+import SubscribeIllimityComponent from "../../Components/SubscribeIllimityComponent";
+
+export default function SubscribeManageIllimity() {
+	return <SubscribeIllimityComponent hasNavTab={false} />;
+}

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageStandard/classes.module.scss

@@ -0,0 +1,98 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	justify-content: space-between;
+	gap: 104px;
+	max-width: 1400px;
+	margin: auto;
+	@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;
+		flex-direction: column;
+		.infos-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			.line {
+				svg {
+					min-width: 24px;
+					min-height: 24px;
+				}
+				display: flex;
+				gap: 16px;
+			}
+		}
+	}
+
+	.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;
+	}
+}

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageStandard/index.tsx

@@ -0,0 +1,5 @@
+import SubscribeStandardComponent from "../../Components/SubscribeStandardComponent";
+
+export default function SubscribeManageStandard() {
+	return <SubscribeStandardComponent hasNavTab={false} />;
+}

src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/index.tsx

@@ -1,125 +1,5 @@
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import classes from "./classes.module.scss";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import NavTab from "@Front/Components/Elements/NavTab";
-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";
+import SubscribeIllimityComponent from "../../Components/SubscribeIllimityComponent";
 
 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" hasBackArrow>
-				<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>
-				</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>
-		</>
-	);
+	return <SubscribeIllimityComponent />;
 }

src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/index.tsx

@@ -1,129 +1,5 @@
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import classes from "./classes.module.scss";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import NavTab from "@Front/Components/Elements/NavTab";
-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";
-// import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
-// import { EType } from "le-coffre-resources/dist/Admin/Subscription";
+import SubscribeStandardComponent from "../../Components/SubscribeStandardComponent";
 
 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);
-	};
-
-	return (
-		<>
-			<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
-				<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>
-				</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>
-		</>
-	);
+	return <SubscribeStandardComponent />;
 }

src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx

@@ -1,9 +1,9 @@
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import classes from "./classes.module.scss";
-import SubscriptionTicket from "../SubscriptionTicket";
+import SubscriptionTicket from "../Components/SubscriptionTicket";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import MessageBox from "@Front/Components/Elements/MessageBox";
-import SubscriptionClientInfos from "../SubscriptionClientInfos";
+import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
 import Button from "@Front/Components/DesignSystem/Button";
 
 export default function SubscriptionError() {

src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx

@@ -19,7 +19,7 @@ export enum EForfeitType {
 }
 export default function SubscriptionFacturation() {
 	const router = useRouter();
-	const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
+	const [forfeitType, _setForfeitType] = useState(EForfeitType.unlimited);
 	const { close: closeCancelSubscription, isOpen: isCancelSubscriptionOpen, open: openCancelSubscription } = useOpenable();
 	const { close: closeConfirmation, isOpen: isConfirmationOpen, open: openConfirmation } = useOpenable();
 
@@ -87,8 +87,7 @@ export default function SubscriptionFacturation() {
 						</div>
 						<div className={classes["button-container"]}>
 							{forfeitType !== EForfeitType.standard && (
-								<Link
-									href={Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Standard.props.path}>
+								<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
 									<Button fullwidth variant={EButtonVariant.GHOST}>
 										Rétrograder mon abonnement
 									</Button>
@@ -97,9 +96,7 @@ export default function SubscriptionFacturation() {
 							{forfeitType === EForfeitType.standard && (
 								<>
 									<Link
-										href={
-											Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Standard.props.path
-										}>
+										href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
 										<Button fullwidth variant={EButtonVariant.PRIMARY}>
 											Gérer mon abonnement
 										</Button>
@@ -151,8 +148,7 @@ export default function SubscriptionFacturation() {
 								</Button>
 							)}
 							{forfeitType === EForfeitType.standard && (
-								<Link
-									href={Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Illimity.props.path}>
+								<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}>
 									<Button fullwidth variant={EButtonVariant.GHOST}>
 										Améliorer mon abonnement
 									</Button>

src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx

@@ -1,9 +1,9 @@
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import classes from "./classes.module.scss";
-import SubscriptionTicket from "../SubscriptionTicket";
+import SubscriptionTicket from "../Components/SubscriptionTicket";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import MessageBox from "@Front/Components/Elements/MessageBox";
-import SubscriptionClientInfos from "../SubscriptionClientInfos";
+import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
 import Button from "@Front/Components/DesignSystem/Button";
 import Link from "next/link";
 import Module from "@Front/Config/Module";

src/front/Config/Module/development.json

@@ -297,6 +297,22 @@
 						"props": {
 							"path": "/subscription/manage",
 							"labelKey": "manage"
+						},
+						"pages": {
+							"Standard": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/standard",
+									"labelKey": "standard"
+								}
+							},
+							"Illimity": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/illimity",
+									"labelKey": "illimity"
+								}
+							}
 						}
 					},
 					"New": {

src/front/Config/Module/preprod.json

@@ -297,6 +297,22 @@
 						"props": {
 							"path": "/subscription/manage",
 							"labelKey": "manage"
+						},
+						"pages": {
+							"Standard": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/standard",
+									"labelKey": "standard"
+								}
+							},
+							"Illimity": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/illimity",
+									"labelKey": "illimity"
+								}
+							}
 						}
 					},
 					"New": {

src/front/Config/Module/production.json

@@ -297,6 +297,22 @@
 						"props": {
 							"path": "/subscription/manage",
 							"labelKey": "manage"
+						},
+						"pages": {
+							"Standard": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/standard",
+									"labelKey": "standard"
+								}
+							},
+							"Illimity": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/illimity",
+									"labelKey": "illimity"
+								}
+							}
 						}
 					},
 					"New": {

src/front/Config/Module/staging.json

@@ -297,6 +297,22 @@
 						"props": {
 							"path": "/subscription/manage",
 							"labelKey": "manage"
+						},
+						"pages": {
+							"Standard": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/standard",
+									"labelKey": "standard"
+								}
+							},
+							"Illimity": {
+								"enabled": true,
+								"props": {
+									"path": "/subscription/manage/illimity",
+									"labelKey": "illimity"
+								}
+							}
 						}
 					},
 					"New": {

src/pages/subscription/manage-collaborators/index.tsx

@@ -1,4 +1,4 @@
-import SubscriptionManageCollaborators from "@Front/Components/Layouts/Subscription/SubscriptionManageCollaborators";
+import SubscriptionManageCollaborators from "@Front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators";
 
 export default function Route() {
 	return <SubscriptionManageCollaborators />;

src/pages/subscription/manage/illimity.tsx

@@ -0,0 +1,5 @@
+import SubscriptionManageIllimity from "@Front/Components/Layouts/Subscription/Manage/SubscriptionManageIllimity";
+
+export default function Route() {
+	return <SubscriptionManageIllimity />;
+}

src/pages/subscription/manage/standard.tsx

@@ -0,0 +1,5 @@
+import SubscriptionManageStandard from "@Front/Components/Layouts/Subscription/Manage/SubscriptionManageStandard";
+
+export default function Route() {
+	return <SubscriptionManageStandard />;
+}