new page update client modal

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

@@ -2,6 +2,7 @@ import Image from "next/image";
 import React, { CSSProperties } from "react";
 
 import classes from "./classes.module.scss";
+import classNames from "classnames";
 
 export enum EButtonVariant {
 	PRIMARY = "primary",
@@ -21,6 +22,7 @@ type IProps = {
 	type?: "button" | "submit";
 	isloading?: string;
 	iconposition?: "left" | "right";
+	className?: string;
 };
 
 export default function Button(props: IProps) {
@@ -35,6 +37,7 @@ export default function Button(props: IProps) {
 		children,
 		icon,
 		iconstyle,
+		className = "",
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
@@ -46,7 +49,7 @@ export default function Button(props: IProps) {
 	delete attributes.iconstyle;
 	delete attributes.iconposition;
 	return (
-		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
+		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
 			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 			{children}
 			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}

src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss

@@ -10,6 +10,11 @@
 		flex: 1;
 	}
 
+	.sub-container {
+		flex: 1;
+		display: flex;
+	}
+
 	@media (max-width: $screen-s) {
 		flex-direction: column-reverse;
 		gap: 8px;

src/front/Components/DesignSystem/Modal/Confirm/index.tsx

@@ -2,10 +2,12 @@ import Button, { EButtonVariant } from "../../Button";
 import Modal, { IProps as IPropsModal } from "..";
 import classes from "./classes.module.scss";
 import React from "react";
+import Link from "next/link";
 
 type IProps = IPropsModal & {
 	onAccept?: () => void;
 	cancelText: string | JSX.Element;
+	cancelPath?: string;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
 	isConfirmButtonDisabled: boolean;
@@ -39,15 +41,29 @@ export default class Confirm extends React.Component<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["buttons-container"]}>
-				{this.props.showCancelButton && (
+				{this.props.showCancelButton &&
-					<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
+					(this.props.cancelPath ? (
-						{this.props.cancelText}
+						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
+							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
+								{this.props.cancelText}
+							</Button>
+						</Link>
+					) : (
+						<div className={classes["sub-container"]}>
+							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
+								{this.props.cancelText}
+							</Button>
+						</div>
+					))}
+				<div className={classes["sub-container"]}>
+					<Button
+						variant={EButtonVariant.PRIMARY}
+						onClick={this.props.onAccept}
+						disabled={this.props.isConfirmButtonDisabled}
+						fullwidth>
+						{this.props.confirmText}
 					</Button>
-				)}
+				</div>
-
-				<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={this.props.isConfirmButtonDisabled}>
-					{this.props.confirmText}
-				</Button>
 			</div>
 		);
 	}

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -49,9 +49,9 @@ export default class ClientSection extends React.Component<IProps, IState> {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
 			return (
-				<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
+				// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
-					<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
+				<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
-				</div>
+				// </div>
 			);
 		});
 		return output ?? null;

src/front/Components/Layouts/Folder/UpdateClient/index.tsx

@@ -10,20 +10,40 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
+import { ChangeEvent } from "react";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 
 type IProps = {
 	selectedFolderUid: string;
 };
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
+	inputNameValue: string;
+	inputFirstNameValue: string;
+	inputEmailValue: string;
+	inputPhoneNumberValue: string;
+	isOpenLeavingModal: boolean;
+	doesInputHaveValues: boolean;
 };
 class UpdateClientClass extends BasePage<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
 			selectedFolder: null,
+			inputNameValue: "",
+			inputFirstNameValue: "",
+			inputEmailValue: "",
+			inputPhoneNumberValue: "",
+			isOpenLeavingModal: false,
+			doesInputHaveValues: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.onChangeNameInput = this.onChangeNameInput.bind(this);
+		this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
+		this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
+		this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
+		this.openLeavingModal = this.openLeavingModal.bind(this);
+		this.closeLeavingModal = this.closeLeavingModal.bind(this);
 	}
 	public override render(): JSX.Element {
 		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
@@ -37,27 +57,78 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 
 					<Form className={classes["form"]}>
 						<div className={classes["content"]}>
-							<InputField name="input field" fakeplaceholder="Nom" />
+							<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} />
-							<InputField name="input field" fakeplaceholder="Prénom" />
+							<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput} />
-							<InputField name="input field" fakeplaceholder="E-mail" isEmail />
+							<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput} />
-							<InputField name="input field" fakeplaceholder="Numéro de téléphone" isPositiveNumber />
+							<InputField
+								name="input field"
+								fakeplaceholder="Numéro de téléphone"
+								isPositiveNumber
+								onChange={this.onChangePhoneNumberInput}
+							/>
 						</div>
 
 						<div className={classes["button-container"]}>
-							<Link href={backwardPath} className={classes["cancel-button"]}>
+							{!this.doesInputsHaveValues() ? (
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Link href={backwardPath} className={classes["cancel-button"]}>
-							</Link>
+									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								</Link>
+							) : (
+								<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}>
+									Annuler
+								</Button>
+							)}
 							<Button type="submit">Enregistrer</Button>
 						</div>
 					</Form>
+					<Confirm
+						isOpen={this.state.isOpenLeavingModal}
+						onClose={this.closeLeavingModal}
+						closeBtn
+						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+						cancelText={"Annuler"}
+						confirmText={"Quitter"}
+						cancelPath={backwardPath}>
+						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
+					</Confirm>
 				</div>
 			</DefaultNotaryDashboard>
 		);
 	}
+	private openLeavingModal(): void {
+		this.setState({ isOpenLeavingModal: true });
+	}
+
+	private closeLeavingModal(): void {
+		this.setState({ isOpenLeavingModal: false });
+	}
+
+	private onChangeNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputNameValue: event.target.value });
+	}
+
+	private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputFirstNameValue: event.target.value });
+	}
+	private onChangeEmailInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputEmailValue: event.target.value });
+	}
+	private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputPhoneNumberValue: event.target.value });
+	}
 
 	private onSelectedFolder(folder: IDashBoardFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
+
+	private doesInputsHaveValues(): boolean {
+		const doesInputsHaveValues: boolean =
+			this.state.inputNameValue !== "" ||
+			this.state.inputFirstNameValue !== "" ||
+			this.state.inputEmailValue !== "" ||
+			this.state.inputPhoneNumberValue !== "";
+		return doesInputsHaveValues;
+	}
 }
 
 export default function UpdateClient() {