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

🎨 validated document

Browse Source
This commit is contained in:
Hugo Lextrait 2023-05-11 18:31:18 +02:00
parent 4687b4bfe1
commit 6e26d11bcc
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/green-check.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L8.375 16L4 11.4545" stroke="#12BF4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

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

@ -30,6 +30,10 @@
.right {
margin-left: 18px;
.validated {
color: var(--green-flash);
}
.refused-button {
font-size: 14px;
color: var(--re-hover);

11
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -15,6 +15,7 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";
import Confirm from "../Modal/Confirm";
import InputField from "../Form/Elements/InputField";
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
type IProps = {
defaultFiles?: FileCustomer[];
@ -82,10 +83,16 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
{this.props.document.document_type?.name}{" "}
{this.props.document.document_type?.public_description !== "" && (
<div className={this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""}>
{this.props.document.document_type?.name}
</div>
{this.props.document.document_type?.public_description !== "" &&
this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Tooltip text={this.props.document.document_type?.public_description} />
)}
{this.props.document.document_status === EDocumentStatus.VALIDATED && (
<Image src={GreenCheckIcon} alt="Document check" />
)}
</Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>