✨ page existing client and new client

src/front/Components/DesignSystem/CheckBox/classes.module.scss

@@ -10,7 +10,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid var(green-flash);
+		border: 1px solid $green-flash;
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -23,7 +23,7 @@
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: var(green-flash);
+		background-color: $green-flash;
 		border-radius: 2px;
 		transform: scale(0);
 	}

src/front/Components/DesignSystem/RadioBox/classes.module.scss

@@ -11,7 +11,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid var(green-flash);
+		border: 1px solid $green-flash;
 		border-radius: 100px;
 		margin-right: 16px;
 		display: grid;
@@ -24,7 +24,7 @@
 		content: "";
 		width: 10px;
 		height: 10px;
-		background-color: var(green-flash);
+		background-color: $green-flash;
 		border-radius: 100px;
 		transform: scale(0);
 	}

src/front/Components/DesignSystem/RadioBox/index.tsx

@@ -7,6 +7,8 @@ type IProps = {
 	children: React.ReactNode;
 	name: string;
 	toolTip?: string;
+	defaultChecked?: boolean;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 export default class RadioBox extends React.Component<IProps> {
@@ -14,7 +16,7 @@ export default class RadioBox extends React.Component<IProps> {
 		return (
 			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
-					<input type="radio" name={this.props.name} />
+					<input type="radio" name={this.props.name} defaultChecked={this.props.defaultChecked} onChange={this.props.onChange} />
 					{this.props.children}
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>

src/front/Components/Layouts/AddClientToFolder/classes.module.scss

@@ -0,0 +1,22 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+
+    .radiobox-container{
+        margin: 32px 0;
+    }
+    .button-container{
+        margin-top: 24px;
+        :first-child{
+            margin-right: 32px;
+        }
+    }
+    .new-client{
+        >:not(:last-child){
+            margin-bottom: 24px;
+        }
+    }
+}

src/front/Components/Layouts/AddClientToFolder/index.tsx

@@ -0,0 +1,102 @@
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../Base";
+import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import { ActionMeta, MultiValue } from "react-select";
+import { IOption } from "@Front/Components/DesignSystem/Select";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Form from "@Front/Components/DesignSystem/Form";
+
+type IProps = {};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	isExistingClientSelected: boolean;
+	isNewClientSelected: boolean;
+	hasNewClientSelected: boolean;
+};
+export default class AddClientToFolder extends BasePage<IProps, IState>{
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+			isExistingClientSelected: true,
+			isNewClientSelected: false,
+			hasNewClientSelected: false,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
+		this.onNewClientSelected = this.onNewClientSelected.bind(this);
+		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		const selectOptions = [
+			{ value: "adazzdsqaad", label: "john Doe" },
+			{ value: "adazzqsdaad", label: "jane Doe" },
+			{ value: "adazzqsdaad", label: "Marcelino Doe" },
+		];
+		console.log("this.state.hasNewClientSelected", this.state.hasNewClientSelected)
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
+					<Form>
+						<div className={classes["radiobox-container"]}>
+							<RadioBox name="client" onChange={this.onExistingClientSelected} defaultChecked={this.state.isExistingClientSelected}>
+								<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
+							</RadioBox>
+							<RadioBox name="client" onChange={this.onNewClientSelected} defaultChecked={this.state.isNewClientSelected}>
+								<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
+							</RadioBox>
+						</div>
+
+
+						{this.state.isExistingClientSelected && <div className={classes["existing-client"]}>
+							<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
+							<div className={classes["button-container"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">Associer au dossier</Button>
+							</div>
+						</div>
+						}
+
+						{this.state.isNewClientSelected && <div className={classes["new-client"]}>
+							<InputField name="input field" fakeplaceholder="Nom" />
+							<InputField name="input field" fakeplaceholder="Prénom" />
+							<InputField name="input field" fakeplaceholder="E-mail" isEmail />
+							<InputField name="input field" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
+							<div className={classes["button-container"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button type="submit">Associer au dossier</Button>
+							</div>
+						</div>}
+					</Form>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onMutiSelectChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>): void {
+		console.log(newValue.length <= 0)
+		if (newValue.length <= 0) {
+			this.setState({ hasNewClientSelected: false });
+			return;
+		}
+		this.setState({ hasNewClientSelected: true });
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+
+	private onExistingClientSelected(): void {
+		this.setState({ isExistingClientSelected: true, isNewClientSelected: false });
+	}
+
+	private onNewClientSelected(): void {
+		this.setState({ isExistingClientSelected: false, isNewClientSelected: true });
+	}
+}

src/pages/dossier/ajouter-client.tsx

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