From a00eee9a8bd298d879dd2a57af5ed0b0f8be954c Mon Sep 17 00:00:00 2001
From: Tsukoyachi <Axel.delille31@gmail.com>
Date: Sat, 21 Sep 2024 21:07:34 +0200
Subject: [PATCH] feat(frontend-workflow): Addition of group billing page

---
 apps/frontend-bff/package-lock.json           | 12 +++
 apps/frontend-bff/src/app/app.tsx             |  3 +-
 apps/frontend-workflow/package-lock.json      | 12 +++
 apps/sample-nestjs/package-lock.json          | 12 +++
 apps/sample-react/package-lock.json           | 12 +++
 libs/ui/common/src/index.ts                   |  3 +-
 .../lib/groupBillingPage/groupBillingPage.css | 90 +++++++++++++++++++
 .../lib/groupBillingPage/groupBillingPage.tsx | 75 ++++++++++++++++
 libs/ui/common/src/lib/orders/orders.tsx      | 18 ++--
 9 files changed, 226 insertions(+), 11 deletions(-)
 create mode 100644 apps/frontend-bff/package-lock.json
 create mode 100644 apps/frontend-workflow/package-lock.json
 create mode 100644 apps/sample-nestjs/package-lock.json
 create mode 100644 apps/sample-react/package-lock.json
 create mode 100644 libs/ui/common/src/lib/groupBillingPage/groupBillingPage.css
 create mode 100644 libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx

diff --git a/apps/frontend-bff/package-lock.json b/apps/frontend-bff/package-lock.json
new file mode 100644
index 0000000..fe1ae75
--- /dev/null
+++ b/apps/frontend-bff/package-lock.json
@@ -0,0 +1,12 @@
+{
+  "name": "frontend-bff",
+  "version": "0.2.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend-bff",
+      "version": "0.2.0"
+    }
+  }
+}
diff --git a/apps/frontend-bff/src/app/app.tsx b/apps/frontend-bff/src/app/app.tsx
index abd5727..deb4b25 100644
--- a/apps/frontend-bff/src/app/app.tsx
+++ b/apps/frontend-bff/src/app/app.tsx
@@ -1,7 +1,7 @@
 import NxWelcome from './nx-welcome';
 
 import { Link, Route, Routes } from 'react-router-dom';
-import { LandingPage, Offers, UiCommon,Orders, Summary } from '@spos/ui/common';
+import { LandingPage, Offers, UiCommon,Orders, GroupBilling, Summary } from '@spos/ui/common';
 
 export function App() {
   return (
@@ -19,6 +19,7 @@ export function App() {
           }
         />
         <Route path="/orders" element={<Orders />} />
+        <Route path="/groupBilling" element={<GroupBilling />} />
 
       </Routes>
       {/* END: routes */}
diff --git a/apps/frontend-workflow/package-lock.json b/apps/frontend-workflow/package-lock.json
new file mode 100644
index 0000000..4d675f7
--- /dev/null
+++ b/apps/frontend-workflow/package-lock.json
@@ -0,0 +1,12 @@
+{
+  "name": "frontend-workflow",
+  "version": "0.2.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend-workflow",
+      "version": "0.2.0"
+    }
+  }
+}
diff --git a/apps/sample-nestjs/package-lock.json b/apps/sample-nestjs/package-lock.json
new file mode 100644
index 0000000..3724d8e
--- /dev/null
+++ b/apps/sample-nestjs/package-lock.json
@@ -0,0 +1,12 @@
+{
+  "name": "sample-nestjs",
+  "version": "0.2.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sample-nestjs",
+      "version": "0.2.2"
+    }
+  }
+}
diff --git a/apps/sample-react/package-lock.json b/apps/sample-react/package-lock.json
new file mode 100644
index 0000000..a17218b
--- /dev/null
+++ b/apps/sample-react/package-lock.json
@@ -0,0 +1,12 @@
+{
+  "name": "sample-react",
+  "version": "0.3.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sample-react",
+      "version": "0.3.2"
+    }
+  }
+}
diff --git a/libs/ui/common/src/index.ts b/libs/ui/common/src/index.ts
index 603e79a..81ed7cf 100644
--- a/libs/ui/common/src/index.ts
+++ b/libs/ui/common/src/index.ts
@@ -2,4 +2,5 @@ export * from './lib/ui-common';
 export * from './lib/tables/landingPage';
 export * from './lib/offers/offers';
 export * from './lib/orders/orders';
-export * from './lib/summary/summary';
\ No newline at end of file
+export * from './lib/summary/summary';
+export * from './lib/groupBillingPage/groupBillingPage';
diff --git a/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.css b/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.css
new file mode 100644
index 0000000..d1d5866
--- /dev/null
+++ b/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.css
@@ -0,0 +1,90 @@
+html {
+  min-height: 100%;
+  width: 100%;
+  padding: 0;
+}
+
+body {
+  background-color: #d9d9d9;
+  font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0;
+
+  min-height: 100vh;
+  width: 100%;
+}
+
+#billing-container {
+  padding-top: 8dvh;
+  padding-left: 5dvw;
+  padding-right: 5dvw;
+
+  min-height: 100vh;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+h2 {
+  font-weight: normal; /* You can change to 400 for regular weight */
+  font-size: 5vw;
+  padding-left: 100px;
+}
+
+#table-title {
+  text-decoration: underline;
+}
+
+#billing-section {
+  margin-top: 2vw;
+}
+
+#billing-section > div:not(:first-child) {
+  margin-top: 2dvh;
+}
+
+table {
+  width: 100%;
+}
+
+table > tbody > tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-left: 3dvw;
+}
+
+td {
+  font-weight: 400;
+  font-size: 3vw;
+
+  align-items: center;
+}
+
+#summary-section {
+  padding-left: 5dvw;
+  padding-right: 5dvw;
+  padding-top: 1vw;
+
+  background-color: #d9d9d9; /* Ajoute un fond clair */
+  padding-bottom: 3vh;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 1); /* Couleur de la ligne de séparation */
+  margin: 20px 0;
+}
+
+#summary-section > div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#summary-section > div > p {
+  font-size: 3vw;
+}
diff --git a/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx b/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx
new file mode 100644
index 0000000..73d566c
--- /dev/null
+++ b/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx
@@ -0,0 +1,75 @@
+import './groupBillingPage.css';
+import { Button, Typography, Box } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+export function GroupBilling() {
+  const navigate = useNavigate();
+  const billingData = [
+    {
+      number : 1,
+      elements : [
+        {quantity : 1, item: {id: 1, name: "Coca", price: 1.5}},
+        {quantity : 2, item: {id: 2, name: "Fried chicken", price: 4.35}}
+      ]
+    },
+    {
+      number : 2,
+      elements : [
+        {quantity : 1, item: {id: 3, name: "Orangina", price: 1.5}},
+        {quantity : 6, item: {id: 4, name: "Mozzarella stick", price: 1}}
+      ]
+    }
+  ];
+
+  const totalPrice = billingData.reduce((total, { elements }) => {
+    return total + elements.reduce((sum, { quantity, item }) => {
+      return sum + quantity * item.price;
+    }, 0);
+  }, 0);
+
+  const validatePayment = () => {
+    console.log({totalPrice})
+    navigate("/")
+}
+
+  return (
+    <div id='billing-container' className='container'>
+      <Box className="group-billing">
+        <Typography align='left'  variant="h1" component="h2" fontSize="8vw" fontWeight="bold">
+          Billing
+        </Typography>
+        <div id="billing-section">
+          {billingData.map(table => (
+            <div key={table.number}>
+              <Typography id='table-title' align='left'  variant="h3" component="h3" fontSize="5vw" fontWeight="bold" >
+                {"Table " + table.number}
+              </Typography>
+              <table>
+                {table.elements.map(element => (
+                  <tbody key={element.item.id}>
+                    <tr>
+                      <td>{element.quantity} x {element.item.name}</td>
+                      <td>{element.quantity * element.item.price}$</td>
+                    </tr>
+                  </tbody>
+                ))}
+              </table>
+            </div>
+          ))}
+        </div>
+      </Box>
+      <Box id="summary-section">
+        <hr />
+        <div>
+          <p>Total : {totalPrice}$</p>
+          <Button onClick={validatePayment} variant="contained" color="inherit"
+            style={{padding: '20px 50px', borderRadius: '50px', fontSize: '4vw'}}>
+            Paid
+          </Button>
+        </div>
+      </Box>
+    </div>
+  );
+}
+
+export default GroupBilling;
diff --git a/libs/ui/common/src/lib/orders/orders.tsx b/libs/ui/common/src/lib/orders/orders.tsx
index cd61fab..2f8cc1e 100644
--- a/libs/ui/common/src/lib/orders/orders.tsx
+++ b/libs/ui/common/src/lib/orders/orders.tsx
@@ -43,10 +43,10 @@ export function Orders() {
                     <Button variant="contained" onClick={togglePopup} className="close-button">
                         Orders
                     </Button>
-                    
-                    <Box sx={{ 
-                        display: 'flex', 
-                        flexDirection: 'column', 
+
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
                         alignItems: 'flex-start',
                         mt: 15,
                         pl: 2,
@@ -54,14 +54,14 @@ export function Orders() {
                         overflowY: 'auto'
                     }}>
                         {Object.keys(ordersData).map((section) => (
-                            <Section 
-                                key={section} 
-                                title={section.charAt(0).toUpperCase() + section.slice(1)} 
-                                orders={ordersData[section]} 
+                            <Section
+                                key={section}
+                                title={section.charAt(0).toUpperCase() + section.slice(1)}
+                                orders={ordersData[section]}
                             />
                         ))}
                     </Box>
-                    
+
                     <Box className="bottom-button">
                         <Button variant="contained" sx={{ width: 500 }}>
                             Serve