From c6ed4e53986a029b257e9f5d8a911638aa064861 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Wed, 11 Sep 2024 15:44:37 +0200
Subject: [PATCH] :sparkles: refont MyAccount

---
 .../Form/TextField/classes.module.scss        |   3 +
 .../DesignSystem/Form/TextField/index.tsx     |   5 +
 .../Layouts/LoginCallback/index.tsx           |  24 +-
 .../Layouts/MyAccount/classes.module.scss     |  41 ++--
 .../Components/Layouts/MyAccount/index.tsx    | 214 +++++++-----------
 5 files changed, 127 insertions(+), 160 deletions(-)

diff --git a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
index 8b25310c..bb0578ca 100644
--- a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
@@ -3,6 +3,7 @@
 .root {
 	position: relative;
 
+
 	&[data-is-disabled="true"] {
 		opacity: var(--opacity-disabled, 0.3);
 		.input-container {
@@ -27,6 +28,8 @@
 	}
 
 	.input-container {
+		height: 56px;
+
 		display: flex;
 		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
 		align-items: center;
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index 915cc7c0..713874cf 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextField/index.tsx
@@ -5,6 +5,9 @@ import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
 import classes from "./classes.module.scss";
 import classnames from "classnames";
 import { XMarkIcon, Square2StackIcon } from "@heroicons/react/24/outline";
+import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
+
+
 export type IProps = IBaseFieldProps & {
 	canCopy?: boolean;
 	password?: boolean;
@@ -36,6 +39,7 @@ export default class TextField extends BaseField<IProps> {
 							onBlur={this.onBlur}
 							name={this.props.name}
 							disabled={this.props.disabled}
+							readOnly={this.props.readonly}
 							type={this.props.password ? "password" : "text"}
 						/>
 						{this.props.canCopy && !this.hasError() && (
@@ -58,6 +62,7 @@ export default class TextField extends BaseField<IProps> {
 	private onCopyClick = (): void => {
 		if (this.props.canCopy) {
 			navigator.clipboard.writeText(this.state.value ?? "");
+			ToasterService.getInstance().success({ title: "Copié avec succès !", description: this.state.value });
 		}
 	};
 }
diff --git a/src/front/Components/Layouts/LoginCallback/index.tsx b/src/front/Components/Layouts/LoginCallback/index.tsx
index 702dc9c5..9c8ff248 100644
--- a/src/front/Components/Layouts/LoginCallback/index.tsx
+++ b/src/front/Components/Layouts/LoginCallback/index.tsx
@@ -1,19 +1,19 @@
-import LandingImage from "../Login/landing-connect.jpeg";
-import Image from "next/image";
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import CoffreIcon from "@Assets/logo_small_blue.svg";
+import Auth from "@Front/Api/Auth/IdNot";
+import Loader from "@Front/Components/DesignSystem/Loader";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import HelpBox from "@Front/Components/Elements/HelpBox";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import Module from "@Front/Config/Module";
+import CookieService from "@Front/Services/CookieService/CookieService";
+import JwtService from "@Front/Services/JwtService/JwtService";
+import UserStore from "@Front/Stores/UserStore";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
+
 import classes from "./classes.module.scss";
-import Module from "@Front/Config/Module";
-import Auth from "@Front/Api/Auth/IdNot";
-import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import Loader from "@Front/Components/DesignSystem/Loader";
-import UserStore from "@Front/Stores/UserStore";
-import JwtService from "@Front/Services/JwtService/JwtService";
-import CookieService from "@Front/Services/CookieService/CookieService";
-import backgroundImage from "@Assets/images/background_refonte.svg";
-import HelpBox from "@Front/Components/Elements/HelpBox";
 
 export default function LoginCallBack() {
 	const router = useRouter();
diff --git a/src/front/Components/Layouts/MyAccount/classes.module.scss b/src/front/Components/Layouts/MyAccount/classes.module.scss
index 7e5b5fbd..b868e543 100644
--- a/src/front/Components/Layouts/MyAccount/classes.module.scss
+++ b/src/front/Components/Layouts/MyAccount/classes.module.scss
@@ -1,27 +1,32 @@
 @import "@Themes/constants.scss";
 
 .root {
-	.title {
-		margin-top: 24px;
+	margin: 24px auto;
+	width: 566px;
+
+	@media (max-width: $screen-m) {
+		width: 474px;
 	}
 
-	.parts-container {
+	@media (max-width: $screen-s) {
+		width: 100%;
+		padding: var(--spacing-md, 16px);
+	}
+
+	
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
+
+	.title-container {
 		display: flex;
-		gap: 64px;
-		margin-top: 32px;
+		flex-direction: column;
+		gap: var(--spacing-sm, 8px);
+	}
 
-		@media (max-width: $screen-m) {
-			flex-direction: column;
-		}
-		.part {
-			flex: 1;
-
-			.form-container {
-				display: flex;
-				flex-direction: column;
-				gap: 24px;
-				margin-top: 32px;
-			}
-		}
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-md, 16px);
 	}
 }
diff --git a/src/front/Components/Layouts/MyAccount/index.tsx b/src/front/Components/Layouts/MyAccount/index.tsx
index 0c9169f1..e4b02143 100644
--- a/src/front/Components/Layouts/MyAccount/index.tsx
+++ b/src/front/Components/Layouts/MyAccount/index.tsx
@@ -1,142 +1,96 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import Base from "@Front/Components/Layouts/Base";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import React from "react";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import JwtService from "@Front/Services/JwtService/JwtService";
+import User from "le-coffre-resources/dist/Notary";
+import React, { useEffect } from "react";
 
 import classes from "./classes.module.scss";
-import User from "le-coffre-resources/dist/Notary";
-import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import JwtService from "@Front/Services/JwtService/JwtService";
 
-type IProps = {};
-type IState = {
-	user: User | null;
-};
+export default function MyAccount() {
+	const [user, setUser] = React.useState<User | null>(null);
 
-export default class MyAccount extends Base<IProps, IState> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = {
-			user: null,
-		};
-	}
-
-	public override render(): JSX.Element {
-		return (
-			<DefaultTemplate title={"Mon compte"}>
-				<div className={classes["root"]}>
-					<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
-						Mon compte
-					</Typography>
-					<div className={classes["parts-container"]}>
-						<div className={classes["part"]}>
-							<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
-								Mes informations
-							</Typography>
-							<Form onSubmit={this.onFormSubmit}>
-								<div className={classes["form-container"]}>
-									<TextField
-										name="name"
-										placeholder="Nom"
-										defaultValue={this.state.user?.contact?.last_name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="surname"
-										placeholder="Prénom"
-										defaultValue={this.state.user?.contact?.first_name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="email"
-										placeholder="E-mail"
-										defaultValue={this.state.user?.contact?.email}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="phone"
-										placeholder="Numéro de téléphone"
-										defaultValue={this.state.user?.contact?.cell_phone_number as string}
-										disabled
-										canCopy
-									/>
-								</div>
-							</Form>
-						</div>
-						<div className={classes["part"]}>
-							<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
-								Mon office
-							</Typography>
-							<Form onSubmit={this.onFormSubmit}>
-								<div className={classes["form-container"]}>
-									<TextField
-										name="office_denomination"
-										placeholder="Dénomination de l'office"
-										defaultValue={this.state.user?.office_membership?.name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="crpcen"
-										placeholder="CRPCEN"
-										defaultValue={this.state.user?.office_membership?.crpcen}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="cp_address"
-										placeholder="Adresse"
-										defaultValue={this.state.user?.office_membership?.address?.address}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="city"
-										placeholder="Ville"
-										defaultValue={
-											this.state.user?.office_membership?.address?.zip_code +
-											" - " +
-											this.state.user?.office_membership?.address?.city
-										}
-										disabled
-										canCopy
-									/>
-								</div>
-							</Form>
-						</div>
-					</div>
-				</div>
-			</DefaultTemplate>
-		);
-	}
-
-	public override async componentDidMount() {
+	useEffect(() => {
 		const jwtDecoded = JwtService.getInstance().decodeJwt();
 		if (!jwtDecoded) return;
-		const user = await Users.getInstance().getByUid(jwtDecoded.userId, {
-			q: {
-				office_membership: {
-					include: {
-						address: true,
+		Users.getInstance()
+			.getByUid(jwtDecoded.userId, {
+				q: {
+					office_membership: {
+						include: {
+							address: true,
+						},
 					},
+					contact: true,
 				},
-				contact: true,
-			},
-		});
-		if (!user) return;
-		this.setState({
-			user,
-		});
-	}
-	private onFormSubmit(
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: {
-			[key: string]: string;
-		},
-	) {}
+			})
+			.then((user) => {
+				if (!user) return;
+				setUser(user);
+			});
+	}, []);
+
+	return (
+		<DefaultDoubleSidePage title={"Mon Compte"} image={backgroundImage}>
+			<div className={classes["root"]}>
+				<div className={classes["title-container"]}>
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
+						Mon compte
+					</Typography>
+					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
+						Mes informations
+					</Typography>
+				</div>
+
+				<Form className={classes["form"]}>
+					<TextField name="name" label="Nom" placeholder="Nom" defaultValue={user?.contact?.last_name} readonly canCopy />
+					<TextField name="surname" label="Prénom" placeholder="Prénom" defaultValue={user?.contact?.first_name} readonly canCopy />
+					<TextField name="email" label="E-mail" placeholder="E-mail" defaultValue={user?.contact?.email} readonly canCopy />
+					<TextField
+						name="phone"
+						label="Numéro de téléphone"
+						placeholder="Numéro de téléphone"
+						defaultValue={user?.contact?.cell_phone_number as string}
+						readonly
+						canCopy
+					/>
+				</Form>
+
+				<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
+					Mon office
+				</Typography>
+
+				<Form className={classes["form"]}>
+					<TextField
+						name="office_denomination"
+						label="Dénomination de l'office"
+						placeholder="Dénomination de l'office"
+						defaultValue={user?.office_membership?.name}
+						readonly
+						canCopy
+					/>
+					<TextField name="crpcen" placeholder="CRPCEN" defaultValue={user?.office_membership?.crpcen} readonly canCopy />
+					<TextField
+						name="cp_address"
+						label="Adresse"
+						placeholder="Adresse"
+						defaultValue={user?.office_membership?.address?.address as string}
+						readonly
+						canCopy
+					/>
+					<TextField
+						name="city"
+						label="Ville"
+						placeholder="Ville"
+						defaultValue={user?.office_membership?.address?.zip_code + " - " + user?.office_membership?.address?.city}
+						readonly
+						canCopy
+					/>
+				</Form>
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }