88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import PenIcon from "@Assets/Icons/pen.svg";
|
|
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
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";
|
|
|
|
type IProps = {
|
|
customer: Customer;
|
|
folder: IDashBoardFolder;
|
|
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.phone_number ?? "") ??
|
|
this.formatPhoneNumber(this.props.customer.contact.cell_phone_number)}
|
|
</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 === "PENDING") ?? [];
|
|
return notAskedDocuments.length > 0;
|
|
}
|
|
|
|
private formatPhoneNumber(phoneNumber: string): string {
|
|
if (!phoneNumber) return "";
|
|
const output = phoneNumber.split("").map((char, index) => {
|
|
if (index % 2) return char + " ";
|
|
return char;
|
|
});
|
|
return output.join("");
|
|
}
|
|
|
|
private onEditClick(): void {
|
|
// console.log("edit");
|
|
}
|
|
}
|