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

✨ Sprint modifications

Browse Source
This commit is contained in:
Maxime Lalo 2023-09-11 15:16:53 +02:00
parent 4af9a197ca
commit 67881deb56
8 changed files with 8459 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8382
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -24,7 +24,7 @@
"eslint-config-next": "13.2.4",
"form-data": "^4.0.0",
"jwt-decode": "^3.1.2",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.71",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.73",
"next": "13.2.4",
"prettier": "^2.8.7",
"react": "18.2.0",
@ -34,6 +34,5 @@
"sharp": "^0.32.1",
"typescript": "4.9.5"
},
"devDependencies": {
}
"devDependencies": {}
}

4
src/front/Assets/Icons/copy.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z" stroke="#939393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" stroke="#939393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 649 B

24
src/front/Components/DesignSystem/Form/TextField/classes.module.scss
View File

@ -16,17 +16,8 @@
&:disabled {
cursor: not-allowed;
background: white;
opacity: 0.6;
~ .fake-placeholder {
color: rgba($grey, 0.6);
/**
TODO
* 1. Add styles so the placeholder has the same color as the background when disabled
*/
// background: transparent;
}
}
&:focus {
~ .fake-placeholder {
transform: translateY(-35px);
@ -91,12 +82,21 @@
}
&[data-is-errored="true"] {
.input{
.input {
border: 1px solid var(--red-flash);
~ .fake-placeholder{
~ .fake-placeholder {
color: var(--red-flash);
}
}
}
.copy-icon {
cursor: pointer;
height: 24px;
width: 24px;
position: absolute;
top: 50%;
right: 24px;
transform: translate(0, -50%);
}
}

21
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

@ -1,15 +1,18 @@
import React from "react";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import classes from "./classes.module.scss";
import classnames from "classnames";
import Image from "next/image";
export type IProps = IBaseFieldProps & {};
export type IProps = IBaseFieldProps & {
canCopy?: boolean;
};
export default class TextField extends BaseField<IProps> {
constructor(props: IProps){
constructor(props: IProps) {
super(props);
this.state = this.getDefaultState();
}
@ -28,13 +31,25 @@ export default class TextField extends BaseField<IProps> {
onFocus={this.onFocus}
onBlur={this.onBlur}
name={this.props.name}
disabled={this.props.disabled}
/>
<div className={classes["fake-placeholder"]}>
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
</div>
{this.props.canCopy && (
<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
<Image src={CopyIcon} alt="Copy icon" />
</div>
)}
</div>
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</Typography>
);
}
private onCopyClick = (): void => {
if (this.props.canCopy) {
navigator.clipboard.writeText(this.state.value ?? "");
}
};
}

17
src/front/Components/Layouts/ClientDashboard/classes.module.scss
View File

@ -25,8 +25,17 @@
}
}
.folder-number {
margin-top: 16px;
}
.office-name {
margin-top: 8px;
text-transform: uppercase;
}
.subtitle {
margin: 32px 0;
margin: 64px 0 32px 0;
}
}
@ -43,9 +52,6 @@
@media (max-width: $screen-s) {
grid-template-columns: 1fr;
}
}
.component-to-replace {
@ -78,9 +84,6 @@
background-color: var(--grey-soft);
height: 98px;
width: 100%;
}
}
}

19
src/front/Components/Layouts/ClientDashboard/index.tsx
View File

@ -3,15 +3,16 @@ import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
import Customer, { Document, DocumentType, OfficeFolder } from "le-coffre-resources/dist/Customer";
import React, { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
import { useRouter } from "next/router";
import JwtService from "@Front/Services/JwtService/JwtService";
import DepositOtherDocument from "@Front/Components/DesignSystem/DepositOtherDocument";
import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
type IProps = {};
@ -20,6 +21,7 @@ export default function ClientDashboard(props: IProps) {
let { folderUid } = router.query;
const [documents, setDocuments] = useState<Document[] | null>(null);
const [customer, setCustomer] = useState<Customer | null>(null);
const [folder, setFolder] = useState<OfficeFolder | null>(null);
const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
const onCloseModalAddDocument = useCallback(() => {
@ -56,6 +58,8 @@ export default function ClientDashboard(props: IProps) {
const documentList = await Documents.getInstance().get(query);
const folder = await Folders.getInstance().getByUid(folderUid as string, { q: { office: true } });
setFolder(folder);
setDocuments(documentList);
setCustomer(actualCustomer);
}
@ -64,6 +68,7 @@ export default function ClientDashboard(props: IProps) {
}, [folderUid]);
const renderHeader = useCallback(() => {
console.log("Dossier : ", customer);
return (
<div className={classes["header"]}>
<div className={classes["text-container"]}>
@ -72,6 +77,14 @@ export default function ClientDashboard(props: IProps) {
Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
</Typography>
<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}>
Dossier {folder?.folder_number} - {folder?.name}
</Typography>
<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}>
{folder?.office?.name}
</Typography>
<Typography typo={ITypo.H2} className={classes["subtitle"]}>
Documents à envoyer
</Typography>
@ -106,7 +119,7 @@ export default function ClientDashboard(props: IProps) {
})}
/>
);
}, [isAddDocumentModalVisible]);
}, [customer, folderUid, isAddDocumentModalVisible, onCloseModalAddDocument]);
return (
<DefaultTemplate title={"Mon compte"} isPadding={false} hasHeaderLinks={false}>

25
src/front/Components/Layouts/MyAccount/index.tsx
View File

@ -25,19 +25,21 @@ export default class MyAccount extends Base<IProps, IState> {
</Typography>
<Form onSubmit={this.onFormSubmit}>
<div className={classes["form-container"]}>
<TextField name="name" placeholder="Nom" defaultValue={"BIHR"} disabled />
<TextField name="surname" placeholder="Prénom" defaultValue={"Nicolas"} disabled />
<TextField name="name" placeholder="Nom" defaultValue={"BIHR"} disabled canCopy />
<TextField name="surname" placeholder="Prénom" defaultValue={"Nicolas"} disabled canCopy />
<TextField
name="email"
placeholder="E-mail"
defaultValue={"nicolas.bihr@notaires.fr"}
disabled
canCopy
/>
<TextField
name="phone"
placeholder="Numéro de téléphone"
defaultValue={"06 74 83 90 23"}
disabled
canCopy
/>
</div>
</Form>
@ -53,20 +55,11 @@ export default class MyAccount extends Base<IProps, IState> {
placeholder="Dénomination de l'office"
defaultValue="Etude Office notarial du Cormier"
disabled
canCopy
/>
<TextField name="crpcen" placeholder="CRPCEN" defaultValue="35137" disabled />
<TextField
name="cp_address"
placeholder="Adresse CP"
defaultValue="2 RUE DE RENNES"
disabled
/>
<TextField
name="city"
placeholder="Ville"
defaultValue="35140 ST AUBIN DU CORMIER"
disabled
/>
<TextField name="crpcen" placeholder="CRPCEN" defaultValue="35137" disabled canCopy />
<TextField name="cp_address" placeholder="Adresse CP" defaultValue="2 RUE DE RENNES" disabled canCopy />
<TextField name="city" placeholder="Ville" defaultValue="35140 ST AUBIN DU CORMIER" disabled canCopy />
</div>
</Form>
</div>
@ -80,6 +73,6 @@ export default class MyAccount extends Base<IProps, IState> {
e: React.FormEvent<HTMLFormElement> | null,
values: {
[key: string]: string;
}
},
) {}
}