118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
|
||
import Customer from "le-coffre-resources/dist/Customer";
|
||
import { OfficeFolder as OfficeFolderNotary } from "le-coffre-resources/dist/Notary";
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
|
||
import classes from "./classes.module.scss";
|
||
|
||
import OfficeRibService from "src/common/Api/LeCoffreApi/sdk/OfficeRibService";
|
||
|
||
type IProps = {
|
||
folder: OfficeFolderNotary;
|
||
customer: Customer;
|
||
};
|
||
|
||
export default function ContactBox(props: IProps) {
|
||
const { folder, customer } = props;
|
||
|
||
const [ribUrl, setRibUrl] = useState<string | null>(null);
|
||
|
||
const notaryContact = useMemo(
|
||
() => folder?.stakeholders!.find((stakeholder) => stakeholder.office_role?.name === "Notaire")?.contact ?? folder?.stakeholders![0]!.contact,
|
||
[folder],
|
||
);
|
||
|
||
const note = useMemo(
|
||
() =>
|
||
folder?.notes?.find((note) => note.customer?.uid === customer?.uid) ?? {
|
||
content: "Aucune note",
|
||
created_at: new Date(),
|
||
updated_at: new Date(),
|
||
},
|
||
[customer?.uid, folder?.notes],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!folder?.office?.uid) return;
|
||
OfficeRibService.getOfficeRib().then((process: any) => {
|
||
if (process) {
|
||
const officeRib: any = process.processData;
|
||
const fileBlob: Blob = new Blob([officeRib.file_blob.data], { type: officeRib.file_blob.type });
|
||
setRibUrl(URL.createObjectURL(fileBlob));
|
||
}
|
||
});
|
||
}, [folder]);
|
||
|
||
const downloadRib = useCallback(async () => {
|
||
if (!ribUrl) return;
|
||
const a = document.createElement("a");
|
||
a.style.display = "none";
|
||
a.href = ribUrl;
|
||
a.download = "";
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
}, [ribUrl]);
|
||
|
||
return (
|
||
<div className={classes["root"]}>
|
||
<div className={classes["left"]}>
|
||
<div>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
|
||
L’étude de votre notaire
|
||
</Typography>
|
||
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
|
||
{folder?.office?.name ?? "_"}
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
|
||
Numéro de téléphone
|
||
</Typography>
|
||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
|
||
{notaryContact?.cell_phone_number ?? notaryContact?.phone_number ?? "_"}
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
|
||
E-mail
|
||
</Typography>
|
||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
|
||
{notaryContact?.email ?? "_"}
|
||
</Typography>
|
||
</div>
|
||
<div className={classes["note-and-rib-button"]}>{noteAndRibButton()}</div>
|
||
</div>
|
||
|
||
<div className={classes["right"]}>{noteAndRibButton()}</div>
|
||
</div>
|
||
);
|
||
|
||
function noteAndRibButton() {
|
||
return (
|
||
<>
|
||
<div>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
|
||
Note dossier
|
||
</Typography>
|
||
<Typography typo={ETypo.TEXT_LG_REGULAR} type="span" color={ETypoColor.COLOR_NEUTRAL_950} className={classes["text"]}>
|
||
{note?.content ?? "-"}
|
||
</Typography>
|
||
</div>
|
||
{ribUrl && (
|
||
<Button
|
||
fullwidth
|
||
onClick={downloadRib}
|
||
variant={EButtonVariant.PRIMARY}
|
||
size={EButtonSize.LG}
|
||
styletype={EButtonstyletype.CONTAINED}
|
||
rightIcon={<ArrowDownTrayIcon />}>
|
||
Télécharger le RIB de mon notaire
|
||
</Button>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
}
|