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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -6,6 +6,7 @@ import BasePage from "../Base";
import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Tag, { ETagVariant } from "@Front/Components/DesignSystem/Tag";
type IProps = {};
type IState = {
@ -28,9 +29,9 @@ export default class Folder extends BasePage<IProps, IState> {
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
<div className={classes["buttons"]}>
@ -96,6 +97,12 @@ export default class Folder extends BasePage<IProps, IState> {
INFO
</Button>
</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>
<Newletter isOpen />
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -15,7 +15,7 @@ export default function PasswordForgotten(props: IProps) {
return (
<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>
</Typography>
<Form className={classes["form"]} onSubmit={onSubmit}>
@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
validationError={validationErrors.find((error) => error.property === "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.
</Typography>
<TextField

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

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
//import Image from "next/image";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -31,7 +31,7 @@ export default function StepEmail(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Identifiez-vous</div>
</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}>
Ou
</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.{" "}
</Typography>
<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 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 TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -15,7 +15,7 @@ export default function StepNewPassword(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Configurez votre mot de passe</div>
</Typography>
<Form className={classes["form"]} onSubmit={onSubmit}>
@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
validationError={validationErrors.find((error) => error.property === "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.
</Typography>
<TextField

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

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

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

@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -37,7 +37,7 @@ export default function StepTotp(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<Typography typo={ETypo.DISPLAY_LARGE}>
<div className={classes["title"]}>
Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber.replace(/(.{2})/g, "$1 ")}
</div>
@ -53,7 +53,7 @@ export default function StepTotp(props: IProps) {
</Button>
</Form>
<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
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
@ -64,9 +64,9 @@ export default function StepTotp(props: IProps) {
Envoyer un nouveau code
</Button>
{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
<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}
</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 { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
@ -242,7 +242,7 @@ export default function Login() {
header={"Erreur"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Une erreur est survenue lors de la connexion. Veuillez réessayer.
</Typography>
</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 classes from "./classes.module.scss";
@ -11,12 +11,12 @@ export default function LoginHome() {
return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<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>
</Typography>
<div className={classes["content"]}>
<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
</Typography>
<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@ -25,7 +25,7 @@ export default function LoginHome() {
</div>
<div className={classes["separator"]} />
<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
</Typography>
<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
@ -34,7 +34,7 @@ export default function LoginHome() {
</div>
</div>
<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>
</Typography>
<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 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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";
@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
return (
<DefaultTemplate title={"Mon compte"}>
<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
</Typography>
<div className={classes["parts-container"]}>
<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
</Typography>
<Form onSubmit={this.onFormSubmit}>
@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
</Form>
</div>
<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
</Typography>
<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 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 User, { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
@ -71,44 +71,44 @@ export default function OfficeInformations(props: IProps) {
(user: User) => (
<>
<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
{user.office_role ? user.office_role?.name : "Utilisateur restreint"}
</Typography>
</div>
<div key={user.uid} className={classes["user-line-mobile"]}>
<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
</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 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
</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 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
</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
</div>
<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
</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 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
</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>
</>
@ -120,30 +120,30 @@ export default function OfficeInformations(props: IProps) {
<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
<div className={classes["root"]}>
<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["round"]} />
<Typography typo={ITypo.TEXT_MD_REGULAR}>Office active</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Office active</Typography>
</div>
</div>
<div className={classes["office-infos"]}>
<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
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
</div>
<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
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
</div>
<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
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
</Typography>
</div>
@ -151,23 +151,23 @@ export default function OfficeInformations(props: IProps) {
<div className={classes["office-users"]}>
<div className={classes["users"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H5}>Administrateurs</Typography>
<Typography typo={ETypo.TITLE_H5}>Administrateurs</Typography>
</div>
<div className={classes["users-container"]}>
<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
</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
</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
</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
</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
</Typography>
</div>
@ -178,23 +178,23 @@ export default function OfficeInformations(props: IProps) {
</div>
<div className={classes["users"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.TITLE_H5}>Collaborateurs</Typography>
<Typography typo={ETypo.TITLE_H5}>Collaborateurs</Typography>
</div>
<div className={classes["users-container"]}>
<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
</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
</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
</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
</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
</Typography>
</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 classes from "./classes.module.scss";
@ -12,9 +12,9 @@ export default class Offices extends BasePage<IProps, IState> {
<DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}>
<div className={classes["root"]}>
<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"]}>
<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
</Typography>
</div>

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

@ -1,5 +1,5 @@
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 Link from "next/link";
import BasePage from "../Base";
@ -14,8 +14,8 @@ export default class PageNotFound extends BasePage {
<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
<div className={classes["root"]}>
<div className={classes["content"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>Erreur 404</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.DISPLAY_LARGE}>Erreur 404</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} className={classes["text"]}>
La page que vous recherchez semble introuvable.
</Typography>
<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 Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
@ -94,7 +94,7 @@ export default function Rib() {
return (
<DefaultTemplate title={"RIB"}>
<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
</Typography>
{isLoading && (
@ -108,7 +108,7 @@ export default function Rib() {
<>
<div className={classes["document-container"]}>
<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
</Typography>
</div>
@ -159,10 +159,10 @@ export default function Rib() {
closeBtn
cancelText={"Annuler"}
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
</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 ?
</Typography>
</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 TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import Module from "@Front/Config/Module";
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">
<div className={classes["root"]}>
<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>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField
@ -115,7 +115,7 @@ export default function RolesCreate(props: IProps) {
cancelText={"Annuler"}
confirmText={"Quitter"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

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 Form from "@Front/Components/DesignSystem/Form";
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 { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
@ -121,14 +121,14 @@ export default function RolesInformations() {
<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
<div className={classes["root"]}>
<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 className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5}>{roleSelected?.name}</Typography>
<Typography typo={ETypo.TITLE_H5}>{roleSelected?.name}</Typography>
</div>
<div className={classes["rights-container"]}>
<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 className={classes["select-all-container"]}>
<CheckBox
@ -166,7 +166,7 @@ export default function RolesInformations() {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
En enregistrant vous modifiez les droits des rôles.
</Typography>
</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 BasePage from "../Base";
@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
<div className={classes["root"]}>
<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"]}>
<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
</Typography>
</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 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 JwtService from "@Front/Services/JwtService/JwtService";
import { OfficeFolder } from "le-coffre-resources/dist/Customer";
@ -58,7 +58,7 @@ export default function SelectFolder() {
<div className={classes["root"]}>
<div className={classes["select-folder-container"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>Vos dossiers</Typography>
<Typography typo={ETypo.DISPLAY_LARGE}>Vos dossiers</Typography>
</div>
<div className={classes["folders-container"]}>
<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 classes from "./classes.module.scss";
import { useEffect, useState } from "react";
@ -72,7 +72,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classes["root"]}>
<div className={classes["container"]}>
<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é"}
</Typography>
</div>
@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequency"
@ -92,18 +92,18 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />
<div className={classes["container-line"]}>
<div className={classes["line"]}>
<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é"}
</Typography>
{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(
forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard]
@ -115,13 +115,13 @@ export default function SubscribeCheckoutTicket(props: IProps) {
</div>
<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;€
</Typography>
{paymentFrequency === EPaymentFrequencyFront.yearly && (
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["stroked-price"]}>
{formatFloat(
forfeitType === EForfeitType.standard
@ -136,15 +136,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
{forfeitType === EForfeitType.standard && (
<div className={classes["line"]}>
<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
</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}{" "}
{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
</Typography>
</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;€
</Typography>
</div>
@ -155,19 +155,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classes["separator"]} />
<div className={classnames(classes["container-line"], classes["container-tight"])}>
<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
</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)}
&nbsp;€
</Typography>
</div>
<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%
</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;€
</Typography>
@ -179,19 +179,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<div className={classnames(classes["container-line"], classes["container-tight"])}>
{forfeitType === EForfeitType.unlimited && (
<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%
</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;€
</Typography>
</div>
)}
<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
</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)}
&nbsp;€
</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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
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é
</Typography>
<div className={classes["infos-container"]}>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
main optimale de l'application
</Typography>
</div>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
</Typography>
</div>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
fonctionnalités, améliorations de sécurité et performances optimisées
</Typography>
</div>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_GENERIC_BLACK} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Check color={ETypoColor.COLOR_GENERIC_BLACK} />
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
Sans limite d'utilisateurs
</Typography>
</div>
@ -114,22 +114,22 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />
<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
</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)}
&nbsp;€
</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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
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
</Typography>
<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
<div className={classes["infos-container"]}>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
main optimale de l'application
</Typography>
</div>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
</Typography>
</div>
<div className={classes["line"]}>
<Check color={ITypoColor.COLOR_NEUTRAL_500} />
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Check color={ETypoColor.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
fonctionnalités, améliorations de sécurité et performances optimisées
</Typography>
@ -105,22 +105,22 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />
<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
</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.standard] * multiplierToUse +
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 { IGetCustomerBySubscriptionIdParams } from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
const { customer } = props;
return (
<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
</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}
</Typography>
{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Adresse de facturation
</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 />
{/* 23 rue taitbout,
<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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Form from "@Front/Components/DesignSystem/Form";
@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
{subscription && jwt && (
<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
</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
</Typography>
<Form onSubmit={handleSubmit}>
@ -109,7 +109,7 @@ export default function SubscriptionManageCollaborators() {
/>
))}
</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
</Typography>
<div className={classes["buttons-container"]}>

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