Merge branch 'dev' into staging

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/classes.module.scss

@@ -0,0 +1,18 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.content {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.sub-menu {
+		padding: 24px;
+		text-align: center;
+		gap: 24px;
+		display: flex;
+		flex-direction: column;
+	}
+}

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

@@ -0,0 +1,54 @@
+import classNames from "classnames";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import classes from "./classes.module.scss";
+import { IAppRule } from "@Front/Api/Entities/rule";
+import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
+import { IHeaderLinkProps } from "../../../HeaderLink";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
+import useToggle from "@Front/Hooks/useToggle";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+
+type IProps = {
+	text: string | JSX.Element;
+	links: (IHeaderLinkProps & {
+		rules?: IAppRule[];
+	})[];
+};
+
+export default function HeaderSubmenu(props: IProps) {
+	const router = useRouter();
+	const { pathname } = router;
+	const [isActive, setIsActive] = useState(true);
+	const { active: isSubmenuOpened, toggle } = useToggle();
+
+	useEffect(() => {
+		setIsActive(false);
+		if (props.links.some((link) => link.path === pathname)) setIsActive(true);
+		if (props.links.some((link) => link.routesActive?.some((routeActive) => pathname.includes(routeActive)))) setIsActive(true);
+	}, [isActive, pathname, props.links]);
+
+	return (
+		<Rules mode={RulesMode.OPTIONAL} rules={props.links.flatMap((link) => link.rules ?? [])}>
+			<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>
+						{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
+					</div>
+					<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />
+					{isSubmenuOpened && (
+						<div className={classes["sub-menu"]}>
+							{props.links.map((link) => (
+								<Rules mode={RulesMode.NECESSARY} rules={link.rules ?? []} key={link.path}>
+									<HeaderSubmenuLink {...link} />
+								</Rules>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		</Rules>
+	);
+}

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss

@@ -11,6 +11,8 @@
 	width: 100%;
 	left: 0;
 	text-align: center;
+	max-height: calc(100vh - 83px);
+	overflow: auto;
 	> *:not(:last-child) {
 		margin-bottom: 24px;
 	}

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx

@@ -4,8 +4,8 @@ import React from "react";
 
 import NavigationLink from "../../NavigationLink";
 import classes from "./classes.module.scss";
-import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
 import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
+import BurgerModalSubmenu from "./BurgerModalSubmenu";
 
 type IProps = {
 	isOpen: boolean;
@@ -34,111 +34,120 @@ export default class BurgerModal extends React.Component<IProps, IState> {
 						text="Dossiers archivés"
 						routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]}
 					/>
-					<Rules
+					<div className={classes["separator"]} />
-						mode={RulesMode.NECESSARY}
+
-						rules={[
+					<BurgerModalSubmenu
+						text={"Espace super admin"}
+						links={[
 							{
-								action: AppRuleActions.update,
+								text: "Gestion des utilisateurs",
-								name: AppRuleNames.officeRoles,
+								path: Module.getInstance().get().modules.pages.Users.props.path,
+								routesActive: [
+									Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path,
+									Module.getInstance().get().modules.pages.Users.props.path,
+								],
+								rules: [
+									{
+										action: AppRuleActions.update,
+										name: AppRuleNames.offices,
+									},
+								],
 							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Collaborators.props.path}
-							text="Collaborateurs"
-							routesActive={[Module.getInstance().get().modules.pages.Collaborators.props.path]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
 							{
-								action: AppRuleActions.update,
+								text: "Gestion des offices",
-								name: AppRuleNames.deedTypes,
+								path: Module.getInstance().get().modules.pages.Offices.props.path,
+								routesActive: [
+									Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
+									Module.getInstance().get().modules.pages.Offices.props.path,
+								],
+								rules: [
+									{
+										action: AppRuleActions.update,
+										name: AppRuleNames.offices,
+									},
+								],
 							},
-						]}>
+						]}
-						<NavigationLink
+					/>
-							path={Module.getInstance().get().modules.pages.DeedTypes.props.path}
+					<BurgerModalSubmenu
-							text="Paramétrage des listes de pièces"
+						text="Espace office"
-							routesActive={[
+						links={[
-								Module.getInstance().get().modules.pages.DeedTypes.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.DeedTypesInformations.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.Edit.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
 							{
-								action: AppRuleActions.update,
+								text: "Collaborateurs",
-								name: AppRuleNames.officeRoles,
+								path: Module.getInstance().get().modules.pages.Collaborators.props.path,
+								routesActive: [
+									Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.props.path,
+									Module.getInstance().get().modules.pages.Collaborators.props.path,
+								],
+								rules: [
+									{
+										action: AppRuleActions.read,
+										name: AppRuleNames.users,
+									},
+								],
 							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Roles.props.path}
-							text="Gestion des rôles"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Roles.props.path,
-								Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
 							{
-								action: AppRuleActions.update,
+								text: "Gestion des rôles",
-								name: AppRuleNames.offices,
+								path: Module.getInstance().get().modules.pages.Roles.props.path,
+								routesActive: [
+									Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
+									Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path,
+									Module.getInstance().get().modules.pages.Roles.props.path,
+								],
+								rules: [
+									{
+										action: AppRuleActions.update,
+										name: AppRuleNames.officeRoles,
+									},
+								],
 							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Users.props.path}
-							text="Gestion des utilisateurs"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Users.props.path,
-								Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
 							{
-								action: AppRuleActions.update,
+								text: "Paramétrage des listes de pièces",
-								name: AppRuleNames.offices,
+								path: Module.getInstance().get().modules.pages.DeedTypes.props.path,
+								routesActive: [
+									Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
+									Module.getInstance().get().modules.pages.DeedTypes.pages.Edit.props.path,
+									Module.getInstance().get().modules.pages.DeedTypes.props.path,
+									Module.getInstance().get().modules.pages.DocumentTypes.props.path,
+									Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
+									Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path,
+									Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path,
+								],
+								rules: [
+									{
+										action: AppRuleActions.update,
+										name: AppRuleNames.deedTypes,
+									},
+								],
 							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Offices.props.path}
-							text="Gestion des offices"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Offices.props.path,
-								Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
 							{
-								action: AppRuleActions.update,
+								text: "RIB Office",
-								name: AppRuleNames.rib,
+								path: Module.getInstance().get().modules.pages.OfficesRib.props.path,
+								rules: [
+									{
+										action: AppRuleActions.update,
+										name: AppRuleNames.rib,
+									},
+								],
 							},
-						]}>
+							{
-						<NavigationLink
+								text: "Abonnement",
-							path={Module.getInstance().get().modules.pages.OfficesRib.props.path}
+								path: Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
-							text="Gestion du RIB"
+								routesActive: [
-							routesActive={[Module.getInstance().get().modules.pages.OfficesRib.props.path]}
+									Module.getInstance().get().modules.pages.Subscription.pages.Error.props.path,
-						/>
+									Module.getInstance().get().modules.pages.Subscription.pages.Success.props.path,
-					</Rules>
+									Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path,
+									Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
+									Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path,
+									Module.getInstance().get().modules.pages.Subscription.pages.New.props.path,
+									Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.props.path,
+								],
+							},
+						]}
+					/>
+					<div className={classes["separator"]} />
 					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
 					<NavigationLink target="_blank" path="/CGU_LeCoffre_io.pdf" text="CGU" />
-					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>
 			</>

src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from "react";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import useHoverable from "@Front/Hooks/useHoverable";
 
-export type IHeaderLinkProps = {
+type IHeaderLinkProps = {
 	text: string | JSX.Element;
 	path: string;
 	routesActive?: string[];

src/front/Components/DesignSystem/Header/Navigation/index.tsx

@@ -117,7 +117,7 @@ export default function Navigation() {
 							],
 						},
 						{
-							text: "Paramétrage types d'actes",
+							text: "Paramétrage des listes de pièces",
 							path: Module.getInstance().get().modules.pages.DeedTypes.props.path,
 							routesActive: [
 								Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -72,7 +72,7 @@ export default function ClientDashboard(props: IProps) {
 		setIsAddDocumentModalVisible(true);
 	}, []);
 
-	async function downloadFile() {
+	const downloadFile = useCallback(async () => {
 		if (!folder?.office?.uid) return;
 		const blob = await OfficeRib.getInstance().getRibStream(folder.office.uid);
 		const ribUrl = URL.createObjectURL(blob);
@@ -84,7 +84,7 @@ export default function ClientDashboard(props: IProps) {
 		a.download = "";
 		document.body.appendChild(a);
 		a.click();
-	}
+	}, [folder]);
 
 	useEffect(() => {
 		getDocuments();
@@ -126,7 +126,15 @@ export default function ClientDashboard(props: IProps) {
 				)}
 			</div>
 		);
-	}, [customer, folder?.folder_number, folder?.name, folder?.office?.name]);
+	}, [
+		customer?.contact?.first_name,
+		customer?.contact?.last_name,
+		downloadFile,
+		folder?.folder_number,
+		folder?.name,
+		folder?.office?.name,
+		folder?.office?.rib_name,
+	]);
 
 	const renderBox = useCallback(() => {
 		return (

src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx

@@ -76,7 +76,7 @@ export default function DeedTypesEdit() {
 				return;
 			}
 		},
-		[deedTypeUid, router, validationError],
+		[deedTypeUid, router],
 	);
 
 	const onFieldChange = useCallback((name: string, field: any) => {

src/front/Components/Layouts/Login/index.tsx

@@ -41,10 +41,10 @@ export default function Login() {
 		router.push("https://connexion.idnot.fr/");
 	}, [router]);
 
-	const closeContactAdminModal = useCallback(() => {
+	const closeContactAdminModal = () => {
 		setIsErrorModalOpen(0);
 		window.open("https://www.lecoffre.io/contact", "_blank");
-	}, [router]);
+	};
 
 	useEffect(() => {
 		openErrorModal(parseInt(error as string));

src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx

@@ -1,5 +1,5 @@
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import { EForfeitType } from "../../SubscriptionFacturation";
+import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
 import classes from "./classes.module.scss";
 import { useEffect, useState } from "react";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
@@ -9,13 +9,6 @@ import { EType } from "le-coffre-resources/dist/Admin/Subscription";
 import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
 import { useRouter } from "next/router";
 
-export const forfeitsPrices: Record<EForfeitType, number> = {
-	[EForfeitType.standard]: 99,
-	[EForfeitType.unlimited]: 249,
-};
-
-export const collaboratorPrice = 6.99;
-
 type IProps = {
 	forfeitType: EForfeitType;
 	numberOfCollaborators: number;

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx

@@ -2,8 +2,8 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import NavTab from "@Front/Components/Elements/NavTab";
-import SubscribeCheckoutTicket, { EPaymentFrequency, forfeitsPrices } from "../SubscribeCheckoutTicket";
+import SubscribeCheckoutTicket, { EPaymentFrequency } from "../SubscribeCheckoutTicket";
-import { EForfeitType } from "../../SubscriptionFacturation";
+import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx

@@ -3,8 +3,8 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import NavTab from "@Front/Components/Elements/NavTab";
 import NumberPicker from "@Front/Components/Elements/NumberPicker";
-import SubscribeCheckoutTicket, { EPaymentFrequency, collaboratorPrice, forfeitsPrices } from "../SubscribeCheckoutTicket";
+import SubscribeCheckoutTicket, { EPaymentFrequency } from "../SubscribeCheckoutTicket";
-import { EForfeitType } from "../../SubscriptionFacturation";
+import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";

src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx

@@ -18,6 +18,12 @@ export enum EForfeitType {
 	"standard",
 	"unlimited",
 }
+export const collaboratorPrice = 6.99;
+
+export const forfeitsPrices: Record<EForfeitType, number> = {
+	[EForfeitType.standard]: 99,
+	[EForfeitType.unlimited]: 199,
+};
 export default function SubscriptionFacturation() {
 	const router = useRouter();
 	const [subscription, setSubscription] = useState<Subscription | null>(null);
@@ -74,6 +80,8 @@ export default function SubscriptionFacturation() {
 	useEffect(() => {
 		loadSubscription();
 	}, [loadSubscription]);
+
+	console.log(forfeitsPrices[EForfeitType.unlimited].toString());
 	return (
 		<DefaultTemplate title="Nouvelle souscription">
 			{subscription && (
@@ -114,14 +122,14 @@ export default function SubscriptionFacturation() {
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
 								<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
-									99€
+									{forfeitsPrices[EForfeitType.standard]}€
 									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
 								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-									+ 6,99€ / collaborateur / mois
+									+ {collaboratorPrice}€ / collaborateur / mois
 								</Typography>
 							</div>
 							<div className={classes["button-container"]}>
@@ -178,7 +186,7 @@ export default function SubscriptionFacturation() {
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
 								<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
-									249€
+									{forfeitsPrices[EForfeitType.unlimited]}€
 									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>

src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Button from "@Front/Components/DesignSystem/Button";
 import Link from "next/link";
+import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../SubscriptionFacturation";
 
 export default function SubscriptionNew() {
 	return (
@@ -42,7 +43,7 @@ export default function SubscriptionNew() {
 								/ mois
 							</Typography>
 							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-								+ 6,99€ / collaborateur / mois
+								+ {collaboratorPrice}€ / collaborateur / mois
 							</Typography>
 						</div>
 						<div className={classes["button-container"]}>
@@ -63,7 +64,7 @@ export default function SubscriptionNew() {
 						<div className={classes["separator"]} />
 						<div className={classes["price-container"]}>
 							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
-								249€
+								{forfeitsPrices[EForfeitType.unlimited]}€
 								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>

src/front/Hooks/useToggle.ts

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+
+export default function useToggle(defaultValue: boolean = false) {
+	const [active, setActive] = useState(defaultValue);
+
+	const toggle = useCallback(() => {
+		setActive((prev) => !prev);
+	}, []);
+
+	const activate = useCallback(() => {
+		setActive(true);
+	}, []);
+
+	const deactivate = useCallback(() => {
+		setActive(false);
+	}, []);
+
+	return {
+		active,
+		toggle,
+		activate,
+		deactivate,
+	};
+}