From 4936540456d387225bef053d296b7bbf2714903b Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 11:39:51 +0200 Subject: [PATCH 1/5] :bug: Fixing responsive in an opened folder --- .../UserFolder/DocumentList/index.tsx | 12 ++++- .../UserFolder/classes.module.scss | 31 +++++------- .../DesignSystem/UserFolder/index.tsx | 50 +++++++++---------- 3 files changed, 47 insertions(+), 46 deletions(-) diff --git a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx index 561735b2..3d17c55f 100644 --- a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx @@ -3,6 +3,7 @@ import classes from "./classes.module.scss"; import { Document } from "le-coffre-resources/dist/Customer"; import Typography, { ITypo } from "../../Typography"; import DocumentNotary from "../../Document/DocumentNotary"; +import classNames from "classnames"; type IProps = { title: string; @@ -17,13 +18,15 @@ type IProps = { | null; openDeletionModal: (uid: Document["uid"]) => void; folderUid: string; + className?: string; }; type IState = {}; export default class DocumentList extends React.Component { public override render(): JSX.Element { + const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"]; return ( -
+
{this.props.title}
@@ -32,7 +35,12 @@ export default class DocumentList extends React.Component { {this.props.documents && this.props.documents.map((document) => { return ( - + ); })}
diff --git a/src/front/Components/DesignSystem/UserFolder/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/classes.module.scss index 7c711ca0..ecaffe07 100644 --- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss +++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss @@ -57,29 +57,24 @@ gap: 64px; margin-top: 32px; - @media(max-width: $screen-s){ - grid-template-columns: 1fr; + @media (max-width: $screen-s) { gap: 32px; - } - } - - .button-container { - display: inline-grid; - justify-items: start; - gap: 32px; - margin-top: 16px; - - .button-desktop{ - @media(max-width: $screen-s){ - display: none; - } + display: flex; + flex-direction: column; } - .button-mobile{ - display: none; + .documents-asked{ + order: -1; + } + + .button-container { + display: inline-grid; + justify-items: start; + gap: 32px; + margin-top: 16px; @media(max-width: $screen-s){ - display: block; + order: -1; } } } diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index a8014bc2..f01f6cbb 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -1,9 +1,11 @@ import ChevronIcon from "@Assets/Icons/chevron.svg"; import PlusIcon from "@Assets/Icons/plus.svg"; +import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents"; import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; import classNames from "classnames"; import Customer, { Document } from "le-coffre-resources/dist/Customer"; +import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import Image from "next/image"; import Link from "next/link"; import React from "react"; @@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar"; import classes from "./classes.module.scss"; import DocumentList from "./DocumentList"; import UserFolderHeader from "./UserFolderHeader"; -import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; -import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents"; type IProps = { customer: Customer; @@ -53,7 +53,8 @@ export default class UserFolder extends React.Component { const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments(); const redirectPath = Module.getInstance() .get() - .modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? ""); + .modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "") + .replace("[customerUid]", this.props.customer.uid ?? ""); return (
{
- + chevron open close { title="Documents demandés" openDeletionModal={this.openDeletionModal} folderUid={this.props.folder.uid!} + className={classes["documents-asked"]} /> { openDeletionModal={this.openDeletionModal} folderUid={this.props.folder.uid!} /> -
- {!this.props.isArchived && ( -
- - + + - - {} - {} -
- )} +
+ )} +
)} @@ -128,11 +127,11 @@ export default class UserFolder extends React.Component { this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); } - private async deleteAskedDocument(){ - try{ + private async deleteAskedDocument() { + try { await Documents.getInstance().delete(this.state.selectedDocumentToDelete); window.location.reload(); - }catch(e){ + } catch (e) { console.error(e); } } @@ -140,7 +139,7 @@ export default class UserFolder extends React.Component { private calculateDocumentsPercentageProgress(): number { if (!this.props.customer.documents) return 0; const totalDocuments: number = this.props.customer.documents.length; - const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0; + const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0; const numberDocumentsAsked: number = this.getDocumentsByStatus(EDocumentStatus.ASKED)?.length || 0; const depositedDocuments: number = totalDocuments - numberDocumentsAsked - numberDocumentsRefused; @@ -172,13 +171,12 @@ export default class UserFolder extends React.Component { // return this.props.customer.documents.filter((document) => !documentToExclude.includes(document)); // } - - private changeUserFolder(){ + private changeUserFolder() { this.props.onChange(this.props.customer.uid!); } private openDeletionModal(uid?: string): void { - if(!uid) return; + if (!uid) return; this.setState({ isOpenDeletionModal: true, From b85a0b9b027c7e1eb0c4a73190be928cd06826e0 Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Wed, 10 May 2023 13:01:16 +0200 Subject: [PATCH 2/5] :art: client dashboard --- .../DesignSystem/Button/classes.module.scss | 3 +- .../DepositDocument/classes.module.scss | 38 +++-- .../DesignSystem/DepositDocument/index.tsx | 161 ++++++++++++++---- .../Form/Elements/InputField/index.tsx | 21 ++- .../Components/DesignSystem/ToolTip/index.tsx | 15 +- .../Layouts/ClientDashboard/index.tsx | 3 + 6 files changed, 184 insertions(+), 57 deletions(-) diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index cc21022a..a1dc4704 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -15,6 +15,7 @@ white-space: nowrap; user-select: none; cursor: pointer; + font-family: var(--font-primary); svg { width: 18px; @@ -109,4 +110,4 @@ line-height: 22px; text-decoration-line: underline; } -} +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss index 3ef6b854..36f56325 100644 --- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss +++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss @@ -1,12 +1,17 @@ .root { padding: 24px; - background-color: white; + background-color: var(--white); border: 1px dashed #e7e7e7; - - height: fit-content; - &[data-drag-over="true"] { - border: 1px dashed grey; - } + + height: fit-content; + + &[data-drag-over="true"] { + border: 1px dashed var(--grey); + } + + &.validated { + border: 1px dashed var(--green-flash); + } .top-container { display: flex; @@ -25,6 +30,12 @@ .right { margin-left: 18px; + .refused-button { + font-size: 14px; + color: var(--re-hover); + margin-left: 8px; + } + .title { display: flex; align-items: center; @@ -40,9 +51,9 @@ margin-top: 16px; .file-container { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; .left-part { display: flex; @@ -50,7 +61,7 @@ gap: 8px; } - .cross{ + .cross { cursor: pointer; } } @@ -58,6 +69,7 @@ .bottom-container { margin-top: 16px; + .add-button { .add-document { display: flex; @@ -66,4 +78,8 @@ } } } -} + + .text { + margin-bottom: 12px; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index 0f566b4b..60acbac0 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -9,8 +9,12 @@ import Button, { EButtonVariant } from "../Button"; import Tooltip from "../ToolTip"; import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; -import { Document, File as FileCustomer } from "le-coffre-resources/dist/Customer"; +import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer"; import Files from "@Front/Api/LeCoffreApi/SuperAdmin/Files/Files"; +import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; +import classNames from "classnames"; +import Confirm from "../Modal/Confirm"; +import InputField from "../Form/Elements/InputField"; type IProps = { title: string; @@ -23,12 +27,15 @@ type IProps = { type IFile = { index: number; file: File; + uid: string; }; type IState = { files: IFile[]; isDragOver: boolean; currentFiles?: FileCustomer[]; + refusedReason?: string; + isShowRefusedReasonModalVisible: boolean; }; export default class DepositDocument extends React.Component { @@ -42,6 +49,8 @@ export default class DepositDocument extends React.Component { files: [], isDragOver: false, currentFiles: this.props.defaultFiles, + refusedReason: "", + isShowRefusedReasonModalVisible: false, }; this.addDocument = this.addDocument.bind(this); @@ -50,12 +59,18 @@ export default class DepositDocument extends React.Component { this.onDragOver = this.onDragOver.bind(this); this.onDragDrop = this.onDragDrop.bind(this); this.onDragLeave = this.onDragLeave.bind(this); + this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this); + this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this); + this.showRefusedReason = this.showRefusedReason.bind(this); } public override render(): JSX.Element { return (
{
- {this.props.title} - - - Demandé par le notaire le {this.formatDate(this.props.dateAsked)} + {this.props.title}{" "} + {this.props.document.document_type?.public_description !== "" && ( + + )} + {this.props.document.document_status !== EDocumentStatus.VALIDATED && ( + + Sélectionnez des documents .jpg, .pdf ou .png + + )} + {this.props.document.document_history?.map((history) => ( +
{this.renderDocumentHistory(history)}
+ ))}
- {this.state.files.length > 0 && ( + {this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
{this.state.files.map((file) => { const fileObj = file.file; @@ -99,14 +122,31 @@ export default class DepositDocument extends React.Component { })}
)} - -
- +
+ )} + +
+ + Votre document a été refusé pour la raison suivante : - -
+ +
+ + ; ); } @@ -117,11 +157,63 @@ export default class DepositDocument extends React.Component { files: this.props.defaultFiles.map((file) => ({ index: this.index++, file: new File([""], file.file_path ?? "", {}), + uid: file.uid!, })), }); } } + private onCloseModalShowRefusedReason() { + this.setState({ + isShowRefusedReasonModalVisible: false, + }); + } + + private onOpenModalShowRefusedReason() { + this.setState({ + isShowRefusedReasonModalVisible: true, + }); + } + + private renderDocumentHistory(history: DocumentHistory): JSX.Element | null { + switch (history.document_status) { + case EDocumentStatus.ASKED: + return ( + + Demandé par votre notaire le {this.formatDate(history.created_at!)} + + ); + case EDocumentStatus.VALIDATED: + return ( + + Validé par votre notaire le {this.formatDate(history.created_at!)} + + ); + case EDocumentStatus.DEPOSITED: + return ( + + Déposé le {this.formatDate(history.created_at!)} + + ); + + case EDocumentStatus.REFUSED: + return ( + + Document non conforme + {history.refused_reason !== "" && ( + + )} + + ); + } + return null; + } + private shortName(name: string): string { const maxLength = 20; if (name.length > maxLength) { @@ -139,6 +231,13 @@ export default class DepositDocument extends React.Component { event.preventDefault(); } + private showRefusedReason(refusedReason: string) { + this.setState({ + refusedReason, + }); + this.onOpenModalShowRefusedReason(); + } + private onDragLeave(event: React.DragEvent) { this.setState({ isDragOver: false, @@ -156,18 +255,6 @@ export default class DepositDocument extends React.Component { } private async addFile(file: File) { - this.setState({ - files: [ - ...this.state.files, - { - index: this.index++, - file: file, - }, - ], - }); - - if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file)); - const formData = new FormData(); formData.append("file", file, file.name); const query = JSON.stringify({ document: { uid: this.props.document.uid } }); @@ -175,25 +262,34 @@ export default class DepositDocument extends React.Component { const newFile = await Files.getInstance().post(formData); const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile]; + this.setState({ currentFiles: files, + files: [ + ...this.state.files, + { + index: this.index++, + file: file, + uid: newFile.uid!, + }, + ], }); + + if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file)); } private async removeFile(e: any) { const image = e.target as HTMLElement; const indexToRemove = image.getAttribute("data-file"); if (!indexToRemove) return; - // const file = this.state.files.find((file) => file.index === parseInt(indexToRemove)); + const file = this.state.files.find((file) => file.index === parseInt(indexToRemove)); + if (!file) return; this.setState({ files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)), }); if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file)); - // TODO Finir la suppression de fichier - // const deletedFileUid = this.props.document.files?.find((file) => file.file_path === newFile.file_path)?.uid; - // console.log({ deletedFileUid }); - // await Files.getInstance().delete(file?.uid); + await Files.getInstance().delete(file.uid); } private async onFileChange() { @@ -211,6 +307,7 @@ export default class DepositDocument extends React.Component { } private formatDate(date: Date) { - return date.toLocaleDateString("fr-FR"); + const dateToConvert = new Date(date); + return dateToConvert.toLocaleDateString("fr-FR"); } } diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx index 61a55cdc..10d0cfea 100644 --- a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx +++ b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx @@ -14,9 +14,9 @@ export type IProps = IBaseFieldProps & { export default class InputField extends BaseField { static override defaultProps: Partial = { ...BaseField.defaultProps, - required: true - } - + required: true, + }; + public override render(): ReactNode { let pattern; @@ -51,9 +51,12 @@ export default class InputField extends BaseField { className={ this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"] } - value={value} - /> -
{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
+ value={value}> + {value.toString()} + +
+ {this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"} +
); @@ -74,7 +77,9 @@ export default class InputField extends BaseField { } value={value} /> -
{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
+
+ {this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"} +
); @@ -84,7 +89,7 @@ export default class InputField extends BaseField { public override componentDidMount() { this.setState({ value: this.props.defaultValue ?? "", - }) + }); } // We filter the props we'll pass to the primitive input as they're useless for it diff --git a/src/front/Components/DesignSystem/ToolTip/index.tsx b/src/front/Components/DesignSystem/ToolTip/index.tsx index dddea180..a843ef6a 100644 --- a/src/front/Components/DesignSystem/ToolTip/index.tsx +++ b/src/front/Components/DesignSystem/ToolTip/index.tsx @@ -19,13 +19,18 @@ type IState = { const LightTooltip = styled(({ className, ...props }: TooltipProps) => )( ({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "var(--turquoise-flash)", - color: "white", - //boxShadow: theme.shadows[1], - fontSize: 11, + backgroundColor: "var(--white)", + color: "var(--black)", + boxShadow: "0px 4px 24px 0px #00000026", + fontSize: 14, + fontWeight: 400, + lineHeight: "22px", + fontFamily: "var(--font-primary)", + padding: "16px", + borderRadius: "0px", }, [`& .${tooltipClasses.arrow}`]: { - color: "var(--turquoise-flash)", + color: "var(--white)", }, }), ); diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx index d8a6d00e..360aa976 100644 --- a/src/front/Components/Layouts/ClientDashboard/index.tsx +++ b/src/front/Components/Layouts/ClientDashboard/index.tsx @@ -1,3 +1,4 @@ +import "reflect-metadata"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; @@ -112,6 +113,8 @@ export default class ClientDashboard extends Base { where: { depositor: mockUsers?.uid }, include: { files: true, + document_history: true, + document_type: true, }, }; const documents: Document[] = await Documents.getInstance().get(query); From 2fb2019710da14aa210f2b4f5401ad5416fbf50c Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 14:25:35 +0200 Subject: [PATCH 3/5] :bug: Fixing add client blinking --- .../Folder/AddClientToFolder/index.tsx | 132 +++++++++--------- 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx index da0e9378..b9449f9f 100644 --- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx @@ -10,7 +10,7 @@ import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import { IOption } from "@Front/Components/DesignSystem/Select"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; -import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; import { ECivility } from "le-coffre-resources/dist/Customer/Contact"; import { Customer } from "le-coffre-resources/dist/Notary"; @@ -20,17 +20,18 @@ import { NextRouter, useRouter } from "next/router"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; + enum ESelectedOption { EXISTING_CUSTOMER = "existing_customer", NEW_CUSTOMER = "new_customer", -} +} type IProps = {}; type IState = { - selectedFolder: IDashBoardFolder | null; selectedOption: ESelectedOption; availableCustomers: Customer[]; selectedCustomers: readonly IOption[]; existingCustomers: IOption[]; + isLoaded: boolean; }; type IPropsClass = IProps & { @@ -41,13 +42,12 @@ class AddClientToFolderClass extends BasePage { constructor(props: IPropsClass) { super(props); this.state = { - selectedFolder: null, selectedOption: ESelectedOption.EXISTING_CUSTOMER, availableCustomers: [], selectedCustomers: [], existingCustomers: [], + isLoaded: false, }; - this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onExistingClientSelected = this.onExistingClientSelected.bind(this); this.onNewClientSelected = this.onNewClientSelected.bind(this); this.onMutiSelectChange = this.onMutiSelectChange.bind(this); @@ -60,65 +60,74 @@ class AddClientToFolderClass extends BasePage { .get() .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( - +
Associer un ou plusieurs client(s) -
- {this.state.availableCustomers.length !== 0 && ( - - Client existant - - )} + {this.state.isLoaded && ( + <> +
+ {this.state.availableCustomers.length !== 0 && ( + + Client existant + + )} - - Nouveau client - -
- -
- {this.state.selectedOption === "existing_customer" && ( -
- -
- - - - -
+ + Nouveau client +
- )} - {this.state.selectedOption === "new_customer" && ( -
- - - - -
- - - - -
-
- )} -
+
+ {this.state.selectedOption === "existing_customer" && ( +
+ +
+ + + + +
+
+ )} + + {this.state.selectedOption === "new_customer" && ( +
+ + + + +
+ + + + +
+
+ )} +
+ + )}
); @@ -135,13 +144,12 @@ class AddClientToFolderClass extends BasePage { if (index !== -1) availableCustomers.splice(index, 1); }); + let selectedOption = ESelectedOption.EXISTING_CUSTOMER; if (availableCustomers.length === 0) { - this.setState({ - selectedOption: ESelectedOption.NEW_CUSTOMER, - }); + selectedOption = ESelectedOption.NEW_CUSTOMER; } - this.setState({ availableCustomers, existingCustomers }); + this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption }); } private async getFolderPreSelectedCustomers(folderUid: string): Promise { @@ -189,10 +197,6 @@ class AddClientToFolderClass extends BasePage { this.setState({ selectedCustomers }); } - private onSelectedFolder(folder: IDashBoardFolder): void { - this.setState({ selectedFolder: folder }); - } - private onExistingClientSelected(): void { this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER }); } From dfd55ae78391a26fb2a406d89653dbe92bdfb22c Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 14:29:30 +0200 Subject: [PATCH 4/5] :bug: Fixing checkbox style --- .../Components/DesignSystem/RadioBox/classes.module.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/front/Components/DesignSystem/RadioBox/classes.module.scss b/src/front/Components/DesignSystem/RadioBox/classes.module.scss index da7efcac..5052b70f 100644 --- a/src/front/Components/DesignSystem/RadioBox/classes.module.scss +++ b/src/front/Components/DesignSystem/RadioBox/classes.module.scss @@ -9,13 +9,14 @@ input[type="radio"] { appearance: none; background-color: transparent; - width: 16px; - height: 16px; + width: 15px; + height: 15px; border: 1px solid $turquoise-flash; border-radius: 100px; margin-right: 16px; - display: grid; - place-content: center; + display: flex; + align-items: center; + justify-content: center; margin-top: auto; margin-bottom: auto; } From 4dedba4744e714ea74637beb00185ddc26492342 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 15:06:58 +0200 Subject: [PATCH 5/5] :bug: Fixing modal refuse --- .../DesignSystem/DepositDocument/classes.module.scss | 6 ++++++ .../Components/DesignSystem/DepositDocument/index.tsx | 7 ++++--- .../Form/Elements/InputField/classes.module.scss | 5 ++++- .../DesignSystem/Form/Elements/InputField/index.tsx | 3 ++- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss index 36f56325..b270f875 100644 --- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss +++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss @@ -82,4 +82,10 @@ .text { margin-bottom: 12px; } +} + +.modal-content{ + display: flex; + flex-direction: column; + gap: 16px; } \ No newline at end of file diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index 60acbac0..a43af23a 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -65,6 +65,7 @@ export default class DepositDocument extends React.Component { } public override render(): JSX.Element { + console.log("Reason in state : ", this.state.refusedReason); return (
{ onAccept={this.onCloseModalShowRefusedReason} closeBtn header={"Motif du refus"} - confirmText={"J’ai compris"}> + confirmText={"J'ai compris"}>
Votre document a été refusé pour la raison suivante : - +
; @@ -200,7 +201,7 @@ export default class DepositDocument extends React.Component { return ( Document non conforme - {history.refused_reason !== "" && ( + {history.refused_reason && history.refused_reason.length > 0 && (