2024-07-29 11:31:09 +02:00

121 lines
4.4 KiB
TypeScript

import LogoIcon from "@Assets/logo_small_blue.svg";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService";
import { DocumentIcon } from "@heroicons/react/24/outline";
import User from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import classes from "./classes.module.scss";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import { useRouter } from "next/router";
export default function Folder() {
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
const router = useRouter();
const [activeUser, setActiveUser] = useState<User | null>();
useEffect(() => {
const decodedJwt = JwtService.getInstance().decodeJwt();
if (!decodedJwt) return;
Users.getInstance()
.getByUid(decodedJwt.userId, {
q: {
contact: true,
},
})
.then((user) => {
setActiveUser(user);
});
}, []);
useEffect(() => {
Folders.getInstance()
.get({
q: {
where: { status: EFolderStatus.LIVE },
},
})
.then((folders) => {
console.log(folders);
if (folders.length > 0)
router.push(
Module.getInstance()
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folders[0]?.uid ?? ""),
);
});
}, [router]);
return (
<DefaultNotaryDashboard title={"Dossier"} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["title-container"]}>
<Image src={LogoIcon} alt="logo" />
{activeUser && activeUser.contact && (
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
</Typography>
)}
{!activeUser ||
(!activeUser.contact && (
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
Bonjour, bienvenue sur LeCoffre.io
</Typography>
))}
<Typography typo={ETypo.TEXT_LG_REGULAR}>
Commencez par créer votre{" "}
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} type="span">
premier dossier
</Typography>{" "}
pour profiter de toutes les fonctionnalités de notre plateforme sécurisée.
</Typography>
</div>
<div className={classes["no-folder"]}>
<DocumentIcon width={32} />
<div className={classes["text-container"]}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Aucun dossier créé</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
Vous n'avez pas encore de dossier créé. En quelques clics, commencez un nouveau dossier pour organiser et
sécuriser vos documents notariés.
</Typography>
</div>
<Link href={Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path}>
<Button variant={EButtonVariant.INFO}>Créer votre premier dossier</Button>
</Link>
</div>
<div className={classes["help-container"]}>
<div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Accéder aux guides
</Button>
</div>
<div className={classes["separator"]} />
<div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est pour vous aider.</Typography>
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Contactez le support
</Button>
</div>
</div>
</div>
</div>
</DefaultNotaryDashboard>
);
}