import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption"; import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import Module from "@Front/Config/Module"; import { ValidationError } from "class-validator"; import { ECivility } from "le-coffre-resources/dist/Customer/Contact"; import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary"; import Link from "next/link"; import { useRouter } from "next/router"; import backgroundImage from "@Assets/images/background_refonte.svg"; import classes from "./classes.module.scss"; import { useCallback, useEffect, useState } from "react"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; enum ESelectedOption { EXISTING_CUSTOMER = "existing_customer", NEW_CUSTOMER = "new_customer", } type IProps = {}; export default function AddClientToFolder(props: IProps) { const router = useRouter(); let { folderUid } = router.query; const [selectedOption, setSelectedOption] = useState(ESelectedOption.EXISTING_CUSTOMER); const [availableCustomers, setAvailableCustomers] = useState([]); const [selectedCustomers, setSelectedCustomers] = useState([]); const [existingCustomers, setExistingCustomers] = useState([]); const [isLoaded, setIsLoaded] = useState(false); const [validationError, setValidationError] = useState([]); const onFormSubmit = useCallback( async ( e: React.FormEvent | null, values: { [key: string]: any; }, ) => { values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form const allCustomersToLink = selectedCustomers.concat(existingCustomers); let customersToLink: Partial[] = allCustomersToLink.map((customer) => { return Customer.hydrate({ uid: customer.id as string }); }) as Partial[]; if (selectedOption === "new_customer") { try { // remove every space from the phone number values["cell_phone_number"] = values["cell_phone_number"].replace(/\s/g, ""); values["cell_phone_number"] = values["cell_phone_number"].replace(/\./g, ""); if (values["cell_phone_number"] && values["cell_phone_number"].length === 10) { // get the first digit of the phone number const firstDigit = values["cell_phone_number"].charAt(0); // if the first digit is a 0 replace it by +33 if (firstDigit === "0") { values["cell_phone_number"] = "+33" + values["cell_phone_number"].substring(1); } } const contactToCreate = Contact.hydrate(values); await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false }); } catch (validationErrors) { setValidationError(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); } catch (backError) { if (!Array.isArray(backError)) return; setValidationError(backError as ValidationError[]); return; } } if (customersToLink) { const body = OfficeFolder.hydrate({ customers: customersToLink.map((customer) => { return Customer.hydrate(customer); }), }); await Folders.getInstance().put(folderUid as string, body); router.push(`/folders/${folderUid}`); } }, [existingCustomers, folderUid, router, selectedCustomers, selectedOption], ); const getFolderPreSelectedCustomers = useCallback( async (folderUid: string): Promise => { const query = { q: { customers: { include: { contact: true, }, }, }, }; let preExistingCustomers: IOption[] = []; try { const folder = await Folders.getInstance().getByUid(folderUid, query); preExistingCustomers = folder.customers!.map((customer) => { return { label: customer.contact?.first_name + " " + customer.contact?.last_name, id: customer.uid ?? "", }; }); } catch (error) { router.push(Module.getInstance().get().modules.pages["404"].props.path); return; } return preExistingCustomers; }, [router], ); const loadCustomers = useCallback(async () => { const query = {}; const availableCustomers = await Customers.getInstance().get(query); let preExistingCustomers: IOption[] | undefined = await getFolderPreSelectedCustomers(folderUid as string); const existingCustomers = preExistingCustomers ?? []; existingCustomers.forEach((customer) => { const index = availableCustomers.findIndex((availableCustomer) => availableCustomer.uid === customer.id); if (index !== -1) availableCustomers.splice(index, 1); }); let selectedOption = ESelectedOption.EXISTING_CUSTOMER; if (availableCustomers.length === 0) { selectedOption = ESelectedOption.NEW_CUSTOMER; } setAvailableCustomers(availableCustomers); setExistingCustomers(existingCustomers); setIsLoaded(true); setSelectedOption(selectedOption); }, [folderUid, getFolderPreSelectedCustomers]); const getSelectedOptions = useCallback((): IOption[] => { let options = availableCustomers?.map((customer) => { return { label: customer.contact?.first_name + " " + customer.contact?.last_name, id: customer.uid ?? "", }; }); if (!options) options = []; return options; }, [availableCustomers]); const onMutiSelectChange = (selectedCustomers: IOption[] | null): void => { if (!selectedCustomers) return; setSelectedCustomers(selectedCustomers); }; const onExistingClientSelected = (): void => setSelectedOption(ESelectedOption.EXISTING_CUSTOMER); const onNewClientSelected = (): void => setSelectedOption(ESelectedOption.NEW_CUSTOMER); useEffect(() => { loadCustomers(); }, [loadCustomers]); const selectOptions: IOption[] = getSelectedOptions(); const backwardPath = Module.getInstance() .get() .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string); return (
Associer un ou plusieurs client(s) {isLoaded && ( <>
{availableCustomers.length !== 0 && ( )}
{selectedOption === "existing_customer" && (
)} {selectedOption === "new_customer" && (
error.property === "last_name")} /> error.property === "first_name")} /> error.property === "email")} /> error.property === "cell_phone_number")} />
)}
)}
); }