117 lines
3.4 KiB
TypeScript
117 lines
3.4 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 OfficeRib from "@Front/Api/LeCoffreApi/Customer/OfficeRib/OfficeRib";
|
|
|
|
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 === "Collaborateur")?.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;
|
|
OfficeRib.getInstance()
|
|
.getRibStream(folder.office.uid)
|
|
.then((blob) => setRibUrl(URL.createObjectURL(blob)));
|
|
}, [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}>
|
|
Votre notaire
|
|
</Typography>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
|
|
{notaryContact?.first_name} {notaryContact?.last_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} color={ETypoColor.COLOR_NEUTRAL_950}>
|
|
{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
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
}
|