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

✨ Manage collaborators mocked

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-04 15:12:30 +02:00
parent ae69cd167e
commit c6c9678b37
14 changed files with 195 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
View File

@ -4,6 +4,7 @@ import classNames from "classnames";
import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import BackArrow from "@Front/Components/Elements/BackArrow";
type IProps = {
title: string;
@ -14,6 +15,8 @@ type IProps = {
scrollTop: number | null;
isPadding?: boolean;
hasHeaderLinks: boolean;
hasBackArrow?: boolean;
backArrowUrl?: string;
};
type IState = {};
@ -28,7 +31,14 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
return (
<>
<Header isUserConnected={this.props.hasHeaderLinks} />
<div className={classNames(classes["root"], this.props.isPadding && classes["padding"])}>{this.props.children}</div>
<div className={classNames(classes["root"], this.props.isPadding && classes["padding"])}>
{this.props.hasBackArrow && (
<div className={classes["back-arrow-desktop"]}>
<BackArrow url={this.props.backArrowUrl ?? ""} />
</div>
)}
{this.props.children}
</div>
<Version />
</>
);

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

@ -31,7 +31,7 @@ export default function SubscribeIllimity() {
return (
<>
<DefaultTemplate title="Nouvelle souscription">
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}>
<div className={classes["left"]}>
<NavTab

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

@ -38,7 +38,7 @@ export default function SubscribeStandard() {
return (
<>
<DefaultTemplate title="Nouvelle souscription">
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}>
<div className={classes["left"]}>
<NavTab

7
src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss
View File

@ -33,6 +33,7 @@
display: flex;
flex-direction: column;
gap: 32px;
height: fit-content;
&[data-inactive="true"] {
border: 1px solid #e7e7e7;
@ -62,6 +63,12 @@
flex-direction: column;
gap: 8px;
}
.button-container {
display: flex;
flex-direction: column;
gap: 8px;
}
}
}

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

@ -30,8 +30,6 @@ export default function SubscriptionFacturation() {
}, [closeCancelSubscription, openConfirmation]);
const manageBilling = async () => {
console.log("handleSubmitPayment");
try {
const jwt = JwtService.getInstance().decodeJwt();
const subscription = await Subscriptions.getInstance().get({ officeId: jwt?.office_Id });
@ -97,9 +95,21 @@ export default function SubscriptionFacturation() {
</Link>
)}
{forfeitType === EForfeitType.standard && (
<>
<Link
href={
Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Standard.props.path
}>
<Button fullwidth variant={EButtonVariant.PRIMARY}>
Gérer mes collaborateurs
Gérer mon abonnement
</Button>
</Link>
<Link href={Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Ajouter des collaborateurs
</Button>
</Link>
</>
)}
</div>
</div>

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

@ -77,7 +77,7 @@ export default function SubscriptionInvite() {
};
return (
<DefaultTemplate title="Nouvelle souscription">
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>

30
src/front/Components/Layouts/Subscription/SubscriptionManageCollaborators/classes.module.scss Normal file
View File

@ -0,0 +1,30 @@
@import "@Themes/constants.scss";
.root {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
form {
display: flex;
flex-direction: column;
gap: 16px;
.collaborators-container {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 24px;
}
.buttons-container {
display: flex;
gap: 32px;
max-width: 400px;
@media (max-width: $screen-s) {
flex-direction: column;
gap: 16px;
}
}
}
}

95
src/front/Components/Layouts/Subscription/SubscriptionManageCollaborators/index.tsx Normal file
View File

@ -0,0 +1,95 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Form from "@Front/Components/DesignSystem/Form";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
export default function SubscriptionManageCollaborators() {
return (
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}>
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
Choisissez les collaborateurs pour votre abonnement
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
7 sièges disponibles
</Typography>
<Form>
<div className={classes["collaborators-container"]}>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
checked
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
checked
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
checked
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
<CheckBox
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
</div>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
7 collaborateurs sélectionnés
</Typography>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.PRIMARY} fullwidth>
Enregistrer
</Button>
<Button variant={EButtonVariant.GHOST} fullwidth>
Annuler
</Button>
</div>
</Form>
</div>
</DefaultTemplate>
);
}

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

@ -8,7 +8,7 @@ import Link from "next/link";
export default function SubscriptionNew() {
return (
<DefaultTemplate title="Nouvelle souscription">
<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["top-container-title"]}>

7
src/front/Config/Module/development.json
View File

@ -285,6 +285,13 @@
"labelKey": "invite"
}
},
"ManageCollaborators": {
"enabled": true,
"props": {
"path": "/subscription/manage-collaborators",
"labelKey": "manage_collaborators"
}
},
"Manage": {
"enabled": true,
"props": {

7
src/front/Config/Module/preprod.json
View File

@ -285,6 +285,13 @@
"labelKey": "invite"
}
},
"ManageCollaborators": {
"enabled": true,
"props": {
"path": "/subscription/manage-collaborators",
"labelKey": "manage_collaborators"
}
},
"Manage": {
"enabled": true,
"props": {

7
src/front/Config/Module/production.json
View File

@ -285,6 +285,13 @@
"labelKey": "invite"
}
},
"ManageCollaborators": {
"enabled": true,
"props": {
"path": "/subscription/manage-collaborators",
"labelKey": "manage_collaborators"
}
},
"Manage": {
"enabled": true,
"props": {

7
src/front/Config/Module/staging.json
View File

@ -285,6 +285,13 @@
"labelKey": "invite"
}
},
"ManageCollaborators": {
"enabled": true,
"props": {
"path": "/subscription/manage-collaborators",
"labelKey": "manage_collaborators"
}
},
"Manage": {
"enabled": true,
"props": {

5
src/pages/subscription/manage-collaborators/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import SubscriptionManageCollaborators from "@Front/Components/Layouts/Subscription/SubscriptionManageCollaborators";
export default function Route() {
return <SubscriptionManageCollaborators />;
}