From bd5364870b871892d17171b9af9924a3eaae04bb Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 9 Oct 2023 15:49:45 +0200
Subject: [PATCH] :bug: Error handling on creating a customer

---
 .../Folder/AddClientToFolder/index.tsx        | 59 +++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index 8aa0c509..ddf1418d 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -10,13 +10,14 @@ import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
-import { Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import { ValidationError } from "class-validator";
 
 enum ESelectedOption {
 	EXISTING_CUSTOMER = "existing_customer",
@@ -29,6 +30,7 @@ type IState = {
 	selectedCustomers: readonly IOption[];
 	existingCustomers: IOption[];
 	isLoaded: boolean;
+	validationError: ValidationError[];
 };
 
 type IPropsClass = IProps & {
@@ -44,6 +46,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			selectedCustomers: [],
 			existingCustomers: [],
 			isLoaded: false,
+			validationError: [],
 		};
 		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
 		this.onNewClientSelected = this.onNewClientSelected.bind(this);
@@ -105,10 +108,28 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 
 								{this.state.selectedOption === "new_customer" && (
 									<div className={classes["new-client"]}>
-										<TextField name="last_name" placeholder="Nom" />
-										<TextField name="first_name" placeholder="Prénom" />
-										<TextField name="email" placeholder="E-mail" />
-										<TextField name="cell_phone_number" placeholder="Numéro de téléphone" />
+										<TextField
+											name="last_name"
+											placeholder="Nom"
+											validationError={this.state.validationError.find((error) => error.property === "last_name")}
+										/>
+										<TextField
+											name="first_name"
+											placeholder="Prénom"
+											validationError={this.state.validationError.find((error) => error.property === "first_name")}
+										/>
+										<TextField
+											name="email"
+											placeholder="E-mail"
+											validationError={this.state.validationError.find((error) => error.property === "email")}
+										/>
+										<TextField
+											name="cell_phone_number"
+											placeholder="Numéro de téléphone"
+											validationError={this.state.validationError.find(
+												(error) => error.property === "cell_phone_number",
+											)}
+										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
 												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
@@ -207,11 +228,29 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		}) as Partial<Customer>[];
 
 		if (this.state.selectedOption === "new_customer") {
-			const customer: Customer = await Customers.getInstance().post({
-				contact: values,
-			});
-			if (!customer.uid) return;
-			customersToLink?.push({ uid: customer.uid  } as Partial<Customer>);
+			try {
+				const contactToCreate = Contact.hydrate<Customer>(values);
+				await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+			} catch (validationErrors) {
+				console.log(validationErrors);
+				this.setState({
+					validationError: validationErrors as ValidationError[],
+				});
+				return;
+			}
+
+			try {
+				const customer: Customer = await Customers.getInstance().post({
+					contact: values,
+				});
+				if (!customer.uid) return;
+				customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
+			} catch (backError) {
+				if (!Array.isArray(backError)) return;
+				this.setState({
+					validationError: backError as ValidationError[],
+				});
+			}
 		}
 
 		if (customersToLink) {