4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Beginning document deposit component

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-02 08:36:44 +02:00
parent 7293d6b95c
commit 73b329831e
6 changed files with 113 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/front/Assets/Icons/deposit-document.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 2.5H7.5C6.83696 2.5 6.20107 2.76339 5.73223 3.23223C5.26339 3.70107 5 4.33696 5 5V25C5 25.663 5.26339 26.2989 5.73223 26.7678C6.20107 27.2366 6.83696 27.5 7.5 27.5H22.5C23.163 27.5 23.7989 27.2366 24.2678 26.7678C24.7366 26.2989 25 25.663 25 25V10L17.5 2.5Z" stroke="#320756" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 22.5V15" stroke="#C5B2D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.25 18.75H18.75" stroke="#C5B2D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5 2.5V10H25" stroke="#320756" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 786 B

39
src/front/Components/DesignSystem/DepositDocument/classes.module.scss Normal file
View File

@ -0,0 +1,39 @@
.root {
padding: 24px;
background-color: white;
border: 1px dashed #e7e7e7;
.top-container {
display: flex;
align-items: center;
.left {
margin-right: 28px;
}
.separator {
background-color: #939393;
width: 1px;
align-self: stretch;
}
.right {
margin-left: 18px;
.title {
display: flex;
align-items: center;
gap: 8px;
}
}
}
.bottom-container {
.add-button{
.add-document{
display: flex;
align-items: center;
gap: 14px;
}
}
}
}

51
src/front/Components/DesignSystem/DepositDocument/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
import PlusIcon from "@Assets/Icons/plus.svg";
import Image from "next/image";
import React from "react";
import Button, { EButtonVariant } from "../Button";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
title: string;
dateAsked: Date;
};
type IState = {};
export default class DepositDocument extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["left"]}>
<Image src={DepositDocumentIcon} alt="Deposit document" />
</div>
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
{this.props.title} <Tooltip text={"Blabla"} />
</Typography>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
Demandé par le notaire le {this.formatDate(this.props.dateAsked)}
</Typography>
</div>
</div>
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
</div>
</div>
);
}
private addDocument() {}
private formatDate(date: Date) {
return date.toLocaleDateString("fr-FR");
}
}

4
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -130,6 +130,10 @@
color: var(--purple-flash);
}
&.pink-flash {
color: var(--pink-flash);
}
&.green-flash {
color: var(--green-flash);
}

1
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -35,6 +35,7 @@ export enum ITypoColor {
GREY = "grey",
BLACK = "black",
PURPLE_FLASH = "purple-flash",
PINK_FLASH = "pink-flash",
GREEN_FLASH = "green-flash",
ORANGE_FLASH = "orange-flash",
RED_FLASH = "red-flash",

23
src/front/Components/Layouts/ClientDashboard/index.tsx
View File

@ -1,12 +1,13 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";
import classes from "./classes.module.scss";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
type IProps = {};
type IState = {
@ -30,12 +31,12 @@ export default class ClientDashboard extends Base<IProps, IState> {
{this.renderHeader()}
<div className={classes["sub-container"]}>
<div className={classes["content"]}>
<div className={classes["component-to-replace"]}></div>
<div className={classes["component-to-replace"]}></div>
<div className={classes["component-to-replace"]}></div>
<div className={classes["component-to-replace"]}></div>
<div className={classes["component-to-replace"]}></div>
<div className={classes["component-to-replace"]}></div>
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
</div>
<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
@ -62,7 +63,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant.
</Typography>
<div className={classes["component-to-replace"]}></div>
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
</div>
</Confirm>
</div>
@ -84,7 +85,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
Veuillez
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à
l’aide du bouton ci-dessus.