diff --git a/package-lock.json b/package-lock.json index 6bff1c1b..e65d49ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f95223f1..90100406 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index a1dc4704..1b7192e5 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -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; } -} \ No newline at end of file +} diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 0efa8539..6a68d909 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -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; } diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 1d1323f5..0e812ac4 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -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 { diff --git a/src/front/Components/Elements/MessageBox/classes.module.scss b/src/front/Components/Elements/MessageBox/classes.module.scss new file mode 100644 index 00000000..1828a2c5 --- /dev/null +++ b/src/front/Components/Elements/MessageBox/classes.module.scss @@ -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; + } +} diff --git a/src/front/Components/Elements/MessageBox/index.tsx b/src/front/Components/Elements/MessageBox/index.tsx new file mode 100644 index 00000000..883c66ff --- /dev/null +++ b/src/front/Components/Elements/MessageBox/index.tsx @@ -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 ( +
+ {getIcon(type)} +
+ + {children} + + + {children} +
+
+ ); + + function getIcon(type: IProps["type"]) { + switch (type) { + case "info": + return ; + case "warning": + return ; + case "success": + return ; + case "error": + return ; + } + } +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/classes.module.scss new file mode 100644 index 00000000..69bcd9f5 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/classes.module.scss @@ -0,0 +1,5 @@ +.root { + display: flex; + flex-direction: column; + gap: 32px; +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/index.tsx new file mode 100644 index 00000000..ed03f97b --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionClientInfos/index.tsx @@ -0,0 +1,26 @@ +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import classes from "./classes.module.scss"; + +export default function SubscriptionClientInfos() { + return ( +
+ + Informations client + + + john.doe@contact.fr + + + Adresse de facturation + + + John Doe
+ 23 rue taitbout, +
+ 75009 Paris +
+ France + +
+ ); +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss new file mode 100644 index 00000000..c0508d64 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss @@ -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); + } +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx new file mode 100644 index 00000000..721e2bd1 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx @@ -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 ( + +
+
+
+ + Paiement échoué + +
+
+ + Votre transaction n'a pas pu être complétée. +
+
+ 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. + +
+
+
+ +
+
+ +
+
+ +
+
+ + ); +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss new file mode 100644 index 00000000..c0508d64 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss @@ -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); + } +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx new file mode 100644 index 00000000..295de436 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx @@ -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 ( + +
+
+
+ + Abonnement réussi ! + +
+
+ + Votre transaction a été effectuée avec succès ! +
+
+ Votre abonnement a été pris en compte et est désormais actif. + +
+
+
+ +
+
+ +
+
+ +
+
+ + ); +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionTicket/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionTicket/classes.module.scss new file mode 100644 index 00000000..a0312271 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionTicket/classes.module.scss @@ -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); + } +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionTicket/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionTicket/index.tsx new file mode 100644 index 00000000..89d34d4c --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionTicket/index.tsx @@ -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 ( +
+
+ + Récapitulatif + +
+
+ +
+ + Forfait standard + +
+
+
+
+ + Plan individuel + + + 99 € + +
+
+ + 2 collaborateurs + + + 13,98 € + +
+
+ + 6,99 € x 2 + +
+
+
+
+
+ + Sous-total + + + 112,98 € + +
+
+ + FR TVA + + + 14 € + +
+
+ + Taxes + + + 14 € + +
+
+
+
+
+ + Total + + + 112,98 € + +
+
+
+ ); +} diff --git a/src/pages/subscription/error/index.tsx b/src/pages/subscription/error/index.tsx new file mode 100644 index 00000000..52905a5b --- /dev/null +++ b/src/pages/subscription/error/index.tsx @@ -0,0 +1,5 @@ +import SubscriptionError from "@Front/Components/Layouts/Subscription/SubscriptionError"; + +export default function Route() { + return ; +} diff --git a/src/pages/subscription/success/index.tsx b/src/pages/subscription/success/index.tsx new file mode 100644 index 00000000..95ca0b27 --- /dev/null +++ b/src/pages/subscription/success/index.tsx @@ -0,0 +1,5 @@ +import SubscriptionSuccess from "@Front/Components/Layouts/Subscription/SubscriptionSuccess"; + +export default function Route() { + return ; +}