✨ wip standard illimity

src/front/Components/Elements/NavTab/classes.module.scss

@@ -0,0 +1,25 @@
+.root {
+	nav {
+		display: flex;
+		gap: 32px;
+		.link {
+			cursor: pointer;
+			padding: 16px;
+			text-decoration: none;
+			border-bottom: 1px solid transparent;
+
+			&:hover {
+				border-bottom: 1px solid black;
+			}
+
+			&.active {
+				color: black;
+				border-bottom: 1px solid black;
+			}
+		}
+	}
+
+	.content {
+		margin-top: 24px;
+	}
+}

src/front/Components/Elements/NavTab/index.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import { useRouter } from "next/router";
+
+type ITabItem = {
+	label: string;
+	path: string;
+	activePaths?: string[];
+};
+
+type IProps = {
+	items: ITabItem[];
+};
+
+export default function NavTab(props: IProps) {
+	const router = useRouter();
+	return (
+		<div className={classes["root"]}>
+			<nav>
+				{props.items.map((item, index) => {
+					let isMatch = false;
+					if (item.activePaths) {
+						isMatch = item.activePaths.some((path) => router.pathname.includes(path));
+					} else {
+						isMatch = router.pathname.includes(item.path) ? true : false;
+					}
+					return (
+						<Link
+							key={item.path.toString()}
+							href={item.path}
+							className={classNames(classes["link"], isMatch && classes["active"])}>
+							<Typography key={index} typo={isMatch ? ITypo.P_SB_18 : ITypo.P_18}>
+								{item.label}
+							</Typography>
+						</Link>
+					);
+				})}
+			</nav>
+		</div>
+	);
+}

src/front/Components/Elements/NumberPicker/classes.module.scss

@@ -0,0 +1,2 @@
+.root {
+}

src/front/Components/Elements/NumberPicker/index.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	defaultValue: number;
+	onChange: (value: number) => void;
+	min?: number;
+	max?: number;
+	disabled?: boolean;
+};
+
+export default function NumberPicker(props: IProps) {
+	const { defaultValue, onChange, min, max, disabled } = props;
+	const [value, setValue] = useState(defaultValue);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		let value = parseInt(e.target.value);
+		if (min && value < min) {
+			value = min;
+		}
+		if (max && value > max) {
+			value = max;
+		}
+		setValue(value);
+		onChange(value);
+	};
+
+	const handleMinus = () => {
+		handleChange({ target: { value: value - 1 } } as any);
+	};
+
+	const handlePlus = () => {
+		handleChange({ target: { value: value + 1 } } as any);
+	};
+
+	return (
+		<div className={classes["root"]}>
+			<button onClick={handleMinus} disabled={min && value <= min ? true : false}>
+				-
+			</button>
+			<input type="number" value={value} onChange={handleChange} disabled={disabled} />
+			<button onClick={handlePlus} disabled={max && value >= max ? true : false}>
+				+
+			</button>
+		</div>
+	);
+}

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

@@ -0,0 +1,11 @@
+import { EForfeitType } from "../../SubscriptionFacturation";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	forfeitType: EForfeitType;
+};
+export default function SubscribeCheckoutTicket(props: IProps) {
+	const { forfeitType } = props;
+
+	return <div className={classes["root"]}></div>;
+}

src/front/Components/Layouts/Subscription/Subscribe/SubscribeIllimity/classes.module.scss

@@ -0,0 +1,25 @@
+@import "@Themes/constants.scss";
+
+.root {
+	max-width: 1024px;
+	display: flex;
+	gap: 104px;
+	.left {
+		display: flex;
+		gap: 40px;
+		flex-direction: column;
+		.infos-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			.line {
+				display: flex;
+				gap: 16px;
+			}
+		}
+	}
+
+	.right {
+		width: 372px;
+	}
+}

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

@@ -0,0 +1,55 @@
+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 CheckIcon from "@Assets/Icons/check.svg";
+import Image from "next/image";
+
+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}>
+						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>
+						</div>
+					</div>
+				</div>
+				<div className={classes["right"]}></div>
+			</div>
+		</DefaultTemplate>
+	);
+}

src/front/Components/Layouts/Subscription/Subscribe/SubscribeStandard/classes.module.scss

@@ -0,0 +1,25 @@
+@import "@Themes/constants.scss";
+
+.root {
+	max-width: 1024px;
+	display: flex;
+	gap: 104px;
+	.left {
+		display: flex;
+		gap: 40px;
+		flex-direction: column;
+		.infos-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			.line {
+				display: flex;
+				gap: 16px;
+			}
+		}
+	}
+
+	.right {
+		width: 372px;
+	}
+}

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

@@ -0,0 +1,51 @@
+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 CheckIcon from "@Assets/Icons/check.svg";
+import Image from "next/image";
+import NumberPicker from "@Front/Components/Elements/NumberPicker";
+
+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>
+						</div>
+					</div>
+				</div>
+				<div className={classes["right"]}></div>
+			</div>
+		</DefaultTemplate>
+	);
+}

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

@@ -7,7 +7,7 @@ import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 import MessageBox from "@Front/Components/Elements/MessageBox";
 
-enum EForfeitType {
+export enum EForfeitType {
 	"standard",
 	"unlimited",
 }

src/pages/subscription/subscribe/illimity/index.tsx

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

src/pages/subscription/subscribe/standard/index.tsx

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