diff --git a/.vscode/custom.code-snippets b/.vscode/custom.code-snippets new file mode 100644 index 00000000..0a5a06ae --- /dev/null +++ b/.vscode/custom.code-snippets @@ -0,0 +1,9 @@ +{ + "Media queries": { + "prefix": "media", + "body": [ + "@media(max-width: \\$screen-$1){$2}" + ], + "description": "media queries" + }, +} \ No newline at end of file diff --git a/src/front/Assets/Icons/check.svg b/src/front/Assets/Icons/check.svg index 7f7be385..1ca6eec4 100644 --- a/src/front/Assets/Icons/check.svg +++ b/src/front/Assets/Icons/check.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss index a5e980a7..bb91348f 100644 --- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss +++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss @@ -10,7 +10,7 @@ background-color: transparent; width: 16px; height: 16px; - border: 1px solid $green-flash; + border: 1px solid $turquoise-flash; border-radius: 2px; margin-right: 16px; display: grid; @@ -19,11 +19,11 @@ input[type="checkbox"]::before { content: url("../../../Assets/Icons/check.svg"); - place-content: center; + place-content: flex-start; display: grid; width: 16px; height: 16px; - background-color: $green-flash; + background-color: $turquoise-flash; border-radius: 2px; transform: scale(0); } diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index fcf3bb9b..06a50c27 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -1,10 +1,13 @@ import React from "react"; + +import { IOption } from "../Select"; import Tooltip from "../ToolTip"; import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; type IProps = { - name: string; + name?: string; + option: IOption; toolTip?: string; }; @@ -17,8 +20,12 @@ export default class CheckBox extends React.Component { return ( diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx index fbb7ccb6..eb1f2f00 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx @@ -1,5 +1,7 @@ -import Button, { EButtonVariant } from "../../Button"; +import React from "react"; + import Modal, { IProps as IPropsModal } from ".."; +import Button, { EButtonVariant } from "../../Button"; import classes from "./classes.module.scss"; import React from "react"; import Link from "next/link"; @@ -10,7 +12,7 @@ type IProps = IPropsModal & { cancelPath?: string; confirmText: string | JSX.Element; showCancelButton: boolean; - isConfirmButtonDisabled: boolean; + canConfirm: boolean; }; type IState = {}; @@ -20,7 +22,7 @@ export default class Confirm extends React.Component { showCancelButton: true, cancelText: "Cancel", confirmText: "Confirm", - isConfirmButtonDisabled: false, + canConfirm: false, ...Modal.defaultProps, }; diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss index 1c1e3038..a247e517 100644 --- a/src/front/Components/DesignSystem/Modal/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/classes.module.scss @@ -35,6 +35,7 @@ &[data-will-close="true"] { animation: smooth-disappear var(--animation-delay) $custom-easing; + opacity: 0; } .background { diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index 802af1a7..6726b19b 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -1,12 +1,12 @@ +import CrossIcon from "@Assets/Icons/cross.svg"; +import Image from "next/image"; import React from "react"; + +import Typography, { ITypo } from "../Typography"; import classes from "./classes.module.scss"; import Footer from "./Elements/Footer"; import Header from "./Elements/Header"; - import Loader from "./Elements/Loader"; -import Typography, { ITypo } from "../Typography"; -import CrossIcon from "@Assets/Icons/cross.svg"; -import Image from "next/image"; export type IProps = { closeBtn?: boolean; @@ -24,6 +24,7 @@ export type IProps = { type IState = { willClose: boolean; + isOpen: boolean; }; export default class Modal extends React.Component { @@ -37,12 +38,12 @@ export default class Modal extends React.Component { this.state = { willClose: false, + isOpen: this.props.isOpen, }; } public override render(): JSX.Element | null { - if (!this.props.isOpen) return null; - const onClick = (this.props.hasContainerClosable && this.close) || (() => {}); + if (!this.state.isOpen) return null; return (
{ data-side-background={this.props.withSideBackground} data-will-close={this.state.willClose.toString()}>
-
+
{this.props.closeBtn && (
Unplugged @@ -71,18 +70,24 @@ export default class Modal extends React.Component { ); } - public override componentDidUpdate(): void { + public override componentDidUpdate(prevProps: IProps): void { + if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { + this.setState({ willClose: true }); + window.setTimeout(() => { + this.setState({ + isOpen: false, + willClose: false, + }); + }, this.props.animationDelay); + } + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { + this.setState({ isOpen: true }); + } this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); } protected close() { if (this.state.willClose) return; - this.setState({ willClose: true }); - window.setTimeout(() => { - this.setState({ - willClose: false, - }); - this.props.onClose(); - }, this.props.animationDelay); + this.props.onClose(); } } diff --git a/src/front/Components/DesignSystem/ToolTip/index.tsx b/src/front/Components/DesignSystem/ToolTip/index.tsx index 82282499..dddea180 100644 --- a/src/front/Components/DesignSystem/ToolTip/index.tsx +++ b/src/front/Components/DesignSystem/ToolTip/index.tsx @@ -1,8 +1,8 @@ -import React from "react"; -import Image from "next/image"; import ToolTipIcon from "@Assets/Icons/tool-tip.svg"; -import TooltipMUI, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; import styled from "@emotion/styled"; +import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; +import Image from "next/image"; +import React from "react"; type IProps = { title?: string | JSX.Element; @@ -19,13 +19,13 @@ type IState = { const LightTooltip = styled(({ className, ...props }: TooltipProps) => )( ({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "var(--colormerdum)", - color: "var(--colormerdum)", + backgroundColor: "var(--turquoise-flash)", + color: "white", //boxShadow: theme.shadows[1], fontSize: 11, }, [`& .${tooltipClasses.arrow}`]: { - // color: theme.palette.common.black, + color: "var(--turquoise-flash)", }, }), ); diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index aee6e374..d3cf9451 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -4,6 +4,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar import classNames from "classnames"; import Customer, { Document } from "le-coffre-resources/dist/Customer"; import Image from "next/image"; +import Link from "next/link"; import React from "react"; import Button, { EButtonVariant } from "../Button"; @@ -94,9 +95,11 @@ export default class UserFolder extends React.Component { />
- + + + {}
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx index b86d5071..e76a0821 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx @@ -15,6 +15,7 @@ type IProps = { scrollTop: number | null; image: StaticImageData; type: "background" | "image"; + showHeader: boolean; }; type IState = {}; @@ -23,12 +24,13 @@ export default class DefaultDoubleSidePage extends React.Component -
+
{this.props.children}
{this.props.type === "image" && ( diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index ae937e9b..20445c3f 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -1,25 +1,27 @@ +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import CheckBox from "@Front/Components/DesignSystem/CheckBox"; +import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary"; +import FolderContainer from "@Front/Components/DesignSystem/FolderContainer"; +import FolderList from "@Front/Components/DesignSystem/FolderListContainer"; +import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; +import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; +import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; +import RadioBox from "@Front/Components/DesignSystem/RadioBox"; +import SearchBar from "@Front/Components/DesignSystem/SearchBar"; +import Select, { IOption } from "@Front/Components/DesignSystem/Select"; +import ToolTip from "@Front/Components/DesignSystem/ToolTip"; +import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; +import UserFolder from "@Front/Components/DesignSystem/UserFolder"; import BasePage from "@Front/Components/Layouts/Base"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; -import classes from "./classes.module.scss"; -import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; -import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Toasts, { IToast } from "@Front/Stores/Toasts"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; -import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink"; -import CheckBox from "@Front/Components/DesignSystem/CheckBox"; -import ToolTip from "@Front/Components/DesignSystem/ToolTip"; -import RadioBox from "@Front/Components/DesignSystem/RadioBox"; -import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; -import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; + +import classes from "./classes.module.scss"; +import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData"; + import "reflect-metadata"; -import FolderContainer from "@Front/Components/DesignSystem/FolderContainer"; -import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData"; -import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary"; -import Select, { IOption } from "@Front/Components/DesignSystem/Select"; -import UserFolder from "@Front/Components/DesignSystem/UserFolder"; -import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; -import SearchBar from "@Front/Components/DesignSystem/SearchBar"; -import FolderList from "@Front/Components/DesignSystem/FolderListContainer"; type IState = { isModalDisplayed: boolean; @@ -111,8 +113,19 @@ export default class DesignSystem extends BasePage {
CheckBox component
- - + +
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss new file mode 100644 index 00000000..cff19e32 --- /dev/null +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -0,0 +1,42 @@ +@import "@Themes/constants.scss"; + +.root { + .title { + margin-top: 24px; + } + + .form-container { + margin-top: 16px; + + .checkbox-container { + margin-top: 32px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + + @media (max-width: $screen-m) { + grid-template-columns: 1fr; + } + } + + .buttons-container { + display: flex; + gap: 32px; + margin-top: 32px; + } + } + + .add-document-container { + margin-top: 32px; + } + + .buttons-container { + margin-top: 32px; + } + + .add-document-form-container { + display: flex; + flex-direction: column; + gap: 24px; + } +} diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx new file mode 100644 index 00000000..84a2be86 --- /dev/null +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -0,0 +1,208 @@ +import PlusIcon from "@Assets/Icons/plus.svg"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import CheckBox from "@Front/Components/DesignSystem/CheckBox"; +import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form"; +import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Select, { IOption } from "@Front/Components/DesignSystem/Select"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import BackArrow from "@Front/Components/Elements/BackArrow"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import React from "react"; + +import BasePage from "../../Base"; +import classes from "./classes.module.scss"; + +type IProps = {}; +type IState = { + actType: IOption | null; + isCreateDocumentModalVisible: boolean; + documentName: string; + visibleDescription: string; +}; + +export default class AskDocuments extends BasePage { + private actsOptions: IOption[] = [ + { label: "Divorce", value: "divorce" }, + { label: "Succession", value: "succession" }, + { label: "Vente immobilière", value: "vente_immobiliere" }, + ]; + + private documentsType: IOption[] = [ + { label: "Carte d'identité", value: "carte_identite" }, + { label: "Diagnostic État Risques et Pollution", value: "diagnostic_erep" }, + { label: "Justificatif de domicile", value: "justificatif_domicile" }, + { label: "Diagnostic gaz", value: "diagnostic_gaz" }, + { label: "Compromis de vente", value: "compromis_de_vente" }, + { label: "Diagnostic DPE", value: "diagnostic_dpe" }, + { label: "Diagnostic électrique", value: "diagnostic_electrique" }, + { label: "Diagnostic plombs", value: "diagnostic_plombs" }, + { label: "Diagnostic amiante", value: "diagnostic_amiante" }, + { label: "Diagnostic termites", value: "diagnostic_termites" }, + { label: "Diagnostic État des nuisances sonores aériennes", value: "diagnostic_ednsa" }, + ]; + + public constructor(props: IProps) { + super(props); + + this.state = { + actType: null, + isCreateDocumentModalVisible: false, + documentName: "", + visibleDescription: "", + }; + + this.onActTypeChange = this.onActTypeChange.bind(this); + this.onFormSubmit = this.onFormSubmit.bind(this); + this.closeModal = this.closeModal.bind(this); + this.openModal = this.openModal.bind(this); + this.cancel = this.cancel.bind(this); + this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this); + this.onDocumentNameChange = this.onDocumentNameChange.bind(this); + this.addDocument = this.addDocument.bind(this); + this.canAddDocument = this.canAddDocument.bind(this); + } + + public override render(): JSX.Element { + return ( + +
+ + + Demander des documents + +
+
+ {!this.state.actType && ( +