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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-09 17:05:12 +02:00
commit eb68298b31
15 changed files with 234 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/classes.module.scss Normal file
View File

@ -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;
}
}

54
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx Normal file
View File

@ -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>
);
}

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

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

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

@ -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
mode={RulesMode.NECESSARY}
rules={[
<div className={classes["separator"]} />
<BurgerModalSubmenu
text={"Espace super admin"}
links={[
{
action: AppRuleActions.update,
name: AppRuleNames.officeRoles,
text: "Gestion des utilisateurs",
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,
name: AppRuleNames.deedTypes,
text: "Gestion des offices",
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}
text="Paramétrage des listes de pièces"
routesActive={[
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={[
]}
/>
<BurgerModalSubmenu
text="Espace office"
links={[
{
action: AppRuleActions.update,
name: AppRuleNames.officeRoles,
text: "Collaborateurs",
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,
name: AppRuleNames.offices,
text: "Gestion des rôles",
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,
name: AppRuleNames.offices,
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,
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,
name: AppRuleNames.rib,
text: "RIB Office",
path: Module.getInstance().get().modules.pages.OfficesRib.props.path,
rules: [
{
action: AppRuleActions.update,
name: AppRuleNames.rib,
},
],
},
]}>
<NavigationLink
path={Module.getInstance().get().modules.pages.OfficesRib.props.path}
text="Gestion du RIB"
routesActive={[Module.getInstance().get().modules.pages.OfficesRib.props.path]}
/>
</Rules>
{
text: "Abonnement",
path: Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
routesActive: [
Module.getInstance().get().modules.pages.Subscription.pages.Error.props.path,
Module.getInstance().get().modules.pages.Subscription.pages.Success.props.path,
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>
</>

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

@ -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[];

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

@ -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,

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

@ -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 (

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

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

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

@ -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));

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

@ -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;

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

@ -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 { EForfeitType } from "../../SubscriptionFacturation";
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../SubscribeCheckoutTicket";
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";

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

@ -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 { EForfeitType } from "../../SubscriptionFacturation";
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../SubscribeCheckoutTicket";
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";

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

@ -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>

5
src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
View File

@ -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>

24
src/front/Hooks/useToggle.ts Normal file
View File

@ -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,
};
}