format all front repo

.vscode/settings.json

@@ -31,5 +31,8 @@
     "rust-client.rustupPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rustup",
     "rust-client.rlsPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rls",
     "rust-client.disableRustup": true,
-    "rust-client.autoStartRls": false
+    "rust-client.autoStartRls": false,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

package-lock.json

@@ -21,6 +21,7 @@
 				"eslint-config-next": "13.2.4",
 				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
 				"next": "13.2.4",
+				"prettier": "^2.8.7",
 				"react": "18.2.0",
 				"react-dom": "18.2.0",
 				"react-select": "^5.7.2",
@@ -3506,6 +3507,20 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/prettier": {
+			"version": "2.8.7",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+			"integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
 		"node_modules/prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -6,7 +6,8 @@
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-    "lint": "next lint"
+		"lint": "next lint",
+		"format": "prettier --write src"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.10.6",
@@ -22,6 +23,7 @@
 		"eslint-config-next": "13.2.4",
 		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
 		"next": "13.2.4",
+		"prettier": "^2.8.7",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-select": "^5.7.2",
@@ -31,5 +33,3 @@
 		"typescript": "4.9.5"
 	}
 }
-
-

src/front/Api/Auth/IdNot/index.ts

@@ -17,9 +17,7 @@ export default class Auth extends BaseApiService {
 	public async getIdnotJwt(autorizationCode: string | string[]): Promise<any> {
 		const variables = FrontendVariables.getInstance();
 		const baseBackUrl =
-      variables.BACK_API_PROTOCOL +
+			variables.BACK_API_PROTOCOL + variables.BACK_API_HOST + (variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
-      variables.BACK_API_HOST +
-      (variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
 		const url = new URL(`${baseBackUrl}/api/v1/idnot-user/${autorizationCode}`);
 		try {
 			return await this.postRequest<any>(url);

src/front/Api/BaseApiService.ts

@@ -12,9 +12,7 @@ export default abstract class BaseApiService {
 		BaseApiService.baseUrl ??=
 			FrontendVariables.getInstance().BACK_API_PROTOCOL +
 			FrontendVariables.getInstance().BACK_API_HOST +
-      (FrontendVariables.getInstance().BACK_API_PORT
+			(FrontendVariables.getInstance().BACK_API_PORT ? ":" + FrontendVariables.getInstance().BACK_API_PORT : "") +
-        ? ":" + FrontendVariables.getInstance().BACK_API_PORT
-        : "") +
 			FrontendVariables.getInstance().BACK_API_ROOT_URL +
 			FrontendVariables.getInstance().BACK_API_VERSION;
 	}
@@ -45,24 +43,18 @@ export default abstract class BaseApiService {
 		return this.sendRequest<T>(request);
 	}
 
-  protected async postRequest<T>(
+	protected async postRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
-    body: { [key: string]: unknown } = {}
-  ) {
 		return this.sendRequest<T>(
 			async () =>
 				await fetch(url, {
 					method: "POST",
 					headers: this.buildHeaders(ContentType.JSON),
 					body: this.buildBody(body),
-        })
+				}),
 		);
 	}
 
-  protected async putRequest<T>(
+	protected async putRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
-    body: { [key: string]: unknown } = {}
-  ) {
 		const request = async () =>
 			await fetch(url, {
 				method: "PUT",
@@ -73,10 +65,7 @@ export default abstract class BaseApiService {
 		return this.sendRequest<T>(request);
 	}
 
-  protected async patchRequest<T>(
+	protected async patchRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
-    body: { [key: string]: unknown } = {}
-  ) {
 		const request = async () =>
 			await fetch(url, {
 				method: "PATCH",
@@ -87,10 +76,7 @@ export default abstract class BaseApiService {
 		return this.sendRequest<T>(request);
 	}
 
-  protected async deleteRequest<T>(
+	protected async deleteRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
-    body: { [key: string]: unknown } = {}
-  ) {
 		const request = async () =>
 			await fetch(url, {
 				method: "DELETE",
@@ -117,10 +103,7 @@ export default abstract class BaseApiService {
 		return this.processResponse<T>(response, request);
 	}
 
-  protected async processResponse<T>(
+	protected async processResponse<T>(response: Response, request: () => Promise<Response>): Promise<T> {
-    response: Response,
-    request: () => Promise<Response>
-  ): Promise<T> {
 		let responseJson: any | null;
 		try {
 			responseJson = await response.json();

src/front/Api/LeCoffreApi/Notary/Users/Users.ts

@@ -31,8 +31,7 @@ export default class Users extends BaseNotary {
 
 	public async getAuthorizationCode(): Promise<any> {
 		try {
-      const url =
+			const url = new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
-        new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
       client_id=4501646203F3EF67
       &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
       &scope=openid,profile,offline_access

src/front/Assets/docs/content.md

@@ -7,9 +7,7 @@ Then, add the tezoslink.net RPC endpoint to your prefered Tezos JS library.
 > i.e with [Sotez](https://github.com/AndrewKishino/sotez) :
 >
 > ```js
-> const sotez = new Sotez(
+> const sotez = new Sotez("https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>");
->   "https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>"
-> );
 > ```
 
 ## Networks

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

@@ -31,7 +31,7 @@ export default function Button(props: IProps) {
 		onClick,
 		children,
 		icon,
-		iconStyle
+		iconStyle,
 	} = props;
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };

src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss

@@ -6,20 +6,18 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-    &.PENDING{
+	&.PENDING {
 		border-color: $orange-soft;
 	}
-    &.VALIDATED{
+	&.VALIDATED {
 		border-color: $green-soft;
 	}
-    .valid-radius{
+	.valid-radius {
 		background-color: $green-flash;
 		padding: 6px;
 		border-radius: 20px;
 	}
-    .trash{
+	.trash {
 		cursor: pointer;
 	}
-
 }
-

src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx

@@ -13,8 +13,7 @@ type IProps = {
 		uid: Document["uid"];
 		document_type: Document["document_type"];
 		document_status: Document["document_status"];
-
+	};
-	}
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
 type IState = {};
@@ -25,30 +24,34 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
 	}
 	public override render(): JSX.Element {
-		return <div className={classNames(classes["root"], classes[this.props.document.document_status])}>
+		return (
+			<div className={classNames(classes["root"], classes[this.props.document.document_status])}>
 				<div>
 					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
 					<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
 				</div>
 				{this.renderIcon()}
-		</div>;
+			</div>
+		);
 	}
 
 	private renderIcon(): JSX.Element {
 		switch (this.props.document.document_status) {
 			case "VALIDATED":
-				return <div className={classes["valid-radius"]}>
+				return (
+					<div className={classes["valid-radius"]}>
 						<Image src={ValidIcon} alt="valid icon" />
 					</div>
+				);
 			case "PENDING":
-				return <WarningBadge />
+				return <WarningBadge />;
 			default:
-				return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal}/>;
+				return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal} />;
 		}
 	}
 
 	private onOpenDeletionModal(): void {
-		if(!this.props.openDeletionModal) return;
+		if (!this.props.openDeletionModal) return;
 		this.props.openDeletionModal(this.props.document.uid);
 	}
 }

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

@@ -9,23 +9,21 @@
 	justify-content: space-between;
 
 	.content {
-        display:grid;
+		display: grid;
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 		gap: 32px;
 		@media (max-width: $screen-l) {
 			grid-template-columns: 1fr 1fr;
-
 		}
 		@media (max-width: $screen-s) {
 			grid-template-columns: 1fr;
-
 		}
 
 		&.isSignleDescription {
 			grid-template-columns: 1fr;
 		}
 	}
-    .edit-icon{
+	.edit-icon {
 		margin-left: 48px;
 	}
 }

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

@@ -14,14 +14,15 @@ type IProps = {
 export default function FolderBoxInformation(props: IProps) {
 	const { isDescription = false } = props;
 
-	return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
+	return (
+		<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
 			<div className={classes["content"]}>
-			{isDescription ?
+				{isDescription ? (
 					<div className={classes["text-container"]}>
 						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
 						<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
 					</div>
-				:
+				) : (
 					<>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
@@ -40,10 +41,11 @@ export default function FolderBoxInformation(props: IProps) {
 							<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
 						</div>
 					</>
-			}
+				)}
 			</div>
 			<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
-	</div>;
+		</div>
+	);
 }
 
 function formatDate(date: Date | null): string {

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

@@ -9,7 +9,7 @@
 	border: 1px solid $grey-medium;
 	cursor: pointer;
 
-    &:hover{
+	&:hover {
 		background-color: $grey-medium;
 	}
 
@@ -18,7 +18,7 @@
 		justify-content: space-between;
 		align-items: center;
 
-        .warning{
+		.warning {
 			margin-left: 32px;
 		}
 	}

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

@@ -9,7 +9,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
 type IProps = {
 	folder: IDashBoardFolder;
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
-}
+};
 type IState = {};
 
 export default class FolderContainer extends React.Component<IProps, IState> {
@@ -19,13 +19,19 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 	}
 
 	public override render(): JSX.Element {
-		return <div className={classes["root"]} onClick={this.onSelectedFolder}>
+		return (
+			<div className={classes["root"]} onClick={this.onSelectedFolder}>
 				<div className={classes["left-side"]}>
 					<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
-				{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
+					{this.countPendingDocuments() > 0 && (
+						<div className={classes["warning"]}>
+							<WarningBadge />
+						</div>
+					)}
 				</div>
 				<Image alt="chevron" src={ChevronIcon} />
-		</div>;
+			</div>
+		);
 	}
 
 	private countPendingDocuments(): number {

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

@@ -14,14 +14,19 @@ type IState = {};
 
 export default class FolderList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				{this.props.folders.map((folder) => {
-				return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+					return (
+						<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
 							<Link href={"/dossier/".concat(folder.uid)}>
 								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
 							</Link>
 						</div>
-			})};
+					);
-		</div>;
+				})}
+				;
+			</div>
+		);
 	}
 }

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

@@ -24,22 +24,27 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 	}
 
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<div>
 					<div className={classes["searchbar"]}>
 						<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
 					</div>
-				<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} onCloseLeftSide={this.props.onCloseLeftSide}/>
+					<FolderList
+						folders={this.state.filteredFolders}
+						onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder}
+						onCloseLeftSide={this.props.onCloseLeftSide}
+					/>
 				</div>
 				<div>
-
 					<Button fullwidth={"true"}>Créer un dossier</Button>
 				</div>
-		</div>;
+			</div>
+		);
 	}
 
 	private filterFolders(folders: IDashBoardFolder[]): IDashBoardFolder[] {
-		this.setState({ filteredFolders: folders })
+		this.setState({ filteredFolders: folders });
 		return folders;
 	}
 }

src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss

@@ -2,11 +2,11 @@
 
 .root {
 	position: relative;
-	textarea{
+	textarea {
 		resize: none;
 		height: auto;
 		box-sizing: border-box;
-		font-family: 'Inter';
+		font-family: "Inter";
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;

src/front/Components/DesignSystem/Header/Notifications/index.tsx

@@ -17,7 +17,7 @@ type IState = {
 };
 
 export default class Notifications extends React.Component<IProps, IState> {
-	private removeOnToastChange: () => void = () => { };
+	private removeOnToastChange: () => void = () => {};
 
 	constructor(props: IProps) {
 		super(props);
@@ -38,7 +38,9 @@ export default class Notifications extends React.Component<IProps, IState> {
 					)}
 				</div>
 
-				{this.props.isModalOpen && <NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />}
+				{this.props.isModalOpen && (
+					<NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />
+				)}
 			</div>
 		);
 	}

src/front/Components/DesignSystem/Header/Profile/index.tsx

@@ -9,8 +9,7 @@ type IProps = {
 	openProfileModal: () => void;
 	closeProfileModal: () => void;
 };
-type IState = {
+type IState = {};
-};
 
 export default class Profile extends React.Component<IProps, IState> {
 	constructor(props: IProps) {

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

@@ -26,7 +26,7 @@ type IState = {
 };
 
 export default class Header extends React.Component<IProps, IState> {
-	private onWindowResize = () => { };
+	private onWindowResize = () => {};
 	private headerBreakpoint = 1300;
 
 	constructor(props: IProps) {
@@ -53,31 +53,40 @@ export default class Header extends React.Component<IProps, IState> {
 						<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
 					</Link>
 				</div>
-				{this.props.isUserConnected &&
+				{this.props.isUserConnected && (
 					<>
 						<Navigation />
 						<div className={classes["right-section"]}>
 							<div className={classes["notification-section"]}>
-								<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
+								<Notifications
+									isModalOpen={this.state.isNotificationMenuOpen}
+									openNotificationModal={this.openNotificationMenu}
+									closeNotificationModal={this.closeNotificationMenu}
+								/>
 							</div>
 							<div className={classes["profile-section"]}>
-								<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
+								<Profile
+									isModalOpen={this.state.isProfileMenuOpen}
+									closeProfileModal={this.closeProfileMenu}
+									openProfileModal={this.openProfileMenu}
+								/>
 							</div>
 							<div className={classes["burger-menu"]}>
-								<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
+								<BurgerMenu
+									isModalOpen={this.state.isBurgerMenuOpen}
+									closeBurgerMenu={this.closeBurgerMenu}
+									openBurgerMenu={this.openBurgerMenu}
+								/>
 							</div>
 						</div>
 					</>
-				}
+				)}
-
 			</div>
 		);
 	}
 
 	public override componentDidMount() {
-		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
+		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
-			this.onResize(window)
-		);
 	}
 
 	public override componentWillUnmount() {

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

@@ -9,12 +9,12 @@ type IState = {};
 type IFolderInformation = {
 	label: string;
 	value: string;
-}
+};
-
 
 export default class InformationBox extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				{/* {this.props.informations.map((information, key) => {
 				const output = <div className={classes["information"] } key={key}>
 					<span className={classes["label"]}>{information.label}</span>
@@ -22,6 +22,7 @@ export default class InformationBox extends React.Component<IProps, IState> {
 				</div>;
 				return output;
 			})}; */}
-		</div>;
+			</div>
+		);
 	}
 }

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

@@ -19,6 +19,5 @@ export default class LogOutButton extends React.Component<IProps, IState> {
 		);
 	}
 
-	private disconnect() {
+	private disconnect() {}
-	}
 }

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

@@ -13,14 +13,14 @@ type IState = {
 export default class Alert extends React.Component<IProps, IState> {
 	static defaultProps = {
 		closeText: "Ok",
-		...Modal.defaultProps
+		...Modal.defaultProps,
 	};
 
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
 			isOpen: this.props.isOpen ?? true,
-		}
+		};
 		this.onClose = this.onClose.bind(this);
 	}
 

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

@@ -19,7 +19,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		cancelText: "Cancel",
 		confirmText: "Confirm",
 		isConfirmButtonDisabled: false,
-		...Modal.defaultProps
+		...Modal.defaultProps,
 	};
 
 	public override render(): JSX.Element | null {
@@ -30,8 +30,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 				onClose={this.props.onClose}
 				header={this.props.header}
 				footer={this.footer()}
-				animationDelay={this.props.animationDelay}
+				animationDelay={this.props.animationDelay}>
-			>
 				{this.props.children}
 			</Modal>
 		);
@@ -40,7 +39,6 @@ export default class Confirm extends React.Component<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["buttons-container"]}>
-
 				{this.props.showCancelButton && (
 					<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
 						{this.props.cancelText}

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

@@ -28,7 +28,7 @@ type IState = {
 
 export default class Modal extends React.Component<IProps, IState> {
 	static defaultProps = {
-		animationDelay: 250
+		animationDelay: 250,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 	constructor(props: IProps) {
@@ -36,19 +36,23 @@ export default class Modal extends React.Component<IProps, IState> {
 		this.close = this.close.bind(this);
 
 		this.state = {
-			willClose: false
+			willClose: false,
 		};
 	}
 
 	public override render(): JSX.Element | null {
 		if (!this.props.isOpen) return null;
-		const onClick = (this.props.hasContainerClosable && this.close) || (() => { });
+		const onClick = (this.props.hasContainerClosable && this.close) || (() => {});
 		return (
-			<div ref={this.rootRefElement} className={classes["root"]} data-side-background={this.props.withSideBackground} data-will-close={this.state.willClose.toString()}>
+			<div
+				ref={this.rootRefElement}
+				className={classes["root"]}
+				data-side-background={this.props.withSideBackground}
+				data-will-close={this.state.willClose.toString()}>
 				<div className={classes["background"]} onClick={this.close} />
 				<div
 					className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
-					onClick={onClick} >
+					onClick={onClick}>
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@@ -73,12 +77,12 @@ export default class Modal extends React.Component<IProps, IState> {
 
 	protected close() {
 		if (this.state.willClose) return;
-		this.setState({ willClose: true })
+		this.setState({ willClose: true });
 		window.setTimeout(() => {
 			this.setState({
-				willClose: false
+				willClose: false,
-			})
+			});
-			this.props.onClose()
+			this.props.onClose();
-		}, this.props.animationDelay)
+		}, this.props.animationDelay);
 	}
 }

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

@@ -11,9 +11,8 @@
 		border: 1px solid $grey-medium;
 		background-color: transparent;
 
-		&.active{
+		&.active {
 			padding: 16px 24px;
-
 		}
 		.label {
 			font-family: var(--font-primary);
@@ -32,7 +31,7 @@
 			border: none;
 			width: 100%;
 
-			>div {
+			> div {
 				width: 100%;
 			}
 		}

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

@@ -7,7 +7,6 @@ import { IOption } from "../Select";
 import Typography, { ITypo } from "../Typography";
 import classNames from "classnames";
 
-
 type IProps = {
 	options: IOption[];
 	label?: string | JSX.Element;
@@ -26,13 +25,13 @@ type IState = {
 export default class MultiSelect extends React.Component<IProps, IState> {
 	public static defaultProps: Partial<IProps> = {
 		placeholder: "Sélectionner une option...",
-	}
+	};
 
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
-			isSelectedOption: this.props.defaultValue ? true : false
+			isSelectedOption: this.props.defaultValue ? true : false,
-		}
+		};
 		this.onChange = this.onChange.bind(this);
 		this.onEmptyResearch = this.onEmptyResearch.bind(this);
 	}
@@ -41,13 +40,13 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
 					{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
-					{this.state.isSelectedOption &&
+					{this.state.isSelectedOption && (
 						<>
-							< Typography typo={ITypo.NAV_INPUT_16}>
+							<Typography typo={ITypo.NAV_INPUT_16}>
 								<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
 							</Typography>
 						</>
-					}
+					)}
 					<div className={classes["input-container"]}>
 						<ReactSelect
 							placeholder={this.props.placeholder}
@@ -63,17 +62,16 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 						/>
 					</div>
 				</div>
-			</div >
+			</div>
 		);
 	}
 
 	private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
 		this.props.onChange && this.props.onChange(newValue, actionMeta);
 		this.setState({ isSelectedOption: newValue.length > 0 });
-
 	}
 
-	private onEmptyResearch(){
+	private onEmptyResearch() {
-		return "Aucune option correspondante"
+		return "Aucune option correspondante";
 	}
 }

src/front/Components/DesignSystem/MultiSelect/styles.tsx

@@ -31,7 +31,7 @@ export const styles = {
 		fontSize: "16px",
 		lineHeight: "22px",
 		color: "#939393",
-		letter: "0.5 px"
+		letter: "0.5 px",
 	}),
 	multiValue: (provided: any) => ({
 		...provided,
@@ -65,13 +65,12 @@ export const styles = {
 	}),
 	indicatorSeparator: () => ({
 		display: "none",
-
 	}),
 	menu: (provided: any) => ({
 		...provided,
 		position: "static",
 		border: "0",
-		boxShadow: "none"
+		boxShadow: "none",
 	}),
 	menuList: (provided: any) => ({
 		...provided,
@@ -87,7 +86,7 @@ export const styles = {
 		">svg": {
 			width: "16px",
 			height: "16px",
-		}
+		},
 	}),
 	indicatorsContainer: (provided: any) => ({
 		...provided,
@@ -99,4 +98,3 @@ export const styles = {
 		fontSize: "16px",
 	}),
 };
-

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx

@@ -6,12 +6,11 @@ type IProps = {
 	percentage: number;
 };
 export default class ProgressBar extends React.Component<IProps> {
-
 	public override render(): JSX.Element {
-		const quantity = (this.props.percentage.toFixed(2)).toString().concat("%")
+		const quantity = this.props.percentage.toFixed(2).toString().concat("%");
 		return (
 			<div className={classes["root"]}>
-				<div className={classes["progress"]} style={{ width: quantity }} >
+				<div className={classes["progress"]} style={{ width: quantity }}>
 					<Typography typo={ITypo.P_16}>
 						<div className={classes["percentage"]}>{quantity}</div>
 					</Typography>

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

@@ -11,7 +11,9 @@ type IProps = {
 export default class QuantityProgressBar extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		let numerator: number = this.props.currentNumber;
-		if (this.props.currentNumber > this.props.total) { numerator = this.props.total }
+		if (this.props.currentNumber > this.props.total) {
+			numerator = this.props.total;
+		}
 
 		const percentage = (numerator / this.props.total) * 100;
 		return (

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

@@ -21,7 +21,7 @@
 		margin-left: 8px;
 		padding: 24px 0;
 		width: 100%;
-        font-family: 'Inter';
+		font-family: "Inter";
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;

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

@@ -13,7 +13,6 @@ type IState = {
 	hasValue: boolean;
 };
 
-
 export default class SearchBar extends React.Component<IProps, IState> {
 	public constructor(props: IProps) {
 		super(props);
@@ -24,15 +23,21 @@ export default class SearchBar extends React.Component<IProps, IState> {
 		this.onChange = this.onChange.bind(this);
 	}
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<Image src={LoopIcon} alt="Loop icon" />
-			{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
+				{!this.state.hasValue && (
+					<Typography typo={ITypo.P_ERR_18}>
+						<div className={classes["fake-placeholder"]}>Select</div>
+					</Typography>
+				)}
 				<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
-		</div>;
+			</div>
+		);
 	}
 
 	private onChange(event: React.ChangeEvent<HTMLInputElement>) {
-		const hasValue = event.target.value.length > 0
+		const hasValue = event.target.value.length > 0;
 		this.doesInputHaveValue(hasValue);
 		if (!this.props.onChange) return;
 		this.props.onChange(this.filterFolders(event));
@@ -43,7 +48,9 @@ export default class SearchBar extends React.Component<IProps, IState> {
 	}
 
 	private filterFolders(event: React.ChangeEvent<HTMLInputElement>) {
-		const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
+		const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) =>
+			folder.folder_number.includes(event.target.value),
+		);
 		return filteredFolders;
 	}
 }

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

@@ -21,7 +21,7 @@
 			border-radius: 8px 0 0 8px;
 		}
 
-		.container-input chevron-icon{
+		.container-input chevron-icon {
 			display: flex;
 			align-items: center;
 
@@ -113,12 +113,12 @@
 		align-items: center;
 		margin-right: 11px;
 
-		>svg {
+		> svg {
 			height: 20px;
 			margin-right: 11px;
 		}
 
-		>img {
+		> img {
 			height: 20px;
 			width: 20px;
 		}

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

@@ -31,7 +31,7 @@ type IState = {
 export default class Select extends React.Component<IProps, IState> {
 	private contentRef = React.createRef<HTMLUListElement>();
 	private rootRef = React.createRef<HTMLDivElement>();
-	private removeOnresize = () => { };
+	private removeOnresize = () => {};
 
 	constructor(props: IProps) {
 		super(props);
@@ -67,7 +67,6 @@ export default class Select extends React.Component<IProps, IState> {
 								</Typography>
 							</div>
 						</>
-
 					</div>
 					<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
 				</label>
@@ -82,14 +81,11 @@ export default class Select extends React.Component<IProps, IState> {
 					{this.props.options.map((option, index) => (
 						<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}>
 							<div className={classes["token-icon"]}>{option.icon}</div>
-							<Typography typo={ITypo.P_18}>
+							<Typography typo={ITypo.P_18}>{option.label}</Typography>
-								{option.label}
-							</Typography>
 						</li>
 					))}
 				</ul>
 
-
 				{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
 			</div>
 		);

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

@@ -16,18 +16,19 @@ type IState = {
 	event: React.MouseEvent<HTMLElement> | null;
 };
 
-const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
-	<TooltipMUI {...props} classes={{ popper: className }} />
+	({ theme }) => ({
-  ))(({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
 			backgroundColor: "var(--colormerdum)",
 			color: "var(--colormerdum)",
 			//boxShadow: theme.shadows[1],
 			fontSize: 11,
-	},[`& .${tooltipClasses.arrow}`]: {
+		},
+		[`& .${tooltipClasses.arrow}`]: {
 			// color: theme.palette.common.black,
 		},
-  }));
+	}),
+);
 
 export default class Tooltip extends React.Component<IProps, IState> {
 	static defaultProps: Partial<IProps> = {
@@ -41,9 +42,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<LightTooltip title={this.props.text} placement="top" arrow>
-				<span
+				<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
-					className={this.props.className}
-					style={!this.props.isNotFlex ? { display: "flex" } : {}}>
 					<Image src={ToolTipIcon} alt="toolTip icon" />
 				</span>
 			</LightTooltip>

src/front/Components/DesignSystem/UserFolder/DocumentList/classes.module.scss

@@ -2,10 +2,10 @@
 
 .root {
 	width: 100%;
-    .title{
+	.title {
 		margin-bottom: 8px;
 	}
-    .content{
+	.content {
 		display: grid;
 		gap: 16px;
 		margin-top: 32px;

src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx

@@ -7,28 +7,34 @@ import DocumentNotary from "../../Document/DocumentNotary";
 type IProps = {
 	title: string;
 	subtitle?: string;
-	documents: {
+	documents:
+		| {
 				uid: Document["uid"];
 				document_type: Document["document_type"];
 				document_status: Document["document_status"];
-
+		  }[]
-	}[] | null;
+		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;
 };
 type IState = {};
 
 export default class DocumentList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<div className={classes["title"]}>
 					<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
 				</div>
 				<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
 				<div className={classes["content"]}>
-				{this.props.documents && this.props.documents.map((document) => {
+					{this.props.documents &&
-					return <DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal}/>
+						this.props.documents.map((document) => {
+							return (
+								<DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
+							);
 						})}
 				</div>
-		</div>;
+			</div>
+		);
 	}
 }

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss

@@ -17,7 +17,6 @@
 			grid-template-columns: 1fr 1fr;
 			gap: 32px;
 		}
-
 	}
 
 	.icons {

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx

@@ -8,18 +8,19 @@ import WarningBadge from "../../WarningBadge";
 
 type IProps = {
 	contact: {
-		first_name: Contact["first_name"],
+		first_name: Contact["first_name"];
-		last_name: Contact["last_name"],
+		last_name: Contact["last_name"];
-		phone_number: Contact["phone_number"],
+		phone_number: Contact["phone_number"];
-		cell_phone_number: Contact["cell_phone_number"],
+		cell_phone_number: Contact["cell_phone_number"];
-		email: Contact["email"],
+		email: Contact["email"];
-	}
+	};
 };
 type IState = {};
 
 export default class UserFolderHeader extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<div className={classes["content"]}>
 					<div className={classes["container"]}>
 						<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
@@ -33,7 +34,10 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 
 					<div className={classes["container"]}>
 						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
-					<Typography typo={ITypo.P_18}>{this.formatPhoneNumber(this.props.contact.phone_number) ?? this.formatPhoneNumber(this.props.contact.cell_phone_number)}</Typography>
+						<Typography typo={ITypo.P_18}>
+							{this.formatPhoneNumber(this.props.contact.phone_number) ??
+								this.formatPhoneNumber(this.props.contact.cell_phone_number)}
+						</Typography>
 					</div>
 
 					<div className={classes["container"]}>
@@ -43,15 +47,16 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 				</div>
 				<div className={classes["icons"]}>
 					<WarningBadge />
-				<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick}/>
+					<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
 				</div>
-		</div>;
+			</div>
+		);
 	}
 
 	private formatPhoneNumber(phoneNumber: string): string {
 		if (!phoneNumber) return "";
-		const output = phoneNumber.split('').map((char, index) => {
+		const output = phoneNumber.split("").map((char, index) => {
-			if(index%2) return char + " ";
+			if (index % 2) return char + " ";
 			return char;
 		});
 		return output.join("");

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

@@ -8,12 +8,12 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classNames from "classnames";
 import DocumentList from "./DocumentList";
 import Button, { EButtonVariant } from "../Button";
-import PlusIcon from "@Assets/Icons/plus.svg"
+import PlusIcon from "@Assets/Icons/plus.svg";
 import Confirm from "../Modal/Confirm";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 
 type IProps = {
-	customer: Customer
+	customer: Customer;
 	animationDelay?: number;
 	folder: IDashBoardFolder;
 };
@@ -25,7 +25,7 @@ type IState = {
 
 export default class UserFolder extends React.Component<IProps, IState> {
 	static defaultProps = {
-		animationDelay: 300
+		animationDelay: 300,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 
@@ -34,21 +34,20 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		this.state = {
 			isOpen: false,
 			isOpenDeletionModal: false,
-			willClose: false
+			willClose: false,
 		};
 		this.toggleOpen = this.toggleOpen.bind(this);
 		this.closeDeletionModal = this.closeDeletionModal.bind(this);
 		this.openDeletionModal = this.openDeletionModal.bind(this);
 		this.openComponent = this.openComponent.bind(this);
 		this.closeComponent = this.closeComponent.bind(this);
-
 	}
 	public override render(): JSX.Element {
-
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
 
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<Confirm
 					isOpen={this.state.isOpenDeletionModal}
 					onClose={this.closeDeletionModal}
@@ -60,25 +59,45 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.toggleOpen}>
-				<UserFolderHeader contact={this.props.
+					<UserFolderHeader contact={this.props.customer.contact} />
-					customer.contact} />
+					<Image
-				<Image src={ChevronIcon} alt="chevron open close" className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])} onClick={this.toggleOpen} />
+						src={ChevronIcon}
+						alt="chevron open close"
+						className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
+						onClick={this.toggleOpen}
+					/>
 				</div>
 
-			{this.state.isOpen &&
+				{this.state.isOpen && (
 					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
-					<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={this.calculateDocumentsPercentageProgress()} />
+						<QuantityProgressBar
+							title="Complétion du dossier"
+							total={100}
+							currentNumber={this.calculateDocumentsPercentageProgress()}
+						/>
 						<div className={classes["content"]}>
-						<DocumentList documents={documentsAsked} title="Documents demandés" openDeletionModal={this.openDeletionModal} />
+							<DocumentList
-						<DocumentList documents={otherDocuments} title="Documents à valider / validés" subtitle="Vous avez des documents à valider." openDeletionModal={this.openDeletionModal} />
+								documents={documentsAsked}
+								title="Documents demandés"
+								openDeletionModal={this.openDeletionModal}
+							/>
+							<DocumentList
+								documents={otherDocuments}
+								title="Documents à valider / validés"
+								subtitle="Vous avez des documents à valider."
+								openDeletionModal={this.openDeletionModal}
+							/>
 						</div>
 						<div className={classes["button-container"]}>
-						<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Demander un autre document </Button>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Demander un autre document{" "}
+							</Button>
 							<Button>Envoyer un mail de demande de documents</Button>
 						</div>
 					</div>
-			}
+				)}
-		</div>;
+			</div>
+		);
 	}
 
 	public override componentDidUpdate(): void {
@@ -94,10 +113,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	private getDocumentsByStatus(status: string): Document[] | null {
 		if (!this.props.customer.documents) return null;
-		return this.props.customer.documents.filter((document) => document.document_status === status && document.folder.uid === this.props.folder.uid);
+		return this.props.customer.documents.filter(
+			(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
+		);
 	}
 
-
 	// Get all documents Validated, pending
 	private getValidatedAndPendindDocuments(): Document[] | null {
 		const pendingDocuments = this.getDocumentsByStatus("PENDING");
@@ -117,40 +137,37 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	private toggleOpen(): void {
 		if (this.state.isOpen) {
 			this.closeComponent();
-		}
+		} else {
-		else {
 			this.openComponent();
 		}
 	}
 
 	private openComponent(): void {
 		this.setState({
-			isOpen: true
+			isOpen: true,
 		});
 	}
 
 	private closeComponent(): void {
 		if (this.state.willClose) return;
-		this.setState({ willClose: true })
+		this.setState({ willClose: true });
 		window.setTimeout(() => {
 			this.setState({
 				isOpen: false,
-				willClose: false
+				willClose: false,
 			});
-		}, this.props.animationDelay)
+		}, this.props.animationDelay);
 	}
 
 	private openDeletionModal(uid: string): void {
 		// TODO: call API to delete document
 		this.setState({
-			isOpenDeletionModal: true
+			isOpenDeletionModal: true,
 		});
 	}
 	private closeDeletionModal(): void {
 		this.setState({
-			isOpenDeletionModal: false
+			isOpenDeletionModal: false,
-		})
+		});
 	}
-
-
 }

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

@@ -8,8 +8,10 @@ type IState = {};
 
 export default class WarningBadge extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
+			<div className={classes["root"]}>
 				<Image src={WarningIcon} alt="warning icon" />
-		</div>;
+			</div>
+		);
 	}
 }

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

@@ -42,7 +42,6 @@ export default class InputField extends React.Component<IProps> {
 						{this.props.inputStatus === "success" && <Image alt="success icon" src={SuccessIcon} />}
 						{this.props.inputStatus === "error" && <Image alt="error icon" src={ErrorIcon} />}
 					</div>
-
 				</div>
 				{this.props.errorMsg && <div className={classes["errorMsg"]}>{this.props.errorMsg}</div>}
 			</>

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

@@ -27,9 +27,7 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 				<Header isUserConnected={false} />
 				<div className={classes["content"]}>
 					<div className={classes["sides"]}>
-						<div className={classes["side-content"]}>
+						<div className={classes["side-content"]}>{this.props.children}</div>
-							{this.props.children}
-						</div>
 					</div>
 					<div className={classNames(classes["sides"], classes["image-container"])}>
 						<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss

@@ -26,7 +26,6 @@
 					min-width: 389px;
 				}
 			}
-
 		}
 
 		.closable-left-side {
@@ -44,7 +43,6 @@
 				display: none;
 			}
 
-
 			.chevron-icon {
 				margin-top: 21px;
 				transform: rotate(180deg);

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

@@ -1,15 +1,15 @@
-import 'reflect-metadata';
+import "reflect-metadata";
 import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
-import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
-import { OfficeFolder } from 'le-coffre-resources/dist/Customer';
+import { OfficeFolder } from "le-coffre-resources/dist/Customer";
 import chevronIcon from "@Assets/Icons/chevron.svg";
-import Image from 'next/image';
+import Image from "next/image";
-import classNames from 'classnames';
+import classNames from "classnames";
-import WindowStore from '@Front/Stores/WindowStore';
+import WindowStore from "@Front/Stores/WindowStore";
 type IProps = {
 	title: string;
 	children?: ReactNode;
@@ -25,14 +25,14 @@ export type IDashBoardFolder = {
 	uid: OfficeFolder["uid"];
 	name: OfficeFolder["name"];
 	folder_number: OfficeFolder["folder_number"];
-	documents?: OfficeFolder["documents"]
+	documents?: OfficeFolder["documents"];
 	description: OfficeFolder["description"];
 	deed: OfficeFolder["deed"];
 	created_at: OfficeFolder["created_at"];
 	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
 };
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
-	private onWindowResize = () => { };
+	private onWindowResize = () => {};
 	public static defaultProps = {
 		scrollTop: 0,
 	};
@@ -49,16 +49,19 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 	}
 
 	public override render(): JSX.Element {
-
 		return (
 			<div className={classes["root"]}>
 				<Header isUserConnected={true} />
 				<div className={classes["content"]}>
 					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
-						<FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder} onCloseLeftSide={this.onCloseLeftSide} />
+						<FolderListContainer
+							folders={this.state.folders}
+							onSelectedFolder={this.props.onSelectedFolder}
+							onCloseLeftSide={this.onCloseLeftSide}
+						/>
 					</div>
 					<div className={classNames(classes["closable-left-side"])}>
-						<Image alt='open side menu' src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
+						<Image alt="open side menu" src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
 					</div>
 					<div className={classes["right-side"]}>{this.props.children}</div>
 				</div>
@@ -68,9 +71,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 	}
 
 	public override componentDidMount(): void {
-		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
+		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
-			this.onResize(window)
-		);
 	}
 	public override componentWillUnmount() {
 		this.onWindowResize();

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
-import 'reflect-metadata';
+import "reflect-metadata";
 
 type IProps = {
 	title: string;

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

@@ -4,18 +4,22 @@
 	display: flex;
 	flex-direction: column;
 	min-height: 100%;
+	align-items: flex-start;
 
-    .radiobox-container{
+	.radiobox-container {
 		margin: 32px 0;
 	}
-    .button-container{
+
+	.button-container {
 		margin-top: 24px;
-        :first-child{
+
+		:first-child {
 			margin-right: 32px;
 		}
 	}
-    .new-client{
+
-        >:not(:last-child){
+	.new-client {
+		> :not(:last-child) {
 			margin-bottom: 24px;
 		}
 	}

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

@@ -9,6 +9,7 @@ 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";
+import ChevonIcon from "@Assets/icons/chevron.svg";
 
 type IProps = {};
 type IState = {
@@ -17,7 +18,7 @@ type IState = {
 	isNewClientSelected: boolean;
 	hasNewClientSelected: boolean;
 };
-export default class AddClientToFolder extends BasePage<IProps, IState>{
+export default class AddClientToFolder extends BasePage<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -41,10 +42,16 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
+					<Button icon={ChevonIcon} variant={EButtonVariant.LINE}>
+						Retour
+					</Button>
 					<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}>
+							<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}>
@@ -52,17 +59,20 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 							</RadioBox>
 						</div>
 
-
+						{this.state.isExistingClientSelected && (
-						{this.state.isExistingClientSelected && <div className={classes["existing-client"]}>
+							<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>
+									<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
+										Associer au dossier
+									</Button>
 								</div>
 							</div>
-						}
+						)}
 
-						{this.state.isNewClientSelected && <div className={classes["new-client"]}>
+						{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 />
@@ -71,7 +81,8 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
 									<Button type="submit">Associer au dossier</Button>
 								</div>
-						</div>}
+							</div>
+						)}
 					</Form>
 				</div>
 			</DefaultNotaryDashboard>

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

@@ -12,7 +12,7 @@
 		display: inline-flex;
 	}
 
-	.folder-conatainer{
+	.folder-conatainer {
-		width: 389px ;
+		width: 389px;
 	}
 }

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -140,7 +140,7 @@ export const customer2: Customer = {
 	created_at: new Date(),
 	updated_at: new Date(),
 	status: ECustomerStatus.VALIDATED,
-  documents: [document, documentPending, documentDeposited, ],
+	documents: [document, documentPending, documentDeposited],
 };
 
 export const folderWithPendingDocument: OfficeFolder = {
@@ -234,7 +234,6 @@ export const document2: Document = {
 	created_at: new Date(),
 };
 
-
 export const folders: OfficeFolder[] = [
 	folderWithPendingDocument,
 	folderWithPendingDocument1,

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

@@ -13,7 +13,7 @@ import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import "reflect-metadata";
 import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
-import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData"
+import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData";
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
 import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
@@ -28,7 +28,6 @@ type IState = {
 type IProps = {};
 
 export default class DesignSystem extends BasePage<IProps, IState> {
-
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -39,18 +38,15 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 		this.onSelectedOption = this.onSelectedOption.bind(this);
 	}
 
-
 	public override render(): JSX.Element {
-
 		const selectOptions: IOption[] = [
 			{ value: "1", label: "Divorce" },
 			{ value: "2", label: "Succession" },
 			{ value: "3", label: "Vente immobilière" },
-		]
+		];
 		return (
 			<DefaultTemplate title={"HomePage"}>
 				<div className={classes["root"]}>
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H1}>Website design System</Typography>
@@ -174,7 +170,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							</div>
 						</div>
 						<div className={classes["sub-section"]}>
-
 							<Typography typo={ITypo.P_16}>Folder with document waiting for being validate</Typography>
 							<div className={classes["folder-conatainer"]}>
 								<FolderContainer folder={folderWithPendingDocument} />
@@ -188,7 +183,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 						<div className={classes["sub-section"]}>
 							<div className={classes["folder-conatainer"]}>
-								<Select options={selectOptions} onChange={this.onSelectedOption} placeholder={"Type d’acte"} selectedOption={this.state.selectedOption} />
+								<Select
+									options={selectOptions}
+									onChange={this.onSelectedOption}
+									placeholder={"Type d’acte"}
+									selectedOption={this.state.selectedOption}
+								/>
 							</div>
 						</div>
 					</div>
@@ -236,7 +236,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 					</div>
 
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>Document SearchBar</Typography>
@@ -254,8 +253,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							<FolderList folders={folders} />
 						</div>
 					</div>
-
-
 				</div>
 			</DefaultTemplate>
 		);

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

@@ -65,7 +65,7 @@
 				}
 			}
 		}
-        .modal-title{
+		.modal-title {
 			margin-bottom: 24px;
 		}
 	}

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

@@ -15,7 +15,7 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
 };
-export default class Folder extends BasePage<IProps, IState>{
+export default class Folder extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -73,7 +73,9 @@ export default class Folder extends BasePage<IProps, IState>{
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								Veuillez sélectionner un dossier.
+							</Typography>
 						</div>
 					</div>
 				</div>

src/front/Components/Layouts/FolderInformation/ClientSection/classes.module.scss

@@ -3,18 +3,17 @@
 .root {
 	width: 100%;
 	padding-bottom: 32px;
-    .no-client{
+	.no-client {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
 		padding: 72px;
-        .title{
+		.title {
 			margin-bottom: 16px;
 		}
-
 	}
-    .client{
+	.client {
 		display: grid;
 		gap: 32px;
 	}

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

@@ -14,29 +14,36 @@ type IState = {};
 
 export default class ClientSection extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			{this.doesFolderHaveCustomer() ?
+			<div className={classes["root"]}>
-				<div className={classes["client"]}>
+				{this.doesFolderHaveCustomer() ? (
-					{this.renderCustomerFolders()}
+					<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
-				</div>
+				) : (
-				:
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
 							<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
 						</div>
 						<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
-					<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Ajouter un client</Button>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Ajouter un client
+							</Button>
 						</Link>
-				</div>}
+					</div>
-		</div>;
+				)}
+			</div>
+		);
 	}
 
 	private renderCustomerFolders() {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
 			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}><UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} /></div>;
+			return (
-		})
+				<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
+					<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
+				</div>
+			);
+		});
 		return output ?? null;
 	}
 

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

@@ -65,7 +65,7 @@
 				}
 			}
 		}
-        .modal-title{
+		.modal-title {
 			margin-bottom: 24px;
 		}
 	}

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

@@ -18,7 +18,7 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
 };
-class FolderInformationClass extends BasePage<IPropsClass, IState>{
+class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	public constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
@@ -35,13 +35,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					{this.state.selectedFolder
+					{this.state.selectedFolder ? (
-						?
 						<div className={classes["folder-informations"]}>
 							<div className={classes["folder-header"]}>
 								<div className={classes["header"]}>
 									<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
+									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+										Modifier les collaborateurs
+									</Button>
 								</div>
 								<FolderBoxInformation folder={this.state.selectedFolder} />
 								<div className={classes["second-box"]}>
@@ -56,7 +57,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 
 							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>Archiver le dossier</Button>
+								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+									Archiver le dossier
+								</Button>
 								<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
 							</div>
 							<Confirm
@@ -72,13 +75,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 								<InputField name="input field" fakeplaceholder="Description" textarea />
 							</Confirm>
 						</div>
-						:
+					) : (
 						<div className={classes["no-folder-selected"]}>
 							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 							<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									Veuillez sélectionner un dossier.
+								</Typography>
 							</div>
-						</div>}
+						</div>
+					)}
 				</div>
 			</DefaultNotaryDashboard>
 		);

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

@@ -15,21 +15,13 @@ export default class LoginClass extends BasePage {
 				<div className={classes["root"]}>
 					<Image alt="coffre" src={CoffreIcon} />
 					<Typography typo={ITypo.H1}>
-            <div className={classes["title"]}>
+						<div className={classes["title"]}>Connexion espace professionnel</div>
-              Connexion espace professionnel
-            </div>
 					</Typography>
-          <Button onClick={this.redirectUserOnConnection}>
+					<Button onClick={this.redirectUserOnConnection}>S’identifier avec ID.not</Button>
-            S’identifier avec ID.not
-          </Button>
 					<Typography typo={ITypo.P_18}>
-            <div className={classes["forget-password"]}>
+						<div className={classes["forget-password"]}>Vous n’arrivez pas à vous connecter ?</div>
-              Vous n’arrivez pas à vous connecter ?
-            </div>
 					</Typography>
-          <Button variant={EButtonVariant.LINE}>
+					<Button variant={EButtonVariant.LINE}>Contacter l’administrateur</Button>
-            Contacter l’administrateur
-          </Button>
 				</div>
 			</DefaultDoubleSidePage>
 		);
@@ -38,9 +30,7 @@ export default class LoginClass extends BasePage {
 	private redirectUserOnConnection() {
 		const variables = FrontendVariables.getInstance();
 		const baseFronturl =
-      variables.BACK_API_PROTOCOL +
+			variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST + (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
-      variables.FRONT_APP_HOST +
-      (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
 		const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
 		const clientId = variables.IDNOT_CLIENT_ID;
 		const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;

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

@@ -14,7 +14,7 @@ import Auth from "@Front/Api/Auth/IdNot";
 import Folder from "../Folder";
 import LoginClass from "../Login";
 
- type IPropsClass = {};
+type IPropsClass = {};
 
 // type IStateClass = {};
 
@@ -86,5 +86,5 @@ export default function LoginCallBack(props: IPropsClass) {
 		getIdNotJwt();
 		return <Folder {...props} />;
 	}
-	return <LoginClass {...props}/>
+	return <LoginClass {...props} />;
-  }
+}

src/pages/_app.tsx

@@ -12,18 +12,30 @@ export type NextPageWithLayout<TProps = Record<string, unknown>, TInitialProps =
 type AppPropsWithLayout = AppProps & {
 	Component: NextPageWithLayout;
 } & {
-	backApiProtocol: string,
+	backApiProtocol: string;
-	backApiHost: string,
+	backApiHost: string;
-	backApiPort: string,
+	backApiPort: string;
-	backApiRootUrl: string,
+	backApiRootUrl: string;
-	backApiVersion: string,
+	backApiVersion: string;
-	frontAppHost: string,
+	frontAppHost: string;
-	frontAppPort: string,
+	frontAppPort: string;
 	idNotAuthorizeEndpoint: string;
 	idNotClientId: string;
 };
 
-const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion, frontAppHost, frontAppPort, idNotAuthorizeEndpoint, idNotClientId }: AppPropsWithLayout) => {
+const MyApp = (({
+	Component,
+	pageProps,
+	backApiProtocol,
+	backApiHost,
+	backApiPort,
+	backApiRootUrl,
+	backApiVersion,
+	frontAppHost,
+	frontAppPort,
+	idNotAuthorizeEndpoint,
+	idNotClientId,
+}: AppPropsWithLayout) => {
 	const getLayout = Component.getLayout ?? ((page) => <DefaultLayout children={page}></DefaultLayout>);
 
 	FrontendVariables.getInstance().BACK_API_PROTOCOL = backApiProtocol;
@@ -36,7 +48,6 @@ const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPor
 	FrontendVariables.getInstance().IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint;
 	FrontendVariables.getInstance().IDNOT_CLIENT_ID = idNotClientId;
 
-
 	return getLayout(<Component {...pageProps} />);
 }) as AppType;
 
@@ -52,6 +63,6 @@ MyApp.getInitialProps = async () => {
 		idNotAuthorizeEndpoint: process.env["IDNOT_AUTHORIZE_ENDPOINT"],
 		idNotClientId: process.env["IDNOT_CLIENT_ID"],
 	};
-}
+};
 
 export default MyApp;