112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
import PenIcon from "@Assets/Icons/pen.svg";
|
|
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
import Module from "@Front/Config/Module";
|
|
import { Customer } from "le-coffre-resources/dist/Notary";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import Typography, { ITypo } from "../../Typography";
|
|
import WarningBadge from "../../WarningBadge";
|
|
import classes from "./classes.module.scss";
|
|
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
|
|
|
type IProps = {
|
|
customer: Customer;
|
|
folder: OfficeFolder;
|
|
isArchived?: boolean;
|
|
};
|
|
type IState = {};
|
|
|
|
export default class UserFolderHeader extends React.Component<IProps, IState> {
|
|
static defaultProps = {
|
|
isArchived: false,
|
|
};
|
|
public override render(): JSX.Element | null {
|
|
const redirectPath = Module.getInstance()
|
|
.get()
|
|
.modules.pages.Folder.pages.EditClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
|
|
.replace("[customerUid]", this.props.customer.uid ?? "");
|
|
if (!this.props.customer.contact) return null;
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<div className={classes["content"]}>
|
|
<div className={classes["container"]}>
|
|
<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
|
|
<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography>
|
|
</div>
|
|
|
|
<div className={classes["container"]}>
|
|
<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
|
|
<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography>
|
|
</div>
|
|
|
|
<div className={classes["container"]}>
|
|
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
|
|
<Typography typo={ITypo.P_18}>
|
|
{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number) ??
|
|
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
|
|
</Typography>
|
|
</div>
|
|
|
|
<div className={classes["container"]}>
|
|
<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
|
|
<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
|
|
</div>
|
|
</div>
|
|
{!this.props.isArchived && (
|
|
<div className={classes["icons"]}>
|
|
{this.hasPendingFiles() && <WarningBadge />}
|
|
<Link href={redirectPath}>
|
|
<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private hasPendingFiles() {
|
|
const documents =
|
|
this.props.folder.documents?.filter((document) => document.depositor?.contact?.uid === this.props.customer.contact?.uid) ?? [];
|
|
const notAskedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.DEPOSITED) ?? [];
|
|
return notAskedDocuments.length > 0;
|
|
}
|
|
|
|
private formatPhoneNumber(phoneNumber: string): string {
|
|
if (!phoneNumber) return "";
|
|
phoneNumber = phoneNumber.replace(/ /g, "");
|
|
phoneNumber = phoneNumber.replace("+33", "0");
|
|
|
|
if (phoneNumber.length !== 10) {
|
|
// split the last 9 digits
|
|
const lastNineDigits = phoneNumber.slice(-9);
|
|
|
|
// get the country code
|
|
const countryCode = phoneNumber.slice(0, -9);
|
|
|
|
// isolate the first digit
|
|
const firstDigit = lastNineDigits.slice(0, 1);
|
|
|
|
// isolate the 8 other ones
|
|
const lastEightDigits = lastNineDigits.slice(1);
|
|
|
|
// make a space every two digits on the last eights
|
|
const output = lastEightDigits.split("").map((char, index) => {
|
|
if (index % 2) return char + " ";
|
|
return char;
|
|
});
|
|
// format the phone number
|
|
phoneNumber = countryCode + " " + firstDigit + " " + output.join("");
|
|
return phoneNumber;
|
|
}
|
|
const output = phoneNumber.split("").map((char, index) => {
|
|
if (index % 2) return char + " ";
|
|
return char;
|
|
});
|
|
return output.join("");
|
|
}
|
|
|
|
private onEditClick(): void {}
|
|
}
|