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

Merge branch 'staging' into preprod

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-24 17:53:55 +02:00
commit 6c43cdb9b6
41 changed files with 635 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@ export default function Alert(props: IProps) {
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
{title}
</Typography>
<Typography typo={ETypo.TEXT_MD_light} color={ETypoColor.COLOR_NEUTRAL_700}>
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.COLOR_NEUTRAL_700}>
{description}
</Typography>
</div>

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

@ -1,48 +0,0 @@
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import Typography, { ETypo } from "../Typography";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Image from "next/image";
import WarningBadge from "../WarningBadge";
export type IBlock = {
name: string;
id: string;
selected: boolean;
rightIcon?: JSX.Element;
hasFlag?: boolean;
};
type IProps = {
blocks: IBlock[];
onSelectedBlock: (block: IBlock) => void;
};
export default function BlockList({ blocks, onSelectedBlock }: IProps) {
const selectBlock = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === e.currentTarget.id)!);
},
[blocks, onSelectedBlock],
);
return (
<div>
{blocks.map((folder) => {
return (
<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={ETypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
</div>
<div className={classes["right-side"]}>
{folder.hasFlag && <WarningBadge />}
{folder.rightIcon}
<Image alt="chevron" src={ChevronIcon} />
</div>
</div>
</div>
);
})}
</div>
);
}

41
src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
View File

@ -1,16 +1,12 @@
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import React from "react";
import BlockList, { IBlock } from "../BlockList";
import Button from "../Button";
import SearchBar from "../SearchBar";
import classes from "./classes.module.scss";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
import { IBlock } from "../SearchBlockList/BlockList/Block";
import SearchBlockList from "../SearchBlockList";
type IProps = {
folders: OfficeFolder[];
@ -44,33 +40,9 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
}
public override render(): JSX.Element {
const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
</div>
</div>
{!this.props.isArchived && (
<div>
<Rules
mode={RulesMode.NECESSARY}
rules={[
{
action: AppRuleActions.create,
name: AppRuleNames.officeFolders,
},
]}>
<Link href={navigatePath}>
<Button fullwidth={true}>Créer un dossier</Button>
</Link>
</Rules>
</div>
)}
<SearchBlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
</div>
);
}
@ -106,9 +78,10 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
return [...pendingFolders, ...otherFolders].map((folder) => {
return {
id: folder.uid!,
name: folder.folder_number! + " - " + folder.name!,
selected: this.props.selectedFolder === folder.uid,
hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
primaryText: folder.name,
isActive: this.props.selectedFolder === folder.uid,
secondaryText: folder.folder_number,
showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
};
});
}

207
src/front/Components/DesignSystem/FolderListContainer/index.tsx
View File

@ -1,16 +1,12 @@
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import React from "react";
import { useRouter } from "next/router";
import React, { useCallback, useEffect } from "react";
import BlockList, { IBlock } from "../BlockList";
import Button from "../Button";
import SearchBar from "../SearchBar";
import classes from "./classes.module.scss";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
import { IBlock } from "../SearchBlockList/BlockList/Block";
import SearchBlockList from "../SearchBlockList";
type IProps = {
folders: OfficeFolder[];
@ -19,132 +15,77 @@ type IProps = {
onCloseLeftSide?: () => void;
};
type IPropsClass = IProps & {
router: NextRouter;
selectedFolder: string;
};
type IState = {
filteredFolders: OfficeFolder[];
blocks: IBlock[];
};
class FolderListContainerClass extends React.Component<IPropsClass, IState> {
private redirectPath: string = this.props.isArchived
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
public constructor(props: IPropsClass) {
super(props);
this.state = {
filteredFolders: this.props.folders,
blocks: this.getBlocks(this.props.folders),
};
this.filterFolders = this.filterFolders.bind(this);
this.onSelectedFolder = this.onSelectedFolder.bind(this);
}
public override render(): JSX.Element {
const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
</div>
</div>
{!this.props.isArchived && (
<div>
<Rules
mode={RulesMode.NECESSARY}
rules={[
{
action: AppRuleActions.create,
name: AppRuleNames.officeFolders,
},
]}>
<Link href={navigatePath}>
<Button fullwidth={true}>Créer un dossier</Button>
</Link>
</Rules>
</div>
)}
</div>
);
}
public override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, snapshot?: any): void {
if (prevProps.selectedFolder !== this.props.selectedFolder) {
this.setState({ filteredFolders: this.props.folders, blocks: this.getBlocks(this.props.folders) });
}
}
private getBlocks(folders: OfficeFolder[]): IBlock[] {
const pendingFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length >= 1;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
const otherFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length === 0;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
return [...pendingFolders, ...otherFolders].map((folder) => {
return {
id: folder.uid!,
name: folder.folder_number! + " - " + folder.name!,
selected: this.props.selectedFolder === folder.uid,
hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
};
});
}
private onSelectedFolder(block: IBlock) {
const folder = this.props.folders.find((folder) => folder.uid === block.id);
if (!folder) return;
this.props.onSelectedFolder && this.props.onSelectedFolder(folder);
const path = this.redirectPath.replace("[folderUid]", folder.uid ?? "");
this.props.router.push(path);
}
private filterFolders(value: string): void {
const filteredFolders: OfficeFolder[] = this.props.folders.filter((folder) => {
const name = folder.name.toLowerCase();
const number = folder.folder_number.toLowerCase();
value = value.toLowerCase();
if (folder.customers) {
const customerNames = folder.customers
.map((customer) => {
return `${customer.contact?.first_name.toLowerCase()} ${customer.contact?.last_name.toLowerCase()}`;
})
.join(", ");
return name.includes(value) || number.includes(value) || customerNames.includes(value);
}
return name.includes(value) || number.includes(value);
});
this.setState({ filteredFolders, blocks: this.getBlocks(filteredFolders) });
}
}
export default function FolderListContainer(props: IProps) {
const router = useRouter();
const { folderUid } = router.query;
return <FolderListContainerClass {...props} router={router} selectedFolder={folderUid as string} />;
const { folders, isArchived } = props;
const redirectPath: string = isArchived
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
const getBlocks = useCallback(
(folders: OfficeFolder[]): IBlock[] => {
const pendingFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length >= 1;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
const otherFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length === 0;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
return [...pendingFolders, ...otherFolders].map((folder) => {
return {
id: folder.uid!,
primaryText: folder.name,
secondaryText: folder.folder_number,
isActive: folderUid === folder.uid,
showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
};
});
},
[folderUid],
);
const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
const onSelectedFolder = (block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
const folder = folders.find((folder) => folder.uid === block.id);
if (!folder) return;
props.onSelectedFolder && props.onSelectedFolder(folder);
const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
router.push(path);
};
useEffect(() => {
setBlocks(getBlocks(folders));
}, [folders, getBlocks]);
return (
<div className={classes["root"]}>
<SearchBlockList
blocks={blocks}
onSelectedBlock={onSelectedFolder}
bottomButton={{
link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
text: "Créer un dossier",
}}
/>
</div>
);
}

48
src/front/Components/DesignSystem/Footer/classes.module.scss Normal file
View File

@ -0,0 +1,48 @@
@import "@Themes/constants.scss";
.root {
border-top: 1px solid var(--footer-border, #d7dce0);
background: var(--footer-background, #fff);
padding: var(--spacing-1-5) 0;
font-family: var(--font-title-family, Poppins);
font-size: 12px;
font-weight: var(--font-text-weight-regular, 400);
letter-spacing: 0.06px;
.sub-root {
display: flex;
align-items: center;
gap: var(--Radius-lg, 16px);
white-space: nowrap;
padding: 0 360px;
//make it sticky
@media (max-width: 1023px) {
padding: 0 12px;
}
}
@media (max-width: 660px) or (min-width: 768px) {
.tablet {
display: none;
}
}
@media (min-width: 660px) {
.mobile {
display: none;
}
}
@media (max-width: 769px) {
.desktop {
display: none;
}
}
.separator {
&::before {
content: "|";
}
}
}

20
src/front/Components/DesignSystem/Footer/desktop.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
className?: string;
};
export default function Desktop({ className }: IProps) {
return (
<div className={[classes["sub-root"], className].join(" ")}>
<span>© Copyright lecoffre 2024</span>
<span className={classes["separator"]} />
<a href="/terms">Conditions d'utilisation</a>
<span className={classes["separator"]} />
<a href="/privacy">Politique de confidentialité</a>
<span className={classes["separator"]} />
<a href="/cookies">Politique des cookies</a>
</div>
);
}

19
src/front/Components/DesignSystem/Footer/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import classes from "./classes.module.scss";
import Mobile from "./mobile";
import Desktop from "./desktop";
import Tablet from "./tablet";
type IProps = {
className?: string;
};
export default function Footer({ className }: IProps) {
return (
<footer className={[classes["root"], className].join(" ")}>
<Mobile className={classes["mobile"]} />
<Tablet className={classes["tablet"]} />
<Desktop className={classes["desktop"]} />
</footer>
);
}

18
src/front/Components/DesignSystem/Footer/mobile.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
className?: string;
};
export default function Mobile({ className }: IProps) {
return (
<div className={[classes["sub-root"], className].join(" ")}>
<span>© Lecoffre 2024</span>
<span className={classes["separator"]} />
<a href="/terms">Juridiques</a>
<span className={classes["separator"]} />
<a href="/cookies">Cookies</a>
</div>
);
}

20
src/front/Components/DesignSystem/Footer/tablet.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
className?: string;
};
export default function Tablet({ className }: IProps) {
return (
<div className={[classes["sub-root"], className].join(" ")}>
<span>© Lecoffre 2024</span>
<span className={classes["separator"]} />
<a href="/terms">Conditions d'utilisation</a>
<span className={classes["separator"]} />
<a href="/privacy">Politique de confidentialité</a>
<span className={classes["separator"]} />
<a href="/cookies">Politique des cookies</a>
</div>
);
}

81
src/front/Components/DesignSystem/SearchBar/classes.module.scss
View File

@ -2,30 +2,67 @@
.root {
display: flex;
align-items: center;
padding-left: 24px;
background-color: var(--color-generic-white);
border: 1px solid var(--color-neutral-200);
position: relative;
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
align-items: flex-start;
gap: var(--spacing-2, 16px);
.fake-placeholder {
position: absolute;
left: 47px;
top: 24px;
color: var(--color-neutral-500);
pointer-events: none;
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-default, #d7dce0);
background: var(--input-background, #fff);
&:hover {
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-hovered, #b4bec5);
background: var(--input-background, #fff);
}
.input {
border: 0;
margin-left: 8px;
padding: 24px 0;
width: 100%;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: var(--color-neutral-500);
&[data-has-value="true"] {
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-filled, #6d7e8a);
background: var(--input-background, #fff);
}
&[data-is-focused="true"] {
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-focused, #005bcb);
background: var(--input-background, #fff);
}
.input-container {
display: flex;
flex: 1;
gap: 8px;
padding: 0px var(--spacing-2, 16px);
.input {
flex: 1;
border: none;
color: var(--input-placeholder-filled, #24282e);
/* text/md/semibold */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-semibold, 600);
line-height: normal;
letter-spacing: 0.08px;
width: 100%;
&::placeholder {
color: var(--input-placeholder-empty, #6d7e8a);
/* text/md/regular */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-regular, 400);
line-height: normal;
letter-spacing: 0.08px;
}
}
.cross {
cursor: pointer;
}
}
}

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

@ -1,54 +1,45 @@
import LoopIcon from "@Assets/Icons/loop.svg";
import Image from "next/image";
import React from "react";
import React, { useCallback } from "react";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
type IProps = {
onChange?: (input: string) => void;
placeholder?: string;
};
type IState = {
hasValue: boolean;
};
export default function SearchBar({ onChange, placeholder = "Rechercher" }: IProps) {
const [isFocused, setIsFocused] = React.useState(false);
const [value, setValue] = React.useState("");
export default class SearchBar extends React.Component<IProps, IState> {
static defaultProps = {
placeholder: "Search",
};
const changeValue = useCallback(
(value: string) => {
setValue(value);
onChange && onChange(value);
},
[onChange],
);
public constructor(props: IProps) {
super(props);
this.state = {
hasValue: false,
};
this.doesInputHaveValue = this.doesInputHaveValue.bind(this);
this.onChange = this.onChange.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && (
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography>
)}
<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => changeValue(event.target.value);
const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);
const clearValue = () => changeValue("");
return (
<label className={classes["root"]} data-is-focused={isFocused} data-has-value={value !== ""}>
<div className={classes["input-container"]}>
<MagnifyingGlassIcon width="24" height="24" />
<input
type="text"
value={value}
placeholder={placeholder}
className={classes["input"]}
onChange={handleOnChange}
onFocus={handleFocus}
onBlur={handleBlur}
/>
{value !== "" && <XMarkIcon width="24" height="24" className={classes["cross"]} onClick={clearValue} />}
</div>
);
}
private onChange(event: React.ChangeEvent<HTMLInputElement>) {
const hasValue = event.target.value.length > 0;
this.doesInputHaveValue(hasValue);
if (!this.props.onChange) return;
this.props.onChange(event.target.value);
}
private doesInputHaveValue(hasValue: boolean) {
this.setState({ hasValue });
}
</label>
);
}

29
src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/classes.module.scss Normal file
View File

@ -0,0 +1,29 @@
.root {
background: var(--navigation-button-background-default, #f7f8f8);
cursor: pointer;
&:hover {
background: var(--navigation-button-background-actived, #edeff1);
}
&[data-is-active="true"] {
border-left: 3px solid var(--navigation-border, #005bcb);
background: var(--navigation-button-background-actived, #edeff1);
}
.content {
display: flex;
padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
align-items: center;
gap: var(--spacing-sm, 8px);
.text-container {
flex: 1;
}
}
.separator {
width: 100%;
height: 1px;
background: var(--separator-stroke-light, #d7dce0);
}
}

46
src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import classes from "./classes.module.scss";
import { useCallback } from "react";
import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
export type IBlock = {
id: string;
primaryText: string;
secondaryText?: string;
showAlert?: boolean;
isActive?: boolean;
};
type IProps = IBlock & {
hasSeparator?: boolean;
onClick?: (id: string) => void;
};
export default function Block(props: IProps) {
const { primaryText, secondaryText, showAlert = false, hasSeparator = true, isActive = false, onClick } = props;
const handleOnClick = useCallback(() => onClick && onClick(props.id), [onClick, props.id]);
return (
<div className={classes["root"]} data-is-active={isActive} onClick={handleOnClick}>
<div className={classes["content"]}>
<div className={classes["text-container"]}>
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{secondaryText}
</Typography>
<Typography
typo={ETypo.TEXT_MD_BOLD}
color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{primaryText}
</Typography>
</div>
{showAlert && (
<ExclamationCircleIcon width="24" height="24" className={classes["icon"]} color={"var(--warning-default-base)"} />
)}
<ChevronRightIcon width="24" height="24" className={classes["icon"]} color={"var(--button-icon-button-default-default)"} />
</div>
{hasSeparator && <div className={classes["separator"]} />}
</div>
);
}

0
src/front/Components/DesignSystem/BlockList/classes.module.scss → src/front/Components/DesignSystem/SearchBlockList/BlockList/classes.module.scss
View File

23
src/front/Components/DesignSystem/SearchBlockList/BlockList/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import React, { useCallback } from "react";
import Block, { IBlock } from "./Block";
type IProps = {
blocks: IBlock[];
onSelectedBlock: (block: IBlock) => void;
};
export default function BlockList({ blocks, onSelectedBlock }: IProps) {
const selectBlock = useCallback(
(id: string) => {
onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!);
},
[blocks, onSelectedBlock],
);
return (
<div>
{blocks.map((block) => {
return <Block {...block} hasSeparator onClick={selectBlock} key={block.id} />;
})}
</div>
);
}

28
src/front/Components/DesignSystem/SearchBlockList/classes.module.scss Normal file
View File

@ -0,0 +1,28 @@
.root {
width: 336px;
height: 100%;
max-height: 100%;
border-radius: var(--navigation-radius, 0px);
background: var(--navigation-button-background-default, #f7f8f8);
display: flex;
flex-direction: column;
justify-content: flex-start;
.block-list {
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.searchbar {
padding: var(--spacing-md, 16px);
}
.bottom-container {
margin-top: auto;
}
}

78
src/front/Components/DesignSystem/SearchBlockList/index.tsx Normal file
View File

@ -0,0 +1,78 @@
import { useCallback, useEffect, useRef, useState } from "react";
import BlockList from "./BlockList";
import { IBlock } from "./BlockList/Block";
import classes from "./classes.module.scss";
import SearchBar from "../SearchBar";
import Button from "../Button";
import { useRouter } from "next/router";
type IProps = {
blocks: IBlock[];
onSelectedBlock: (block: IBlock) => void;
bottomButton?: {
text: string;
link: string;
};
};
export default function SearchBlockList(props: IProps) {
const { blocks, onSelectedBlock, bottomButton } = props;
const router = useRouter();
const [blocksShowing, setBlocksShowing] = useState<IBlock[]>(blocks);
const bottomButtonRef = useRef<HTMLAnchorElement>(null);
const searchBarRef = useRef<HTMLDivElement>(null);
const handleSearchChange = useCallback(
(value: string) => {
const filteredBlocks = blocks.filter((block) => {
const name = block.primaryText.toLowerCase();
const number = block.secondaryText?.toLowerCase();
value = value.toLowerCase();
return name.includes(value) || number?.includes(value);
});
setBlocksShowing(filteredBlocks);
},
[blocks],
);
const getHeight = useCallback(() => {
let heightToSubstract = 0;
if (bottomButton && bottomButtonRef.current) {
heightToSubstract += bottomButtonRef.current.clientHeight;
}
if (searchBarRef.current) {
heightToSubstract += searchBarRef.current.clientHeight;
}
return {
maxHeight: `calc(100% - ${heightToSubstract}px)`,
};
}, [bottomButton]);
const redirectOnBottomButtonClick = useCallback(() => {
if (!bottomButton) return;
router.push(bottomButton.link);
}, [bottomButton, router]);
useEffect(() => {
setBlocksShowing(blocks);
}, [blocks]);
return (
<div className={classes["root"]}>
<div className={classes["searchbar"]} ref={searchBarRef}>
<SearchBar placeholder="Chercher" onChange={handleSearchChange} />
</div>
<div className={classes["block-list"]} style={getHeight()}>
<BlockList blocks={blocksShowing} onSelectedBlock={onSelectedBlock} />
</div>
{bottomButton && (
<div className={classes["bottom-container"]}>
<Button fullwidth onClick={redirectOnBottomButtonClick}>
{bottomButton.text}
</Button>
</div>
)}
</div>
);
}

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

@ -28,25 +28,25 @@ export enum ETypo {
TEXT_LG_SEMIBOLD = "text-lg-semibold",
TEXT_LG_REGULAR = "text-lg-regular",
TEXT_LG_UPPERCASE = "text-lg-uppercase",
TEXT_LG_light = "text-lg-light",
TEXT_LG_LIGHT = "text-lg-light",
TEXT_MD_BOLD = "text-md-bold",
TEXT_MD_SEMIBOLD = "text-md-semibold",
TEXT_MD_REGULAR = "text-md-regular",
TEXT_MD_UPPERCASE = "text-md-uppercase",
TEXT_MD_light = "text-md-light",
TEXT_MD_LIGHT = "text-md-light",
TEXT_SM_BOLD = "text-sm-bold",
TEXT_SM_SEMIBOLD = "text-sm-semibold",
TEXT_SM_REGULAR = "text-sm-regular",
TEXT_SM_UPPERCASE = "text-sm-uppercase",
TEXT_SM_light = "text-sm-light",
TEXT_SM_LIGHT = "text-sm-light",
TEXT_XS_BOLD = "text-xs-bold",
TEXT_XS_SEMIBOLD = "text-xs-semibold",
TEXT_XS_REGULAR = "text-xs-regular",
TEXT_XS_UPPERCASE = "text-xs-uppercase",
TEXT_XS_light = "text-xs-light",
TEXT_XS_LIGHT = "text-xs-light",
CAPTION_BOLD = "caption-bold",
CAPTION_SEMIBOLD = "caption-semibold",
@ -153,6 +153,8 @@ export enum ETypoColor {
CONTRAST_DEFAULT = "--contrast-default",
CONTRAST_HOVERED = "--contrast-hovered",
ERROR_WEAK_CONTRAST = "--error-weak-contrast",
NAVIGATION_BUTTON_CONTRAST_DEFAULT = "--navigation-button-contrast-default",
NAVIGATION_BUTTON_CONTRAST_ACTIVE = "--navigation-button-contrast-active",
}
export default function Typography(props: IProps) {

3
src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
View File

@ -6,6 +6,9 @@
border-bottom: 1px solid var(--tabs-stroke, #d7dce0);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-1-5, 12px);
&[data-is-selected="true"] {
border-bottom: 2px solid var(--tabs-contrast-actived, #24282e);
}

3
src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
View File

@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable";
import { ITabValue } from "..";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
export type ITab = {
label: React.ReactNode;
};
@ -11,6 +12,7 @@ export type IProps<T> = {
onSelect: (value: ITabValue<T>) => void;
value: ITabValue<T>;
isSelected: boolean;
hasWarning?: boolean;
} & ITab;
export default function HorizontalTabs<T>(props: IProps<T>) {
@ -29,6 +31,7 @@ export default function HorizontalTabs<T>(props: IProps<T>) {
color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}>
{props.label}
</Typography>
{props.hasWarning && <ExclamationCircleIcon width="24" height="24" color="var(--tabs-contrast-warning)" />}
</div>
);
}

5
src/front/Components/Elements/Tabs/index.tsx
View File

@ -8,11 +8,12 @@ import useOpenable from "@Front/Hooks/useOpenable";
export type ITabValue<T> = T & {
id: unknown;
}
};
type ITabInternal<T> = ITab & {
key?: string;
value: ITabValue<T>;
hasWarning?: boolean;
};
type IProps<T> = {
@ -100,6 +101,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
value={element.value}
onSelect={handleSelect}
isSelected={element.value.id === selectedTab.id}
hasWarning={element.hasWarning}
/>
))}
</div>
@ -112,6 +114,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
value={element.value}
onSelect={handleSelect}
isSelected={element.value.id === selectedTab.id}
hasWarning={element.hasWarning}
/>
))}
</div>

58
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
View File

@ -1,11 +1,11 @@
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import User from "le-coffre-resources/dist/Notary";
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
collaborators: User[];
@ -14,22 +14,9 @@ type IProps = {
};
export default function CollaboratorListContainer(props: IProps) {
const [filteredUsers, setFilteredUsers] = useState<User[]>(props.collaborators);
const router = useRouter();
const { collaboratorUid } = router.query;
const filterUsers = useCallback(
(input: string) => {
const filteredUsers = props.collaborators.filter((user) => {
return (
user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredUsers(filteredUsers);
},
[props.collaborators],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -42,35 +29,16 @@ export default function CollaboratorListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterUsers} placeholder="Chercher un collaborateur" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredUsers.map((user) => {
return {
name: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
selected: user.uid === collaboratorUid,
rightIcon: user.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) ? (
<div
style={{
height: "12px",
width: "12px",
borderRadius: "100px",
backgroundColor: "var(--color-success-600)",
}}
/>
) : (
<></>
),
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<SearchBlockList
blocks={props.collaborators.map((user) => {
return {
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
isActive: user.uid === collaboratorUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
);
}

55
src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
View File

@ -1,14 +1,12 @@
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import Button from "@Front/Components/DesignSystem/Button";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { DeedType } from "le-coffre-resources/dist/Admin";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
deedTypes: DeedType[];
@ -17,20 +15,9 @@ type IProps = {
};
export default function DeedListContainer(props: IProps) {
const [filteredUsers, setFilteredUsers] = useState<DeedType[]>(props.deedTypes);
const router = useRouter();
const { deedTypeUid } = router.query;
const filterDeeds = useCallback(
(input: string) => {
const filteredUsers = props.deedTypes.filter((deedType) => {
return deedType.name?.toLowerCase().includes(input.toLowerCase());
});
setFilteredUsers(filteredUsers);
},
[props.deedTypes],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
@ -42,28 +29,20 @@ export default function DeedListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterDeeds} placeholder="Chercher un type d'acte" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredUsers.map((deed) => {
return {
name: deed.name,
id: deed.uid!,
selected: deedTypeUid === deed.uid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<div className={classes["create-container"]}>
<Link href={Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path}>
<Button fullwidth={true}>Créer un type d'acte</Button>
</Link>
</div>
<SearchBlockList
blocks={props.deedTypes.map((deed) => {
return {
primaryText: deed.name,
id: deed.uid!,
isActive: deedTypeUid === deed.uid,
};
})}
onSelectedBlock={onSelectedBlock}
bottomButton={{
link: Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
text: "Créer un type d'acte",
}}
/>
</div>
);
}

54
src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
View File

@ -1,13 +1,11 @@
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import Button from "@Front/Components/DesignSystem/Button";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { DocumentType } from "le-coffre-resources/dist/SuperAdmin";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
documentTypes: DocumentType[];
@ -16,19 +14,9 @@ type IProps = {
};
export default function DocumentTypeListContainer(props: IProps) {
const [filteredDocumentTypes, setFilteredDocumentTypes] = useState<DocumentType[]>(props.documentTypes);
const router = useRouter();
const { documentTypeUid } = router.query;
const filterDocumentTypes = useCallback(
(input: string) => {
const filteredDocumentTypes = props.documentTypes.filter((documentType) => {
return documentType.name.toLowerCase().includes(input.toLowerCase());
});
setFilteredDocumentTypes(filteredDocumentTypes);
},
[props.documentTypes],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -41,28 +29,20 @@ export default function DocumentTypeListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterDocumentTypes} placeholder="Chercher un document" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredDocumentTypes.map((documentType) => {
return {
name: documentType.name,
id: documentType.uid!,
selected: documentType.uid === documentTypeUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<div className={classes["create-container"]}>
<Link href={Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path}>
<Button fullwidth={true}>Créer un type de document</Button>
</Link>
</div>
<SearchBlockList
blocks={props.documentTypes.map((documentType) => {
return {
primaryText: documentType.name,
id: documentType.uid!,
isActive: documentType.uid === documentTypeUid,
};
})}
onSelectedBlock={onSelectedBlock}
bottomButton={{
link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
text: "Créer un type de document",
}}
/>
</div>
);
}

45
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
View File

@ -1,11 +1,11 @@
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
offices: Office[];
@ -14,21 +14,9 @@ type IProps = {
};
export default function OfficeListContainer(props: IProps) {
const [filteredOffices, setFilteredOffices] = useState<Office[]>(props.offices);
const router = useRouter();
const { officeUid } = router.query;
const filterOffices = useCallback(
(input: string) => {
const filteredOffices = props.offices.filter((office) => {
return (
office.name.toLowerCase().includes(input.toLowerCase()) || office.crpcen?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredOffices(filteredOffices);
},
[props.offices],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -41,23 +29,16 @@ export default function OfficeListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterOffices} placeholder="Chercher un office" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredOffices.map((office) => {
return {
name: office.crpcen + " - " + office.name,
id: office.uid!,
selected: office.uid === officeUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<SearchBlockList
blocks={props.offices.map((office) => {
return {
primaryText: office.crpcen + " - " + office.name,
id: office.uid!,
isActive: office.uid === officeUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
);
}

65
src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
View File

@ -1,13 +1,11 @@
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { OfficeRole } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import Button from "@Front/Components/DesignSystem/Button";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
roles: OfficeRole[];
@ -16,21 +14,10 @@ type IProps = {
};
export default function RoleListContainer(props: IProps) {
const [filteredRoles, setFilteredRoles] = useState<OfficeRole[]>(props.roles);
const router = useRouter();
const { roleUid } = router.query;
const filterRoles = useCallback(
(input: string) => {
const filteredRoles = props.roles.filter((role) => {
return role.name?.toLowerCase().includes(input.toLowerCase());
});
setFilteredRoles(filteredRoles);
},
[props.roles],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
@ -42,33 +29,25 @@ export default function RoleListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterRoles} placeholder="Chercher un rôle" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredRoles
.filter((role) => {
if (role.name === "admin") return false;
return true;
})
.map((role) => {
return {
name: role.name,
id: role.uid!,
selected: role.uid === roleUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<div className={classes["create-container"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
<Button fullwidth={true}>Créer un rôle</Button>
</Link>
</div>
<SearchBlockList
blocks={props.roles
.filter((role) => {
if (role.name === "admin") return false;
return true;
})
.map((role) => {
return {
primaryText: role.name,
id: role.uid!,
isActive: role.uid === roleUid,
};
})}
onSelectedBlock={onSelectedBlock}
bottomButton={{
link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
text: "Créer un rôle",
}}
/>
</div>
);
}

46
src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
View File

@ -1,11 +1,11 @@
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import User from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
users: User[];
@ -14,22 +14,9 @@ type IProps = {
};
export default function UserListContainer(props: IProps) {
const [filteredUsers, setFilteredUsers] = useState<User[]>(props.users);
const router = useRouter();
const { userUid } = router.query;
const filterUsers = useCallback(
(input: string) => {
const filteredUsers = props.users.filter((user) => {
return (
user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredUsers(filteredUsers);
},
[props.users],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -42,23 +29,16 @@ export default function UserListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterUsers} placeholder="Chercher un utilisateur" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredUsers.map((user) => {
return {
name: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
selected: user.uid === userUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
<SearchBlockList
blocks={props.users.map((user) => {
return {
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
isActive: user.uid === userUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
);
}

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

@ -14,6 +14,7 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker";
import Tabs from "@Front/Components/Elements/Tabs";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import useOpenable from "@Front/Hooks/useOpenable";
import Footer from "@Front/Components/DesignSystem/Footer";
import {
ArchiveBoxIcon,
ArrowLongLeftIcon,
@ -797,6 +798,7 @@ export default function DesignSystem() {
variant={EAlertVariant.NEUTRAL}
/>
</div>
<Footer />
</div>
</DefaultTemplate>
);

2
src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
View File

@ -24,7 +24,7 @@ export default function DeleteCustomerModal(props: IProps) {
title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer le client", onClick: handleDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Cette action retirera le client de ce dossier. Vous ne pourrez plus récupérer les informations associées à ce client dans ce
dossier une fois supprimées.
</Typography>

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

@ -131,7 +131,7 @@ export default function ClientBox(props: IProps) {
onClose={closeErrorModal}
title={"Suppression impossible"}
secondButton={{ children: "Fermer", onClick: closeErrorModal, fullwidth: true }}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Ce client ne peut pas être supprimé car des documents sont associés à son dossier. Veuillez d'abord gérer ou supprimer
ces documents avant de tenter de supprimer le client.
</Typography>

2
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
View File

@ -31,7 +31,7 @@ export default function DeleteAskedDocumentModal(props: IProps) {
title={"Êtes-vous sûr de vouloir supprimer cette demande de document ?"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer la demande", onClick: onDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>Cette action annulera la demande du document en cours.</Typography>
<Typography typo={ETypo.TEXT_MD_LIGHT}>Cette action annulera la demande du document en cours.</Typography>
</Modal>
);
}

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

@ -14,6 +14,7 @@ import Link from "next/link";
import NoDocument from "./NoDocument";
import DocumentTables from "./DocumentTables";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
type IProps = {
folder: OfficeFolder;
@ -42,6 +43,9 @@ export default function ClientView(props: IProps) {
label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
key: customer.uid,
value: customer,
hasWarning:
customer.documents &&
customer.documents.filter((document) => document.document_status === EDocumentStatus.DEPOSITED).length > 0,
})),
[customers],
);

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

@ -34,7 +34,7 @@ export default function DeleteFolderModal(props: IProps) {
title={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer le dossier", onClick: onDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Cette action est irréversible. En supprimant ce dossier, toutes les informations associées seront définitivement perdues.
</Typography>
</Modal>

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

@ -44,13 +44,13 @@ export default function AnchoringModal(props: IProps) {
firstButton={!isAnchoring ? { children: "Non, Annuler", onClick: onClose } : undefined}
secondButton={!isAnchoring ? { children: "Oui, certifier et ancrer", onClick: anchor } : undefined}>
{!isAnchoring ? (
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
La certification et l'ancrage de ce dossier dans la blockchain sont des actions définitives et garantiront la sécurité
et l'authenticité de tous les documents. Veuillez confirmer que vous souhaitez continuer.
</Typography>
) : (
<div className={classes["anchoring"]}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Vos documents sont en train d'être ancrés dans la blockchain. Cela peut prendre quelques instants. Merci de votre
patience.
</Typography>

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

@ -37,7 +37,7 @@ export default function ArchiveModal(props: IProps) {
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Archiver le dossier", onClick: archive }}>
<div className={classes["root"]}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Archiver ce dossier le déplacera dans la section des dossiers archivés. Vous pouvez ajouter une note de dossier avant
d'archiver si vous le souhaitez.
</Typography>

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

@ -38,7 +38,7 @@ export default function DownloadAnchoringProofModal(props: IProps) {
title={"Félicitations ! Dossier ancré avec succès"}
firstButton={{ children: "Fermer", onClick: onClose }}
secondButton={{ children: "Télécharger la preuve d’ancrage", onClick: downloadAnchoringProof }}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Votre dossier a été validé et ancré dans la blockchain. Vous pouvez maintenant télécharger la preuve d'ancrage pour vos
archives.
</Typography>

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

@ -23,7 +23,7 @@ export default function RequireAnchoringModal(props: IProps) {
title={"Archiver le dossier, action requise : Ancrer et certifier le dossier"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Ancrer le dossier", onClick: onAnchor }}>
<Typography typo={ETypo.TEXT_MD_light}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
Pour archiver ce dossier, il est nécessaire de l'ancrer dans la blockchain afin de garantir la sécurité et l'authenticité
des documents. Veuillez procéder à l'ancrage avant de continuer.
</Typography>

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

@ -1,5 +1,4 @@
import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import JwtService from "@Front/Services/JwtService/JwtService";
@ -9,6 +8,8 @@ import { useCallback, useEffect, useState } from "react";
import LandingImage from "../Login/landing-connect.jpeg";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
export default function SelectFolder() {
const [folders, setFolders] = useState<OfficeFolder[]>([]);
@ -66,7 +67,7 @@ export default function SelectFolder() {
blocks={folders.map((folder) => {
return {
id: folder.uid!,
name: folder.name!,
primaryText: folder.name!,
selected: false,
};
})}

2
src/front/Themes/constants.scss
View File

@ -3,7 +3,7 @@ $screen-l: 1439px;
$screen-ls: 1280px;
$screen-m: 1023px;
$screen-s: 767px;
// $screen-xs: 424px;
$screen-xs: 424px;
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);

2
src/front/index.scss
View File

@ -1,5 +1,5 @@
@import "@Themes/constants.scss";
@import "@Themes/fonts.scss";
@import "@Themes/constants.scss";
@import "@Themes/variables.scss";
* {

2
src/pages/_app.tsx
View File

@ -1,6 +1,6 @@
import "@Front/index.scss";
import { DefaultLayout } from "@Front/Components/LayoutTemplates/DefaultLayout";
import { FrontendVariables } from "@Front/Config/VariablesFront";
import "@Front/index.scss";
import type { NextPage } from "next";
import type { AppType, AppProps } from "next/app";
import { useEffect, type ReactElement, type ReactNode } from "react";