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

Reacto typo theme

Browse Source
This commit is contained in:
Vins 2024-07-02 14:52:36 +02:00
parent ed3e34a010
commit 5918fa38ff
105 changed files with 736 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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.P_16}>{folder.name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
</div>
<div className={classes["right-side"]}>
{folder.hasFlag && <WarningBadge />}

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

@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
<input
type="checkbox"

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

@ -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.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.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.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
)}
@ -158,7 +158,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography
typo={ITypo.P_16}
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_NEUTRAL_500}
title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)}
@ -180,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Chargement...
</Typography>
</div>
@ -191,7 +191,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
@ -206,7 +209,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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre document a été refusé pour la raison suivante :
</Typography>
<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@ -214,14 +217,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</Confirm>
</div>
{this.props.document.document_status === EDocumentStatus.REFUSED && (
<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>
@ -265,26 +268,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.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.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.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.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.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Déposé le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.REFUSED:
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_800}>
Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && (
<Button

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

@ -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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ?
</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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,7 +111,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography
typo={ITypo.P_SB_16}
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_GENERIC_BLACK}
className={classes["title"]}>
<div
@ -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.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{this.shortName(fileObj.name)}
</Typography>
</div>
@ -156,7 +156,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography
typo={ITypo.P_SB_16}
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
@ -173,7 +173,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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedDocument}
</Typography>
</div>
@ -182,7 +182,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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>

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

@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div>Déposer un RIB</div>
</Typography>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
{this.shortName(file.name)}
</Typography>
</div>
@ -161,7 +161,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
<Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>

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

@ -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.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
</div>
{this.renderIcon()}
</div>

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

@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
{this.props.href && (
<>
{!type && (
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
Erreur lors du chargement du fichier
</Typography>
)}

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

@ -70,42 +70,42 @@ export default function FolderBoxInformation(props: IProps) {
case EFolderBoxInformationType.DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Note dossier</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.NOTE:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note client</Typography>
<Typography typo={ITypo.P_18}>{note?.content ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Note client</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography>
<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Note archive</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.INFORMATIONS:
return (
<>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Intitulé du dossier</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de dossier</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Type d'acte</Typography>
<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Type d'acte</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Ouverture du dossier</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
</div>
</>
);

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

@ -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.P_16}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
</Typography>
{this.countPendingDocuments() > 0 && (

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

@ -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.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{value}
</Typography>,
);

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

@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

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

@ -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.P_18}>
<Typography typo={ITypo.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.NAV_INPUT_16}>
<Typography typo={ITypo.TEXT_MD_GREY}>
<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.P_18}>{option.label}</Typography>
<Typography typo={ITypo.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.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{this.props.placeholder} ne peut pas être vide
</Typography>
);

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

@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

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

@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea
name={this.props.name}

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

@ -34,7 +34,9 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]}>
<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
<div className={classes["content"]} onClick={toggle}>
<Typography typo={isActive || isSubmenuOpened ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
<Typography typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>
{props.text}
</Typography>
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
</div>
<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />

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

@ -37,7 +37,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
<div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
</div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
</Link>
@ -46,7 +46,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
return (
<div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
<Typography typo={ITypo.TEXT_LG_GREY}>{props.text}</Typography>
</div>
</div>
);

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

@ -29,7 +29,7 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
return (
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
</Link>
);
}

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

@ -34,7 +34,7 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
<div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
</div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
{isHovered && (

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

@ -29,7 +29,7 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
onClick={this.props.onClick}
target={this.props.target}>
<div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
<Typography typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{this.props.text}</Typography>
</div>
</Link>
);

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

@ -34,13 +34,13 @@ 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.P_SB_16}>Notifications</Typography>
<Typography typo={ITypo.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.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu
</Typography>
<Check color={ITypoColor.COLOR_SECONDARY_500} />
@ -49,7 +49,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<>
{!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Vous n'avez pas de notifications.
</Typography>
</div>

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

@ -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.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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

@ -11,14 +11,14 @@ export default function LogOut() {
const router = useRouter();
const variables = FrontendVariables.getInstance();
const disconnect = async() => {
const disconnect = async () => {
await UserStore.instance.disconnect();
router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`);
};
return (
<div className={classes["root"]} onClick={disconnect}>
<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
<Typography typo={ITypo.TEXT_LG_GREY}>Déconnexion</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
</div>
);

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

@ -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.H2}>{this.props.content}</Typography>
<Typography typo={ITypo.TITLE_H3}>{this.props.content}</Typography>
</header>
);
}

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

@ -13,7 +13,7 @@ export default class PopUpLoader extends React.Component<IProps> {
<div className={classes["root"]}>
{/* <Loader /> */}
TODO: INTEGRER LOARDER ISLOADING
<Typography typo={ITypo.P_16}>{this.props.text && this.props.text}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.text && this.props.text}</Typography>
</div>
);
}

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

@ -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.P_16}>
<Typography typo={ITypo.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} />}
@ -96,18 +96,16 @@ export default class Modal extends React.Component<IProps, IState> {
document.body.style.overflow = "auto";
document.removeEventListener("keydown", this.handleKeyDown);
}
protected close() {
if (this.props.hasContainerClosable === false) return;
if (this.state.willClose) return;
this.props.onClose();
}
private handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === "Escape" || e.key === "Esc") {
this.props.onClose();
}
}
};
}

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

@ -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.NAV_INPUT_16}>{this.props.placeholder}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>{this.props.placeholder}</Typography>
</div>
)}
<div className={classes["input-container"]}>
@ -146,7 +146,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.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{value}
</Typography>,
);

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

@ -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.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
Restez Informé(e) avec notre Newsletter
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
</Typography>
{this.state.errorMessage && (
<div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_ERROR_600}>
{this.state.errorMessage}
</Typography>
</div>
)}
{this.state.successMessage && (
<div>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
{this.state.successMessage}
</Typography>
</div>

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

@ -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.P_16}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<div className={classes["percentage"]}>{quantity}</div>
</Typography>
</div>

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

@ -19,7 +19,7 @@ export default class QuantityProgressBar extends React.Component<IProps> {
return (
<div className={classes["root"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_16}>{this.props.title}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
</div>
<ProgressBar percentage={percentage} />
</div>

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

@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
};
public override render(): JSX.Element {
return (
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<label className={classes["root"]}>
<input
type="radio"

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

@ -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.P_ERR_18}>
<Typography typo={ITypo.TEXT_LG_ERROR}>
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography>
)}

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

@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
<div className={classes["round"]} />
</div>
</div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{label}
</Typography>
</div>

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

@ -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.P_16}>{title}</Typography>;
return <Typography typo={ITypo.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.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{text}
</Typography>
</div>

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

@ -4,41 +4,42 @@
.root {
color: $color-generic-black;
vertical-align: center;
font-family: "Inter", sans-serif;
&.H1-60 {
font-family: "Poppins", sans-serif;
&.display-large {
font-style: normal;
font-weight: 500;
font-size: 56px;
line-height: 67.2px;
font-weight: 600;
font-size: 50px;
line-height: 75px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 56.7px;
line-height: 72px;
}
}
&.H1-bis-40 {
&.title-h1 {
font-style: normal;
font-weight: 500;
font-weight: 600;
font-size: 40px;
line-height: 60px;
}
&.title-h3 {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 48px;
}
&.H2-30 {
&.title-h5 {
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 36px;
}
&.H3-24 {
font-style: normal;
font-weight: 600;
font-weight: 400;
font-size: 24px;
line-height: 29px;
line-height: 36px;
color: var(--color-primary-500);
}
&.Paragraphe-semibold-18 {
&.text-lg-semibold {
font-style: normal;
font-weight: 600;
font-size: 18px;
@ -46,39 +47,42 @@
letter-spacing: 0.5px;
}
&.Paragraphe-simple-18 {
&.text-lg-regular {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
line-height: 27px;
letter-spacing: 0.5px;
}
&.Paragraphe-MAJ-18 {
&.text-lg-uppercase {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
line-height: 27px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
&.Nav-header-off-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
&.text-lg-grey {
color: $color-neutral-500;
}
&.Paragraphe-18-error {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
line-height: 27px;
letter-spacing: 0.5px;
}
&.Paragraphe-semibold-16 {
&.text-lg-error {
color: $color-error-600;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5px;
}
&.text-md-semibold {
font-style: normal;
font-weight: 600;
font-size: 16px;
@ -86,45 +90,61 @@
letter-spacing: 0.5px;
}
&.Nav-input-off-16 {
&.text-md-regular {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
line-height: 24px;
letter-spacing: 0.5px;
}
&.text-md-grey {
color: $color-neutral-500;
}
&.Paragraphe-simple-16 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.005em;
}
&.Paragraphe-16-error {
color: $color-error-800;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
line-height: 24px;
letter-spacing: 0.5px;
}
&.Caption_14 {
&.text-md-error {
color: $color-error-600;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
}
&.text-sm-regular {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
line-height: 21px;
letter-spacing: 0.5px;
}
&.Caption_14-semibold {
&.text-sm-semibold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 22px;
line-height: 21px;
letter-spacing: 0.5px;
}
&.text-sm-bold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5px;
}
&.text-xs-regular {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5px;
}
@ -141,23 +161,23 @@
}
&.color-primary-500 {
color: var(--color-primary-500);
color: $color-primary-500;
}
&.color-secondary-500 {
color: var(--color-secondary-500);
color: $color-secondary-500;
}
&.color-success-600 {
color: var(--color-success-600);
color: $color-success-600;
}
&.color-error-600 {
color: var(--color-error-600);
color: $color-error-600;
}
&.color-warning-500 {
color: var(--color-warning-500);
color: $color-warning-500;
}
&.white {

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

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

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

@ -12,24 +12,28 @@ type IProps = {
type IState = {};
export enum ITypo {
H1 = "H1-60",
H1Bis = "H1-bis-40",
H2 = "H2-30",
H3 = "H3-24",
DISPLAY_LARGE = "display-large",
P_SB_18 = "Paragraphe-semibold-18",
P_18 = "Paragraphe-simple-18",
P_MAJ_18 = "Paragraphe-MAJ-18",
NAV_HEADER_18 = "Nav-header-off-18",
P_ERR_18 = "Paragraphe-18-error",
TITLE_H1 = "title-h1",
TITLE_H3 = "title-h3",
TITLE_H5 = "title-h5",
P_SB_16 = "Paragraphe-semibold-16",
P_16 = "Paragraphe-simple-16",
NAV_INPUT_16 = "Nav-input-off-16",
P_ERR_16 = "Paragraphe-16-error",
TEXT_LG_SEMIBOLD = "text-lg-semibold",
TEXT_LG_REGULAR = "text-lg-regular",
TEXT_LG_UPPERCASE = "text-lg-regular-uppercase",
TEXT_LG_GREY = "text-lg-grey",
TEXT_LG_ERROR = "text-lg-error",
CAPTION_14 = "Caption_14",
CAPTION_14_SB = "Caption_14-semibold",
TEXT_MD_SEMIBOLD = "text-md-semibold",
TEXT_MD_REGULAR = "text-md-regular",
TEXT_MD_GREY = "text-md-grey",
TEXT_MD_ERROR = "text-md-error",
TEXT_SM_REGULAR = "text-sm-regular",
TEXT_SM_SEMIBOLD = "text-sm-semibold",
TEXT_SM_BOLD = "text-sm-bold",
TEXT_XS_REGULAR = "text-xs-regular",
}
export enum ITypoColor {

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

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

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

@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
return (
<div className={classNameToAdd}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
</div>
<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
<div className={classes["content"]}>
{this.props.documents &&
this.props.documents.map((document) => {

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

@ -38,26 +38,26 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Nom</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>Prénom</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
<Typography typo={ITypo.P_18}>
<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de téléphone</Typography>
<Typography typo={ITypo.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.NAV_INPUT_16}>E-mail</Typography>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
<Typography typo={ITypo.TEXT_MD_GREY}>E-mail</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
</div>
</div>
{!this.props.isArchived && (

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

@ -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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<div>{VersionFile.version}</div>
</Typography>
</div>

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

@ -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.CAPTION_14}>
<Typography className={classes["text"]} typo={ITypo.TEXT_SM_REGULAR}>
{children}
</Typography>
</div>

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

@ -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.P_SB_18 : ITypo.P_18}>
<Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
{item.label}
</Typography>
</Link>

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

@ -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.H1} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
</Typography>
</div>
<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
Dossier {folder?.folder_number} - {folder?.name}
</Typography>
<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
{folder?.office?.name}
</Typography>
<Typography typo={ITypo.H2} className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer
</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{note?.content}
</Typography>
</div>
</div>
<div className={classes["contact"]}>
<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<p>
{contact?.first_name} {contact?.last_name}
</p>
@ -213,8 +213,8 @@ export default function ClientDashboard(props: IProps) {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))}
</div>
<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography>
<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={onOpenModalAddDocument}>

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

@ -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.H2}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography>
<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
@ -58,11 +58,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
cancelText={"Annuler"}
confirmText={"Déposer le document"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ?
</Typography>
<TextField placeholder="Nom du document" />
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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>
@ -85,15 +85,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.H1} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
</Typography>
<Typography typo={ITypo.H2} className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer
</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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

@ -149,11 +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.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
<Typography typo={ITypo.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.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Abonnement actif
</Typography>
</div>
@ -161,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Email
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
</div>
</div>
<div className={classes["role-container"]}>
<div className={classes["first-line"]}>
<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
<div className={classes["gestion-role"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
<Button
@ -227,7 +229,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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>
@ -242,7 +244,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography>

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

@ -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.H1Bis}>Informations du collaborateur</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du collaborateur</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un collaborateur
</Typography>
</div>

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

@ -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.H1Bis}>Créer un type d'acte</Typography>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

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

@ -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.H1Bis}>Modifier les informations de l'acte</Typography>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

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

@ -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.H1Bis}>Paramétrage des listes de pièces</Typography>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
<Button variant={EButtonVariant.LINE}>
Modifier la liste des documents
@ -130,15 +130,15 @@ export default function DeedTypesInformations(props: IProps) {
</Link>
</div>
<div className={classes["subtitle"]}>
<Typography typo={ITypo.H3}>{deedTypeSelected?.name}</Typography>
<Typography typo={ITypo.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.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_GREY} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
Description
</Typography>
<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
</div>
</div>
<div className={classes["pencil"]}>
@ -154,7 +154,7 @@ export default function DeedTypesInformations(props: IProps) {
<div className={classes["documents-container"]}>
<Form onSubmit={onSubmitHandler}>
<div className={classes["container-title"]}>
<Typography typo={ITypo.P_SB_18}>Sélectionner les documents associés à ce type d'acte</Typography>
<Typography typo={ITypo.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"]}>
@ -184,7 +184,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Valider"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Êtes-vous sûr de vouloir supprimer ce type d'acte ?
</Typography>
</div>
@ -198,7 +198,7 @@ export default function DeedTypesInformations(props: IProps) {
confirmText={"Enregistrer"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Les documents seront associés à ce type d'acte.
</Typography>
</div>

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

@ -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.H1Bis}>Paramétrage des listes de pièces</Typography>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un type d'acte
</Typography>
</div>

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

@ -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.H1Bis}>Créer un nouveau document</Typography>
<Typography typo={ITypo.TITLE_H1}>Créer un nouveau document</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField

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

@ -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.H1Bis}>Paramétrage des documents</Typography>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField

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

@ -36,7 +36,7 @@ export default function DocumentTypesInformations() {
<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
<Button variant={EButtonVariant.LINE}>
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.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom du document
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les collaborateurs de l'office
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les clients de l'office
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
</div>
</div>
<div className={classes["right"]}>

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

@ -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.H1Bis}>Paramétrage des documents</Typography>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un document
</Typography>
</div>

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

@ -65,7 +65,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<Typography typo={ITypo.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.P_ERR_18}>Client existant</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>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.P_ERR_18}>Nouveau client</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Nouveau client</Typography>
</RadioBox>
</div>

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

@ -40,7 +40,7 @@ export default function ParameterDocuments(props: IProps) {
value: document.uid,
};
});
formattedOptions.sort((a, b) => a.label > b.label? 1 : -1);
formattedOptions.sort((a, b) => (a.label > b.label ? 1 : -1));
setFormattedOptions(formattedOptions);
}, [props.folder.deed?.document_types]);
@ -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.P_ERR_18}>Document existant</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Document existant</Typography>
</RadioBox>
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Créer un document</Typography>
</RadioBox>
</div>
{addOrEditDocument === "add" && (

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

@ -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.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Demander des documents
</Typography>
<Form onSubmit={this.onFormSubmit}>

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

@ -50,7 +50,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier la note du client</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier la note du client</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

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

@ -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.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Créer un dossier
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.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.H3} color={ITypoColor.COLOR_PRIMARY_500}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500}>
Accès au dossier
</Typography>
<div className={classes["radio-container"]}>

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

@ -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.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun client n'est associé au dossier.
</Typography>
</div>

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

@ -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.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@ -192,7 +192,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
</div>
<TextAreaField
name="archived_description"
@ -209,7 +209,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.P_16}>
<Typography typo={ITypo.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>
@ -228,16 +228,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Confirmer"}>
<div className={classes["modal-title"]}>
<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
</div>
</Confirm>
<Newsletter isOpen={false} />
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>
@ -268,7 +268,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
showButtons={!this.state.hasValidateAnchoring}>
<div className={classes["validate-document-container"]}>
{!this.state.hasValidateAnchoring && (
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.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
de rédaction d'actes.
@ -276,7 +279,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
)}
{this.state.hasValidateAnchoring && (
<div className={classes["document-validating-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.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.
</Typography>

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

@ -79,7 +79,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du client</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>
<TextField

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

@ -40,7 +40,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.state.backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier la note du client</Typography>
<Typography typo={ITypo.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

@ -70,7 +70,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier les collaborateurs</Typography>
{!this.state.loading && (
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
@ -207,7 +207,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
);
} catch (error) {
if(!Array.isArray(error)) return;
if (!Array.isArray(error)) return;
this.setState({ validationError: error });
}
}

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

@ -41,7 +41,7 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier la note du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier la note du dossier</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

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

@ -55,7 +55,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>

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

@ -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.P_16} className={classes["result-text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["result-text"]}>
Résultat de l'analyse :
</Typography>
<div className={classes["result-container"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Document conforme à :&nbsp;
</Typography>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.P_18} color={this.getColor()}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />

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

@ -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.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
{this.state.document.folder?.name}
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
{this.state.document.document_type?.name}
</Typography>
<div className={classes["document-container"]}>
@ -139,7 +139,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Confirmer"}>
<div className={classes["validate-document-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Êtes-vous sûr de vouloir valider ce document ?
</Typography>
</div>
@ -153,7 +156,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Refuser"}>
<div className={classes["refuse-document-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.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.
</Typography>
@ -164,7 +170,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)}
{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
Document non trouvé
</Typography>
</div>

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

@ -27,9 +27,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.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>

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

@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
</>
) : (
<div className={classes["no-client"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun client dans ce dossier
</Typography>
</div>

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

@ -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.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@ -137,9 +137,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

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

@ -44,7 +44,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
<Form className={classes["form"]}>
<div className={classes["content"]}>

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

@ -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.H1Bis}>Informations du dossier</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

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

@ -8,7 +8,7 @@ export default class Home extends BasePage {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>HomePage</Typography>
<Typography typo={ITypo.DISPLAY_LARGE}>HomePage</Typography>
</div>
</DefaultTemplate>
);

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

@ -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.H1}>
<Typography typo={ITypo.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.P_18}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">
@ -77,7 +77,7 @@ export default function Login() {
header={"Erreur"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous ne disposez pas d'un abonnement, veuillez contacter l'administrateur de votre office.
</Typography>
</div>
@ -91,7 +91,7 @@ export default function Login() {
header={"Session expirée"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Veuillez vous reconnecter.
</Typography>
</div>
@ -105,7 +105,7 @@ export default function Login() {
confirmText={"Accéder à mon compte ID.not"}
cancelText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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>
@ -120,12 +120,12 @@ export default function Login() {
confirmText={"Contacter l'administrateur"}
cancelText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.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
@ -138,7 +138,7 @@ export default function Login() {
</li>
<div style={{ marginBottom: "10px" }}></div>
<li>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.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"

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

@ -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.H1}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connexion espace professionnel</div>
</Typography>
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_18}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">

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

@ -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.H1}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Connexion espace client</div>
</Typography>
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_18}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">

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

@ -15,7 +15,7 @@ export default function PasswordForgotten(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.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.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
</Typography>
<TextField

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

@ -31,16 +31,18 @@ export default function StepEmail(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.DISPLAY_LARGE}>
<div className={classes["title"]}>Identifiez-vous</div>
</Typography>
{/* <Typography typo={ITypo.P_16}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
{/* <Typography typo={ITypo.TEXT_MD_REGULAR}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
<Image alt="france-connect" src={franceConnectLogo} onClick={redirectCustomerOnConnection} className={classes["logo"]} />
<div className={classes["what_is_france_connect"]}>Qu'est ce que FranceConnect ?</div>
<Typography className={classes["or"]} typo={ITypo.P_16}>
<Typography className={classes["or"]} typo={ITypo.TEXT_MD_REGULAR}>
Ou
</Typography> */}
<Typography typo={ITypo.P_16}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier. </Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.{" "}
</Typography>
<Form className={classes["form"]} onSubmit={onSubmit}>
<TextField
placeholder="E-mail"
@ -51,7 +53,7 @@ export default function StepEmail(props: IProps) {
Suivant
</Button>
</Form>
{/* <Typography typo={ITypo.P_18}>
{/* <Typography typo={ITypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography>
<Link href="mailto:support@lecoffre.io">

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

@ -15,7 +15,7 @@ export default function StepNewPassword(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.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.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.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/StepPassword/index.tsx
View File

@ -31,7 +31,7 @@ export default function StepPassword(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.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.P_16} className={classes["forgot-password"]}>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.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>

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

@ -37,7 +37,7 @@ export default function StepTotp(props: IProps) {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.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.P_16}>Vous n'avez rien reçu ?</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
<Button
variant={EButtonVariant.LINE}
disabled={disableNewCodeButton}
@ -63,9 +63,9 @@ export default function StepTotp(props: IProps) {
Envoyer un nouveau code
</Button>
{secondsBeforeNewCode !== 0 && (
<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} className={classes["new-code-timer"]}>
Redemandez un code dans
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
</Typography>
</Typography>

2
src/front/Components/Layouts/LoginCustomer/index.tsx
View File

@ -242,7 +242,7 @@ export default function Login() {
header={"Erreur"}
confirmText={"OK"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Une erreur est survenue lors de la connexion. Veuillez réessayer.
</Typography>
</div>

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

@ -11,12 +11,12 @@ export default function LoginHome() {
return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}>
<Typography typo={ITypo.H1}>
<Typography typo={ITypo.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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.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.P_18}>
<Typography typo={ITypo.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/MyAccount/index.tsx
View File

@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
return (
<DefaultTemplate title={"Mon compte"}>
<div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Mon compte
</Typography>
<div className={classes["parts-container"]}>
<div className={classes["part"]}>
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.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.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
Mon office
</Typography>
<Form onSubmit={this.onFormSubmit}>

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

@ -71,42 +71,44 @@ export default function OfficeInformations(props: IProps) {
(user: User) => (
<>
<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : "Utilisateur restreint"}</Typography>
<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}>
{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.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Nom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
E-mail
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Téléphone
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Rôle
</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div>
</div>
</>
@ -118,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.H1Bis}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
<Typography typo={ITypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
<div className={classes["header-right"]}>
<div className={classes["round"]} />
<Typography typo={ITypo.P_16}>Office active</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Office active</Typography>
</div>
</div>
<div className={classes["office-infos"]}>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
CRPCEN
</Typography>
<Typography typo={ITypo.P_18}>{officeSelected?.crpcen}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
</div>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Dénomination
</Typography>
<Typography typo={ITypo.P_18}>{officeSelected?.name}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
</div>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
Addresse
</Typography>
<Typography typo={ITypo.P_18}>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
</Typography>
</div>
@ -149,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.H3}>Administrateurs</Typography>
<Typography typo={ITypo.TITLE_H5}>Administrateurs</Typography>
</div>
<div className={classes["users-container"]}>
<div className={classes["first-line"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Nom
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
E-mail
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Téléphone
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Rôle
</Typography>
</div>
@ -176,23 +178,23 @@ export default function OfficeInformations(props: IProps) {
</div>
<div className={classes["users"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.H3}>Collaborateurs</Typography>
<Typography typo={ITypo.TITLE_H5}>Collaborateurs</Typography>
</div>
<div className={classes["users-container"]}>
<div className={classes["first-line"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Nom
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
E-mail
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Téléphone
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Rôle
</Typography>
</div>

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

@ -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.H1Bis}>Informations des offices</Typography>
<Typography typo={ITypo.TITLE_H1}>Informations des offices</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un office
</Typography>
</div>

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

@ -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.H1}>Erreur 404</Typography>
<Typography typo={ITypo.P_18} className={classes["text"]}>
<Typography typo={ITypo.DISPLAY_LARGE}>Erreur 404</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} className={classes["text"]}>
La page que vous recherchez semble introuvable.
</Typography>
<Link href={Module.getInstance().get().modules.pages.Home.props.path}>

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

@ -94,7 +94,7 @@ export default function Rib() {
return (
<DefaultTemplate title={"RIB"}>
<div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.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.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.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.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Supprimer le RIB
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Voulez-vous vraiment supprimer le RIB de votre office ?
</Typography>
</Confirm>

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

@ -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.H1Bis}>Créer un rôle</Typography>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography>
</div>

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

@ -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.H1Bis}>Gestion des rôles</Typography>
<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography>
</div>
<div className={classes["subtitle"]}>
<Typography typo={ITypo.H3}>{roleSelected?.name}</Typography>
<Typography typo={ITypo.TITLE_H5}>{roleSelected?.name}</Typography>
</div>
<div className={classes["rights-container"]}>
<div className={classes["rights-header"]}>
<Typography typo={ITypo.P_SB_18}>Modifier les droits</Typography>
<Typography typo={ITypo.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.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
En enregistrant vous modifiez les droits des rôles.
</Typography>
</div>

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

@ -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.H1Bis}>Gestion des rôles</Typography>
<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un rôle
</Typography>
</div>

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

@ -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.H1}>Vos dossiers</Typography>
<Typography typo={ITypo.DISPLAY_LARGE}>Vos dossiers</Typography>
</div>
<div className={classes["folders-container"]}>
<BlockList

39
src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
View File

@ -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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.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.P_ERR_18}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>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.P_ERR_18}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
</Typography>
{paymentFrequency === EPaymentFrequencyFront.yearly && (
<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(
forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard]
@ -115,11 +115,14 @@ export default function SubscribeCheckoutTicket(props: IProps) {
</div>
<div className={classes["line-sub-container"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{totalPlan}&nbsp;€
</Typography>
{paymentFrequency === EPaymentFrequencyFront.yearly && (
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["stroked-price"]}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_GENERIC_BLACK}
className={classes["stroked-price"]}>
{formatFloat(
forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard] * multiplier
@ -133,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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{numberOfCollaborators} collaborateurs
</Typography>
<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
</Typography>
</div>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(totalCollaborator)}&nbsp;€
</Typography>
</div>
@ -152,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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Total HT
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(totalCollaborator + totalPlan)}
&nbsp;€
</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
TVA 20%
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 0.2)}
&nbsp;€
</Typography>
@ -176,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.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
TVA 20%
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
</Typography>
</div>
)}
<div className={classes["line"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Total TTC
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 1.2)}
&nbsp;€
</Typography>

18
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
View File

@ -62,33 +62,33 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
]}
/>
)}
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_ERR_18}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />
<div className={classes["container-line"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Total TTC
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)}
&nbsp;€
</Typography>

16
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
View File

@ -54,27 +54,27 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
]}
/>
)}
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.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.P_ERR_18}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />
<div className={classes["container-line"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Total TTC
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
{formatFloat(
(forfeitsPrices[EForfeitType.standard] * multiplierToUse +
collaboratorPrice * numberOfCollaborators * multiplier) *

8
src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
View File

@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
const { customer } = props;
return (
<div className={classes["root"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Informations client
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{customer.email}
</Typography>
{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Adresse de facturation
</Typography> */}
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{customer.name} <br />
{/* 23 rue taitbout,
<br />

6
src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
View File

@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
{subscription && jwt && (
<div className={classes["root"]}>
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
Choisissez les collaborateurs pour votre abonnement
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.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.CAPTION_14} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{selectedCollaborators.length} collaborateurs sélectionnés
</Typography>
<div className={classes["buttons-container"]}>

2
src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
View File

@ -45,7 +45,7 @@ export default function SubscriptionError() {
<div className={classes["root"]}>
<div className={classes["left"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
Paiement échoué
</Typography>
</div>

40
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
View File

@ -95,12 +95,12 @@ export default function SubscriptionFacturation() {
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["top-container-title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
Abonnement
</Typography>
</div>
<div className={classes["sub-title"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Nos forfaits sont adaptés à la taille de votre office
</Typography>
</div>
@ -111,23 +111,23 @@ export default function SubscriptionFacturation() {
data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Forfait standard
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
Plan par utilisateur
</Typography>
</div>
{subscription.type === "STANDARD" && !cancelAt && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Plan actif
</Typography>
</div>
)}
{subscription.type === "STANDARD" && cancelAt && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Plan actif jusqu'au {cancelAt.toLocaleDateString()}
</Typography>
</div>
@ -135,14 +135,14 @@ export default function SubscriptionFacturation() {
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
{forfeitsPrices[EForfeitType.standard]}€
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
+ {collaboratorPrice}€ / collaborateur / mois
</Typography>
</div>
@ -182,23 +182,23 @@ export default function SubscriptionFacturation() {
data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
Forfait illimité
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
Plan par office
</Typography>
</div>
{subscription.type === "UNLIMITED" && !cancelAt && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Plan actif
</Typography>
</div>
)}
{subscription.type === "UNLIMITED" && cancelAt && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Plan actif jusqu'au {cancelAt.toLocaleDateString()}
</Typography>
</div>
@ -206,14 +206,14 @@ export default function SubscriptionFacturation() {
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
{forfeitsPrices[EForfeitType.unlimited]}€
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Sans limite de collaborateurs
</Typography>
</div>
@ -237,12 +237,12 @@ export default function SubscriptionFacturation() {
<div className={classes["actions-container"]}>
<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
{!cancelAt && (
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
Arrêter l'abonnement
</Typography>
)}
{cancelAt && (
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
Renouveler l'abonnement
</Typography>
)}
@ -260,7 +260,7 @@ export default function SubscriptionFacturation() {
confirmText={"Confirmer"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Avant de confirmer, veuillez prendre note des conséquences <br />
suivantes :
<br />
@ -304,7 +304,7 @@ export default function SubscriptionFacturation() {
confirmText={"Continuer"}
cancelText={"Annuler"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
En cas de suppression de sièges, les derniers comptes ajoutés seront concernés. Vous pouvez réattribuer les sièges
que vous avez dans votre page sur la page "Gérer mes attributions”.
</Typography>

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