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

✨ add color typography and dev tag element

Browse Source
This commit is contained in:
Max S 2024-07-15 16:06:49 +02:00
parent e94702c616
commit 0b9b098d46
107 changed files with 1298 additions and 940 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

977
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,6 +1,6 @@
import React, { useCallback } from "react"; import React, { useCallback } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography"; import Typography, { ETypo } from "../Typography";
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Image from "next/image"; import Image from "next/image";
import WarningBadge from "../WarningBadge"; 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 onClick={selectBlock} key={folder.id} id={folder.id}>
<div className={classes["root"]} data-selected={folder.selected.toString()}> <div className={classes["root"]} data-selected={folder.selected.toString()}>
<div className={classes["left-side"]}> <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>
<div className={classes["right-side"]}> <div className={classes["right-side"]}>
{folder.hasFlag && <WarningBadge />} {folder.hasFlag && <WarningBadge />}

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

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

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 Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Tooltip from "../ToolTip"; import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer"; import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files"; import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <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 <div
className={ className={
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : "" this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
)} )}
</Typography> </Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {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 Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
)} )}
@ -158,8 +158,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <Image src={DocumentCheckIcon} alt="Document check" />
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_NEUTRAL_500} color={ETypoColor.COLOR_NEUTRAL_500}
title={file.fileName ?? fileObj.name}> title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)} {this.shortName(file.fileName || fileObj.name)}
</Typography> </Typography>
@ -180,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["loader"]}> <div className={classes["loader"]}>
<Loader /> <Loader />
</div> </div>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Chargement... Chargement...
</Typography> </Typography>
</div> </div>
@ -196,8 +196,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
className={classes["add-button"]} className={classes["add-button"]}
onClick={this.addDocument}> onClick={this.addDocument}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ETypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}> className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </Typography>
@ -213,7 +213,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
header={"Motif du refus"} header={"Motif du refus"}
confirmText={"J'ai compris"}> confirmText={"J'ai compris"}>
<div className={classes["modal-content"]}> <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 : Votre document a été refusé pour la raison suivante :
</Typography> </Typography>
<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly /> <TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@ -221,14 +221,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</Confirm> </Confirm>
</div> </div>
{this.props.document.document_status === EDocumentStatus.REFUSED && ( {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. Ce document n'est pas conforme. Veuillez le déposer à nouveau.
</Typography> </Typography>
)} )}
{this.state.showFailedUploaded && ( {this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}> <Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}> <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} {this.state.showFailedUploaded}
</Typography> </Typography>
</div> </div>
@ -272,26 +272,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
switch (history.document_status) { switch (history.document_status) {
case EDocumentStatus.ASKED: case EDocumentStatus.ASKED:
return ( 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!)} Demandé par votre notaire le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.VALIDATED: case EDocumentStatus.VALIDATED:
return ( 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!)} Validé par votre notaire le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.DEPOSITED: case EDocumentStatus.DEPOSITED:
return ( 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!)} Déposé le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.REFUSED: case EDocumentStatus.REFUSED:
return ( 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 Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && ( {history.refused_reason && history.refused_reason.length > 0 && (
<Button <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 Image from "next/image";
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer"; import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; 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}> canConfirm={!this.state.isLoading}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<div className={classes["container"]}> <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 ? Vous souhaitez envoyer un autre document à votre notaire ?
</Typography> </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 Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. document correspondant.
</Typography> </Typography>
@ -111,8 +111,8 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <div className={classes["right"]}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ETypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["title"]}> className={classes["title"]}>
<div <div
className={ className={
@ -123,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.props.document.document_type?.name} {this.props.document.document_type?.name}
</div> </div>
</Typography> </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 Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
</div> </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["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <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)} {this.shortName(fileObj.name)}
</Typography> </Typography>
</div> </div>
@ -160,8 +160,8 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
className={classes["add-button"]} className={classes["add-button"]}
onClick={this.addDocument}> onClick={this.addDocument}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ETypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}> className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </Typography>
@ -177,7 +177,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
header={"L'ajout de Document n'est plus autorisé"} header={"L'ajout de Document n'est plus autorisé"}
isOpen={!!this.state.showFailedDocument}> isOpen={!!this.state.showFailedDocument}>
<div className={classes["modal-content"]}> <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} {this.state.showFailedDocument}
</Typography> </Typography>
</div> </div>
@ -186,7 +186,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.state.showFailedUploaded && ( {this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}> <Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}> <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} {this.state.showFailedUploaded}
</Typography> </Typography>
</div> </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 Image from "next/image";
import Button, { EButtonStyleType, EButtonVariant } from "../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
type IProps = { type IProps = {
onChange: (documentList: File[]) => void; onChange: (documentList: File[]) => void;
@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <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> <div>Déposer un RIB</div>
</Typography> </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 Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
</div> </div>
@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["file-container"]} key="0"> <div className={classes["file-container"]} key="0">
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <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)} {this.shortName(file.name)}
</Typography> </Typography>
</div> </div>
@ -166,8 +166,8 @@ export default class DepositRib extends React.Component<IProps, IState> {
className={classes["add-button"]} className={classes["add-button"]}
onClick={() => this.fileInput!.click()}> onClick={() => this.fileInput!.click()}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ETypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ETypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}> className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </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 { NextRouter, useRouter } from "next/router";
import React from "react"; import React from "react";
import Typography, { ITypo } from "../../Typography"; import Typography, { ETypo } from "../../Typography";
import WarningBadge from "../../WarningBadge"; import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -41,8 +41,8 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
return ( return (
<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}> <div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
<div> <div>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography> <Typography typo={ETypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography> <Typography typo={ETypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
</div> </div>
{this.renderIcon()} {this.renderIcon()}
</div> </div>

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

@ -1,7 +1,7 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Loader from "../Loader"; import Loader from "../Loader";
@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
{this.props.href && ( {this.props.href && (
<> <>
{!type && ( {!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 Erreur lors du chargement du fichier
</Typography> </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 Link from "next/link";
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation"; import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
import Note from "le-coffre-resources/dist/Customer/Note"; import Note from "le-coffre-resources/dist/Customer/Note";
@ -70,56 +70,56 @@ export default function FolderBoxInformation(props: IProps) {
case EFolderBoxInformationType.DESCRIPTION: case EFolderBoxInformationType.DESCRIPTION:
return ( return (
<div className={classes["text-container"]}> <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 Note dossier
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.NOTE: case EFolderBoxInformationType.NOTE:
return ( return (
<div className={classes["text-container"]}> <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 Note client
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION: case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
return ( return (
<div className={classes["text-container"]}> <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 Note archive
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.INFORMATIONS: case EFolderBoxInformationType.INFORMATIONS:
return ( return (
<> <>
<div className={classes["text-container"]}> <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 Intitulé du dossier
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
</div> </div>
<div className={classes["text-container"]}> <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 Numéro de dossier
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
</div> </div>
<div className={classes["text-container"]}> <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 Type d'acte
</Typography> </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>
<div className={classes["text-container"]}> <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 Ouverture du dossier
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
</div> </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 Image from "next/image";
import React from "react"; import React from "react";
import Typography, { ITypo } from "../Typography"; import Typography, { ETypo } from "../Typography";
import WarningBadge from "../WarningBadge"; import WarningBadge from "../WarningBadge";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -24,7 +24,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
return ( return (
<div className={classes["root"]} onClick={this.onSelectedFolder}> <div className={classes["root"]} onClick={this.onSelectedFolder}>
<div className={classes["left-side"]}> <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)} {this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
</Typography> </Typography>
{this.countPendingDocuments() > 0 && ( {this.countPendingDocuments() > 0 && (

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

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

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

@ -1,5 +1,5 @@
import React from "react"; 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 { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg"; import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField"; import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( 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()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input <input
onChange={this.onChange} 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 Image from "next/image";
import React, { FormEvent, ReactNode } from "react"; 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 classes from "./classes.module.scss";
import { NextRouter, useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
{selectedOption && ( {selectedOption && (
<> <>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span> <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> <span className={classes["text"]}>{selectedOption?.label}</span>
</Typography> </Typography>
</> </>
)} )}
{!selectedOption && ( {!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}> <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> <span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography> </Typography>
</div> </div>
@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
className={classes["container-li"]} className={classes["container-li"]}
onClick={(e) => this.onSelect(option, e)}> onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div> <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> </li>
))} ))}
</ul> </ul>
@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
private renderErrors(): JSX.Element | null { private renderErrors(): JSX.Element | null {
if (!this.state.errors) return null; if (!this.state.errors) return null;
return ( 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 {this.props.placeholder} ne peut pas être vide
</Typography> </Typography>
); );

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

@ -1,5 +1,5 @@
import React from "react"; 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 { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg"; import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField"; import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( 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()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input <input
onChange={this.onChange} 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 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 React from "react";
import { ReactNode } from "react"; import { ReactNode } from "react";
@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( 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()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea <textarea
name={this.props.name} 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 { IAppRule } from "@Front/Api/Entities/rule";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { IHeaderLinkProps } from "../../../HeaderLink"; 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 HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
import useToggle from "@Front/Hooks/useToggle"; import useToggle from "@Front/Hooks/useToggle";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; 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={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
<div className={classes["content"]} onClick={toggle}> <div className={classes["content"]} onClick={toggle}>
<Typography <Typography
typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR} typo={isActive || isSubmenuOpened ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isSubmenuOpened ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}> color={isActive || isSubmenuOpened ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text} {props.text}
</Typography> </Typography>
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />} {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 { useRouter } from "next/router";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Typography, { ITypo, ITypoColor } from "../../Typography"; import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
@ -38,8 +38,8 @@ export default function HeaderLink(props: IHeaderLinkProps) {
onMouseLeave={handleMouseLeave}> onMouseLeave={handleMouseLeave}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR} typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}> color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text} {props.text}
</Typography> </Typography>
</div> </div>
@ -50,7 +50,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
return ( return (
<div className={classNames(classes["root"], classes["desactivated"])}> <div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}> <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} {props.text}
</Typography> </Typography>
</div> </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 { useRouter } from "next/router";
import React, { useEffect } from "react"; 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"; import useHoverable from "@Front/Hooks/useHoverable";
type IHeaderLinkProps = { type IHeaderLinkProps = {
@ -30,8 +30,8 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
return ( return (
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> <Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Typography <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR} typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}> color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text} {props.text}
</Typography> </Typography>
</Link> </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 React, { useEffect, useState } from "react";
import { IHeaderLinkProps } from "../HeaderLink"; import { IHeaderLinkProps } from "../HeaderLink";
import Typography, { ITypo, ITypoColor } from "../../Typography"; import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
import HeaderSubmenuLink from "./HeaderSubmenuLink"; 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={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR} typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}> color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{props.text} {props.text}
</Typography> </Typography>
</div> </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 Link from "next/link";
import classNames from "classnames"; import classNames from "classnames";
import { useRouter } from "next/router"; 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 = { type IProps = {
text: string | JSX.Element; text: string | JSX.Element;
@ -30,8 +30,8 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
target={this.props.target}> target={this.props.target}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography <Typography
typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR} typo={this.props.isActive ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}> color={this.props.isActive ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
{this.props.text} {this.props.text}
</Typography> </Typography>
</div> </div>

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

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; 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 CloseIcon from "@Assets/Icons/cross.svg";
import Image from "next/image"; import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler"; import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
@ -34,22 +34,22 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<div className={classes["background"]} onClick={this.props.closeModal} /> <div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["notification-header"]}> <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}> <div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image> <Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div> </div>
</div> </div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}> <div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}> <Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu Tout marquer comme lu
</Typography> </Typography>
<Check color={ITypoColor.COLOR_SECONDARY_500} /> <Check color={ETypoColor.COLOR_SECONDARY_500} />
</div> </div>
<div className={classes["notification-body"]}> <div className={classes["notification-body"]}>
<> <>
{!this.state.toastList || this.state.toastList.length === 0 ? ( {!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}> <div className={classes["missing-notification"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Vous n'avez pas de notifications. Vous n'avez pas de notifications.
</Typography> </Typography>
</div> </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 Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import JwtService from "@Front/Services/JwtService/JwtService"; import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions"; 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"; import { InformationCircleIcon } from "@heroicons/react/24/outline";
enum EHeaderOpeningState { enum EHeaderOpeningState {
@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
{this.state.cancelAt && ( {this.state.cancelAt && (
<div className={classes["subscription-line"]}> <div className={classes["subscription-line"]}>
<InformationCircleIcon height="24" />; <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{" "} Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
{this.state.cancelAt.toLocaleDateString()}. {this.state.cancelAt.toLocaleDateString()}.
</Typography> </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 Image from "next/image";
import DisconnectIcon from "@Assets/Icons/disconnect.svg"; import DisconnectIcon from "@Assets/Icons/disconnect.svg";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import UserStore from "@Front/Stores/UserStore"; import UserStore from "@Front/Stores/UserStore";
import { FrontendVariables } from "@Front/Config/VariablesFront"; import { FrontendVariables } from "@Front/Config/VariablesFront";
@ -18,7 +18,7 @@ export default function LogOut() {
return ( return (
<div className={classes["root"]} onClick={disconnect}> <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 Déconnexion
</Typography> </Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" /> <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 React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
type IProps = { type IProps = {
content: string | JSX.Element; content: string | JSX.Element;
@ -10,7 +10,7 @@ export default class Header extends React.Component<IProps> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<header className={classes["root"]}> <header className={classes["root"]}>
<Typography typo={ITypo.TITLE_H3}>{this.props.content}</Typography> <Typography typo={ETypo.TITLE_H3}>{this.props.content}</Typography>
</header> </header>
); );
} }

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

@ -1,7 +1,7 @@
// import Loader from "Components/Elements/Loader"; // import Loader from "Components/Elements/Loader";
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
type IProps = { type IProps = {
text?: string | JSX.Element; text?: string | JSX.Element;
@ -13,7 +13,7 @@ export default class PopUpLoader extends React.Component<IProps> {
<div className={classes["root"]}> <div className={classes["root"]}>
{/* <Loader /> */} {/* <Loader /> */}
TODO: INTEGRER LOARDER ISLOADING 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> </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 Image from "next/image";
import React from "react"; import React from "react";
import Typography, { ITypo } from "../Typography"; import Typography, { ETypo } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Footer from "./Elements/Footer"; import Footer from "./Elements/Footer";
import Header from "./Elements/Header"; import Header from "./Elements/Header";
@ -60,7 +60,7 @@ export default class Modal extends React.Component<IProps, IState> {
<div className={classes["sub-container"]}> <div className={classes["sub-container"]}>
{this.props.header && <Header content={this.props.header} />} {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} />}</> <>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
</Typography> </Typography>
{this.props.children && this.props.footer && <Footer content={this.props.footer} />} {this.props.children && this.props.footer && <Footer content={this.props.footer} />}

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

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 classes from "./classes.module.scss";
import TextField from "../Form/TextField"; import TextField from "../Form/TextField";
import Button, { EButtonVariant } from "../Button"; 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 Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
import Form from "../Form"; import Form from "../Form";
import Mail from "@Assets/Icons/mail.svg"; 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["container"]}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["text"]}> <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 Restez Informé(e) avec notre Newsletter
</Typography> </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 ! Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
</Typography> </Typography>
{this.state.errorMessage && ( {this.state.errorMessage && (
<div> <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} {this.state.errorMessage}
</Typography> </Typography>
</div> </div>
)} )}
{this.state.successMessage && ( {this.state.successMessage && (
<div> <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} {this.state.successMessage}
</Typography> </Typography>
</div> </div>

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

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

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

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

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import Tooltip from "../ToolTip"; import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = { type IProps = {
@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
}; };
public override render(): JSX.Element { public override render(): JSX.Element {
return ( 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"]}> <label className={classes["root"]}>
<input <input
type="radio" 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 Image from "next/image";
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = { type IProps = {
@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
<div className={classes["root"]}> <div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" /> <Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && ( {!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> <div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography> </Typography>
)} )}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer"; import { Document } from "le-coffre-resources/dist/Customer";
import Typography, { ITypo } from "../../Typography"; import Typography, { ETypo } from "../../Typography";
import DocumentNotary from "../../Document/DocumentNotary"; import DocumentNotary from "../../Document/DocumentNotary";
import classNames from "classnames"; import classNames from "classnames";
@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
return ( return (
<div className={classNameToAdd}> <div className={classNameToAdd}>
<div className={classes["title"]}> <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> </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"]}> <div className={classes["content"]}>
{this.props.documents && {this.props.documents &&
this.props.documents.map((document) => { 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 Link from "next/link";
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../../Typography"; import Typography, { ETypo, ETypoColor } from "../../Typography";
import WarningBadge from "../../WarningBadge"; import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; 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["root"]}>
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classes["container"]}> <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 Nom
</Typography> </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>
<div className={classes["container"]}> <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 Prénom
</Typography> </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>
<div className={classes["container"]}> <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 Numéro de téléphone
</Typography> </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.cell_phone_number!) ??
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")} this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
</Typography> </Typography>
</div> </div>
<div className={classes["container"]}> <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 E-mail
</Typography> </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>
</div> </div>
{!this.props.isArchived && ( {!this.props.isArchived && (

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; 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 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 IProps = {};
type IState = {}; type IState = {};
@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div className={classes["root"]}> <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> <div>{VersionFile.version}</div>
</Typography> </Typography>
</div> </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 = { type IProps = {
color?: ITypoColor; color?: ETypoColor;
}; };
export default function Check(props: IProps) { export default function Check(props: IProps) {

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

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

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

@ -1,7 +1,7 @@
import classNames from "classnames"; import classNames from "classnames";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Link from "next/link"; 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"; import { useRouter } from "next/router";
type ITabItem = { type ITabItem = {
@ -31,7 +31,7 @@ export default function NavTab(props: IProps) {
key={item.path.toString()} key={item.path.toString()}
href={item.path} href={item.path}
className={classNames(classes["link"], isMatch && classes["active"])}> 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} {item.label}
</Typography> </Typography>
</Link> </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 Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; 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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType, Note, OfficeFolder } from "le-coffre-resources/dist/Customer"; import Customer, { Document, DocumentType, Note, OfficeFolder } from "le-coffre-resources/dist/Customer";
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
@ -129,38 +129,38 @@ export default function ClientDashboard(props: IProps) {
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
{/* TODO Get name from userStore */} {/* TODO Get name from userStore */}
<div className={classes["title-container"]}> <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)} Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
</Typography> </Typography>
</div> </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} Dossier {folder?.folder_number} - {folder?.name}
</Typography> </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} {folder?.office?.name}
</Typography> </Typography>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}> <Typography typo={ETypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer Documents à envoyer
</Typography> </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. 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 <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 sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et
transmis à votre notaire. transmis à votre notaire.
</Typography> </Typography>
<div className={classes["note-box"]}> <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} {note?.content}
</Typography> </Typography>
</div> </div>
</div> </div>
<div className={classes["contact"]}> <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> <p>
{contact?.first_name} {contact?.last_name} {contact?.first_name} {contact?.last_name}
</p> </p>
@ -219,8 +219,8 @@ export default function ClientDashboard(props: IProps) {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} /> <DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))} ))}
</div> </div>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography> <Typography typo={ETypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ? Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography> </Typography>
<Button <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 DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer"; 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 ?? []} /> <DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))} ))}
</div> </div>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography> <Typography typo={ETypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ? Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography> </Typography>
<Button <Button
@ -62,11 +62,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Déposer le document"}> confirmText={"Déposer le document"}>
<div className={classes["modal-content"]}> <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 ? Vous souhaitez envoyer un autre document à votre notaire ?
</Typography> </Typography>
<TextField placeholder="Nom du document" /> <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 Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. document correspondant.
</Typography> </Typography>
@ -89,15 +89,15 @@ export default class ClientDashboard extends Base<IProps, IState> {
<div className={classes["header"]}> <div className={classes["header"]}>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
{/* TODO Get name from userStore */} {/* 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)} Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
</Typography> </Typography>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}> <Typography typo={ETypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer Documents à envoyer
</Typography> </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 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 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 à 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 SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Switch from "@Front/Components/DesignSystem/Switch"; 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 DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import User, { OfficeRole } from "le-coffre-resources/dist/Admin"; import User, { OfficeRole } from "le-coffre-resources/dist/Admin";
@ -149,13 +149,13 @@ export default function CollaboratorInformations(props: IProps) {
<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}> <DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["folder-header"]}> <div className={classes["folder-header"]}>
<Typography typo={ITypo.TITLE_H1}> <Typography typo={ETypo.TITLE_H1}>
{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name} {userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
</Typography> </Typography>
{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && ( {userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
<div className={classes["subscription-active"]}> <div className={classes["subscription-active"]}>
<div className={classes["subscription-active-dot"]} /> <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 Abonnement actif
</Typography> </Typography>
</div> </div>
@ -163,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
</div> </div>
<div className={classes["user-infos"]}> <div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}> <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 Nom
</Typography> </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>
<div className={classes["user-infos-row"]}> <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 Prénom
</Typography> </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>
<div className={classes["user-infos-row"]}> <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 Numéro de téléphone
</Typography> </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>
<div className={classes["user-infos-row"]}> <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 Email
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
</div> </div>
</div> </div>
<div className={classes["role-container"]}> <div className={classes["role-container"]}>
<div className={classes["first-line"]}> <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"]}> <div className={classes["gestion-role"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.props.path}> <Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
<Button <Button
@ -230,7 +230,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <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> à{" "} Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ? {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography> </Typography>
@ -245,7 +245,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <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 à{" "} {adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ? {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography> </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 DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
import BasePage from "../Base"; import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}> <DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-folder-selected"]}> <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"]}> <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 Sélectionnez un collaborateur
</Typography> </Typography>
</div> </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 TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService"; 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"> <DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField <TextField
@ -116,7 +116,7 @@ export default function DeedTypesCreate(props: IProps) {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Quitter"}> confirmText={"Quitter"}>
<div className={classes["modal-content"]}> <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. Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography> </Typography>
</div> </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 TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { DeedType } from "le-coffre-resources/dist/Admin"; 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"> <DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Modifier les informations d'un acte">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField <TextField
@ -134,7 +134,7 @@ export default function DeedTypesEdit() {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Quitter"}> confirmText={"Quitter"}>
<div className={classes["modal-content"]}> <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. Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography> </Typography>
</div> </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 { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; 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 DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import classNames from "classnames"; import classNames from "classnames";
@ -121,7 +121,7 @@ export default function DeedTypesInformations(props: IProps) {
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}> <DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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}> <Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Modifier la liste des documents Modifier la liste des documents
@ -130,18 +130,18 @@ export default function DeedTypesInformations(props: IProps) {
</Link> </Link>
</div> </div>
<div className={classes["subtitle"]}> <div className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5}>{deedTypeSelected?.name}</Typography> <Typography typo={ETypo.TITLE_H5}>{deedTypeSelected?.name}</Typography>
</div> </div>
<div className={classes["deed-type-container"]}> <div className={classes["deed-type-container"]}>
<div className={classes["infos"]}> <div className={classes["infos"]}>
<div className={classNames(classes["middle-box"], classes["box"])}> <div className={classNames(classes["middle-box"], classes["box"])}>
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
className={classes["box-title"]} className={classes["box-title"]}
color={ITypoColor.COLOR_GENERIC_BLACK}> color={ETypoColor.COLOR_GENERIC_BLACK}>
Description Description
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
</div> </div>
</div> </div>
<div className={classes["pencil"]}> <div className={classes["pencil"]}>
@ -157,7 +157,7 @@ export default function DeedTypesInformations(props: IProps) {
<div className={classes["documents-container"]}> <div className={classes["documents-container"]}>
<Form onSubmit={onSubmitHandler}> <Form onSubmit={onSubmitHandler}>
<div className={classes["container-title"]}> <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" /> <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>
<div className={classes["documents"]}> <div className={classes["documents"]}>
@ -187,7 +187,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <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 ? Êtes-vous sûr de vouloir supprimer ce type d'acte ?
</Typography> </Typography>
</div> </div>
@ -201,7 +201,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Enregistrer"} confirmText={"Enregistrer"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <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. Les documents seront associés à ce type d'acte.
</Typography> </Typography>
</div> </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 DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import BasePage from "../Base"; import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class DeedTypes extends BasePage<IProps, IState> {
<DefaultDeedTypesDashboard mobileBackText={"Liste des listes de pièces"}> <DefaultDeedTypesDashboard mobileBackText={"Liste des listes de pièces"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-role-selected"]}> <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"]}> <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 Sélectionnez un type d'acte
</Typography> </Typography>
</div> </div>

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 Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; 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 DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService"; 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"> <DefaultDocumentTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField <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 Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; 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 DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { validateOrReject, ValidationError } from "class-validator"; 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"> <DefaultDocumentTypesDashboard mobileBackText={"Liste des documents"} hasBackArrow title="Modifier un type de doucment">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField <TextField

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

@ -1,7 +1,7 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import PenICon from "@Assets/Icons/pen.svg"; import PenICon from "@Assets/Icons/pen.svg";
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; 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 DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { DocumentType } from "le-coffre-resources/dist/Notary"; import { DocumentType } from "le-coffre-resources/dist/Notary";
@ -36,7 +36,7 @@ export default function DocumentTypesInformations() {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}> <DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <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}> <Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Retour au paramétrage des types d'actes Retour au paramétrage des types d'actes
@ -47,22 +47,22 @@ export default function DocumentTypesInformations() {
<div className={classes["document-infos"]}> <div className={classes["document-infos"]}>
<div className={classes["left"]}> <div className={classes["left"]}>
<div className={classes["document-infos-row"]}> <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 Nom du document
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
</div> </div>
<div className={classes["document-infos-row"]}> <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 Description visible par les collaborateurs de l'office
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
</div> </div>
<div className={classes["document-infos-row"]}> <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 Description visible par les clients de l'office
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
</div> </div>
</div> </div>
<div className={classes["right"]}> <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 DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import BasePage from "../Base"; import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des documentss"}> <DefaultDocumentTypesDashboard mobileBackText={"Liste des documentss"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-role-selected"]}> <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"]}> <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 Sélectionnez un document
</Typography> </Typography>
</div> </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 { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -65,7 +65,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} /> <BackArrow url={backwardPath} />
</div> </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 && ( {this.state.isLoaded && (
<> <>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
@ -75,7 +75,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onExistingClientSelected} onChange={this.onExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"} checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}> value={"existing client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Client existant</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
</RadioBox> </RadioBox>
)} )}
@ -84,7 +84,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onNewClientSelected} onChange={this.onNewClientSelected}
checked={this.state.selectedOption === "new_customer"} checked={this.state.selectedOption === "new_customer"}
value={"new client"}> value={"new client"}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Nouveau client</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
</RadioBox> </RadioBox>
</div> </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 { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import { MultiValue } from "react-select"; import { MultiValue } from "react-select";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; 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 = { type IProps = {
isCreateDocumentModalVisible: boolean; isCreateDocumentModalVisible: boolean;
@ -129,11 +129,11 @@ export default function ParameterDocuments(props: IProps) {
<div className={classes["add-document-form-container"]}> <div className={classes["add-document-form-container"]}>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}> <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>
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}> <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> </RadioBox>
</div> </div>
{addOrEditDocument === "add" && ( {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 CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}> <DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
<div className={classes["root"]}> <div className={classes["root"]}>
<BackArrow url={backUrl} /> <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 Demander des documents
</Typography> </Typography>
<Form onSubmit={this.onFormSubmit}> <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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -50,7 +50,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} /> <BackArrow url={this.backwardPath} />
</div> </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}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <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 TextField from "@Front/Components/DesignSystem/Form/TextField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { ValidationError } from "class-validator/types/validation/ValidationError"; 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}> <DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
<div className={classes["root"]}> <div className={classes["root"]}>
<BackArrow /> <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 Créer un dossier
</Typography> </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 Informations dossier
</Typography> </Typography>
<Form onSubmit={this.onFormSubmit}> <Form onSubmit={this.onFormSubmit}>
@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
/> />
<div className={classes["access-container"]}> <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 Accès au dossier
</Typography> </Typography>
<div className={classes["radio-container"]}> <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 PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; 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 UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Module from "@Front/Config/Module"; 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["no-client"]}>
<div className={classes["title"]}> <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. Aucun client n'est associé au dossier.
</Typography> </Typography>
</div> </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 TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; 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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; 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["folder-header"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography> <Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div> </div>
<Link href={redirectPathEditCollaborators}> <Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
@ -195,7 +195,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Archiver"}> confirmText={"Archiver"}>
<div className={classes["modal-title"]}> <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> </div>
<TextAreaField <TextAreaField
name="archived_description" name="archived_description"
@ -212,7 +212,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Archiver"}> confirmText={"Archiver"}>
<div className={classes["modal-title"]}> <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 ? Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
</Typography> </Typography>
</div> </div>
@ -231,16 +231,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Confirmer"}> confirmText={"Confirmer"}>
<div className={classes["modal-title"]}> <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> </div>
</Confirm> </Confirm>
<Newsletter isOpen={false} /> <Newsletter isOpen={false} />
</div> </div>
) : ( ) : (
<div className={classes["no-folder-selected"]}> <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"]}> <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 Sélectionnez un dossier
</Typography> </Typography>
</div> </div>
@ -272,8 +272,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["validate-document-container"]}> <div className={classes["validate-document-container"]}>
{!this.state.hasValidateAnchoring && ( {!this.state.hasValidateAnchoring && (
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}> className={classes["validate-text"]}>
Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des 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 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 && ( {this.state.hasValidateAnchoring && (
<div className={classes["document-validating-container"]}> <div className={classes["document-validating-container"]}>
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}> className={classes["validate-text"]}>
Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de 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. 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 Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -79,7 +79,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} /> <BackArrow url={this.backwardPath} />
</div> </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}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <div className={classes["content"]}>
<TextField <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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -40,7 +40,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={this.state.backwardPath} /> <BackArrow url={this.state.backwardPath} />
</div> </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}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <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 { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -70,7 +70,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} /> <BackArrow url={backwardPath} />
</div> </div>
<Typography typo={ITypo.TITLE_H1}>Modifier les collaborateurs</Typography> <Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
{!this.state.loading && ( {!this.state.loading && (
<Form className={classes["form"]} onSubmit={this.onFormSubmit}> <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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -41,7 +41,7 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} /> <BackArrow url={this.backwardPath} />
</div> </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}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <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 Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -55,7 +55,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} /> <BackArrow url={backwardPath} />
</div> </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}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <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 React from "react";
import classes from "./classes.module.scss"; 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 { public override render(): JSX.Element | null {
return ( return (
<div className={classes["root"]}> <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 : Résultat de l'analyse :
</Typography> </Typography>
<div className={classes["result-container"]}> <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; Document conforme à :&nbsp;
</Typography> </Typography>
<div className={classes["percentage-container"]}> <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}% {this.props.percentage}%
</Typography> </Typography>
<div className={classes["dot"]} data-color={this.getColor()} /> <div className={classes["dot"]} data-color={this.getColor()} />
@ -33,9 +33,9 @@ export default class OcrResult extends React.Component<IProps, IState> {
private getColor() { private getColor() {
if (this.props.percentage > 75) { if (this.props.percentage > 75) {
return ITypoColor.COLOR_SUCCESS_600; return ETypoColor.COLOR_SUCCESS_600;
} else { } 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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FilePreview from "@Front/Components/DesignSystem/FilePreview"; import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { Document, File } from "le-coffre-resources/dist/Notary"; 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"> <DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && ( {this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
<div className={classes["root"]}> <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} {this.state.document.folder?.name}
</Typography> </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} {this.state.document.document_type?.name}
</Typography> </Typography>
<div className={classes["document-container"]}> <div className={classes["document-container"]}>
@ -143,8 +143,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
confirmText={"Confirmer"}> confirmText={"Confirmer"}>
<div className={classes["validate-document-container"]}> <div className={classes["validate-document-container"]}>
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}> className={classes["validate-text"]}>
Êtes-vous sûr de vouloir valider ce document ? Êtes-vous sûr de vouloir valider ce document ?
</Typography> </Typography>
@ -160,8 +160,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
confirmText={"Refuser"}> confirmText={"Refuser"}>
<div className={classes["refuse-document-container"]}> <div className={classes["refuse-document-container"]}>
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["refuse-text"]}> className={classes["refuse-text"]}>
Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
version. version.
@ -173,7 +173,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)} )}
{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && ( {(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
<div className={classes["root"]}> <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é Document non trouvé
</Typography> </Typography>
</div> </div>

13
src/front/Components/Layouts/Folder/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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -6,6 +6,7 @@ import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter"; import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Tag, { ETagVariant } from "@Front/Components/DesignSystem/Tag";
type IProps = {}; type IProps = {};
type IState = { type IState = {
@ -28,9 +29,9 @@ export default class Folder extends BasePage<IProps, IState> {
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}> <DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-folder-selected"]}> <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"]}> <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 Sélectionnez un dossier
</Typography> </Typography>
<div className={classes["buttons"]}> <div className={classes["buttons"]}>
@ -96,6 +97,12 @@ export default class Folder extends BasePage<IProps, IState> {
INFO INFO
</Button> </Button>
</div> </div>
<div className={classes["buttons"]}>
<Tag variant={ETagVariant.INFO} label="Info" />
<Tag variant={ETagVariant.SUCCESS} label="Success" />
<Tag variant={ETagVariant.ERROR} label="Error" />
</div>
</div> </div>
<Newletter isOpen /> <Newletter isOpen />
</div> </div>

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; 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 UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation"; 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"]}> <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 Aucun client dans ce dossier
</Typography> </Typography>
</div> </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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation"; import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; 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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; 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["folder-header"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography> <Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div> </div>
<Link href={redirectPathEditCollaborators}> <Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
@ -140,9 +140,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</div> </div>
) : ( ) : (
<div className={classes["no-folder-selected"]}> <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"]}> <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é Aucun dossier sélectionné
</Typography> </Typography>
</div> </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 Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; 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 BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -44,7 +44,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} /> <BackArrow url={backwardPath} />
</div> </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"]}> <Form className={classes["form"]}>
<div className={classes["content"]}> <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 DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -30,9 +30,9 @@ export default class FolderArchived extends BasePage<IProps, IState> {
mobileBackText={"Liste des dossiers"}> mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-folder-selected"]}> <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"]}> <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é Aucun dossier sélectionné
</Typography> </Typography>
</div> </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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import BasePage from "../Base"; import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -8,7 +8,7 @@ export default class Home extends BasePage {
return ( return (
<DefaultTemplate title={"HomePage"}> <DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>HomePage</Typography> <Typography typo={ETypo.DISPLAY_LARGE}>HomePage</Typography>
</div> </div>
</DefaultTemplate> </DefaultTemplate>
); );

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

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

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

@ -5,7 +5,7 @@ import { useRouter } from "next/router";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; 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 Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader"; import Loader from "@Front/Components/DesignSystem/Loader";
import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers"; import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers";
@ -49,13 +49,13 @@ export default function LoginCallBackCustomer() {
<DefaultDoubleSidePage title={"Login"} image={LandingImage}> <DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}> <div className={classes["root"]}>
<Image alt="coffre" src={CoffreIcon} /> <Image alt="coffre" src={CoffreIcon} />
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connexion espace client</div> <div className={classes["title"]}>Connexion espace client</div>
</Typography> </Typography>
<div className={classes["loader"]}> <div className={classes["loader"]}>
<Loader /> <Loader />
</div> </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> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">

6
src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; 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 Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -15,7 +15,7 @@ export default function PasswordForgotten(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Réinitialisez votre mot de passe</div> <div className={classes["title"]}>Réinitialisez votre mot de passe</div>
</Typography> </Typography>
<Form className={classes["form"]} onSubmit={onSubmit}> <Form className={classes["form"]} onSubmit={onSubmit}>
@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
validationError={validationErrors.find((error) => error.property === "password")} validationError={validationErrors.find((error) => error.property === "password")}
password password
/> />
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}> <Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre. Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
</Typography> </Typography>
<TextField <TextField

6
src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
//import Image from "next/image"; //import Image from "next/image";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -31,7 +31,7 @@ export default function StepEmail(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Identifiez-vous</div> <div className={classes["title"]}>Identifiez-vous</div>
</Typography> </Typography>
{/* <Typography typo={ITypo.TEXT_MD_REGULAR}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography> {/* <Typography typo={ITypo.TEXT_MD_REGULAR}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
@ -40,7 +40,7 @@ export default function StepEmail(props: IProps) {
<Typography className={classes["or"]} typo={ITypo.TEXT_MD_REGULAR}> <Typography className={classes["or"]} typo={ITypo.TEXT_MD_REGULAR}>
Ou Ou
</Typography> */} </Typography> */}
<Typography typo={ITypo.TEXT_MD_REGULAR}> <Typography typo={ETypo.TEXT_MD_REGULAR}>
Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.{" "} Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.{" "}
</Typography> </Typography>
<Form className={classes["form"]} onSubmit={onSubmit}> <Form className={classes["form"]} onSubmit={onSubmit}>

6
src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; 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 Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -15,7 +15,7 @@ export default function StepNewPassword(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Configurez votre mot de passe</div> <div className={classes["title"]}>Configurez votre mot de passe</div>
</Typography> </Typography>
<Form className={classes["form"]} onSubmit={onSubmit}> <Form className={classes["form"]} onSubmit={onSubmit}>
@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
validationError={validationErrors.find((error) => error.property === "password")} validationError={validationErrors.find((error) => error.property === "password")}
password password
/> />
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}> <Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre. Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
</Typography> </Typography>
<TextField <TextField

8
src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -31,7 +31,7 @@ export default function StepPassword(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Entrez votre mot de passe</div> <div className={classes["title"]}>Entrez votre mot de passe</div>
</Typography> </Typography>
<Form className={classes["form"]} onSubmit={onSubmit}> <Form className={classes["form"]} onSubmit={onSubmit}>
@ -42,7 +42,7 @@ export default function StepPassword(props: IProps) {
password password
/> />
<div onClick={openModal}> <div onClick={openModal}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["forgot-password"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["forgot-password"]}>
Mot de passe oublié ? Mot de passe oublié ?
</Typography> </Typography>
</div> </div>
@ -60,7 +60,7 @@ export default function StepPassword(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Un code à usage unique va vous être envoyé par sms pour réinitialiser votre mot de passe. Un code à usage unique va vous être envoyé par sms pour réinitialiser votre mot de passe.
</Typography> </Typography>
</div> </div>

10
src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import classes from "./classes.module.scss"; 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 Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -37,7 +37,7 @@ export default function StepTotp(props: IProps) {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}> <div className={classes["title"]}>
Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber.replace(/(.{2})/g, "$1 ")} Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber.replace(/(.{2})/g, "$1 ")}
</div> </div>
@ -53,7 +53,7 @@ export default function StepTotp(props: IProps) {
</Button> </Button>
</Form> </Form>
<div className={classes["ask-another-code"]}> <div className={classes["ask-another-code"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
<Button <Button
variant={EButtonVariant.PRIMARY} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT} styleType={EButtonStyleType.TEXT}
@ -64,9 +64,9 @@ export default function StepTotp(props: IProps) {
Envoyer un nouveau code Envoyer un nouveau code
</Button> </Button>
{secondsBeforeNewCode !== 0 && ( {secondsBeforeNewCode !== 0 && (
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} className={classes["new-code-timer"]}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} className={classes["new-code-timer"]}>
Redemandez un code dans Redemandez un code dans
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode} 00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
</Typography> </Typography>
</Typography> </Typography>

4
src/front/Components/Layouts/LoginCustomer/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 DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
@ -242,7 +242,7 @@ export default function Login() {
header={"Erreur"} header={"Erreur"}
confirmText={"OK"}> confirmText={"OK"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Une erreur est survenue lors de la connexion. Veuillez réessayer. Une erreur est survenue lors de la connexion. Veuillez réessayer.
</Typography> </Typography>
</div> </div>

10
src/front/Components/Layouts/LoginHome/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 DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -11,12 +11,12 @@ export default function LoginHome() {
return ( return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}> <DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}> <Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div> <div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div>
</Typography> </Typography>
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classes["section"]}> <div className={classes["section"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Je suis un notaire / collaborateur Je suis un notaire / collaborateur
</Typography> </Typography>
<Link href={Module.getInstance().get().modules.pages.Login.props.path}> <Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@ -25,7 +25,7 @@ export default function LoginHome() {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["section"]}> <div className={classes["section"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Je suis un client Je suis un client
</Typography> </Typography>
<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}> <Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
@ -34,7 +34,7 @@ export default function LoginHome() {
</div> </div>
</div> </div>
<div className={classes["bottom"]}> <div className={classes["bottom"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR}> <Typography typo={ETypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">

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

@ -1,6 +1,6 @@
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base"; import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react"; import React from "react";
@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
return ( return (
<DefaultTemplate title={"Mon compte"}> <DefaultTemplate title={"Mon compte"}>
<div className={classes["root"]}> <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"]}>
Mon compte Mon compte
</Typography> </Typography>
<div className={classes["parts-container"]}> <div className={classes["parts-container"]}>
<div className={classes["part"]}> <div className={classes["part"]}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Mes informations Mes informations
</Typography> </Typography>
<Form onSubmit={this.onFormSubmit}> <Form onSubmit={this.onFormSubmit}>
@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
</Form> </Form>
</div> </div>
<div className={classes["part"]}> <div className={classes["part"]}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Mon office Mon office
</Typography> </Typography>
<Form onSubmit={this.onFormSubmit}> <Form onSubmit={this.onFormSubmit}>

72
src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
View File

@ -1,5 +1,5 @@
import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices"; import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard"; import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard";
import User, { Office } from "le-coffre-resources/dist/SuperAdmin"; import User, { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -71,44 +71,44 @@ export default function OfficeInformations(props: IProps) {
(user: User) => ( (user: User) => (
<> <>
<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}> <div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}> <Typography typo={ETypo.TEXT_MD_REGULAR}>
{user.office_role ? user.office_role?.name : "Utilisateur restreint"} {user.office_role ? user.office_role?.name : "Utilisateur restreint"}
</Typography> </Typography>
</div> </div>
<div key={user.uid} className={classes["user-line-mobile"]}> <div key={user.uid} className={classes["user-line-mobile"]}>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Nom Nom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Prénom Prénom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
E-mail E-mail
</Typography> </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Téléphone Téléphone
</Typography> </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Rôle Rôle
</Typography> </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div> </div>
</div> </div>
</> </>
@ -120,30 +120,30 @@ export default function OfficeInformations(props: IProps) {
<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}> <DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography> <Typography typo={ETypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
<div className={classes["header-right"]}> <div className={classes["header-right"]}>
<div className={classes["round"]} /> <div className={classes["round"]} />
<Typography typo={ITypo.TEXT_MD_REGULAR}>Office active</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>Office active</Typography>
</div> </div>
</div> </div>
<div className={classes["office-infos"]}> <div className={classes["office-infos"]}>
<div className={classes["office-infos-row"]}> <div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
CRPCEN CRPCEN
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
</div> </div>
<div className={classes["office-infos-row"]}> <div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Dénomination Dénomination
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
</div> </div>
<div className={classes["office-infos-row"]}> <div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Addresse Addresse
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}> <Typography typo={ETypo.TEXT_LG_REGULAR}>
{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code} {officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
</Typography> </Typography>
</div> </div>
@ -151,23 +151,23 @@ export default function OfficeInformations(props: IProps) {
<div className={classes["office-users"]}> <div className={classes["office-users"]}>
<div className={classes["users"]}> <div className={classes["users"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H5}>Administrateurs</Typography> <Typography typo={ETypo.TITLE_H5}>Administrateurs</Typography>
</div> </div>
<div className={classes["users-container"]}> <div className={classes["users-container"]}>
<div className={classes["first-line"]}> <div className={classes["first-line"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Nom Nom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Prénom Prénom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
E-mail E-mail
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Téléphone Téléphone
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Rôle Rôle
</Typography> </Typography>
</div> </div>
@ -178,23 +178,23 @@ export default function OfficeInformations(props: IProps) {
</div> </div>
<div className={classes["users"]}> <div className={classes["users"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H5}>Collaborateurs</Typography> <Typography typo={ETypo.TITLE_H5}>Collaborateurs</Typography>
</div> </div>
<div className={classes["users-container"]}> <div className={classes["users-container"]}>
<div className={classes["first-line"]}> <div className={classes["first-line"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Nom Nom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Prénom Prénom
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
E-mail E-mail
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Téléphone Téléphone
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Rôle Rôle
</Typography> </Typography>
</div> </div>

6
src/front/Components/Layouts/Offices/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 BasePage from "../Base"; import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -12,9 +12,9 @@ export default class Offices extends BasePage<IProps, IState> {
<DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}> <DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-folder-selected"]}> <div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations des offices</Typography> <Typography typo={ETypo.TITLE_H1}>Informations des offices</Typography>
<div className={classes["choose-a-folder"]}> <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 office Sélectionnez un office
</Typography> </Typography>
</div> </div>

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

@ -1,5 +1,5 @@
import Button from "@Front/Components/DesignSystem/Button"; import Button from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import Link from "next/link"; import Link from "next/link";
import BasePage from "../Base"; import BasePage from "../Base";
@ -14,8 +14,8 @@ export default class PageNotFound extends BasePage {
<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader> <DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>Erreur 404</Typography> <Typography typo={ETypo.DISPLAY_LARGE}>Erreur 404</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_LG_REGULAR} className={classes["text"]}>
La page que vous recherchez semble introuvable. La page que vous recherchez semble introuvable.
</Typography> </Typography>
<Link href={Module.getInstance().get().modules.pages.Home.props.path}> <Link href={Module.getInstance().get().modules.pages.Home.props.path}>

10
src/front/Components/Layouts/Rib/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import FilePreview from "@Front/Components/DesignSystem/FilePreview"; import FilePreview from "@Front/Components/DesignSystem/FilePreview";
@ -94,7 +94,7 @@ export default function Rib() {
return ( return (
<DefaultTemplate title={"RIB"}> <DefaultTemplate title={"RIB"}>
<div className={classes["root"]}> <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"]}>
RIB de l'office RIB de l'office
</Typography> </Typography>
{isLoading && ( {isLoading && (
@ -108,7 +108,7 @@ export default function Rib() {
<> <>
<div className={classes["document-container"]}> <div className={classes["document-container"]}>
<div> <div>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun RIB n'a été déposé pour cet office Aucun RIB n'a été déposé pour cet office
</Typography> </Typography>
</div> </div>
@ -159,10 +159,10 @@ export default function Rib() {
closeBtn closeBtn
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Supprimer"}> confirmText={"Supprimer"}>
<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"]}>
Supprimer le RIB Supprimer le RIB
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Voulez-vous vraiment supprimer le RIB de votre office ? Voulez-vous vraiment supprimer le RIB de votre office ?
</Typography> </Typography>
</Confirm> </Confirm>

6
src/front/Components/Layouts/Roles/RolesCreate/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { Office, OfficeRole } from "le-coffre-resources/dist/Admin"; import { Office, OfficeRole } from "le-coffre-resources/dist/Admin";
@ -91,7 +91,7 @@ export default function RolesCreate(props: IProps) {
<DefaultRolesDashboard mobileBackText={"Liste des rôles"} hasBackArrow title="Créer un rôle"> <DefaultRolesDashboard mobileBackText={"Liste des rôles"} hasBackArrow title="Créer un rôle">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Créer un rôle</Typography> <Typography typo={ETypo.TITLE_H1}>Créer un rôle</Typography>
</div> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField <TextField
@ -115,7 +115,7 @@ export default function RolesCreate(props: IProps) {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Quitter"}> confirmText={"Quitter"}>
<div className={classes["modal-content"]}> <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. Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography> </Typography>
</div> </div>

10
src/front/Components/Layouts/Roles/RolesInformations/index.tsx
View File

@ -3,7 +3,7 @@ import Button from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; 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 DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin"; import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -121,14 +121,14 @@ export default function RolesInformations() {
<DefaultRoleDashboard mobileBackText={"Liste des rôles"}> <DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography> <Typography typo={ETypo.TITLE_H1}>Gestion des rôles</Typography>
</div> </div>
<div className={classes["subtitle"]}> <div className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5}>{roleSelected?.name}</Typography> <Typography typo={ETypo.TITLE_H5}>{roleSelected?.name}</Typography>
</div> </div>
<div className={classes["rights-container"]}> <div className={classes["rights-container"]}>
<div className={classes["rights-header"]}> <div className={classes["rights-header"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier les droits</Typography> <Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Modifier les droits</Typography>
</div> </div>
<div className={classes["select-all-container"]}> <div className={classes["select-all-container"]}>
<CheckBox <CheckBox
@ -166,7 +166,7 @@ export default function RolesInformations() {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
En enregistrant vous modifiez les droits des rôles. En enregistrant vous modifiez les droits des rôles.
</Typography> </Typography>
</div> </div>

6
src/front/Components/Layouts/Roles/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 DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import BasePage from "../Base"; import BasePage from "../Base";
@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
<DefaultRoleDashboard mobileBackText={"Liste des rôles"}> <DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-role-selected"]}> <div className={classes["no-role-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography> <Typography typo={ETypo.TITLE_H1}>Gestion des rôles</Typography>
<div className={classes["choose-a-role"]}> <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 rôle Sélectionnez un rôle
</Typography> </Typography>
</div> </div>

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

@ -1,6 +1,6 @@
import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList"; import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import JwtService from "@Front/Services/JwtService/JwtService"; import JwtService from "@Front/Services/JwtService/JwtService";
import { OfficeFolder } from "le-coffre-resources/dist/Customer"; import { OfficeFolder } from "le-coffre-resources/dist/Customer";
@ -58,7 +58,7 @@ export default function SelectFolder() {
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["select-folder-container"]}> <div className={classes["select-folder-container"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>Vos dossiers</Typography> <Typography typo={ETypo.DISPLAY_LARGE}>Vos dossiers</Typography>
</div> </div>
<div className={classes["folders-container"]}> <div className={classes["folders-container"]}>
<BlockList <BlockList

40
src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/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 { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation"; import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -72,7 +72,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["container"]}> <div className={classes["container"]}>
<div className={classes["forfeit-type"]}> <div className={classes["forfeit-type"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"} {forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"}
</Typography> </Typography>
</div> </div>
@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly} defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
disabled={props.disableInputs}> disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox> </RadioBox>
<RadioBox <RadioBox
name="paymentFrequency" name="paymentFrequency"
@ -92,18 +92,18 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly} defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
disabled={props.disableInputs}> disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox> </RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>
<div className={classes["line"]}> <div className={classes["line"]}>
<div className={classes["line-sub-container"]}> <div className={classes["line-sub-container"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"} {forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
</Typography> </Typography>
{paymentFrequency === EPaymentFrequencyFront.yearly && ( {paymentFrequency === EPaymentFrequencyFront.yearly && (
<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_SM_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat( {formatFloat(
forfeitType === EForfeitType.standard forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard] ? forfeitsPrices[EForfeitType.standard]
@ -115,13 +115,13 @@ export default function SubscribeCheckoutTicket(props: IProps) {
</div> </div>
<div className={classes["line-sub-container"]}> <div className={classes["line-sub-container"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{totalPlan}&nbsp;€ {totalPlan}&nbsp;€
</Typography> </Typography>
{paymentFrequency === EPaymentFrequencyFront.yearly && ( {paymentFrequency === EPaymentFrequencyFront.yearly && (
<Typography <Typography
typo={ITypo.TEXT_MD_REGULAR} typo={ETypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK} color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["stroked-price"]}> className={classes["stroked-price"]}>
{formatFloat( {formatFloat(
forfeitType === EForfeitType.standard forfeitType === EForfeitType.standard
@ -136,15 +136,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
{forfeitType === EForfeitType.standard && ( {forfeitType === EForfeitType.standard && (
<div className={classes["line"]}> <div className={classes["line"]}>
<div className={classes["line-sub-container"]}> <div className={classes["line-sub-container"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{numberOfCollaborators} collaborateurs {numberOfCollaborators} collaborateurs
</Typography> </Typography>
<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_SM_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "} {formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"} {paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
</Typography> </Typography>
</div> </div>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(totalCollaborator)}&nbsp;€ {formatFloat(totalCollaborator)}&nbsp;€
</Typography> </Typography>
</div> </div>
@ -155,19 +155,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classnames(classes["container-line"], classes["container-tight"])}> <div className={classnames(classes["container-line"], classes["container-tight"])}>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Total HT Total HT
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(totalCollaborator + totalPlan)} {formatFloat(totalCollaborator + totalPlan)}
&nbsp;€ &nbsp;€
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
TVA 20% TVA 20%
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 0.2)} {formatFloat((totalCollaborator + totalPlan) * 0.2)}
&nbsp;€ &nbsp;€
</Typography> </Typography>
@ -179,19 +179,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classnames(classes["container-line"], classes["container-tight"])}> <div className={classnames(classes["container-line"], classes["container-tight"])}>
{forfeitType === EForfeitType.unlimited && ( {forfeitType === EForfeitType.unlimited && (
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
TVA 20% TVA 20%
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€ {formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
</Typography> </Typography>
</div> </div>
)} )}
<div className={classes["line"]}> <div className={classes["line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Total TTC Total TTC
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 1.2)} {formatFloat((totalCollaborator + totalPlan) * 1.2)}
&nbsp;€ &nbsp;€
</Typography> </Typography>

28
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/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 classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import NavTab from "@Front/Components/Elements/NavTab"; import NavTab from "@Front/Components/Elements/NavTab";
@ -62,33 +62,33 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
]} ]}
/> />
)} )}
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Nombre de collaborateurs illimité Nombre de collaborateurs illimité
</Typography> </Typography>
<div className={classes["infos-container"]}> <div className={classes["infos-container"]}>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
main optimale de l'application main optimale de l'application
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Support technique : notre équipe support est disponible pour vous assister en cas d’incident Support technique : notre équipe support est disponible pour vous assister en cas d’incident
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
fonctionnalités, améliorations de sécurité et performances optimisées fonctionnalités, améliorations de sécurité et performances optimisées
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_GENERIC_BLACK} /> <Check color={ETypoColor.COLOR_GENERIC_BLACK} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Sans limite d'utilisateurs Sans limite d'utilisateurs
</Typography> </Typography>
</div> </div>
@ -114,22 +114,22 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()} value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}> defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox> </RadioBox>
<RadioBox <RadioBox
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()} value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}> defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox> </RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Total TTC Total TTC
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)} {formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)}
&nbsp;€ &nbsp;€
</Typography> </Typography>

24
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/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 classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import NavTab from "@Front/Components/Elements/NavTab"; import NavTab from "@Front/Components/Elements/NavTab";
@ -54,27 +54,27 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
]} ]}
/> />
)} )}
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Choisissez le nombre de collaborateurs pour votre abonnement Choisissez le nombre de collaborateurs pour votre abonnement
</Typography> </Typography>
<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} /> <NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
<div className={classes["infos-container"]}> <div className={classes["infos-container"]}>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
main optimale de l'application main optimale de l'application
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Support technique : notre équipe support est disponible pour vous assister en cas d’incident Support technique : notre équipe support est disponible pour vous assister en cas d’incident
</Typography> </Typography>
</div> </div>
<div className={classes["line"]}> <div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} /> <Check color={ETypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
fonctionnalités, améliorations de sécurité et performances optimisées fonctionnalités, améliorations de sécurité et performances optimisées
</Typography> </Typography>
@ -105,22 +105,22 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()} value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}> defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox> </RadioBox>
<RadioBox <RadioBox
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()} value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}> defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography> <Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox> </RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Total TTC Total TTC
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{formatFloat( {formatFloat(
(forfeitsPrices[EForfeitType.standard] * multiplierToUse + (forfeitsPrices[EForfeitType.standard] * multiplierToUse +
collaboratorPrice * numberOfCollaborators * multiplier) * collaboratorPrice * numberOfCollaborators * multiplier) *

8
src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/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 classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { IGetCustomerBySubscriptionIdParams } from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; import { IGetCustomerBySubscriptionIdParams } from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
const { customer } = props; const { customer } = props;
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
Informations client Informations client
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{customer.email} {customer.email}
</Typography> </Typography>
{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> {/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Adresse de facturation Adresse de facturation
</Typography> */} </Typography> */}
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{customer.name} <br /> {customer.name} <br />
{/* 23 rue taitbout, {/* 23 rue taitbout,
<br /> <br />

8
src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/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 classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
<DefaultTemplate title="Nouvelle souscription" hasBackArrow> <DefaultTemplate title="Nouvelle souscription" hasBackArrow>
{subscription && jwt && ( {subscription && jwt && (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Choisissez les collaborateurs pour votre abonnement Choisissez les collaborateurs pour votre abonnement
</Typography> </Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
{subscription.nb_seats} sièges disponibles {subscription.nb_seats} sièges disponibles
</Typography> </Typography>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
@ -109,7 +109,7 @@ export default function SubscriptionManageCollaborators() {
/> />
))} ))}
</div> </div>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}> <Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
{selectedCollaborators.length} collaborateurs sélectionnés {selectedCollaborators.length} collaborateurs sélectionnés
</Typography> </Typography>
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>

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