🎨 error message and document
This commit is contained in:
Hugo Lextrait
parent
70099340e2
commit
19ccc5a603
@ -93,3 +93,8 @@
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red-flash);
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -66,94 +66,100 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
classes["root"],
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
|
||||
)}
|
||||
onDragOver={this.onDragOver}
|
||||
onDrop={this.onDragDrop}
|
||||
onDragLeave={this.onDragLeave}
|
||||
data-drag-over={this.state.isDragOver.toString()}>
|
||||
<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
|
||||
<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"]}>
|
||||
<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}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
)}
|
||||
{this.props.document.document_history?.map((history) => (
|
||||
<div key={history.uid}>{this.renderDocumentHistory(history)}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
|
||||
<div className={classes["documents-container"]}>
|
||||
{this.state.files.map((file) => {
|
||||
const fileObj = file.file;
|
||||
if (file.archived) return;
|
||||
return (
|
||||
<div className={classes["file-container"]} key={fileObj.name + file.index}>
|
||||
<div className={classes["left-part"]}>
|
||||
<Image src={DocumentCheckIcon} alt="Document check" />
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
|
||||
{this.shortName(fileObj.name)}
|
||||
</Typography>
|
||||
</div>
|
||||
<Image
|
||||
src={CrossIcon}
|
||||
alt="Cross icon"
|
||||
className={classes["cross"]}
|
||||
onClick={this.removeFile}
|
||||
data-file={file.index}
|
||||
/>
|
||||
<>
|
||||
<div
|
||||
className={classNames(
|
||||
classes["root"],
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
|
||||
)}
|
||||
onDragOver={this.onDragOver}
|
||||
onDrop={this.onDragDrop}
|
||||
onDragLeave={this.onDragLeave}
|
||||
data-drag-over={this.state.isDragOver.toString()}>
|
||||
<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
|
||||
<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"]}>
|
||||
<div
|
||||
className={
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
|
||||
}>
|
||||
{this.props.document.document_type?.name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
|
||||
<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" />
|
||||
{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>
|
||||
</Button>
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
)}
|
||||
{this.props.document.document_history?.map((history) => (
|
||||
<div key={history.uid}>{this.renderDocumentHistory(history)}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Confirm
|
||||
isOpen={this.state.isShowRefusedReasonModalVisible}
|
||||
onClose={this.onCloseModalShowRefusedReason}
|
||||
showCancelButton={false}
|
||||
onAccept={this.onCloseModalShowRefusedReason}
|
||||
closeBtn
|
||||
header={"Motif du refus"}
|
||||
confirmText={"J'ai compris"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Votre document a été refusé pour la raison suivante :
|
||||
</Typography>
|
||||
<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
|
||||
</div>
|
||||
</Confirm>
|
||||
</div>
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
|
||||
<div className={classes["documents-container"]}>
|
||||
{this.state.files.map((file) => {
|
||||
const fileObj = file.file;
|
||||
if (file.archived) return;
|
||||
return (
|
||||
<div className={classes["file-container"]} key={fileObj.name + file.index}>
|
||||
<div className={classes["left-part"]}>
|
||||
<Image src={DocumentCheckIcon} alt="Document check" />
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
|
||||
{this.shortName(fileObj.name)}
|
||||
</Typography>
|
||||
</div>
|
||||
<Image
|
||||
src={CrossIcon}
|
||||
alt="Cross icon"
|
||||
className={classes["cross"]}
|
||||
onClick={this.removeFile}
|
||||
data-file={file.index}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
|
||||
<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>
|
||||
)}
|
||||
<Confirm
|
||||
isOpen={this.state.isShowRefusedReasonModalVisible}
|
||||
onClose={this.onCloseModalShowRefusedReason}
|
||||
showCancelButton={false}
|
||||
onAccept={this.onCloseModalShowRefusedReason}
|
||||
closeBtn
|
||||
header={"Motif du refus"}
|
||||
confirmText={"J'ai compris"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Votre document a été refusé pour la raison suivante :
|
||||
</Typography>
|
||||
<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
|
||||
</div>
|
||||
</Confirm>
|
||||
</div>
|
||||
{<div></div>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -49,7 +49,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
|
||||
this.deleteAskedDocument = this.deleteAskedDocument.bind(this);
|
||||
}
|
||||
public override render(): JSX.Element {
|
||||
const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
|
||||
const documentsAsked: Document[] | null = [
|
||||
...(this.getDocumentsByStatus("ASKED") ?? []),
|
||||
...(this.getDocumentsByStatus("REFUSED") ?? []),
|
||||
];
|
||||
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
|
||||
const redirectPath = Module.getInstance()
|
||||
.get()
|
||||
@ -111,9 +114,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
|
||||
Demander un autre document{" "}
|
||||
</Button>
|
||||
</Link>
|
||||
<Button disabled={documentsAsked ? false : true}>
|
||||
Envoyer un mail de demande
|
||||
</Button>
|
||||
<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -148,7 +148,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
</Typography>
|
||||
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
|
||||
<div className={classes["dont-show-again"]}>
|
||||
<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} />
|
||||
<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user