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/devops/Chart.yaml b/devops/Chart.yaml index 924216d4..597a3d86 100644 --- a/devops/Chart.yaml +++ b/devops/Chart.yaml @@ -21,4 +21,4 @@ version: 0.0.1 # incremented each time you make changes to the application. Versions are not expected to # follow Semantic Versioning. They should reflect the version the application is using. # It is recommended to use it with quotes. -appVersion: 0.4.10 +appVersion: 0.4.14 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/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 88be86e8..a9b28008 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import React, { CSSProperties } from "react"; import classes from "./classes.module.scss"; +import classNames from "classnames"; export enum EButtonVariant { PRIMARY = "primary", @@ -21,6 +22,7 @@ type IProps = { type?: "button" | "submit"; isloading?: string; iconposition?: "left" | "right"; + className?: string; }; export default function Button(props: IProps) { @@ -35,6 +37,7 @@ export default function Button(props: IProps) { children, icon, iconstyle, + className = "", } = props; const fullwidthattr = fullwidth.toString(); @@ -46,7 +49,7 @@ export default function Button(props: IProps) { delete attributes.iconstyle; delete attributes.iconposition; return ( -
{this.props.folders.map((folder) => { return ( -
+
; @@ -30,3 +39,10 @@ export default class FolderList extends React.Component { ); } } + +export default function FolderList(props: IProps) { + const router = useRouter(); + let { folderUid } = router.query; + folderUid = folderUid as string; + return ; +} diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx index 56cd641d..0ed143a4 100644 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx @@ -1,5 +1,6 @@ import LogOutButton from "@Front/Components/DesignSystem/LogOutButton"; import React from "react"; + import NavigationLink from "../../NavigationLink"; import classes from "./classes.module.scss"; @@ -17,18 +18,8 @@ export default class BurgerModal extends React.Component { <>
- + - - - - - - - - - -
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss index c8bb6f28..5d602668 100644 --- a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss @@ -19,4 +19,8 @@ bottom: 0; left: 0; } + + &.desactivated{ + cursor: not-allowed; + } } diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx index bfe47b5f..64c154c4 100644 --- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx +++ b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx @@ -1,11 +1,12 @@ -import React from "react"; -import classes from "./classes.module.scss"; -import Link from "next/link"; -import Typography, { ITypo } from "../../Typography"; import classNames from "classnames"; +import Link from "next/link"; import router from "next/router"; +import React from "react"; import { useEffect, useState } from "react"; +import Typography, { ITypo } from "../../Typography"; +import classes from "./classes.module.scss"; + type IPropsClass = { text: string | JSX.Element; path?: string; @@ -16,20 +17,30 @@ type IStateClass = {}; class HeaderLinkClass extends React.Component { public override render(): JSX.Element { - return ( - -
- {this.props.text} + if (this.props.path !== "" && this.props.path !== undefined) { + return ( + +
+ {this.props.text} +
+ {this.props.isActive &&
} + + ); + } else { + return ( +
+
+ {this.props.text} +
- {this.props.isActive &&
} - - ); + ); + } } } export default function HeaderLink(props: IPropsClass) { const [url, setUrl] = useState(""); useEffect(() => setUrl(router?.asPath), []); - const isActive = url === props.path; + const isActive = url.includes(props.path!); return ; } diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx index 73e5db27..86069c31 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx +++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx @@ -1,6 +1,7 @@ import React from "react"; -import classes from "./classes.module.scss"; + import HeaderLink from "../HeaderLink"; +import classes from "./classes.module.scss"; type IProps = {}; type IState = {}; @@ -9,11 +10,8 @@ export default class Navigation extends React.Component { public override render(): JSX.Element { return (
- - - - - + +
); } diff --git a/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss b/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss index ce9eba25..95816c02 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss @@ -10,8 +10,13 @@ flex: 1; } + .sub-container { + flex: 1; + display: flex; + } + @media (max-width: $screen-s) { flex-direction: column-reverse; gap: 8px; } -} +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx index 77728315..a873b69e 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx @@ -1,14 +1,17 @@ -import Button, { EButtonVariant } from "../../Button"; -import Modal, { IProps as IPropsModal } from ".."; -import classes from "./classes.module.scss"; +import Link from "next/link"; import React from "react"; +import Modal, { IProps as IPropsModal } from ".."; +import Button, { EButtonVariant } from "../../Button"; +import classes from "./classes.module.scss"; + type IProps = IPropsModal & { onAccept?: () => void; cancelText: string | JSX.Element; + cancelPath?: string; confirmText: string | JSX.Element; showCancelButton: boolean; - isConfirmButtonDisabled: boolean; + canConfirm: boolean; }; type IState = {}; @@ -18,7 +21,7 @@ export default class Confirm extends React.Component { showCancelButton: true, cancelText: "Cancel", confirmText: "Confirm", - isConfirmButtonDisabled: false, + canConfirm: false, ...Modal.defaultProps, }; @@ -39,15 +42,25 @@ export default class Confirm extends React.Component { private footer(): JSX.Element { return (
- {this.props.showCancelButton && ( - + + ) : ( +
+ +
+ ))} +
+ - )} - - +
); } 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/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx index fc434b9c..0293f7b3 100644 --- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx @@ -5,20 +5,24 @@ import Typography, { ITypo } from "../../Typography"; import Image from "next/image"; import PenIcon from "@Assets/Icons/pen.svg"; import WarningBadge from "../../WarningBadge"; +import Link from "next/link"; type IProps = { contact: { + uid: Contact["uid"]; first_name: Contact["first_name"]; last_name: Contact["last_name"]; phone_number: Contact["phone_number"]; cell_phone_number: Contact["cell_phone_number"]; email: Contact["email"]; }; + selectedFolderUid: string; }; type IState = {}; -export default class UserFolderHeader extends React.Component { +export default class UserFolderHeaderClass extends React.Component { public override render(): JSX.Element { + const redirectPath = "/folder/".concat(this.props.selectedFolderUid, "/update/client/", this.props.contact.uid); return (
@@ -47,7 +51,9 @@ export default class UserFolderHeader extends React.Component {
- edit + + edit +
); diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index ced749a5..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"; @@ -60,7 +61,7 @@ export default class UserFolder extends React.Component {
- + chevron open close { />
- + + + {}
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/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx index beb17d58..3906f638 100644 --- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx @@ -126,7 +126,7 @@ class AddClientToFolderClass extends BasePage { export default function AddClientToFolder() { const router = useRouter(); - let { uid } = router.query; - uid = uid as string; - return ; + let { folderUid } = router.query; + folderUid = folderUid as string; + return ; } 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..6afe823c --- /dev/null +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -0,0 +1,46 @@ +@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; + + @media (max-width: $screen-s) { + flex-direction: column; + } + } + } + + .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..0b9b84f7 --- /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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +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 && ( +