✨ Manage collaborators mocked

src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 
 type IProps = {
 	title: string;
@@ -14,6 +15,8 @@ type IProps = {
 	scrollTop: number | null;
 	isPadding?: boolean;
 	hasHeaderLinks: boolean;
+	hasBackArrow?: boolean;
+	backArrowUrl?: string;
 };
 type IState = {};
 
@@ -28,7 +31,14 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 		return (
 			<>
 				<Header isUserConnected={this.props.hasHeaderLinks} />
-				<div className={classNames(classes["root"], this.props.isPadding && classes["padding"])}>{this.props.children}</div>
+				<div className={classNames(classes["root"], this.props.isPadding && classes["padding"])}>
+					{this.props.hasBackArrow && (
+						<div className={classes["back-arrow-desktop"]}>
+							<BackArrow url={this.props.backArrowUrl ?? ""} />
+						</div>
+					)}
+					{this.props.children}
+				</div>
 				<Version />
 			</>
 		);

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

@@ -31,7 +31,7 @@ export default function SubscribeIllimity() {
 
 	return (
 		<>
-			<DefaultTemplate title="Nouvelle souscription">
+			<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<NavTab

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

@@ -38,7 +38,7 @@ export default function SubscribeStandard() {
 
 	return (
 		<>
-			<DefaultTemplate title="Nouvelle souscription">
+			<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<NavTab

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

@@ -33,6 +33,7 @@
 			display: flex;
 			flex-direction: column;
 			gap: 32px;
+			height: fit-content;
 
 			&[data-inactive="true"] {
 				border: 1px solid #e7e7e7;
@@ -62,6 +63,12 @@
 				flex-direction: column;
 				gap: 8px;
 			}
+
+			.button-container {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
 		}
 	}
 

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

@@ -30,8 +30,6 @@ export default function SubscriptionFacturation() {
 	}, [closeCancelSubscription, openConfirmation]);
 
 	const manageBilling = async () => {
-		console.log("handleSubmitPayment");
-
 		try {
 			const jwt = JwtService.getInstance().decodeJwt();
 			const subscription = await Subscriptions.getInstance().get({ officeId: jwt?.office_Id });
@@ -97,9 +95,21 @@ export default function SubscriptionFacturation() {
 								</Link>
 							)}
 							{forfeitType === EForfeitType.standard && (
+								<>
+									<Link
+										href={
+											Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Standard.props.path
+										}>
 										<Button fullwidth variant={EButtonVariant.PRIMARY}>
-									Gérer mes collaborateurs
+											Gérer mon abonnement
 										</Button>
+									</Link>
+									<Link href={Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path}>
+										<Button fullwidth variant={EButtonVariant.GHOST}>
+											Ajouter des collaborateurs
+										</Button>
+									</Link>
+								</>
 							)}
 						</div>
 					</div>

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

@@ -77,7 +77,7 @@ export default function SubscriptionInvite() {
 	};
 
 	return (
-		<DefaultTemplate title="Nouvelle souscription">
+		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			<div className={classes["root"]}>
 				<div className={classes["container"]}>
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>

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

@@ -0,0 +1,30 @@
+@import "@Themes/constants.scss";
+
+.root {
+	margin-top: 32px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		.collaborators-container {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+			margin-top: 24px;
+		}
+
+		.buttons-container {
+			display: flex;
+			gap: 32px;
+			max-width: 400px;
+			@media (max-width: $screen-s) {
+				flex-direction: column;
+				gap: 16px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,95 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import Form from "@Front/Components/DesignSystem/Form";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+
+export default function SubscriptionManageCollaborators() {
+	return (
+		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
+			<div className={classes["root"]}>
+				<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+					Choisissez les collaborateurs pour votre abonnement
+				</Typography>
+				<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+					7 sièges disponibles
+				</Typography>
+				<Form>
+					<div className={classes["collaborators-container"]}>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+							checked
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+							checked
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+							checked
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+						/>
+						<CheckBox
+							option={{
+								label: "Jean Dupont",
+								value: "Jean Dupont",
+							}}
+							name="collaborators"
+						/>
+					</div>
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
+						7 collaborateurs sélectionnés
+					</Typography>
+					<div className={classes["buttons-container"]}>
+						<Button variant={EButtonVariant.PRIMARY} fullwidth>
+							Enregistrer
+						</Button>
+						<Button variant={EButtonVariant.GHOST} fullwidth>
+							Annuler
+						</Button>
+					</div>
+				</Form>
+			</div>
+		</DefaultTemplate>
+	);
+}

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

@@ -8,7 +8,7 @@ import Link from "next/link";
 
 export default function SubscriptionNew() {
 	return (
-		<DefaultTemplate title="Nouvelle souscription">
+		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			<div className={classes["root"]}>
 				<div className={classes["top-container"]}>
 					<div className={classes["top-container-title"]}>

src/front/Config/Module/development.json

@@ -285,6 +285,13 @@
 							"labelKey": "invite"
 						}
 					},
+					"ManageCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/subscription/manage-collaborators",
+							"labelKey": "manage_collaborators"
+						}
+					},
 					"Manage": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/preprod.json

@@ -285,6 +285,13 @@
 							"labelKey": "invite"
 						}
 					},
+					"ManageCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/subscription/manage-collaborators",
+							"labelKey": "manage_collaborators"
+						}
+					},
 					"Manage": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/production.json

@@ -285,6 +285,13 @@
 							"labelKey": "invite"
 						}
 					},
+					"ManageCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/subscription/manage-collaborators",
+							"labelKey": "manage_collaborators"
+						}
+					},
 					"Manage": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/staging.json

@@ -285,6 +285,13 @@
 							"labelKey": "invite"
 						}
 					},
+					"ManageCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/subscription/manage-collaborators",
+							"labelKey": "manage_collaborators"
+						}
+					},
 					"Manage": {
 						"enabled": true,
 						"props": {

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

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