From 6ca191199ac71548fde17a93f7ff720b7c71dd7b Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 29 Mar 2024 11:05:53 +0100
Subject: [PATCH] :sparkles: Facturation page working

---
 .../classes.module.scss                       |  83 +++++++++++
 .../SubscriptionFacturation/index.tsx         | 129 ++++++++++++++++++
 src/pages/subscription/facturation/index.tsx  |   5 +
 3 files changed, 217 insertions(+)
 create mode 100644 src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss
 create mode 100644 src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
 create mode 100644 src/pages/subscription/facturation/index.tsx

diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss
new file mode 100644
index 00000000..112b6ca0
--- /dev/null
+++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss
@@ -0,0 +1,83 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	justify-content: baseline;
+	align-items: center;
+	flex-direction: column;
+	gap: 64px;
+	max-width: 1000px;
+	margin: auto;
+	.top-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 24px;
+	}
+
+	.forfeits-container {
+		display: flex;
+		gap: 32px;
+
+		width: 100%;
+
+		@media (max-width: $screen-s) {
+			flex-direction: column;
+		}
+
+		.forfeit-block {
+			flex: 1;
+			padding: 32px;
+			border: 1px solid black;
+
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+
+			&[data-inactive="true"] {
+				border: 1px solid #e7e7e7;
+			}
+
+			.forfeit-header {
+				display: flex;
+				justify-content: space-between;
+				.left {
+					display: flex;
+					flex-direction: column;
+				}
+
+				.active-plan {
+					@media (max-width: $screen-s) {
+						display: none;
+					}
+				}
+			}
+
+			.separator {
+				border-bottom: 1px solid black;
+			}
+
+			.price-container {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+		}
+	}
+
+	.actions-container {
+		display: flex;
+		align-items: center;
+		gap: 48px;
+		justify-content: flex-end;
+		justify-self: flex-end;
+		align-self: flex-end;
+		margin-bottom: 64px;
+
+		@media (max-width: $screen-s) {
+			flex-direction: column-reverse;
+			align-self: center;
+			justify-self: center;
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
new file mode 100644
index 00000000..4e12a9d1
--- /dev/null
+++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
@@ -0,0 +1,129 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import { useState } from "react";
+
+enum EForfeitType {
+	"standard",
+	"unlimited",
+}
+export default function SubscriptionFacturation() {
+	const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
+	return (
+		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
+			<div className={classes["root"]}>
+				<div className={classes["top-container"]}>
+					<div className={classes["top-container-title"]}>
+						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							Facturation
+						</Typography>
+					</div>
+					<div className={classes["sub-title"]}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+							Nos forfaits sont adaptés à la taille de votre office
+						</Typography>
+					</div>
+				</div>
+				<div className={classes["forfeits-container"]}>
+					<div className={classes["forfeit-block"]} data-inactive={forfeitType !== EForfeitType.standard}>
+						<div className={classes["forfeit-header"]}>
+							<div className={classes["left"]}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									Forfait standard
+								</Typography>
+								<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									Plan par utilisateur
+								</Typography>
+							</div>
+							{forfeitType === EForfeitType.standard && (
+								<div className={classes["active-plan"]}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										Plan actif
+									</Typography>
+								</div>
+							)}
+						</div>
+						<div className={classes["separator"]} />
+						<div className={classes["price-container"]}>
+							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+								99€
+								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+									&nbsp;HT&nbsp;
+								</Typography>
+								/ mois
+							</Typography>
+							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								+ 6,99€ / collaborateur / mois
+							</Typography>
+						</div>
+						<div className={classes["button-container"]}>
+							{forfeitType !== EForfeitType.standard && (
+								<Button fullwidth variant={EButtonVariant.GHOST}>
+									Rétrograder mon abonnement
+								</Button>
+							)}
+							{forfeitType === EForfeitType.standard && (
+								<Button fullwidth variant={EButtonVariant.PRIMARY}>
+									Gérer mes collaborateurs
+								</Button>
+							)}
+						</div>
+					</div>
+					<div className={classes["forfeit-block"]} data-inactive={forfeitType === EForfeitType.standard}>
+						<div className={classes["forfeit-header"]}>
+							<div className={classes["left"]}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									Forfait illimité
+								</Typography>
+								<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									Plan par office
+								</Typography>
+							</div>
+							{forfeitType !== EForfeitType.standard && (
+								<div className={classes["active-plan"]}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										Plan actif
+									</Typography>
+								</div>
+							)}
+						</div>
+						<div className={classes["separator"]} />
+						<div className={classes["price-container"]}>
+							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+								249€
+								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+									&nbsp;HT&nbsp;
+								</Typography>
+								/ mois
+							</Typography>
+							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								Sans limite de collaborateurs
+							</Typography>
+						</div>
+						<div className={classes["button-container"]}>
+							{forfeitType !== EForfeitType.standard && (
+								<Button fullwidth variant={EButtonVariant.PRIMARY} disabled>
+									Abonnement Max Activé
+								</Button>
+							)}
+							{forfeitType === EForfeitType.standard && (
+								<Button fullwidth variant={EButtonVariant.GHOST}>
+									Améliorer mon abonnement
+								</Button>
+							)}
+						</div>
+					</div>
+				</div>
+				<div className={classes["actions-container"]}>
+					<Button variant={EButtonVariant.LINE}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
+							Arrêter l'abonnement
+						</Typography>
+					</Button>
+					<Button>Gérer la facturation</Button>
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}
diff --git a/src/pages/subscription/facturation/index.tsx b/src/pages/subscription/facturation/index.tsx
new file mode 100644
index 00000000..9bf0d2ac
--- /dev/null
+++ b/src/pages/subscription/facturation/index.tsx
@@ -0,0 +1,5 @@
+import SubscriptionFacturation from "@Front/Components/Layouts/Subscription/SubscriptionFacturation";
+
+export default function Route() {
+	return <SubscriptionFacturation />;
+}