✨ Pages success and error done
This commit is contained in:
Maxime Lalo
parent
8814a8c5ea
commit
138954a2f8
9
package-lock.json
generated
9
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/styled": "^11.10.6",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"@mui/material": "^5.11.13",
|
||||
"@types/node": "18.15.1",
|
||||
"@types/react": "18.0.28",
|
||||
@ -466,6 +467,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
||||
},
|
||||
"node_modules/@heroicons/react": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
|
||||
"integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
|
||||
"peerDependencies": {
|
||||
"react": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.14",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "next dev -p 5005",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/styled": "^11.10.6",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"@mui/material": "^5.11.13",
|
||||
"@types/node": "18.15.1",
|
||||
"@types/react": "18.0.28",
|
||||
|
||||
@ -96,6 +96,10 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&[fullwidthattr="false"] {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&[touppercase="false"] {
|
||||
text-transform: inherit;
|
||||
}
|
||||
@ -110,4 +114,4 @@
|
||||
line-height: 22px;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,6 +115,14 @@
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&.Caption_14-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&.re-hover {
|
||||
color: $re-hover;
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ export enum ITypo {
|
||||
P_ERR_16 = "Paragraphe-16-error",
|
||||
|
||||
CAPTION_14 = "Caption_14",
|
||||
CAPTION_14_SB = "Caption_14-semibold",
|
||||
}
|
||||
|
||||
export enum ITypoColor {
|
||||
|
||||
30
src/front/Components/Elements/MessageBox/classes.module.scss
Normal file
30
src/front/Components/Elements/MessageBox/classes.module.scss
Normal file
@ -0,0 +1,30 @@
|
||||
.root {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 16px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: var(--Opium-200);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--Warning-100);
|
||||
}
|
||||
|
||||
&.success {
|
||||
border: 1px solid var(--green-flash);
|
||||
background: #12bf4d0d;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid var(--red-soft);
|
||||
background: #f087711a;
|
||||
}
|
||||
}
|
||||
39
src/front/Components/Elements/MessageBox/index.tsx
Normal file
39
src/front/Components/Elements/MessageBox/index.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
export type IProps = {
|
||||
type: "info" | "warning" | "success" | "error";
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function MessageBox(props: IProps) {
|
||||
const { className, type, children } = props;
|
||||
return (
|
||||
<div className={classNames(className, classes["root"], classes[type])}>
|
||||
{getIcon(type)}
|
||||
<div className={classes["content"]}>
|
||||
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
|
||||
{children}
|
||||
</Typography>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function getIcon(type: IProps["type"]) {
|
||||
switch (type) {
|
||||
case "info":
|
||||
return <InformationCircleIcon />;
|
||||
case "warning":
|
||||
return <ExclamationTriangleIcon />;
|
||||
case "success":
|
||||
return <InformationCircleIcon />;
|
||||
case "error":
|
||||
return <InformationCircleIcon />;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
export default function SubscriptionClientInfos() {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
Informations client
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
john.doe@contact.fr
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
Adresse de facturation
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
John Doe <br />
|
||||
23 rue taitbout,
|
||||
<br />
|
||||
75009 Paris
|
||||
<br />
|
||||
France
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
.root {
|
||||
display: flex;
|
||||
gap: 104px;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
width: 548px;
|
||||
}
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--grey-medium);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import classes from "./classes.module.scss";
|
||||
import SubscriptionTicket from "../SubscriptionTicket";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import MessageBox from "@Front/Components/Elements/MessageBox";
|
||||
import SubscriptionClientInfos from "../SubscriptionClientInfos";
|
||||
import Button from "@Front/Components/DesignSystem/Button";
|
||||
|
||||
export default function SubscriptionError() {
|
||||
return (
|
||||
<DefaultTemplate title="Title" hasHeaderLinks={false}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["left"]}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
||||
Paiement échoué
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["alert"]}>
|
||||
<MessageBox type={"error"}>
|
||||
Votre transaction n'a pas pu être complétée.
|
||||
<br />
|
||||
<br />
|
||||
Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
|
||||
vérifier vos informations de paiement et essayer à nouveau.
|
||||
</MessageBox>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["client-infos"]}>
|
||||
<SubscriptionClientInfos />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<Button>Réessayer le paiement</Button>
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<SubscriptionTicket />
|
||||
</div>
|
||||
</div>
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
.root {
|
||||
display: flex;
|
||||
gap: 104px;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
width: 548px;
|
||||
}
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--grey-medium);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import classes from "./classes.module.scss";
|
||||
import SubscriptionTicket from "../SubscriptionTicket";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import MessageBox from "@Front/Components/Elements/MessageBox";
|
||||
import SubscriptionClientInfos from "../SubscriptionClientInfos";
|
||||
import Button from "@Front/Components/DesignSystem/Button";
|
||||
|
||||
export default function SubscriptionSuccess() {
|
||||
return (
|
||||
<DefaultTemplate title="Title" hasHeaderLinks={false}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["left"]}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
||||
Abonnement réussi !
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["alert"]}>
|
||||
<MessageBox type={"success"}>
|
||||
Votre transaction a été effectuée avec succès !
|
||||
<br />
|
||||
<br />
|
||||
Votre abonnement a été pris en compte et est désormais actif.
|
||||
</MessageBox>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["client-infos"]}>
|
||||
<SubscriptionClientInfos />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<Button>Inviter vos collaborateurs</Button>
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<SubscriptionTicket />
|
||||
</div>
|
||||
</div>
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
.root {
|
||||
width: 372px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
box-shadow: 0px 8px 10px 0px #00000012;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
.top-category {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--grey-medium);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {};
|
||||
export default function SubscriptionTicket(props: IProps) {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["top-category"]}>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
Récapitulatif
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
|
||||
<div className={classes["top-category"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
Forfait standard
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["category"]}>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
Plan individuel
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
99 €
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
2 collaborateurs
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
13,98 €
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["sub-line"]}>
|
||||
<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
|
||||
6,99 € x 2
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["category"]}>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
Sous-total
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
112,98 €
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
FR TVA
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
14 €
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
Taxes
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
14 €
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["category"]}>
|
||||
<div className={classes["line"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
|
||||
Total
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
|
||||
112,98 €
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
src/pages/subscription/error/index.tsx
Normal file
5
src/pages/subscription/error/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import SubscriptionError from "@Front/Components/Layouts/Subscription/SubscriptionError";
|
||||
|
||||
export default function Route() {
|
||||
return <SubscriptionError />;
|
||||
}
|
||||
5
src/pages/subscription/success/index.tsx
Normal file
5
src/pages/subscription/success/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import SubscriptionSuccess from "@Front/Components/Layouts/Subscription/SubscriptionSuccess";
|
||||
|
||||
export default function Route() {
|
||||
return <SubscriptionSuccess />;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user