4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/ora-lecoffr-278-page-ask-documents' into dev

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-20 11:03:24 +02:00
commit f884bcc79a
16 changed files with 356 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.vscode/custom.code-snippets vendored Normal file
View File

@ -0,0 +1,9 @@
{
"Media queries": {
"prefix": "media",
"body": [
"@media(max-width: \\$screen-$1){$2}"
],
"description": "media queries"
},
}

4
src/front/Assets/Icons/check.svg
View File

@ -1,3 +1,3 @@
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.81353 0.144344C10.0429 0.354011 10.0635 0.715195 9.85967 0.95107L3.93375 7.80821C3.82832 7.9302 3.67721 8 3.51852 8C3.35983 8 3.20872 7.9302 3.10329 7.80821L0.140334 4.37964C-0.0635092 4.14376 -0.0428533 3.78258 0.18647 3.57291C0.415794 3.36324 0.766945 3.38449 0.970788 3.62037L3.51852 6.56846L9.02921 0.191798C9.23306 -0.0440776 9.58421 -0.0653237 9.81353 0.144344Z" fill="white"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2251 3.36088C13.4893 3.59571 13.5131 4.00024 13.2783 4.26442L6.4516 11.9444C6.33015 12.0811 6.15607 12.1592 5.97326 12.1592C5.79045 12.1592 5.61637 12.0811 5.49492 11.9444L2.08159 8.10442C1.84676 7.84024 1.87055 7.43571 2.13474 7.20088C2.39892 6.96606 2.80344 6.98985 3.03827 7.25403L5.97326 10.5559L12.3216 3.41403C12.5564 3.14985 12.9609 3.12606 13.2251 3.36088Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 497 B

6
src/front/Components/DesignSystem/CheckBox/classes.module.scss
View File

@ -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);
}

13
src/front/Components/DesignSystem/CheckBox/index.tsx
View File

@ -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<IProps> {
return (
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
<label className={classes["root"]}>
<input type="checkbox" name={this.props.name} />
{this.props.name}
<input
type="checkbox"
name={this.props.name ?? (this.props.option.value as string)}
value={this.props.option.value as string}
/>
{this.props.option.label}
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
</label>
</Typography>

8
src/front/Components/DesignSystem/Modal/Confirm/index.tsx
View File

@ -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<IProps, IState> {
showCancelButton: true,
cancelText: "Cancel",
confirmText: "Confirm",
isConfirmButtonDisabled: false,
canConfirm: false,
...Modal.defaultProps,
};

1
src/front/Components/DesignSystem/Modal/classes.module.scss
View File

@ -35,6 +35,7 @@
&[data-will-close="true"] {
animation: smooth-disappear var(--animation-delay) $custom-easing;
opacity: 0;
}
.background {

37
src/front/Components/DesignSystem/Modal/index.tsx
View File

@ -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<IProps, IState> {
@ -37,12 +38,12 @@ export default class Modal extends React.Component<IProps, IState> {
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 (
<div
ref={this.rootRefElement}
@ -50,9 +51,7 @@ export default class Modal extends React.Component<IProps, IState> {
data-side-background={this.props.withSideBackground}
data-will-close={this.state.willClose.toString()}>
<div className={classes["background"]} onClick={this.close} />
<div
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
onClick={onClick}>
<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
{this.props.closeBtn && (
<div className={classes["cross"]}>
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@ -71,18 +70,24 @@ export default class Modal extends React.Component<IProps, IState> {
);
}
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);
}
}

12
src/front/Components/DesignSystem/ToolTip/index.tsx
View File

@ -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) => <TooltipMUI {...props} classes={{ popper: className }} />)(
({ 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)",
},
}),
);

3
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -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<IProps, IState> {
/>
</div>
<div className={classes["button-container"]}>
<Link href={`/folder/${this.props.folder.uid}/ask-documents`}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
</Button>
</Link>
{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
</div>
</div>

4
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -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<IProps, IStat
public static defaultProps = {
scrollTop: 0,
type: "background",
showHeader: false,
};
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Header isUserConnected={false} />
<Header isUserConnected={this.props.showHeader} />
<div className={classes["content"]}>
<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
{this.props.type === "image" && (

53
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -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<IProps, IState> {
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>CheckBox component</Typography>
</div>
<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
<CheckBox name="Check Box 2" />
<CheckBox
toolTip="Mon super tooltip"
option={{
label: "Check Box 1",
value: "box_1",
}}
/>
<CheckBox
option={{
label: "Check Box 2",
value: "box_2",
}}
/>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>

42
src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss Normal file
View File

@ -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;
}
}

208
src/front/Components/Layouts/Folder/AskDocuments/index.tsx Normal file
View File

@ -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<IProps, IState> {
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 (
<DefaultTemplate title={"Demander des documents"}>
<div className={classes["root"]}>
<BackArrow />
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
Demander des documents
</Typography>
<Form onSubmit={this.onFormSubmit}>
<div className={classes["form-container"]}>
{!this.state.actType && (
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
)}
{this.state.actType && (
<>
<div className={classes["checkbox-container"]}>
{this.documentsType.map((documentType) => (
<CheckBox
toolTip="Checkbox with tooltip"
option={documentType}
key={documentType.value as string}
/>
))}
</div>
<div className={classes["add-document-container"]}>
<Button
icon={PlusIcon}
iconposition={"right"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE}
onClick={this.openModal}>
Ajouter un document
</Button>
</div>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.cancel}>
Annuler
</Button>
<Button type="submit">Valider</Button>
</div>
</>
)}
</div>
</Form>
<Confirm
isOpen={this.state.isCreateDocumentModalVisible}
onClose={this.closeModal}
onAccept={this.addDocument}
canConfirm={this.canAddDocument()}
closeBtn
header={"Créer un type de document"}
cancelText={"Annuler"}
confirmText={"Ajouter"}>
<div className={classes["add-document-form-container"]}>
<InputField
name="document_name"
fakeplaceholder="Nom du document à ajouter"
type="text"
onChange={this.onDocumentNameChange}
/>
<InputField
name="description"
fakeplaceholder="Description visible par le client"
type="text"
textarea
onChange={this.onVisibleDescriptionChange}
/>
</div>
</Confirm>
</div>
</DefaultTemplate>
);
}
private canAddDocument() {
if (this.state.documentName === "" || this.state.visibleDescription === "") {
return false;
}
return true;
}
private addDocument() {
console.log(this.state.documentName);
console.log(this.state.visibleDescription);
this.setState({
isCreateDocumentModalVisible: false,
documentName: "",
visibleDescription: "",
});
}
private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
visibleDescription: e.target.value,
});
}
private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
documentName: e.target.value,
});
}
private cancel() {
this.setState({
actType: null,
visibleDescription: "",
documentName: "",
});
}
private openModal() {
this.setState({
isCreateDocumentModalVisible: true,
visibleDescription: "",
documentName: "",
});
}
private closeModal() {
this.setState({
isCreateDocumentModalVisible: false,
visibleDescription: "",
documentName: "",
});
}
private onActTypeChange(selectedOption: IOption) {
this.setState({
actType: selectedOption,
});
}
private onFormSubmit(
e: React.FormEvent<HTMLFormElement> | null,
values: {
[key: string]: string;
},
onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
) {
console.log(values);
}
}

2
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -68,7 +68,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
public override render(): JSX.Element {
return (
<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image" showHeader={true}>
<div className={classes["root"]}>
<BackArrow />
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>

2
src/front/Themes/variables.scss
View File

@ -7,8 +7,6 @@
--font-primary: "Inter", sans-serif;
--colormerdum: blue;
--green-flash: #{$green-flash};
--blue-flash: #{$blue-flash};
--turquoise-flash: #{$turquoise-flash};

5
src/pages/folder/[uid]/ask-documents/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import AskDocuments from "@Front/Components/Layouts/Folder/AskDocuments";
export default function Route() {
return <AskDocuments />;
}