✨ Add client working
This commit is contained in:
parent
68ee0483e5
commit
0003cefa1a
@ -11,11 +11,18 @@ type IProps = {
|
||||
};
|
||||
|
||||
export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) {
|
||||
const footerRef = React.useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
document.documentElement.style.setProperty("--footer-height", `43px`);
|
||||
if (!footerRef.current) return;
|
||||
const footerHeight = footerRef.current.clientHeight + 1;
|
||||
document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
|
||||
});
|
||||
return (
|
||||
<footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} data-is-sticky={isSticky}>
|
||||
<footer
|
||||
className={[classes["root"], className].join(" ")}
|
||||
data-has-left-padding={hasLeftPadding}
|
||||
data-is-sticky={isSticky}
|
||||
ref={footerRef}>
|
||||
<Mobile className={classes["mobile"]} />
|
||||
<Tablet className={classes["tablet"]} />
|
||||
<Desktop className={classes["desktop"]} />
|
||||
|
@ -5,7 +5,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
.sides {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
min-height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
width: 50%;
|
||||
@media (max-width: $screen-m) {
|
||||
width: 100%;
|
||||
|
@ -3,10 +3,10 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
align-items: flex-start;
|
||||
width: fit-content;
|
||||
|
||||
width: 472px;
|
||||
margin: auto;
|
||||
margin-top: 24px;
|
||||
.back-arrow {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -22,7 +22,6 @@
|
||||
.form {
|
||||
width: 100%;
|
||||
|
||||
|
||||
.button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
@ -8,169 +8,96 @@ 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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||||
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 { NextRouter, useRouter } from "next/router";
|
||||
|
||||
import BasePage from "../../Base";
|
||||
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 = {};
|
||||
type IState = {
|
||||
selectedOption: ESelectedOption;
|
||||
availableCustomers: Customer[];
|
||||
selectedCustomers: IOption[];
|
||||
existingCustomers: IOption[];
|
||||
isLoaded: boolean;
|
||||
validationError: ValidationError[];
|
||||
};
|
||||
|
||||
type IPropsClass = IProps & {
|
||||
selectedFolderUid: string;
|
||||
router: NextRouter;
|
||||
};
|
||||
class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
|
||||
constructor(props: IPropsClass) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: ESelectedOption.EXISTING_CUSTOMER,
|
||||
availableCustomers: [],
|
||||
selectedCustomers: [],
|
||||
existingCustomers: [],
|
||||
isLoaded: false,
|
||||
validationError: [],
|
||||
};
|
||||
this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
|
||||
this.onNewClientSelected = this.onNewClientSelected.bind(this);
|
||||
this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
|
||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
||||
export default function AddClientToFolder(props: IProps) {
|
||||
const router = useRouter();
|
||||
let { folderUid } = router.query;
|
||||
|
||||
const [selectedOption, setSelectedOption] = useState<ESelectedOption>(ESelectedOption.EXISTING_CUSTOMER);
|
||||
const [availableCustomers, setAvailableCustomers] = useState<Customer[]>([]);
|
||||
const [selectedCustomers, setSelectedCustomers] = useState<IOption[]>([]);
|
||||
const [existingCustomers, setExistingCustomers] = useState<IOption[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState<boolean>(false);
|
||||
const [validationError, setValidationError] = useState<ValidationError[]>([]);
|
||||
|
||||
const onFormSubmit = useCallback(
|
||||
async (
|
||||
e: React.FormEvent<HTMLFormElement> | 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<Customer>[] = allCustomersToLink.map((customer) => {
|
||||
return Customer.hydrate<Customer>({ uid: customer.id as string });
|
||||
}) as Partial<Customer>[];
|
||||
|
||||
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);
|
||||
}
|
||||
public override render(): JSX.Element {
|
||||
const selectOptions: IOption[] = this.getSelectedOptions();
|
||||
|
||||
const backwardPath = Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
|
||||
return (
|
||||
<DefaultNotaryDashboard title={"Ajouter client(s)"}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["back-arrow"]}>
|
||||
<BackArrow url={backwardPath} />
|
||||
</div>
|
||||
<Typography typo={ETypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
|
||||
{this.state.isLoaded && (
|
||||
<>
|
||||
<div className={classes["radiobox-container"]}>
|
||||
{this.state.availableCustomers.length !== 0 && (
|
||||
<RadioBox
|
||||
name="client"
|
||||
onChange={this.onExistingClientSelected}
|
||||
checked={this.state.selectedOption === "existing_customer"}
|
||||
value={"existing client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
|
||||
</RadioBox>
|
||||
)}
|
||||
|
||||
<RadioBox
|
||||
name="client"
|
||||
onChange={this.onNewClientSelected}
|
||||
checked={this.state.selectedOption === "new_customer"}
|
||||
value={"new client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
|
||||
</RadioBox>
|
||||
</div>
|
||||
|
||||
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
|
||||
{this.state.selectedOption === "existing_customer" && (
|
||||
<div className={classes["existing-client"]}>
|
||||
<AutocompleteMultiSelect
|
||||
label="Clients"
|
||||
options={selectOptions}
|
||||
selectedOptions={this.state.selectedCustomers}
|
||||
onSelectionChange={this.onMutiSelectChange}
|
||||
/>
|
||||
|
||||
<div className={classes["button-container"]}>
|
||||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||
Annuler
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Associer au dossier</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{this.state.selectedOption === "new_customer" && (
|
||||
<div className={classes["new-client"]}>
|
||||
<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.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||
Annuler
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Associer au dossier</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DefaultNotaryDashboard>
|
||||
);
|
||||
}
|
||||
const contactToCreate = Contact.hydrate<Customer>(values);
|
||||
await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
|
||||
} catch (validationErrors) {
|
||||
setValidationError(validationErrors as ValidationError[]);
|
||||
return;
|
||||
}
|
||||
|
||||
public override async componentDidMount() {
|
||||
const query = {};
|
||||
const availableCustomers = await Customers.getInstance().get(query);
|
||||
let preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
|
||||
const existingCustomers = preExistingCustomers ?? [];
|
||||
|
||||
existingCustomers.forEach((customer) => {
|
||||
const index = availableCustomers.findIndex((availableCustomer) => availableCustomer.uid === customer.id);
|
||||
if (index !== -1) availableCustomers.splice(index, 1);
|
||||
try {
|
||||
const customer: Customer = await Customers.getInstance().post({
|
||||
contact: values,
|
||||
});
|
||||
|
||||
let selectedOption = ESelectedOption.EXISTING_CUSTOMER;
|
||||
if (availableCustomers.length === 0) {
|
||||
selectedOption = ESelectedOption.NEW_CUSTOMER;
|
||||
if (!customer.uid) return;
|
||||
customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
|
||||
} catch (backError) {
|
||||
if (!Array.isArray(backError)) return;
|
||||
setValidationError(backError as ValidationError[]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
|
||||
if (customersToLink) {
|
||||
const body = OfficeFolder.hydrate<OfficeFolder>({
|
||||
customers: customersToLink.map((customer) => {
|
||||
return Customer.hydrate<Customer>(customer);
|
||||
}),
|
||||
});
|
||||
await Folders.getInstance().put(folderUid as string, body);
|
||||
router.push(`/folders/${folderUid}`);
|
||||
}
|
||||
},
|
||||
[existingCustomers, folderUid, router, selectedCustomers, selectedOption],
|
||||
);
|
||||
|
||||
private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
|
||||
const getFolderPreSelectedCustomers = useCallback(
|
||||
async (folderUid: string): Promise<IOption[] | undefined> => {
|
||||
const query = {
|
||||
q: {
|
||||
customers: {
|
||||
@ -190,14 +117,38 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
|
||||
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;
|
||||
}
|
||||
|
||||
private getSelectedOptions(): IOption[] {
|
||||
let options = this.state.availableCustomers?.map((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 ?? "",
|
||||
@ -205,85 +156,111 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
|
||||
});
|
||||
if (!options) options = [];
|
||||
return options;
|
||||
}
|
||||
}, [availableCustomers]);
|
||||
|
||||
private onMutiSelectChange(selectedCustomers: IOption[] | null): void {
|
||||
selectedCustomers && this.setState({ selectedCustomers });
|
||||
}
|
||||
const onMutiSelectChange = (selectedCustomers: IOption[] | null): void => {
|
||||
if (!selectedCustomers) return;
|
||||
setSelectedCustomers(selectedCustomers);
|
||||
};
|
||||
|
||||
private onExistingClientSelected(): void {
|
||||
this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
|
||||
}
|
||||
const onExistingClientSelected = (): void => setSelectedOption(ESelectedOption.EXISTING_CUSTOMER);
|
||||
const onNewClientSelected = (): void => setSelectedOption(ESelectedOption.NEW_CUSTOMER);
|
||||
|
||||
private onNewClientSelected(): void {
|
||||
this.setState({ selectedOption: ESelectedOption.NEW_CUSTOMER });
|
||||
}
|
||||
useEffect(() => {
|
||||
loadCustomers();
|
||||
}, [loadCustomers]);
|
||||
|
||||
private async onFormSubmit(
|
||||
e: React.FormEvent<HTMLFormElement> | null,
|
||||
values: {
|
||||
[key: string]: any;
|
||||
},
|
||||
) {
|
||||
values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form
|
||||
const selectOptions: IOption[] = getSelectedOptions();
|
||||
|
||||
const allCustomersToLink = this.state.selectedCustomers.concat(this.state.existingCustomers);
|
||||
let customersToLink: Partial<Customer>[] = allCustomersToLink.map((customer) => {
|
||||
return Customer.hydrate<Customer>({ uid: customer.id as string });
|
||||
}) as Partial<Customer>[];
|
||||
const backwardPath = Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string);
|
||||
return (
|
||||
<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["back-arrow"]}>
|
||||
<BackArrow url={backwardPath} />
|
||||
</div>
|
||||
<Typography typo={ETypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
|
||||
{isLoaded && (
|
||||
<>
|
||||
<div className={classes["radiobox-container"]}>
|
||||
{availableCustomers.length !== 0 && (
|
||||
<RadioBox
|
||||
name="client"
|
||||
onChange={onExistingClientSelected}
|
||||
checked={selectedOption === "existing_customer"}
|
||||
value={"existing client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
|
||||
</RadioBox>
|
||||
)}
|
||||
|
||||
if (this.state.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<Customer>(values);
|
||||
await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
|
||||
} catch (validationErrors) {
|
||||
this.setState({
|
||||
validationError: validationErrors as ValidationError[],
|
||||
});
|
||||
return;
|
||||
}
|
||||
<RadioBox
|
||||
name="client"
|
||||
onChange={onNewClientSelected}
|
||||
checked={selectedOption === "new_customer"}
|
||||
value={"new client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
|
||||
</RadioBox>
|
||||
</div>
|
||||
|
||||
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[],
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
<Form className={classes["form"]} onSubmit={onFormSubmit}>
|
||||
{selectedOption === "existing_customer" && (
|
||||
<div className={classes["existing-client"]}>
|
||||
<AutocompleteMultiSelect
|
||||
label="Clients"
|
||||
options={selectOptions}
|
||||
selectedOptions={selectedCustomers}
|
||||
onSelectionChange={onMutiSelectChange}
|
||||
/>
|
||||
|
||||
if (customersToLink) {
|
||||
const body = OfficeFolder.hydrate<OfficeFolder>({
|
||||
customers: customersToLink.map((customer) => {
|
||||
return Customer.hydrate<Customer>(customer);
|
||||
}),
|
||||
});
|
||||
await Folders.getInstance().put(this.props.selectedFolderUid, body);
|
||||
this.props.router.push(`/folders/${this.props.selectedFolderUid}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
<div className={classes["button-container"]}>
|
||||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||
Annuler
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Associer au dossier</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
export default function AddClientToFolder(props: IProps) {
|
||||
const router = useRouter();
|
||||
let { folderUid } = router.query;
|
||||
folderUid = folderUid as string;
|
||||
return <AddClientToFolderClass {...props} selectedFolderUid={folderUid} router={router} />;
|
||||
{selectedOption === "new_customer" && (
|
||||
<div className={classes["new-client"]}>
|
||||
<TextField
|
||||
name="last_name"
|
||||
placeholder="Nom"
|
||||
validationError={validationError.find((error) => error.property === "last_name")}
|
||||
/>
|
||||
<TextField
|
||||
name="first_name"
|
||||
placeholder="Prénom"
|
||||
validationError={validationError.find((error) => error.property === "first_name")}
|
||||
/>
|
||||
<TextField
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
validationError={validationError.find((error) => error.property === "email")}
|
||||
/>
|
||||
<TextField
|
||||
name="cell_phone_number"
|
||||
placeholder="Numéro de téléphone"
|
||||
validationError={validationError.find((error) => error.property === "cell_phone_number")}
|
||||
/>
|
||||
<div className={classes["button-container"]}>
|
||||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||
Annuler
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Associer au dossier</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DefaultDoubleSidePage>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user