Merge branch 'dev' into staging

src/front/Components/DesignSystem/Table/MuiTable/index.tsx

@@ -8,8 +8,9 @@ import TableRow from "@mui/material/TableRow";
 
 import Typography, { ETypo, ETypoColor } from "../../Typography";
 import classes from "./classes.module.scss";
+import { SxProps, Theme } from "@mui/material";
 
-export type IRowProps = { key: string } & Record<string, React.ReactNode>;
+export type IRowProps = { key: string } & Record<string, React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode }>;
 
 type IRow = {
 	key?: string;
@@ -29,7 +30,7 @@ export type IHead = {
 
 type CellContent = {
 	key: string;
-	value: React.ReactNode;
+	value: React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode };
 };
 
 export default function MuiTable(props: IProps) {
@@ -82,12 +83,14 @@ export default function MuiTable(props: IProps) {
 											className={classes["cell"]}
 											key={cell.key}
 											align="left"
-											sx={{ border: 0, padding: "4px 8px", height: "53px" }}>
+											sx={{ ...getCellValueStyle(cell.value), border: 0, padding: "4px 8px", height: "53px" }}>
 											<Typography
 												className={classes["content"]}
 												typo={ETypo.TEXT_MD_REGULAR}
 												color={ETypoColor.COLOR_NEUTRAL_900}>
-												{cell.value}
+												{cell.value && typeof cell.value === "object" && "content" in cell.value
+													? cell.value.content
+													: cell.value}
 											</Typography>
 										</TableCell>
 									))}
@@ -99,4 +102,11 @@ export default function MuiTable(props: IProps) {
 			</TableContainer>
 		</InfiniteScroll>
 	);
+
+	function getCellValueStyle(value: React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode }) {
+		if (typeof value === "object" && value !== null && "sx" in value) {
+			return value.sx;
+		}
+		return {};
+	}
 }

src/front/Components/DesignSystem/Tag/classes.module.scss

@@ -9,6 +9,8 @@
 	align-items: center;
 	justify-content: center;
 
+	white-space: nowrap;
+
 	&.info {
 		background-color: var(--tag-info-background);
 	}

src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss

@@ -1,8 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	padding: var(--spacing-3) var(--spacing-15);
+	padding: var(--spacing-4) 142px;
-	max-width: 1156px;
 
 	display: flex;
 	flex-direction: column;

src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx

@@ -4,7 +4,7 @@ import Dropdown from "@Front/Components/DesignSystem/Dropdown";
 import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption";
 import Table from "@Front/Components/DesignSystem/Table";
 import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
-import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
+import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@@ -19,6 +19,13 @@ import classes from "./classes.module.scss";
 
 type IProps = {};
 
+const tradDocumentStatus: Record<EDocumentStatus, string> = {
+	[EDocumentStatus.ASKED]: "DEMANDÉ",
+	[EDocumentStatus.DEPOSITED]: "À VALIDER",
+	[EDocumentStatus.VALIDATED]: "VALIDÉ",
+	[EDocumentStatus.REFUSED]: "REFUSÉ",
+};
+
 const header: readonly IHead[] = [
 	{
 		key: "remindedAt",
@@ -126,6 +133,7 @@ export default function DocumentsReminderHistory(props: IProps) {
 					options={customersOptions}
 					onSelectionChange={onSelectionChange}
 					selectedOption={customerOption ?? customersOptions?.[0]}
+					label="Client"
 				/>
 				<Table className={classes["table"]} header={header} rows={buildRows(reminders)} />
 			</div>
@@ -147,14 +155,14 @@ function buildRows(reminders: DocumentReminder[] | null): IRowProps[] {
 function getTag(status: EDocumentStatus) {
 	switch (status) {
 		case EDocumentStatus.ASKED:
-			return <Tag label={status} color={ETagColor.INFO} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.DEPOSITED:
-			return <Tag label={status} color={ETagColor.WARNING} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.VALIDATED:
-			return <Tag label={status} color={ETagColor.SUCCESS} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.REFUSED:
-			return <Tag label={status} color={ETagColor.ERROR} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} />;
 		default:
-			return <Tag label={status} color={ETagColor.INFO} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
 	}
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss

@@ -2,12 +2,11 @@
 
 .root {
 	display: flex;
-	width: fit-content;
 	padding: var(--spacing-md, 16px);
 	flex-direction: column;
 	gap: var(--spacing-md, 16px);
 	background: var(--primary-weak-higlight, #e5eefa);
-	min-width: 300px;
+	width: 300px;
 
 	.header {
 		display: flex;

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss

@@ -16,5 +16,6 @@
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-sm, 8px);
+		justify-content: center;
 	}
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx

@@ -131,16 +131,29 @@ export default function DocumentTables(props: IProps) {
 					if (document.document_status !== EDocumentStatus.ASKED) return null;
 					return {
 						key: document.uid,
-						document_type: document.document_type?.name ?? "_",
+						document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
-						document_status: (
+						document_status: {
+							sx: { width: 107 },
+							content: (
 								<Tag
 									color={ETagColor.INFO}
 									variant={ETagVariant.SEMI_BOLD}
 									label={tradDocumentStatus[document.document_status].toUpperCase()}
 								/>
 							),
-						date: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						},
-						actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
+						date: {
+							sx: { width: 107 },
+							content: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						},
+						actions: {
+							sx: { width: 76 },
+							content: (
+								<div className={classes["actions"]}>
+									<IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />
+								</div>
+							),
+						},
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
@@ -154,16 +167,25 @@ export default function DocumentTables(props: IProps) {
 					if (document.document_status !== EDocumentStatus.DEPOSITED) return null;
 					return {
 						key: document.uid,
-						document_type: document.document_type?.name ?? "_",
+						document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
-						document_status: (
+						document_status: {
+							sx: { width: 107 },
+							content: (
 								<Tag
 									color={ETagColor.WARNING}
 									variant={ETagVariant.SEMI_BOLD}
 									label={tradDocumentStatus[document.document_status].toUpperCase()}
 								/>
 							),
-						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
-						actions: (
+						date: {
+							sx: { width: 107 },
+							content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
+						actions: {
+							sx: { width: 76 },
+							content: (
+								<div className={classes["actions"]}>
 									<Link
 										href={Module.getInstance()
 											.get()
@@ -171,7 +193,9 @@ export default function DocumentTables(props: IProps) {
 											.replace("[documentUid]", document.uid ?? "")}>
 										<IconButton icon={<EyeIcon />} />
 									</Link>
+								</div>
 							),
+						},
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
@@ -185,16 +209,24 @@ export default function DocumentTables(props: IProps) {
 					if (document.document_status !== EDocumentStatus.VALIDATED) return null;
 					return {
 						key: document.uid,
-						document_type: document.document_type?.name ?? "_",
+						document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
-						document_status: (
+						document_status: {
+							sx: { width: 107 },
+							content: (
 								<Tag
 									color={ETagColor.SUCCESS}
 									variant={ETagVariant.SEMI_BOLD}
 									label={tradDocumentStatus[document.document_status].toUpperCase()}
 								/>
 							),
-						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
-						actions: (
+						date: {
+							sx: { width: 107 },
+							content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
+						actions: {
+							sx: { width: 76 },
+							content: (
 								<div className={classes["actions"]}>
 									<Link
 										href={Module.getInstance()
@@ -206,6 +238,7 @@ export default function DocumentTables(props: IProps) {
 									<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
 								</div>
 							),
+						},
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
@@ -219,15 +252,21 @@ export default function DocumentTables(props: IProps) {
 					if (document.document_status !== EDocumentStatus.REFUSED) return null;
 					return {
 						key: document.uid,
-						document_type: document.document_type?.name ?? "_",
+						document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
-						document_status: (
+						document_status: {
+							sx: { width: 107 },
+							content: (
 								<Tag
 									color={ETagColor.ERROR}
 									variant={ETagVariant.SEMI_BOLD}
 									label={tradDocumentStatus[document.document_status].toUpperCase()}
 								/>
 							),
-						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
+						date: {
+							sx: { width: 107 },
+							content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
 						actions: "",
 					};
 				})
@@ -241,15 +280,27 @@ export default function DocumentTables(props: IProps) {
 				.map((document) => {
 					return {
 						key: document.uid,
-						document_type: document.files?.[0]?.file_name?.split(".")?.[0] ?? "_",
+						document_type: {
-						document_status: <Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label={"ENVOYÉ"} />,
+							sx: { width: 400 },
-						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+							content: formatName(document.files?.[0]?.file_name?.split(".")?.[0] ?? "") || "_",
-						actions: (
+						},
+						document_status: {
+							sx: { width: 107 },
+							content: <Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label={"ENVOYÉ"} />,
+						},
+						date: {
+							sx: { width: 107 },
+							content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						},
+						actions: {
+							sx: { width: 76 },
+							content: (
 								<div className={classes["actions"]}>
 									<IconButton onClick={() => onDownloadFileNotary(document)} icon={<ArrowDownTrayIcon />} />
 									<IconButton icon={<TrashIcon onClick={() => openDeleteSentDocumentModal(document.uid)} />} />
 								</div>
 							),
+						},
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
@@ -333,3 +384,7 @@ function getHeader(dateColumnTitle: string, isMobile: boolean): IHead[] {
 		},
 	];
 }
+
+function formatName(text: string): string {
+	return text.replace(/[^a-zA-Z0-9 ]/g, "");
+}

src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx

@@ -4,7 +4,7 @@ import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
 import Modal from "@Front/Components/DesignSystem/Modal";
 import Separator, { ESeperatorColor } from "@Front/Components/DesignSystem/Separator";
 import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Customer from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import React, { useCallback, useMemo, useState } from "react";
@@ -79,7 +79,7 @@ export default function ReminderModal(props: IProps) {
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Relancer", onClick: onRemind }}>
 			<div className={classes["root"]}>
-				<Typography typo={ETypo.TEXT_MD_LIGHT}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
 					Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client.
 				</Typography>
 				<CheckBox

src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx

@@ -112,10 +112,7 @@ export default function ClientView(props: IProps) {
 								</Button>
 							</Link>
 						)}
-						<EmailReminder
+						<EmailReminder customer={customer} isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED} />
-							customer={customer}
-							isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED}
-						/>
 					</div>
 				</div>