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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-07-17 10:56:56 +02:00
commit aa9a5962bb
137 changed files with 2593 additions and 1506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

996
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -18,6 +18,7 @@
"@types/node": "18.15.1",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@uidotdev/usehooks": "^2.4.1",
"class-validator": "^0.14.0",
"classnames": "^2.3.2",
"crypto-random-string": "^5.0.0",
@ -25,6 +26,7 @@
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"form-data": "^4.0.0",
"heroicons": "^2.1.5",
"jwt-decode": "^3.1.2",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.151",
"next": "^14.2.3",

3
src/front/Assets/Icons/notif-empty.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.19085 19.7757C10.4398 19.9238 11.7109 20 12.9997 20C13.4408 20 13.8798 19.9911 14.3165 19.9734M9.19085 19.7757C6.66458 19.4761 4.22854 18.8821 1.91797 18.0292C3.70052 16.0505 4.83399 13.4756 4.98297 10.6398M9.19085 19.7757C9.06692 20.1615 9 20.573 9 21C9 23.2091 10.7909 25 13 25C14.7152 25 16.1783 23.9204 16.7468 22.4036M19.3666 19.3666L25 25M19.3666 19.3666C20.9859 19.0397 22.5609 18.5905 24.0815 18.0292C22.1658 15.9027 20.9997 13.0875 20.9997 10V9.06558L21 9C21 4.58172 17.4183 1 13 1C9.7556 1 6.96228 2.93132 5.70701 5.70701M19.3666 19.3666L5.70701 5.70701M1 1L5.70701 5.70701" stroke="#005BCB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 785 B

4
src/front/Components/DesignSystem/BlockList/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";
import Typography, { ETypo } from "../Typography";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Image from "next/image";
import WarningBadge from "../WarningBadge";
@ -32,7 +32,7 @@ export default function BlockList({ blocks, onSelectedBlock }: IProps) {
<div onClick={selectBlock} key={folder.id} id={folder.id}>
<div className={classes["root"]} data-selected={folder.selected.toString()}>
<div className={classes["left-side"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
</div>
<div className={classes["right-side"]}>
{folder.hasFlag && <WarningBadge />}

2
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -13,7 +13,7 @@
white-space: nowrap;
user-select: none;
cursor: pointer;
font-family: var(--font-primary);
font-family: var(--font-text-family);
svg {
width: 18px;

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

@ -2,7 +2,7 @@ import React from "react";
import { IOption } from "../Form/SelectField";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import classNames from "classnames";
@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
<input
type="checkbox"

24
src/front/Components/DesignSystem/CircleProgress/classes.module.scss Normal file
View File

@ -0,0 +1,24 @@
@import "@Themes/constants.scss";
.root {
display: flex;
align-items: center;
gap: 24px;
svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
.circleBackground {
fill: none;
stroke: var(--background-elevation-2);
}
.circleProgress {
fill: none;
stroke: var(--color-secondary-500);
transition: stroke-dashoffset 0.35s;
}
}
}

61
src/front/Components/DesignSystem/CircleProgress/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
percentage: number;
};
export default function CircleProgress(props: IProps) {
const { percentage } = props;
const [animatedProgress, setAnimatedProgress] = useState(0);
const requestRef = useRef<number>();
const animate = useCallback(() => {
setAnimatedProgress((prev) => {
if (prev < percentage) {
return prev + 1;
} else {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
return prev;
}
});
requestRef.current = requestAnimationFrame(animate);
}, [percentage]);
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
};
}, [animate, percentage]);
const radius = 11;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (animatedProgress / 100) * circumference;
return (
<div className={classes["root"]}>
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
<circle className={classes["circleBackground"]} cx="13.5" cy="13.5" r={radius} strokeWidth="3" />
<circle
className={classes["circleProgress"]}
cx="13.5"
cy="13.5"
r={radius}
strokeWidth="3"
strokeDasharray={circumference}
strokeDashoffset={offset}
/>
</svg>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{percentage}%
</Typography>
</div>
);
}

30
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -7,7 +7,7 @@ import React from "react";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</div>
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div
className={
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
)}
</Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
)}
@ -158,8 +158,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_NEUTRAL_500}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_NEUTRAL_500}
title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)}
</Typography>
@ -180,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Chargement...
</Typography>
</div>
@ -196,8 +196,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
className={classes["add-button"]}
onClick={this.addDocument}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
typo={ETypo.TEXT_MD_SEMIBOLD}
color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
@ -213,7 +213,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
header={"Motif du refus"}
confirmText={"J'ai compris"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre document a été refusé pour la raison suivante :
</Typography>
<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@ -221,14 +221,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</Confirm>
</div>
{this.props.document.document_status === EDocumentStatus.REFUSED && (
<Typography typo={ITypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
<Typography typo={ETypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
Ce document n'est pas conforme. Veuillez le déposer à nouveau.
</Typography>
)}
{this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>
@ -272,26 +272,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
switch (history.document_status) {
case EDocumentStatus.ASKED:
return (
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Demandé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.VALIDATED:
return (
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Validé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.DEPOSITED:
return (
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Déposé le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.REFUSED:
return (
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_800}>
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_800}>
Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && (
<Button

22
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
View File

@ -6,7 +6,7 @@ import PlusIcon from "@Assets/Icons/plus.svg";
import Image from "next/image";
import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -87,10 +87,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
canConfirm={!this.state.isLoading}>
<div className={classes["modal-content"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ?
</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant.
</Typography>
@ -111,8 +111,8 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_SEMIBOLD}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["title"]}>
<div
className={
@ -123,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.props.document.document_type?.name}
</div>
</Typography>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
@ -137,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
{this.shortName(fileObj.name)}
</Typography>
</div>
@ -160,8 +160,8 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
className={classes["add-button"]}
onClick={this.addDocument}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
typo={ETypo.TEXT_MD_SEMIBOLD}
color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
@ -177,7 +177,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
header={"L'ajout de Document n'est plus autorisé"}
isOpen={!!this.state.showFailedDocument}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedDocument}
</Typography>
</div>
@ -186,7 +186,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>

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

@ -7,7 +7,7 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
import Image from "next/image";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
type IProps = {
onChange: (documentList: File[]) => void;
@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div>Déposer un RIB</div>
</Typography>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["file-container"]} key="0">
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500} title={file.name}>
{this.shortName(file.name)}
</Typography>
</div>
@ -166,8 +166,8 @@ export default class DepositRib extends React.Component<IProps, IState> {
className={classes["add-button"]}
onClick={() => this.fileInput!.click()}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
typo={ETypo.TEXT_MD_SEMIBOLD}
color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>

6
src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
View File

@ -6,7 +6,7 @@ import Image from "next/image";
import { NextRouter, useRouter } from "next/router";
import React from "react";
import Typography, { ITypo } from "../../Typography";
import Typography, { ETypo } from "../../Typography";
import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -41,8 +41,8 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
return (
<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
<div>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ETypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
</div>
{this.renderIcon()}
</div>

4
src/front/Components/DesignSystem/FilePreview/index.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable @next/next/no-img-element */
import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import Loader from "../Loader";
@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
{this.props.href && (
<>
{!type && (
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK}>
Erreur lors du chargement du fichier
</Typography>
)}

30
src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
View File

@ -6,7 +6,7 @@ import Image from "next/image";
import Link from "next/link";
import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
import Note from "le-coffre-resources/dist/Customer/Note";
@ -70,56 +70,56 @@ export default function FolderBoxInformation(props: IProps) {
case EFolderBoxInformationType.DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Note dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.NOTE:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Note client
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Note archive
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.INFORMATIONS:
return (
<>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Intitulé du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Numéro de dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Type d'acte
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Ouverture du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
</div>
</>
);

4
src/front/Components/DesignSystem/FolderContainer/index.tsx
View File

@ -4,7 +4,7 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Image from "next/image";
import React from "react";
import Typography, { ITypo } from "../Typography";
import Typography, { ETypo } from "../Typography";
import WarningBadge from "../WarningBadge";
import classes from "./classes.module.scss";
@ -24,7 +24,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
return (
<div className={classes["root"]} onClick={this.onSelectedFolder}>
<div className={classes["left-side"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
</Typography>
{this.countPendingDocuments() > 0 && (

4
src/front/Components/DesignSystem/Form/BaseField.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { FormContext, IFormContext } from ".";
import { ValidationError } from "class-validator";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
export type IProps = {
value?: string;
@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
{value}
</Typography>,
);

4
src/front/Components/DesignSystem/Form/DateField/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

10
src/front/Components/DesignSystem/Form/SelectField/index.tsx
View File

@ -5,7 +5,7 @@ import classNames from "classnames";
import Image from "next/image";
import React, { FormEvent, ReactNode } from "react";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import { NextRouter, useRouter } from "next/router";
@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
{selectedOption && (
<>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
<span className={classes["text"]}>{selectedOption?.label}</span>
</Typography>
</>
)}
{!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography>
</div>
@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
className={classes["container-li"]}
onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{option.label}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{option.label}</Typography>
</li>
))}
</ul>
@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
private renderErrors(): JSX.Element | null {
if (!this.state.errors) return null;
return (
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
{this.props.placeholder} ne peut pas être vide
</Typography>
);

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

@ -1,5 +1,5 @@
import React from "react";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

4
src/front/Components/DesignSystem/Form/TextareaField/index.tsx
View File

@ -1,5 +1,5 @@
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import { ReactNode } from "react";
@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea
name={this.props.name}

6
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
View File

@ -5,7 +5,7 @@ import classes from "./classes.module.scss";
import { IAppRule } from "@Front/Api/Entities/rule";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { IHeaderLinkProps } from "../../../HeaderLink";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
import useToggle from "@Front/Hooks/useToggle";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
@ -35,8 +35,8 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
<div className={classes["content"]} onClick={toggle}>
<Typography
typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isSubmenuOpened ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
typo={isActive || isSubmenuOpened ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isSubmenuOpened ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}

8
src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
View File

@ -3,7 +3,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable";
@ -38,8 +38,8 @@ export default function HeaderLink(props: IHeaderLinkProps) {
onMouseLeave={handleMouseLeave}>
<div className={classes["content"]}>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>
@ -50,7 +50,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
return (
<div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>

6
src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable";
type IHeaderLinkProps = {
@ -30,8 +30,8 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
return (
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</Link>

6
src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { IHeaderLinkProps } from "../HeaderLink";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable";
import HeaderSubmenuLink from "./HeaderSubmenuLink";
@ -35,8 +35,8 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
<div className={classes["content"]}>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>

6
src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import Link from "next/link";
import classNames from "classnames";
import { useRouter } from "next/router";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
type IProps = {
text: string | JSX.Element;
@ -30,8 +30,8 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
target={this.props.target}>
<div className={classes["content"]}>
<Typography
typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
typo={this.props.isActive ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={this.props.isActive ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{this.props.text}
</Typography>
</div>

8
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -47,8 +47,14 @@
overflow-y: auto;
.missing-notification {
padding: 56px 0;
padding: var(--spacing-3);
text-align: center;
border-radius: var(--radius-md);
background-color: var(--color-primary-50);
.notif-icon {
cursor: pointer;
margin-bottom: var(--radius-xl);
}
}
}

12
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
View File

@ -1,11 +1,12 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import CloseIcon from "@Assets/Icons/cross.svg";
import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Check from "@Front/Components/Elements/Icons/Check";
import NotifEmptyIcon from "@Assets/Icons/notif-empty.svg";
type IProps = {
isOpen: boolean;
@ -34,22 +35,23 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}>
<div className={classes["notification-header"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div>
</div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu
</Typography>
<Check color={ITypoColor.COLOR_SECONDARY_500} />
<Check color={ETypoColor.COLOR_SECONDARY_500} />
</div>
<div className={classes["notification-body"]}>
<>
{!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Image src={NotifEmptyIcon} alt="Notif Empty" className={classes["notif-icon"]}></Image>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
Vous n'avez pas de notifications.
</Typography>
</div>

4
src/front/Components/DesignSystem/Header/index.tsx
View File

@ -16,7 +16,7 @@ import LifeBuoy from "@Assets/Icons/life_buoy.svg";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import { InformationCircleIcon } from "@heroicons/react/24/outline";
enum EHeaderOpeningState {
@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
{this.state.cancelAt && (
<div className={classes["subscription-line"]}>
<InformationCircleIcon height="24" />;
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
{this.state.cancelAt.toLocaleDateString()}.
</Typography>

4
src/front/Components/DesignSystem/LogOutButton/index.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import Image from "next/image";
import DisconnectIcon from "@Assets/Icons/disconnect.svg";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import { useRouter } from "next/router";
import UserStore from "@Front/Stores/UserStore";
import { FrontendVariables } from "@Front/Config/VariablesFront";
@ -18,7 +18,7 @@ export default function LogOut() {
return (
<div className={classes["root"]} onClick={disconnect}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Déconnexion
</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />

4
src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
type IProps = {
content: string | JSX.Element;
@ -10,7 +10,7 @@ export default class Header extends React.Component<IProps> {
public override render(): JSX.Element {
return (
<header className={classes["root"]}>
<Typography typo={ITypo.TITLE_H3}>{this.props.content}</Typography>
<Typography typo={ETypo.TITLE_H3}>{this.props.content}</Typography>
</header>
);
}

4
src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx
View File

@ -1,7 +1,7 @@
// import Loader from "Components/Elements/Loader";
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
type IProps = {
text?: string | JSX.Element;
@ -13,7 +13,7 @@ export default class PopUpLoader extends React.Component<IProps> {
<div className={classes["root"]}>
{/* <Loader /> */}
TODO: INTEGRER LOARDER ISLOADING
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.text && this.props.text}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.text && this.props.text}</Typography>
</div>
);
}

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

@ -2,7 +2,7 @@ import CrossIcon from "@Assets/Icons/cross.svg";
import Image from "next/image";
import React from "react";
import Typography, { ITypo } from "../Typography";
import Typography, { ETypo } from "../Typography";
import classes from "./classes.module.scss";
import Footer from "./Elements/Footer";
import Header from "./Elements/Header";
@ -60,7 +60,7 @@ export default class Modal extends React.Component<IProps, IState> {
<div className={classes["sub-container"]}>
{this.props.header && <Header content={this.props.header} />}
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
</Typography>
{this.props.children && this.props.footer && <Footer content={this.props.footer} />}

2
src/front/Components/DesignSystem/MultiSelect/classes.module.scss
View File

@ -25,7 +25,7 @@
}
}
.label {
font-family: var(--font-primary);
font-family: var(--font-text-family);
font-style: normal;
font-weight: 400;
font-size: 12px;

6
src/front/Components/DesignSystem/MultiSelect/index.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
import { IOption } from "../Form/SelectField";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { styles } from "./styles";
import { ValidationError } from "class-validator";
@ -55,7 +55,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
<div
className={classes["placeholder"]}
data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
{this.props.placeholder}
</Typography>
</div>
@ -148,7 +148,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
{value}
</Typography>,
);

4
src/front/Components/DesignSystem/MultiSelect/styles.tsx
View File

@ -3,7 +3,7 @@ export const styles = {
...provided,
cursor: "pointer",
padding: "8px 24px",
fontFamily: "var(--font-primary)",
fontFamily: "var(--font-text-family)",
fontStyle: "normal",
fontWeight: "400",
fontSize: "18px",
@ -25,7 +25,7 @@ export const styles = {
...provided,
padding: 0,
minWidth: "100px",
fontFamily: "var(--font-primary)",
fontFamily: "var(--font-text-family)",
fontStyle: "normal",
fontWeight: "600",
fontSize: "16px",

10
src/front/Components/DesignSystem/Newsletter/index.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import classes from "./classes.module.scss";
import TextField from "../Form/TextField";
import Button, { EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
import Form from "../Form";
import Mail from "@Assets/Icons/mail.svg";
@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
<div className={classes["container"]}>
<div className={classes["root"]}>
<div className={classes["text"]}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_GENERIC_WHITE}>
Restez Informé(e) avec notre Newsletter
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_WHITE}>
Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
</Typography>
{this.state.errorMessage && (
<div>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
{this.state.errorMessage}
</Typography>
</div>
)}
{this.state.successMessage && (
<div>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SUCCESS_600}>
{this.state.successMessage}
</Typography>
</div>

4
src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../../Typography";
import Typography, { ETypo } from "../../Typography";
type IProps = {
percentage: number;
@ -11,7 +11,7 @@ export default class ProgressBar extends React.Component<IProps> {
return (
<div className={classes["root"]}>
<div className={classes["progress"]} style={{ width: quantity }}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
<div className={classes["percentage"]}>{quantity}</div>
</Typography>
</div>

4
src/front/Components/DesignSystem/QuantityProgressBar/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import ProgressBar from "./ProgressBar";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";
import Typography, { ETypo } from "../Typography";
type IProps = {
currentNumber: number;
@ -19,7 +19,7 @@ export default class QuantityProgressBar extends React.Component<IProps> {
return (
<div className={classes["root"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
</div>
<ProgressBar percentage={percentage} />
</div>

4
src/front/Components/DesignSystem/RadioBox/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
};
public override render(): JSX.Element {
return (
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
<label className={classes["root"]}>
<input
type="radio"

4
src/front/Components/DesignSystem/SearchBar/index.tsx
View File

@ -2,7 +2,7 @@ import LoopIcon from "@Assets/Icons/loop.svg";
import Image from "next/image";
import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && (
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography>
)}

4
src/front/Components/DesignSystem/Switch/index.tsx
View File

@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
type IProps = {
onChange?: (checked: boolean) => void;
@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
<div className={classes["round"]} />
</div>
</div>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{label}
</Typography>
</div>

42
src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss Normal file
View File

@ -0,0 +1,42 @@
.root {
.head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
overflow: hidden;
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
svg {
cursor: pointer;
min-width: 21px;
fill: var(--color-neutral-600);
}
}
.cell {
overflow: hidden;
word-wrap: break-word;
.content {
max-width: 270px;
width: 100%;
word-break: break-word;
> :first-child {
width: 80%;
}
}
}
.row {
&:hover {
background-color: var(--background-elevation-1);
}
}
}

102
src/front/Components/DesignSystem/Table/MuiTable/index.tsx Normal file
View File

@ -0,0 +1,102 @@
import InfiniteScroll from "@Front/Components/Elements/InfiniteScroll";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss";
export type IRowProps = { key: string } & Record<string, React.ReactNode>;
type IRow = {
key?: string;
content: Record<string, CellContent>;
};
type IProps = {
header: readonly IHead[];
rows: IRowProps[];
onNext?: ((release: () => void, reset?: () => void) => Promise<void> | void) | null;
};
export type IHead = {
key: string;
title?: string;
};
type CellContent = {
key: string;
value: React.ReactNode;
};
export default function MuiTable(props: IProps) {
const rows: IRow[] = props.rows.map((rowProps) => {
const row: IRow = {
key: rowProps.key,
content: {},
};
props.header.forEach((column) => {
const cellContent: CellContent = {
key: column.key + rowProps.key,
value: rowProps[column.key],
};
row.content[column.key] = cellContent;
});
return row;
});
return (
<InfiniteScroll orientation="vertical" onNext={props.onNext} offset={0}>
<TableContainer className={classes["root"]} sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden" }}>
<Table aria-label="simple table" sx={{ border: "0" }}>
<TableHead
sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--color-neutral-200)" }}>
<TableRow>
{props.header.map((column) => (
<TableCell key={column.key} align={"left"} sx={{ border: 0, padding: "4px 8px" }}>
{column.title && (
<span className={classes["head"]}>
<Typography
className={classes["text"]}
typo={ETypo.TEXT_SM_REGULAR}
color={ETypoColor.COLOR_NEUTRAL_600}>
{column.title}
</Typography>
<ChevronDownIcon width={21} />
</span>
)}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
return (
<TableRow key={row.key} sx={{ verticalAlign: "middle" }} className={classes["row"]}>
{Object.values(row.content).map((cell) => (
<TableCell
className={classes["cell"]}
key={cell.key}
align="left"
sx={{ border: 0, padding: "4px 8px", height: "53px" }}>
<Typography
className={classes["content"]}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_NEUTRAL_900}>
{cell.value}
</Typography>
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</InfiniteScroll>
);
}

40
src/front/Components/DesignSystem/Table/SearchBar/classes.module.scss Normal file
View File

@ -0,0 +1,40 @@
.root {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
width: 100%;
border: 1px solid var(--Wild-Sand-100, #efefef);
background-color: var(--Wild-Sand-50, #f6f6f6);
box-sizing: border-box;
.input-element {
padding: 10.5px 16px;
flex: 1;
border: 0;
background-color: transparent;
&:focus,
input:focus {
outline: none;
}
&::placeholder {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.icon {
position: absolute;
right: 10px;
width: 24px;
height: 24px;
pointer-events: none;
path {
stroke: var(--Wild-Sand-600, #bfbfbf);
}
}
}

33
src/front/Components/DesignSystem/Table/SearchBar/index.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ChangeEvent, useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useDebounce } from "@uidotdev/usehooks";
type IProps = {
onChange?: (search: string) => void;
placeholder: string;
};
export default function SearchBar(props: IProps) {
const { placeholder, onChange } = props;
const [search, setSearch] = useState<string | null>(null);
const debouncedSearch = useDebounce(search, 200);
const onSearch = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setSearch(e.currentTarget.value);
}, []);
useEffect(() => {
if (debouncedSearch === null) return;
onChange?.(debouncedSearch);
}, [debouncedSearch, onChange]);
return (
<div className={classes["root"]}>
<input className={classes["input-element"]} onChange={onSearch} type="text" placeholder={placeholder} />
<MagnifyingGlassIcon className={classes["icon"]} />
</div>
);
}

13
src/front/Components/DesignSystem/Table/classes.module.scss Normal file
View File

@ -0,0 +1,13 @@
.root {
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
.input-container {
width: 300px;
cursor: text;
}
}
}

45
src/front/Components/DesignSystem/Table/index.tsx Normal file
View File

@ -0,0 +1,45 @@
import classNames from "classnames";
import MuiTable, { IRowProps, IHead } from "./MuiTable";
import SearchBarTable from "./SearchBar";
import classes from "./classes.module.scss";
import { useCallback, useRef } from "react";
type IProps = {
header: readonly IHead[];
rows: IRowProps[];
count?: number;
className?: string;
onNext?: ((release: () => void, reset?: () => void) => Promise<void> | void) | null;
searchBar?: {
placeholder?: string;
onSearch?: (search: string) => void;
};
};
export default function Table(props: IProps) {
const { className, header, rows, searchBar } = props;
const keyId = useRef<number>(0);
const onSearch = useCallback(
(search: string) => {
keyId.current++;
searchBar?.onSearch?.(search);
},
[searchBar],
);
return (
<div className={classNames(classes["root"], className)}>
{searchBar && (
<div className={classes["header"]}>
<div>{props.count ?? rows.length} resultats</div>
<div className={classes["input-container"]}>
<SearchBarTable onChange={onSearch} placeholder={searchBar.placeholder ?? ""} />
</div>
</div>
)}
<MuiTable key={keyId.current} header={header} rows={rows} onNext={props.onNext} />
</div>
);
}

26
src/front/Components/DesignSystem/Tag/classes.module.scss Normal file
View File

@ -0,0 +1,26 @@
@import "@Themes/constants.scss";
.root {
padding: 2px 8px;
border-radius: 360px;
display: flex;
align-items: center;
justify-content: center;
&.info {
background-color: var(--color-info-50);
}
&.success {
background-color: var(--color-success-50);
}
&.error {
background-color: var(--color-error-50);
}
&.warning {
background-color: var(--color-warning-50);
}
}

48
src/front/Components/DesignSystem/Tag/index.tsx Normal file
View File

@ -0,0 +1,48 @@
import classNames from "classnames";
import React from "react";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
export enum ETagColor {
INFO = "info",
SUCCESS = "success",
ERROR = "error",
WARNING = "warning",
}
export enum ETagVariant {
REGULAR = "regular",
SEMI_BOLD = "semi_bold",
}
type IProps = {
label: string;
color: ETagColor;
variant: ETagVariant;
className?: string;
};
const colorMap: Record<ETagColor, ETypoColor> = {
[ETagColor.INFO]: ETypoColor.COLOR_INFO_900,
[ETagColor.SUCCESS]: ETypoColor.COLOR_SUCCESS_700,
[ETagColor.ERROR]: ETypoColor.COLOR_SECONDARY_700,
[ETagColor.WARNING]: ETypoColor.COLOR_WARNING_700,
};
const typoMap: Record<ETagVariant, ETypo> = {
[ETagVariant.REGULAR]: ETypo.TEXT_MD_REGULAR,
[ETagVariant.SEMI_BOLD]: ETypo.TEXT_XS_SEMIBOLD,
};
export default function Tag(props: IProps) {
const { className, label, color, variant } = props;
return (
<div className={classNames(classes["root"], className, classes[color])}>
<Typography typo={typoMap[variant]} color={colorMap[color]}>
{label}
</Typography>
</div>
);
}

4
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
View File

@ -63,7 +63,7 @@
}
.header {
font-family: var(--font-primary);
font-family: var(--font-text-family);
font-style: normal;
font-weight: 600;
font-size: 16px;
@ -89,7 +89,7 @@
}
.text-container {
font-family: var(--font-primary);
font-family: var(--font-text-family);
font-style: normal;
font-weight: 400;
font-size: 14px;

6
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
View File

@ -7,7 +7,7 @@ import React from "react";
// Styles
import classes from "./classes.module.scss";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import CheckIcon from "@Assets/Icons/check.svg";
import Image from "next/image";
import { NextRouter, useRouter } from "next/router";
@ -74,7 +74,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
private getToastTitle(title: string | React.ReactNode) {
if (typeof title === "string") {
return <Typography typo={ITypo.TEXT_MD_REGULAR}>{title}</Typography>;
return <Typography typo={ETypo.TEXT_MD_REGULAR}>{title}</Typography>;
}
return title;
}
@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
if (typeof text === "string") {
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
{text}
</Typography>
</div>

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

@ -25,7 +25,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
fontSize: 14,
fontWeight: 400,
lineHeight: "22px",
fontFamily: "var(--font-primary)",
fontFamily: "var(--font-text-family)",
padding: "16px",
borderRadius: "0px",
},

4
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -2,10 +2,12 @@
@import "@Themes/modes.scss";
.root {
color: var(--color-neutral-950);
vertical-align: center;
font-family: "Poppins", sans-serif;
color: var(--data-color, var(--color-neutral-950));
//Displays
&.display-large {
font-style: normal;

62
src/front/Components/DesignSystem/Typography/index-old.tsx
View File

@ -1,62 +0,0 @@
import React from "react";
import classes from "./old-classes.module.scss";
import classNames from "classnames";
type IProps = {
typo: ITypo;
children: React.ReactNode;
color?: ITypoColor;
className?: string;
title?: string;
};
type IState = {};
export enum ITypo {
H1 = "H1-60",
H1Bis = "H1-bis-40",
H2 = "H2-30",
H3 = "H3-24",
P_SB_18 = "Paragraphe-semibold-18",
P_18 = "Paragraphe-simple-18",
P_MAJ_18 = "Paragraphe-MAJ-18",
NAV_HEADER_18 = "Nav-header-off-18",
P_ERR_18 = "Paragraphe-18-error",
P_SB_16 = "Paragraphe-semibold-16",
P_16 = "Paragraphe-simple-16",
NAV_INPUT_16 = "Nav-input-off-16",
P_ERR_16 = "Paragraphe-16-error",
CAPTION_14 = "Caption_14",
CAPTION_14_SB = "Caption_14-semibold",
}
export enum ITypoColor {
COLOR_ERROR_800 = "color-error-800",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_GENERIC_BLACK = "color-generic-black",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_WARNING_500 = "color-warning-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_GENERIC_WHITE = "color-generic-white",
}
export default class Typography extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div
className={classNames(
classes["root"],
classes[this.props.typo],
classes[this.props.color ?? ""],
this.props.className ?? "",
)}
title={this.props.title}>
{this.props.children}
</div>
);
}
}

184
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -3,15 +3,14 @@ import classes from "./classes.module.scss";
import classNames from "classnames";
type IProps = {
typo: ITypo;
typo: ETypo;
children: React.ReactNode;
color?: ITypoColor;
color?: ETypoColor;
className?: string;
title?: string;
};
type IState = {};
export enum ITypo {
export enum ETypo {
DISPLAY_LARGE = "display-large",
DISPLAY_MEDIUM = "display-medium",
DISPLAY_SMALL = "display-small",
@ -54,107 +53,102 @@ export enum ITypo {
CAPTION_LIGHT = "caption-light",
}
export enum ITypoColor {
COLOR_GENERIC_BLACK = "color-generic-black",
COLOR_GENERIC_WHITE = "color-generic-white",
COLOR_GENERIC_NONE = "color-generic-none",
export enum ETypoColor {
COLOR_GENERIC_BLACK = "--color-generic-black",
COLOR_GENERIC_WHITE = "--color-generic-white",
COLOR_GENERIC_NONE = "--color-generic-none",
COLOR_NEUTRAL_50 = "color-neutral-50",
COLOR_NEUTRAL_100 = "color-neutral-100",
COLOR_NEUTRAL_200 = "color-neutral-200",
COLOR_NEUTRAL_300 = "color-neutral-300",
COLOR_NEUTRAL_400 = "color-neutral-400",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_NEUTRAL_600 = "color-neutral-600",
COLOR_NEUTRAL_700 = "color-neutral-700",
COLOR_NEUTRAL_800 = "color-neutral-800",
COLOR_NEUTRAL_900 = "color-neutral-900",
COLOR_NEUTRAL_950 = "color-neutral-950",
COLOR_NEUTRAL_50 = "--color-neutral-50",
COLOR_NEUTRAL_100 = "--color-neutral-100",
COLOR_NEUTRAL_200 = "--color-neutral-200",
COLOR_NEUTRAL_300 = "--color-neutral-300",
COLOR_NEUTRAL_400 = "--color-neutral-400",
COLOR_NEUTRAL_500 = "--color-neutral-500",
COLOR_NEUTRAL_600 = "--color-neutral-600",
COLOR_NEUTRAL_700 = "--color-neutral-700",
COLOR_NEUTRAL_800 = "--color-neutral-800",
COLOR_NEUTRAL_900 = "--color-neutral-900",
COLOR_NEUTRAL_950 = "--color-neutral-950",
COLOR_PRIMARY_50 = "color-primary-50",
COLOR_PRIMARY_100 = "color-primary-100",
COLOR_PRIMARY_200 = "color-primary-200",
COLOR_PRIMARY_300 = "color-primary-300",
COLOR_PRIMARY_400 = "color-primary-400",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_PRIMARY_600 = "color-primary-600",
COLOR_PRIMARY_700 = "color-primary-700",
COLOR_PRIMARY_800 = "color-primary-800",
COLOR_PRIMARY_900 = "color-primary-900",
COLOR_PRIMARY_950 = "color-primary-950",
COLOR_PRIMARY_50 = "--color-primary-50",
COLOR_PRIMARY_100 = "--color-primary-100",
COLOR_PRIMARY_200 = "--color-primary-200",
COLOR_PRIMARY_300 = "--color-primary-300",
COLOR_PRIMARY_400 = "--color-primary-400",
COLOR_PRIMARY_500 = "--color-primary-500",
COLOR_PRIMARY_600 = "--color-primary-600",
COLOR_PRIMARY_700 = "--color-primary-700",
COLOR_PRIMARY_800 = "--color-primary-800",
COLOR_PRIMARY_900 = "--color-primary-900",
COLOR_PRIMARY_950 = "--color-primary-950",
COLOR_SECONDARY_50 = "color-secondary-50",
COLOR_SECONDARY_100 = "color-secondary-100",
COLOR_SECONDARY_200 = "color-secondary-200",
COLOR_SECONDARY_300 = "color-secondary-300",
COLOR_SECONDARY_400 = "color-secondary-400",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SECONDARY_600 = "color-secondary-600",
COLOR_SECONDARY_700 = "color-secondary-700",
COLOR_SECONDARY_800 = "color-secondary-800",
COLOR_SECONDARY_900 = "color-secondary-900",
COLOR_SECONDARY_950 = "color-secondary-950",
COLOR_SECONDARY_50 = "--color-secondary-50",
COLOR_SECONDARY_100 = "--color-secondary-100",
COLOR_SECONDARY_200 = "--color-secondary-200",
COLOR_SECONDARY_300 = "--color-secondary-300",
COLOR_SECONDARY_400 = "--color-secondary-400",
COLOR_SECONDARY_500 = "--color-secondary-500",
COLOR_SECONDARY_600 = "--color-secondary-600",
COLOR_SECONDARY_700 = "--color-secondary-700",
COLOR_SECONDARY_800 = "--color-secondary-800",
COLOR_SECONDARY_900 = "--color-secondary-900",
COLOR_SECONDARY_950 = "--color-secondary-950",
COLOR_ERROR_50 = "color-error-50",
COLOR_ERROR_100 = "color-error-100",
COLOR_ERROR_200 = "color-error-200",
COLOR_ERROR_300 = "color-error-300",
COLOR_ERROR_400 = "color-error-400",
COLOR_ERROR_500 = "color-error-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_ERROR_700 = "color-error-700",
COLOR_ERROR_800 = "color-error-800",
COLOR_ERROR_900 = "color-error-900",
COLOR_ERROR_950 = "color-error-950",
COLOR_ERROR_50 = "--color-error-50",
COLOR_ERROR_100 = "--color-error-100",
COLOR_ERROR_200 = "--color-error-200",
COLOR_ERROR_300 = "--color-error-300",
COLOR_ERROR_400 = "--color-error-400",
COLOR_ERROR_500 = "--color-error-500",
COLOR_ERROR_600 = "--color-error-600",
COLOR_ERROR_700 = "--color-error-700",
COLOR_ERROR_800 = "--color-error-800",
COLOR_ERROR_900 = "--color-error-900",
COLOR_ERROR_950 = "--color-error-950",
COLOR_WARNING_50 = "color-warning-50",
COLOR_WARNING_100 = "color-warning-100",
COLOR_WARNING_200 = "color-warning-200",
COLOR_WARNING_300 = "color-warning-300",
COLOR_WARNING_400 = "color-warning-400",
COLOR_WARNING_500 = "color-warning-500",
COLOR_WARNING_700 = "color-warning-700",
COLOR_WARNING_800 = "color-warning-800",
COLOR_WARNING_900 = "color-warning-900",
COLOR_WARNING_950 = "color-warning-950",
COLOR_WARNING_50 = "--color-warning-50",
COLOR_WARNING_100 = "--color-warning-100",
COLOR_WARNING_200 = "--color-warning-200",
COLOR_WARNING_300 = "--color-warning-300",
COLOR_WARNING_400 = "--color-warning-400",
COLOR_WARNING_500 = "--color-warning-500",
COLOR_WARNING_700 = "--color-warning-700",
COLOR_WARNING_800 = "--color-warning-800",
COLOR_WARNING_900 = "--color-warning-900",
COLOR_WARNING_950 = "--color-warning-950",
COLOR_SUCCESS_50 = "color-success-50",
COLOR_SUCCESS_100 = "color-success-100",
COLOR_SUCCESS_200 = "color-success-200",
COLOR_SUCCESS_300 = "color-success-300",
COLOR_SUCCESS_400 = "color-success-400",
COLOR_SUCCESS_500 = "color-success-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_SUCCESS_700 = "color-success-700",
COLOR_SUCCESS_800 = "color-success-800",
COLOR_SUCCESS_900 = "color-success-900",
COLOR_SUCCESS_950 = "color-success-950",
COLOR_SUCCESS_50 = "--color-success-50",
COLOR_SUCCESS_100 = "--color-success-100",
COLOR_SUCCESS_200 = "--color-success-200",
COLOR_SUCCESS_300 = "--color-success-300",
COLOR_SUCCESS_400 = "--color-success-400",
COLOR_SUCCESS_500 = "--color-success-500",
COLOR_SUCCESS_600 = "--color-success-600",
COLOR_SUCCESS_700 = "--color-success-700",
COLOR_SUCCESS_800 = "--color-success-800",
COLOR_SUCCESS_900 = "--color-success-900",
COLOR_SUCCESS_950 = "--color-success-950",
COLOR_INFO_50 = "color-info-50",
COLOR_INFO_100 = "color-info-100",
COLOR_INFO_200 = "color-info-200",
COLOR_INFO_300 = "color-info-300",
COLOR_INFO_400 = "color-info-400",
COLOR_INFO_500 = "color-info-500",
COLOR_INFO_700 = "color-info-700",
COLOR_INFO_800 = "color-info-800",
COLOR_INFO_900 = "color-info-900",
COLOR_INFO_950 = "color-info-950",
COLOR_INFO_50 = "--color-info-50",
COLOR_INFO_100 = "--color-info-100",
COLOR_INFO_200 = "--color-info-200",
COLOR_INFO_300 = "--color-info-300",
COLOR_INFO_400 = "--color-info-400",
COLOR_INFO_500 = "--color-info-500",
COLOR_INFO_700 = "--color-info-700",
COLOR_INFO_800 = "--color-info-800",
COLOR_INFO_900 = "--color-info-900",
COLOR_INFO_950 = "--color-info-950",
}
export default class Typography extends React.Component<IProps, IState> {
public override render(): JSX.Element {
export default function Typography(props: IProps) {
const { typo, color, className, title, children } = props;
const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
return (
<div
className={classNames(
classes["root"],
classes[this.props.typo],
classes[this.props.color ?? ""],
this.props.className ?? "",
)}
title={this.props.title}>
{this.props.children}
<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
{children}
</div>
);
}
}

166
src/front/Components/DesignSystem/Typography/old-classes.module.scss
View File

@ -1,166 +0,0 @@
@import "@Themes/constants.scss";
@import "@Themes/modes.scss";
.root {
color: var(--color-generic-black);
vertical-align: center;
font-family: "Inter", sans-serif;
&.H1-60 {
font-style: normal;
font-weight: 500;
font-size: 56px;
line-height: 67.2px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 56.7px;
}
}
&.H1-bis-40 {
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 48px;
}
&.H2-30 {
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 36px;
}
&.H3-24 {
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 29px;
}
&.Paragraphe-semibold-18 {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Paragraphe-simple-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
}
&.Paragraphe-MAJ-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
}
&.Nav-header-off-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
color: var(--color-neutral-500);
}
&.Paragraphe-18-error {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Paragraphe-semibold-16 {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Nav-input-off-16 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: var(--color-neutral-500);
}
&.Paragraphe-simple-16 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.005em;
}
&.Paragraphe-16-error {
color: var(--color-error-800;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Caption_14 {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Caption_14-semibold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.color-error-800 {
color: var(--color-error-800;
}
&.color-neutral-500 {
color: var(--color-neutral-500);
}
&.color-generic-black {
color: var(--color-generic-black);
}
&.color-primary-500 {
color: var(--color-primary-500);
}
&.color-secondary-500 {
color: var(--color-secondary-500);
}
&.color-success-600 {
color: var(--color-success-600);
}
&.color-error-600 {
color: var(--color-error-600);
}
&.color-warning-500 {
color: var(--color-warning-500);
}
&.white {
color: var(--color-generic-white);
}
}

6
src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import Typography, { ITypo } from "../../Typography";
import Typography, { ETypo } from "../../Typography";
import DocumentNotary from "../../Document/DocumentNotary";
import classNames from "classnames";
@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
return (
<div className={classNameToAdd}>
<div className={classes["title"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
</div>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
<div className={classes["content"]}>
{this.props.documents &&
this.props.documents.map((document) => {

18
src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
View File

@ -8,7 +8,7 @@ import Image from "next/image";
import Link from "next/link";
import React from "react";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -38,34 +38,34 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ??
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
E-mail
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
</div>
</div>
{!this.props.isArchived && (

4
src/front/Components/DesignSystem/Version/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import classes from "./classes.module.scss";
import VersionFile from "@Front/version.json"; // TODO: This is a hack, we will use a proper versioning system stored in DB
import Typography, { ITypo, ITypoColor } from "../Typography";
import Typography, { ETypo, ETypoColor } from "../Typography";
type IProps = {};
type IState = {};
@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div>{VersionFile.version}</div>
</Typography>
</div>

4
src/front/Components/Elements/Icons/Check/index.tsx
View File

@ -1,7 +1,7 @@
import { ITypoColor } from "@Front/Components/DesignSystem/Typography";
import { ETypoColor } from "@Front/Components/DesignSystem/Typography";
type IProps = {
color?: ITypoColor;
color?: ETypoColor;
};
export default function Check(props: IProps) {

105
src/front/Components/Elements/InfiniteScroll/index.tsx Normal file
View File

@ -0,0 +1,105 @@
import React from "react";
/**
* @Documentation
* This component is used to create an infinite scroll effect.
*
* Usage:
*
* No pagination: front-end/src/components/pages/Products/index.tsx
const onSearch = useCallback((searchParam: string) => productService.search(searchParam).then((products) => setRows(buildRows(products))), []);
useEffect(() => {
productService.getLastProductSheets().then((products) => setRows(buildRows(products)));
}, []);
*
*
*
* With pagination: front-end/src/components/pages/Clients/index.tsx
*
const fetchClients = useCallback(
() =>
clientService.get(pagination.current, search.current).then((clients) => {
if (clients.length === 0) return [];
setRows((_rows) => [..._rows, ...buildRows(clients)]);
pagination.current.skip += pagination.current.take;
return clients;
}),
[],
);
const onNext = useCallback(
(release: () => void) => {
fetchClients().then((clients) => {
if (!clients.length) return console.warn("No more value to load");
release();
});
},
[fetchClients],
);
const onSearch = useCallback((searchParam: string) => {
pagination.current.skip = 0;
search.current = (searchParam && searchParam.trim()) || null;
setRows([]);
}, []);
*
*/
export type IPagination = {
take: number;
skip: number;
};
type IProps = {
offset?: number;
orientation?: "vertical" | "horizontal";
/**
* @description
* If `onNext` is set to `null`, it indicates that there is no pagination and the infinite scroll effect will not be triggered.
*/
onNext?: ((release: () => void, reset?: () => void) => Promise<void> | void) | null;
children: React.ReactElement;
};
export default function InfiniteScroll({ children, onNext, offset = 20, orientation = "vertical" }: IProps) {
const isWaiting = React.useRef<boolean>(false);
const elementRef = React.useRef<HTMLElement>();
const onChange = React.useCallback(() => {
if (!onNext) return;
const element = elementRef.current;
if (!element || isWaiting.current) return;
const { scrollTop, scrollLeft, clientHeight, clientWidth, scrollHeight, scrollWidth } = element;
let isChange = false;
if (orientation === "vertical") isChange = scrollTop + clientHeight >= scrollHeight - offset;
if (orientation === "horizontal") isChange = scrollLeft + clientWidth >= scrollWidth - offset;
if (isChange) {
isWaiting.current = true;
onNext(() => (isWaiting.current = false));
}
}, [onNext, offset, orientation]);
React.useEffect(() => onChange(), [onChange]);
React.useEffect(() => {
const observer = new MutationObserver(onChange);
elementRef.current && observer.observe(elementRef.current, { childList: true, subtree: true });
window.addEventListener("resize", onChange);
return () => {
observer.disconnect();
window.removeEventListener("resize", onChange);
};
}, [onChange]);
if (!onNext) return children;
const clonedChild = React.cloneElement(children, {
onScroll: onChange,
ref: elementRef,
});
return clonedChild;
}

4
src/front/Components/Elements/MessageBox/index.tsx
View File

@ -1,7 +1,7 @@
import classes from "./classes.module.scss";
import classNames from "classnames";
import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
export type IProps = {
type: "info" | "warning" | "success" | "error";
@ -15,7 +15,7 @@ export default function MessageBox(props: IProps) {
<div className={classNames(className, classes["root"], classes[type])}>
{getIcon(type)}
<div className={classes["content"]}>
<Typography className={classes["text"]} typo={ITypo.TEXT_SM_REGULAR}>
<Typography className={classes["text"]} typo={ETypo.TEXT_SM_REGULAR}>
{children}
</Typography>
</div>

4
src/front/Components/Elements/NavTab/index.tsx
View File

@ -1,7 +1,7 @@
import classNames from "classnames";
import classes from "./classes.module.scss";
import Link from "next/link";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import { useRouter } from "next/router";
type ITabItem = {
@ -31,7 +31,7 @@ export default function NavTab(props: IProps) {
key={item.path.toString()}
href={item.path}
className={classNames(classes["link"], isMatch && classes["active"])}>
<Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
<Typography key={index} typo={isMatch ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}>
{item.label}
</Typography>
</Link>

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

@ -2,7 +2,7 @@
import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType, Note, OfficeFolder } from "le-coffre-resources/dist/Customer";
import React, { useCallback, useEffect, useState } from "react";
@ -129,38 +129,38 @@ export default function ClientDashboard(props: IProps) {
<div className={classes["text-container"]}>
{/* TODO Get name from userStore */}
<div className={classes["title-container"]}>
<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
</Typography>
</div>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ETypoColor.COLOR_NEUTRAL_500}>
Dossier {folder?.folder_number} - {folder?.name}
</Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ETypoColor.COLOR_NEUTRAL_500}>
{folder?.office?.name}
</Typography>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
<Typography typo={ETypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer
</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
<br /> Veuillez glisser / déposer chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis
sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et
transmis à votre notaire.
</Typography>
<div className={classes["note-box"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
{note?.content}
</Typography>
</div>
</div>
<div className={classes["contact"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ETypoColor.COLOR_NEUTRAL_500}>
<p>
{contact?.first_name} {contact?.last_name}
</p>
@ -219,8 +219,8 @@ export default function ClientDashboard(props: IProps) {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))}
</div>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography>
<Button

16
src/front/Components/Layouts/ClientDashboard/index2.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
@ -41,8 +41,8 @@ export default class ClientDashboard extends Base<IProps, IState> {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))}
</div>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography>
<Button
@ -62,11 +62,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
cancelText={"Annuler"}
confirmText={"Déposer le document"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ?
</Typography>
<TextField placeholder="Nom du document" />
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant.
</Typography>
@ -89,15 +89,15 @@ export default class ClientDashboard extends Base<IProps, IState> {
<div className={classes["header"]}>
<div className={classes["text-container"]}>
{/* TODO Get name from userStore */}
<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
</Typography>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
<Typography typo={ETypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer
</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à

28
src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
View File

@ -6,7 +6,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Switch from "@Front/Components/DesignSystem/Switch";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
import Module from "@Front/Config/Module";
import User, { OfficeRole } from "le-coffre-resources/dist/Admin";
@ -149,13 +149,13 @@ export default function CollaboratorInformations(props: IProps) {
<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["folder-header"]}>
<Typography typo={ITypo.TITLE_H1}>
<Typography typo={ETypo.TITLE_H1}>
{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
</Typography>
{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
<div className={classes["subscription-active"]}>
<div className={classes["subscription-active-dot"]} />
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_SUCCESS_600}>
Abonnement actif
</Typography>
</div>
@ -163,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Email
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
</div>
</div>
<div className={classes["role-container"]}>
<div className={classes["first-line"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
<div className={classes["gestion-role"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
<Button
@ -230,7 +230,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography>
@ -245,7 +245,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
{adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography>

6
src/front/Components/Layouts/Collaborators/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du collaborateur</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du collaborateur</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un collaborateur
</Typography>
</div>

6
src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
View File

@ -4,7 +4,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService";
@ -87,7 +87,7 @@ export default function DeedTypesCreate(props: IProps) {
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Créer un type d'acte</Typography>
<Typography typo={ETypo.TITLE_H1}>Créer un type d'acte</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField
@ -116,7 +116,7 @@ export default function DeedTypesCreate(props: IProps) {
cancelText={"Annuler"}
confirmText={"Quitter"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

6
src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
View File

@ -4,7 +4,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module";
import { DeedType } from "le-coffre-resources/dist/Admin";
@ -103,7 +103,7 @@ export default function DeedTypesEdit() {
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Modifier les informations d'un acte">
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations de l'acte</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier les informations de l'acte</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField
@ -134,7 +134,7 @@ export default function DeedTypesEdit() {
cancelText={"Annuler"}
confirmText={"Quitter"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

18
src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
View File

@ -7,7 +7,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module";
import classNames from "classnames";
@ -121,7 +121,7 @@ export default function DeedTypesInformations(props: IProps) {
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}>
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Modifier la liste des documents
@ -130,18 +130,18 @@ export default function DeedTypesInformations(props: IProps) {
</Link>
</div>
<div className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5}>{deedTypeSelected?.name}</Typography>
<Typography typo={ETypo.TITLE_H5}>{deedTypeSelected?.name}</Typography>
</div>
<div className={classes["deed-type-container"]}>
<div className={classes["infos"]}>
<div className={classNames(classes["middle-box"], classes["box"])}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
typo={ETypo.TEXT_MD_REGULAR}
className={classes["box-title"]}
color={ITypoColor.COLOR_GENERIC_BLACK}>
color={ETypoColor.COLOR_GENERIC_BLACK}>
Description
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
</div>
</div>
<div className={classes["pencil"]}>
@ -157,7 +157,7 @@ export default function DeedTypesInformations(props: IProps) {
<div className={classes["documents-container"]}>
<Form onSubmit={onSubmitHandler}>
<div className={classes["container-title"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Sélectionner les documents associés à ce type d'acte</Typography>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Sélectionner les documents associés à ce type d'acte</Typography>
<Tooltip text="Si vous ne trouvez pas le document que vous souhaitez dans la liste, cliquez sur « Modifier la liste des documents » pour créer ce type de document à la liste" />
</div>
<div className={classes["documents"]}>
@ -187,7 +187,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Êtes-vous sûr de vouloir supprimer ce type d'acte ?
</Typography>
</div>
@ -201,7 +201,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Enregistrer"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Les documents seront associés à ce type d'acte.
</Typography>
</div>

6
src/front/Components/Layouts/DeedTypes/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class DeedTypes extends BasePage<IProps, IState> {
<DefaultDeedTypesDashboard mobileBackText={"Liste des listes de pièces"}>
<div className={classes["root"]}>
<div className={classes["no-role-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un type d'acte
</Typography>
</div>

19
src/front/Components/Layouts/DesignSystem/classes.module.scss Normal file
View File

@ -0,0 +1,19 @@
.root {
display: flex;
flex-direction: column;
gap: 32px;
.components {
display: flex;
flex-direction: column;
gap: 24px;
.rows {
display: flex;
gap: 16px;
}
}
.table {
max-width: 800px;
}
}

152
src/front/Components/Layouts/DesignSystem/index.tsx Normal file
View File

@ -0,0 +1,152 @@
import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
import Table from "@Front/Components/DesignSystem/Table";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
export default function DesignSystem() {
return (
<DefaultTemplate title={"DesignSystem"}>
<Newsletter isOpen />
<div className={classes["root"]}>
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
<div className={classes["components"]}>
<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
<div className={classes["rows"]}>
<CircleProgress percentage={0} />
<CircleProgress percentage={30} />
<CircleProgress percentage={60} />
<CircleProgress percentage={100} />
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
<div className={classes["rows"]}>
<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
<div className={classes["rows"]}>
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Table</Typography>
<Table
className={classes["table"]}
header={[
{
key: "name",
title: "Nom",
},
{
key: "firstname",
title: "Prénom",
},
{
key: "button",
},
]}
rows={[
{
key: "1",
name: "Doe",
firstname: "John",
button: (
<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY}>
Send email
</Button>
),
},
{
key: "2",
name: "Doe",
firstname: "Jane",
button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
},
{
key: "3",
name: "Doe",
firstname: "Jack",
button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
},
]}
/>
<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
PRIMARY
</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
PRIMARY
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
SECONDARY
</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
SECONDARY
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
NEUTRAL
</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
NEUTRAL
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.ERROR}>ERROR</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
ERROR
</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
ERROR
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.WARNING}>WARNING</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
WARNING
</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
WARNING
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
SUCCESS
</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
SUCCESS
</Button>
</div>
<div className={classes["rows"]}>
<Button variant={EButtonVariant.INFO}>INFO</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
INFO
</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
INFO
</Button>
</div>
</div>
</div>
</DefaultTemplate>
);
}

4
src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService";
@ -52,7 +52,7 @@ export default function DocumentTypesCreate(props: IProps) {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Créer un nouveau document</Typography>
<Typography typo={ETypo.TITLE_H1}>Créer un nouveau document</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField

4
src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module";
import { validateOrReject, ValidationError } from "class-validator";
@ -69,7 +69,7 @@ export default function DocumentTypesEdit() {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des documents"} hasBackArrow title="Modifier un type de doucment">
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
<Typography typo={ETypo.TITLE_H1}>Paramétrage des documents</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField

16
src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
View File

@ -1,7 +1,7 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import PenICon from "@Assets/Icons/pen.svg";
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module";
import { DocumentType } from "le-coffre-resources/dist/Notary";
@ -36,7 +36,7 @@ export default function DocumentTypesInformations() {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Retour au paramétrage des types d'actes
@ -47,22 +47,22 @@ export default function DocumentTypesInformations() {
<div className={classes["document-infos"]}>
<div className={classes["left"]}>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Nom du document
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Description visible par les collaborateurs de l'office
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Description visible par les clients de l'office
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
</div>
</div>
<div className={classes["right"]}>

6
src/front/Components/Layouts/DocumentTypes/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des documentss"}>
<div className={classes["root"]}>
<div className={classes["no-role-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
<Typography typo={ETypo.TITLE_H1}>Paramétrage des documents</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un document
</Typography>
</div>

8
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -65,7 +65,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
<Typography typo={ETypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
{this.state.isLoaded && (
<>
<div className={classes["radiobox-container"]}>
@ -75,7 +75,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Client existant</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
</RadioBox>
)}
@ -84,7 +84,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onNewClientSelected}
checked={this.state.selectedOption === "new_customer"}
value={"new client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
</RadioBox>
</div>

6
src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
View File

@ -10,7 +10,7 @@ import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import { MultiValue } from "react-select";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
type IProps = {
isCreateDocumentModalVisible: boolean;
@ -129,11 +129,11 @@ export default function ParameterDocuments(props: IProps) {
<div className={classes["add-document-form-container"]}>
<div className={classes["radiobox-container"]}>
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Document existant</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Document existant</Typography>
</RadioBox>
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Créer un document</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Créer un document</Typography>
</RadioBox>
</div>
{addOrEditDocument === "add" && (

4
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
View File

@ -5,7 +5,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
<div className={classes["root"]}>
<BackArrow url={backUrl} />
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Demander des documents
</Typography>
<Form onSubmit={this.onFormSubmit}>

4
src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
View File

@ -1,7 +1,7 @@
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -50,7 +50,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier la note du client</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier la note du client</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

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

@ -9,7 +9,7 @@ import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { ValidationError } from "class-validator/types/validation/ValidationError";
@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
<div className={classes["root"]}>
<BackArrow />
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Créer un dossier
</Typography>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
Informations dossier
</Typography>
<Form onSubmit={this.onFormSubmit}>
@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
/>
<div className={classes["access-container"]}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
Accès au dossier
</Typography>
<div className={classes["radio-container"]}>

4
src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
View File

@ -1,6 +1,6 @@
import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Module from "@Front/Config/Module";
@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
) : (
<div className={classes["no-client"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun client n'est associé au dossier.
</Typography>
</div>

22
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -6,7 +6,7 @@ import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Componen
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -93,7 +93,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
@ -195,7 +195,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
</div>
<TextAreaField
name="archived_description"
@ -212,7 +212,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
</Typography>
</div>
@ -231,16 +231,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Confirmer"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
</div>
</Confirm>
<Newsletter isOpen={false} />
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>
@ -272,8 +272,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["validate-document-container"]}>
{!this.state.hasValidateAnchoring && (
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
@ -283,8 +283,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
{this.state.hasValidateAnchoring && (
<div className={classes["document-validating-container"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.

4
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -79,7 +79,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du client</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier les informations du client</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>
<TextField

4
src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
View File

@ -1,7 +1,7 @@
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -40,7 +40,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.state.backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier la note du client</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier la note du client</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

4
src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
View File

@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -70,7 +70,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier les collaborateurs</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
{!this.state.loading && (
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>

4
src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
View File

@ -2,7 +2,7 @@ import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -41,7 +41,7 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier la note du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier la note du dossier</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

4
src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -55,7 +55,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

12
src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import classes from "./classes.module.scss";
@ -13,15 +13,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
public override render(): JSX.Element | null {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["result-text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["result-text"]}>
Résultat de l'analyse :
</Typography>
<div className={classes["result-container"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Document conforme à :&nbsp;
</Typography>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={this.getColor()}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />
@ -33,9 +33,9 @@ export default class OcrResult extends React.Component<IProps, IState> {
private getColor() {
if (this.props.percentage > 75) {
return ITypoColor.COLOR_SUCCESS_600;
return ETypoColor.COLOR_SUCCESS_600;
} else {
return ITypoColor.COLOR_ERROR_600;
return ETypoColor.COLOR_ERROR_600;
}
}
}

16
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -4,7 +4,7 @@ import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { Document, File } from "le-coffre-resources/dist/Notary";
@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
<div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
{this.state.document.folder?.name}
</Typography>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
{this.state.document.document_type?.name}
</Typography>
<div className={classes["document-container"]}>
@ -143,8 +143,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
confirmText={"Confirmer"}>
<div className={classes["validate-document-container"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Êtes-vous sûr de vouloir valider ce document ?
</Typography>
@ -160,8 +160,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
confirmText={"Refuser"}>
<div className={classes["refuse-document-container"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["refuse-text"]}>
Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
version.
@ -173,7 +173,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)}
{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
<div className={classes["root"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
Document non trouvé
</Typography>
</div>

75
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -1,80 +1,5 @@
@import "@Themes/constants.scss";
.root {
display: flex;
align-items: center;
flex-direction: column;
min-height: 100%;
.no-folder-selected {
width: 100%;
.choose-a-folder {
margin-top: 96px;
text-align: center;
display: flex;
gap: 16px;
flex-direction: column;
}
}
.folder-informations {
width: 100%;
min-height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
flex-grow: 1;
.folder-header {
width: 100%;
.header {
margin-bottom: 32px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
}
.second-box {
margin-top: 24px;
margin-bottom: 32px;
}
.progress-bar {
margin-bottom: 32px;
}
.button-container {
width: 100%;
text-align: center;
:first-child {
margin-right: 12px;
}
> * {
margin: auto;
}
@media (max-width: $screen-m) {
:first-child {
margin-right: 0;
margin-bottom: 12px;
}
> * {
width: 100%;
}
}
}
.modal-title {
margin-bottom: 24px;
}
}
}
.buttons {
display: flex;
gap: 16px;
}

110
src/front/Components/Layouts/Folder/index.tsx
View File

@ -1,110 +1,20 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useCallback, useState } from "react";
import BasePage from "../Base";
import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
type IProps = {};
type IState = {
selectedFolder: OfficeFolder | null;
isArchivedModalOpen: boolean;
};
export default class Folder extends BasePage<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
selectedFolder: null,
isArchivedModalOpen: true,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
}
export default function Folder() {
const [_selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
setSelectedFolder(folder);
}, []);
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element {
return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
PRIMARY
</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
PRIMARY
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
SECONDARY
</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
SECONDARY
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
NEUTRAL
</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
NEUTRAL
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.ERROR}>ERROR</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
ERROR
</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
ERROR
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.WARNING}>WARNING</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
WARNING
</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
WARNING
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
SUCCESS
</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
SUCCESS
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.INFO}>INFO</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
INFO
</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
INFO
</Button>
</div>
</div>
<Newletter isOpen />
</div>
</div>
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}></div>
</DefaultNotaryDashboard>
);
}
private onSelectedFolder(folder: OfficeFolder): void {
this.setState({ selectedFolder: folder });
}
}

4
src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import classes from "./classes.module.scss";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
</>
) : (
<div className={classes["no-client"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun client dans ce dossier
</Typography>
</div>

8
src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
View File

@ -3,7 +3,7 @@ import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -63,7 +63,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
@ -140,9 +140,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

4
src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
View File

@ -2,7 +2,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
@ -44,7 +44,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Form className={classes["form"]}>
<div className={classes["content"]}>

6
src/front/Components/Layouts/FolderArchived/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -30,9 +30,9 @@ export default class FolderArchived extends BasePage<IProps, IState> {
mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

4
src/front/Components/Layouts/Home/index.tsx
View File

@ -1,4 +1,4 @@
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import BasePage from "../Base";
import classes from "./classes.module.scss";
@ -8,7 +8,7 @@ export default class Home extends BasePage {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>HomePage</Typography>
<Typography typo={ETypo.DISPLAY_LARGE}>HomePage</Typography>
</div>
</DefaultTemplate>
);

18
src/front/Components/Layouts/Login/index.tsx
View File

@ -1,7 +1,7 @@
import CoffreIcon from "@Assets/Icons/coffre.svg";
import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Image from "next/image";
import { useRouter } from "next/router";
@ -55,13 +55,13 @@ export default function Login() {
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}>
<Image alt="coffre" src={CoffreIcon} />
<Typography typo={ITypo.DISPLAY_LARGE}>
<Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connexion espace professionnel</div>
</Typography>
<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
S'identifier avec ID.not
</Button>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">
@ -79,7 +79,7 @@ export default function Login() {
header={"Erreur"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous ne disposez pas d'un abonnement, veuillez contacter l'administrateur de votre office.
</Typography>
</div>
@ -93,7 +93,7 @@ export default function Login() {
header={"Session expirée"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Veuillez vous reconnecter.
</Typography>
</div>
@ -107,7 +107,7 @@ export default function Login() {
confirmText={"Accéder à mon compte ID.not"}
cancelText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre compte ID.not doit être associé à une adresse email @notaires.fr (onglet Mettre à jour mes données
professionnelles)
</Typography>
@ -122,12 +122,12 @@ export default function Login() {
confirmText={"Contacter l'administrateur"}
cancelText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
L'accès à la version bêta de lecoffre.io est limité à un groupe restreint d'utilisateurs autorisés.
</Typography>
<ul>
<li>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous êtes intéressé par la participation à notre programme de bêta-test, veuillez nous compléter le
formulaire :{" "}
<a
@ -140,7 +140,7 @@ export default function Login() {
</li>
<div style={{ marginBottom: "10px" }}></div>
<li>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous avez déjà un compte bêta-testeur, veuillez vous connecter sur{" "}
<a
href="https://compte.idnot.fr/home"

6
src/front/Components/Layouts/LoginCallback/index.tsx
View File

@ -7,7 +7,7 @@ import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
import Auth from "@Front/Api/Auth/IdNot";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader";
import UserStore from "@Front/Stores/UserStore";
@ -63,13 +63,13 @@ export default function LoginCallBack() {
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}>
<Image alt="coffre" src={CoffreIcon} />
<Typography typo={ITypo.DISPLAY_LARGE}>
<Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connexion espace professionnel</div>
</Typography>
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">

Some files were not shown because too many files have changed in this diff Show More