✨ Sprint modifications

package.json

@@ -24,7 +24,7 @@
 		"eslint-config-next": "13.2.4",
 		"form-data": "^4.0.0",
 		"jwt-decode": "^3.1.2",
-		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.71",
+		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.73",
 		"next": "13.2.4",
 		"prettier": "^2.8.7",
 		"react": "18.2.0",
@@ -34,6 +34,5 @@
 		"sharp": "^0.32.1",
 		"typescript": "4.9.5"
 	},
-	"devDependencies": {
+	"devDependencies": {}
-	}
 }

src/front/Assets/Icons/copy.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z" stroke="#939393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" stroke="#939393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/front/Components/DesignSystem/Form/TextField/classes.module.scss

@@ -16,17 +16,8 @@
 
 		&:disabled {
 			cursor: not-allowed;
-			background: white;
-			opacity: 0.6;
-			~ .fake-placeholder {
-				color: rgba($grey, 0.6);
-				/**
-				TODO
-				* 1. Add styles so the placeholder has the same color as the background when disabled
-				*/
-				// background: transparent;
-			}
 		}
+
 		&:focus {
 			~ .fake-placeholder {
 				transform: translateY(-35px);
@@ -91,12 +82,21 @@
 	}
 
 	&[data-is-errored="true"] {
-		.input{
+		.input {
 			border: 1px solid var(--red-flash);
-			~ .fake-placeholder{
+			~ .fake-placeholder {
 				color: var(--red-flash);
 			}
 		}
+	}
 
+	.copy-icon {
+		cursor: pointer;
+		height: 24px;
+		width: 24px;
+		position: absolute;
+		top: 50%;
+		right: 24px;
+		transform: translate(0, -50%);
 	}
 }

src/front/Components/DesignSystem/Form/TextField/index.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { ReactNode } from "react";
-
+import CopyIcon from "@Assets/Icons/copy.svg";
 import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
 import classes from "./classes.module.scss";
 import classnames from "classnames";
+import Image from "next/image";
 
-export type IProps = IBaseFieldProps & {};
+export type IProps = IBaseFieldProps & {
+	canCopy?: boolean;
+};
 
 export default class TextField extends BaseField<IProps> {
-    constructor(props: IProps){
+	constructor(props: IProps) {
 		super(props);
 		this.state = this.getDefaultState();
 	}
@@ -28,13 +31,25 @@ export default class TextField extends BaseField<IProps> {
 						onFocus={this.onFocus}
 						onBlur={this.onBlur}
 						name={this.props.name}
+						disabled={this.props.disabled}
 					/>
 					<div className={classes["fake-placeholder"]}>
 						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
 					</div>
+					{this.props.canCopy && (
+						<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
+							<Image src={CopyIcon} alt="Copy icon" />
+						</div>
+					)}
 				</div>
 				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</Typography>
 		);
 	}
+
+	private onCopyClick = (): void => {
+		if (this.props.canCopy) {
+			navigator.clipboard.writeText(this.state.value ?? "");
+		}
+	};
 }

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

@@ -25,8 +25,17 @@
 			}
 		}
 
+		.folder-number {
+			margin-top: 16px;
+		}
+
+		.office-name {
+			margin-top: 8px;
+			text-transform: uppercase;
+		}
+
 		.subtitle {
-			margin: 32px 0;
+			margin: 64px 0 32px 0;
 		}
 	}
 
@@ -43,9 +52,6 @@
 			@media (max-width: $screen-s) {
 				grid-template-columns: 1fr;
 			}
-
-
-
 		}
 
 		.component-to-replace {
@@ -78,9 +84,6 @@
 			background-color: var(--grey-soft);
 			height: 98px;
 			width: 100%;
-
 		}
 	}
-
-
 }

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

@@ -3,15 +3,16 @@ import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
 import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
+import Customer, { Document, DocumentType, OfficeFolder } from "le-coffre-resources/dist/Customer";
 import React, { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import { useRouter } from "next/router";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import DepositOtherDocument from "@Front/Components/DesignSystem/DepositOtherDocument";
+import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
 
 type IProps = {};
 
@@ -20,6 +21,7 @@ export default function ClientDashboard(props: IProps) {
 	let { folderUid } = router.query;
 	const [documents, setDocuments] = useState<Document[] | null>(null);
 	const [customer, setCustomer] = useState<Customer | null>(null);
+	const [folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
 
 	const onCloseModalAddDocument = useCallback(() => {
@@ -56,6 +58,8 @@ export default function ClientDashboard(props: IProps) {
 
 			const documentList = await Documents.getInstance().get(query);
 
+			const folder = await Folders.getInstance().getByUid(folderUid as string, { q: { office: true } });
+			setFolder(folder);
 			setDocuments(documentList);
 			setCustomer(actualCustomer);
 		}
@@ -64,6 +68,7 @@ export default function ClientDashboard(props: IProps) {
 	}, [folderUid]);
 
 	const renderHeader = useCallback(() => {
+		console.log("Dossier : ", customer);
 		return (
 			<div className={classes["header"]}>
 				<div className={classes["text-container"]}>
@@ -72,6 +77,14 @@ export default function ClientDashboard(props: IProps) {
 						Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
 					</Typography>
 
+					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}>
+						Dossier {folder?.folder_number} - {folder?.name}
+					</Typography>
+
+					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}>
+						{folder?.office?.name}
+					</Typography>
+
 					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
 						Documents à envoyer
 					</Typography>
@@ -106,7 +119,7 @@ export default function ClientDashboard(props: IProps) {
 				})}
 			/>
 		);
-	}, [isAddDocumentModalVisible]);
+	}, [customer, folderUid, isAddDocumentModalVisible, onCloseModalAddDocument]);
 
 	return (
 		<DefaultTemplate title={"Mon compte"} isPadding={false} hasHeaderLinks={false}>

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

@@ -25,19 +25,21 @@ export default class MyAccount extends Base<IProps, IState> {
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
 								<div className={classes["form-container"]}>
-									<TextField name="name" placeholder="Nom" defaultValue={"BIHR"} disabled />
+									<TextField name="name" placeholder="Nom" defaultValue={"BIHR"} disabled canCopy />
-									<TextField name="surname" placeholder="Prénom" defaultValue={"Nicolas"} disabled />
+									<TextField name="surname" placeholder="Prénom" defaultValue={"Nicolas"} disabled canCopy />
 									<TextField
 										name="email"
 										placeholder="E-mail"
 										defaultValue={"nicolas.bihr@notaires.fr"}
 										disabled
+										canCopy
 									/>
 									<TextField
 										name="phone"
 										placeholder="Numéro de téléphone"
 										defaultValue={"06 74 83 90 23"}
 										disabled
+										canCopy
 									/>
 								</div>
 							</Form>
@@ -53,20 +55,11 @@ export default class MyAccount extends Base<IProps, IState> {
 										placeholder="Dénomination de l'office"
 										defaultValue="Etude Office notarial du Cormier"
 										disabled
+										canCopy
 									/>
-									<TextField name="crpcen" placeholder="CRPCEN" defaultValue="35137" disabled />
+									<TextField name="crpcen" placeholder="CRPCEN" defaultValue="35137" disabled canCopy />
-									<TextField
+									<TextField name="cp_address" placeholder="Adresse CP" defaultValue="2 RUE DE RENNES" disabled canCopy />
-										name="cp_address"
+									<TextField name="city" placeholder="Ville" defaultValue="35140 ST AUBIN DU CORMIER" disabled canCopy />
-										placeholder="Adresse CP"
-										defaultValue="2 RUE DE RENNES"
-										disabled
-									/>
-									<TextField
-										name="city"
-										placeholder="Ville"
-										defaultValue="35140 ST AUBIN DU CORMIER"
-										disabled
-									/>
 								</div>
 							</Form>
 						</div>
@@ -80,6 +73,6 @@ export default class MyAccount extends Base<IProps, IState> {
 		e: React.FormEvent<HTMLFormElement> | null,
 		values: {
 			[key: string]: string;
-		}
+		},
 	) {}
 }