add alert modal for wrong file types
This commit is contained in:
OxSaitama
parent
0c1fc12ed9
commit
b011d2e41e
@ -14,6 +14,7 @@ import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
import classNames from "classnames";
|
||||
import Confirm from "../Modal/Confirm";
|
||||
import Alert from "../Modal/Alert";
|
||||
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
|
||||
import Loader from "../Loader";
|
||||
import TextAreaField from "../Form/TextareaField";
|
||||
@ -38,6 +39,7 @@ type IState = {
|
||||
currentFiles?: FileCustomer[];
|
||||
refusedReason?: string;
|
||||
isShowRefusedReasonModalVisible: boolean;
|
||||
showFailedUploaded: string | null;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
@ -78,6 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
currentFiles: this.props.defaultFiles,
|
||||
refusedReason: "",
|
||||
isShowRefusedReasonModalVisible: false,
|
||||
showFailedUploaded: null,
|
||||
loading: false,
|
||||
};
|
||||
|
||||
@ -90,6 +93,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
|
||||
this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
|
||||
this.showRefusedReason = this.showRefusedReason.bind(this);
|
||||
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
@ -210,6 +214,17 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
Ce document n'est pas conforme. Veuillez le déposer à nouveau.
|
||||
</Typography>
|
||||
)}
|
||||
{this.state.showFailedUploaded && (
|
||||
<Alert onClose={this.onCloseAlertUpload}
|
||||
header={"Fichier non autorisé"}
|
||||
isOpen={!!this.state.showFailedUploaded}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
{this.state.showFailedUploaded}
|
||||
</Typography>
|
||||
</div>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -339,7 +354,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
const query = JSON.stringify({ document: { uid: this.props.document.uid } });
|
||||
formData.append("q", query);
|
||||
|
||||
const newFile = await Files.getInstance().post(formData);
|
||||
let newFile: FileCustomer;
|
||||
try {
|
||||
newFile = await Files.getInstance().post(formData);
|
||||
} catch (e) {
|
||||
|
||||
this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", loading: false, });
|
||||
return false;
|
||||
}
|
||||
const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
|
||||
|
||||
const newFileList = [
|
||||
@ -396,6 +418,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
}
|
||||
}
|
||||
|
||||
private onCloseAlertUpload() {
|
||||
this.setState({ showFailedUploaded: null });
|
||||
}
|
||||
|
||||
private addDocument() {
|
||||
if (!this.inputRef.current) return;
|
||||
this.inputRef.current.value = "";
|
||||
|
||||
@ -16,6 +16,7 @@ import Button, { EButtonVariant } from "../Button";
|
||||
import Confirm from "../Modal/Confirm";
|
||||
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
|
||||
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
|
||||
import Alert from "../Modal/Alert";
|
||||
|
||||
type IProps = {
|
||||
onChange?: (files: File[]) => void;
|
||||
@ -38,6 +39,7 @@ type IState = {
|
||||
currentFiles?: IFile[];
|
||||
refusedReason?: string;
|
||||
isShowRefusedReasonModalVisible: boolean;
|
||||
showFailedUploaded: string | null;
|
||||
isAddDocumentModalVisible: boolean;
|
||||
isLoading: boolean;
|
||||
};
|
||||
@ -55,6 +57,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
isDragOver: false,
|
||||
refusedReason: "",
|
||||
isShowRefusedReasonModalVisible: false,
|
||||
showFailedUploaded: null,
|
||||
isLoading: false,
|
||||
};
|
||||
|
||||
@ -65,101 +68,119 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
this.onDragDrop = this.onDragDrop.bind(this);
|
||||
this.onDragLeave = this.onDragLeave.bind(this);
|
||||
this.onAccept = this.onAccept.bind(this);
|
||||
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<Confirm
|
||||
isOpen={this.state.isAddDocumentModalVisible}
|
||||
onClose={this.props.onClose!}
|
||||
onAccept={this.onAccept}
|
||||
closeBtn
|
||||
header={"Ajouter un document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
|
||||
canConfirm={!this.state.isLoading}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Vous souhaitez envoyer un autre document à votre notaire ?
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
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={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>
|
||||
</Typography>
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.currentFiles && this.state.currentFiles.length > 0 && (
|
||||
<div className={classes["documents-container"]}>
|
||||
{this.state.currentFiles.map((file) => {
|
||||
|
||||
const fileObj = file.file;
|
||||
|
||||
return (
|
||||
<div className={classes["file-container"]} key={fileObj.name}>
|
||||
<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>
|
||||
<Confirm
|
||||
isOpen={this.state.isAddDocumentModalVisible}
|
||||
onClose={this.props.onClose!}
|
||||
onAccept={this.onAccept}
|
||||
closeBtn
|
||||
header={"Ajouter un document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
|
||||
canConfirm={!this.state.isLoading}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Vous souhaitez envoyer un autre document à votre notaire ?
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
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={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>
|
||||
);
|
||||
})}
|
||||
</Typography>
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.currentFiles && this.state.currentFiles.length > 0 && (
|
||||
<div className={classes["documents-container"]}>
|
||||
{this.state.currentFiles.map((file) => {
|
||||
const fileObj = file.file;
|
||||
|
||||
return (
|
||||
<div className={classes["file-container"]} key={fileObj.name}>
|
||||
<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>
|
||||
)}
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</Confirm>
|
||||
</Confirm>
|
||||
{this.state.showFailedUploaded && (
|
||||
<Alert
|
||||
onClose={this.onCloseAlertUpload}
|
||||
header={"Fichier non autorisé"}
|
||||
isOpen={!!this.state.showFailedUploaded}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
{this.state.showFailedUploaded}
|
||||
</Typography>
|
||||
</div>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public override componentDidMount(): void {}
|
||||
|
||||
private onCloseAlertUpload() {
|
||||
this.setState({ showFailedUploaded: null });
|
||||
}
|
||||
|
||||
private async onAccept() {
|
||||
this.setState({
|
||||
isLoading: true,
|
||||
@ -182,7 +203,12 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName);
|
||||
const query = JSON.stringify({ document: { uid: documentCreated.uid } });
|
||||
formData.append("q", query);
|
||||
await Files.getInstance().post(formData);
|
||||
try {
|
||||
await Files.getInstance().post(formData);
|
||||
} catch (e) {
|
||||
this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", isLoading: false });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
|
||||
@ -1,10 +1,22 @@
|
||||
@import "Themes/constants.scss";
|
||||
|
||||
.sub-container {
|
||||
padding: 40px;
|
||||
}
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sub-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user