Merge remote-tracking branch 'origin/master'

StartUpNationLabs · Sep 23, 2024 · 1b0cf67 · 1b0cf67
2 parents 57ed740 + 3188230
commit 1b0cf67
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 74 deletions.
diff --git a/apps/frontend-bff/manifest/overlays/develop/kustomization.yml b/apps/frontend-bff/manifest/overlays/develop/kustomization.yml
@@ -6,7 +6,7 @@ resources:
 images:
   - name: ghcr.io/startupnationlabs/spos/frontend-bff
     newName: ghcr.io/startupnationlabs/spos/frontend-bff
-    newTag: sha-fe2503a
+    newTag: sha-cc8b5d7
 
 patches:
   - target:

diff --git a/apps/frontend-bff/manifest/overlays/main/kustomization.yml b/apps/frontend-bff/manifest/overlays/main/kustomization.yml
@@ -6,7 +6,7 @@ resources:
 images:
   - name: ghcr.io/startupnationlabs/spos/frontend-bff
     newName: ghcr.io/startupnationlabs/spos/frontend-bff
-    newTag: sha-fe2503a
+    newTag: sha-cc8b5d7
 
 
 patches:

diff --git a/libs/ui/common/CHANGELOG.md b/libs/ui/common/CHANGELOG.md
@@ -0,0 +1,51 @@
+## 0.2.0 (2024-09-22)
+
+
+### 🚀 Features
+
+- **fontend-bff:** Addition of speed dial to pay with group or pay with table ([d332c58](https://github.com/StartUpNationLabs/spos/commit/d332c58))
+
+
+### ❤️  Thank You
+
+- Tsukoyachi
+
+## 0.1.0 (2024-09-22)
+
+
+### 🚀 Features
+
+- **frontend-workflow:** Addition of group billing page ([a00eee9](https://github.com/StartUpNationLabs/spos/commit/a00eee9))
+
+- **frontend-workflow:** Addition of table billing page ([0273004](https://github.com/StartUpNationLabs/spos/commit/0273004))
+
+- **frontend-workflow:** add state management to landingPage.tsx ([a57f971](https://github.com/StartUpNationLabs/spos/commit/a57f971))
+
+- **frontend-workflow:** add groups state management ([5043de5](https://github.com/StartUpNationLabs/spos/commit/5043de5))
+
+- **tables:** add useFreeTables.tsx hook ([4eaf36f](https://github.com/StartUpNationLabs/spos/commit/4eaf36f))
+
+- **tables:** add group creation ([6de43a3](https://github.com/StartUpNationLabs/spos/commit/6de43a3))
+
+- **tables:** add group creation ([7d49549](https://github.com/StartUpNationLabs/spos/commit/7d49549))
+
+- **tables:** add link to commands from reservation ([63d2ccb](https://github.com/StartUpNationLabs/spos/commit/63d2ccb))
+
+- **frontend-bff:** Fix layout of Table and group Billing ([82a7952](https://github.com/StartUpNationLabs/spos/commit/82a7952))
+
+
+### 🩹 Fixes
+
+- lint error in offers.tsx ([be7353c](https://github.com/StartUpNationLabs/spos/commit/be7353c))
+
+- **frontend-workflow:** landing page ([05f09a5](https://github.com/StartUpNationLabs/spos/commit/05f09a5))
+
+- **tables:** naming ([d923877](https://github.com/StartUpNationLabs/spos/commit/d923877))
+
+- **frontend-bff:** Remove Unwanted test data for group billing ([761987c](https://github.com/StartUpNationLabs/spos/commit/761987c))
+
+
+### ❤️  Thank You
+
+- Apoorva Srinivas Appadoo
+- Tsukoyachi
diff --git a/libs/ui/common/package.json b/libs/ui/common/package.json
@@ -1,4 +1,4 @@
 {
   "name": "ui-common",
-  "version": "0.0.0"
+  "version": "0.2.0"
 }
diff --git a/libs/ui/common/src/lib/commandsR/commands.tsx b/libs/ui/common/src/lib/commandsR/commands.tsx
@@ -1,33 +1,78 @@
 import React, { useState } from 'react';
-import { Box } from '@mui/material';
+import { Box, SpeedDial } from '@mui/material';
 import NavBar from '../utils/navbar';
 import Orders from '../orders/orders';
 import BackButton from '../utils/backButton';
 import OrderingChoices from './orederingChoices';
 import { setSelectedTableById, tablesData } from '../utils/tableUtils';
-
+//SpeedDial imports
+import SpeedDialIcon from '@mui/material/SpeedDialIcon';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import TableRestaurantIcon from '@mui/icons-material/TableRestaurant';
+import GroupsIcon from '@mui/icons-material/Groups';
+import CloseIcon from '@mui/icons-material/Close';
+import DollarIcon from '@mui/icons-material/AttachMoney';
+import { useNavigate } from 'react-router-dom';
 
 export function Commands() {
+    const navigate = useNavigate();
     const [selectedTable, setSelectedTable] = useState(tablesData[1]);
 
+    const speedDialActions = [
+      { icon: <TableRestaurantIcon />, name: 'Table Payment', operation: onClickTableBilling },
+      { icon: <GroupsIcon />, name: 'Group Payment', operation: onClickGroupBilling }
+    ];
+
+    function onClickBackButton() {
+      console.log('clicked on back button... redirection to be implemented');
+      navigate("/");
+    }
+
+    function onClickTableBilling() {
+      //TODO: Do the redirection with the table id
+      console.log('table billing button... redirection to be implemented');
+      navigate("/tableBilling");
+    }
+
+    function onClickGroupBilling() {
+      //TODO: Do the redirection with the group id
+      console.log('group billing button... redirection to be implemented');
+      navigate("/groupBilling");
+    }
+
     return (
         <div>
-            <Box sx={{ minHeight: '100dvh', 
-                display: 'flex', 
-                flexDirection: 'row', 
+            <Box sx={{ minHeight: '100dvh',
+                display: 'flex',
+                flexDirection: 'row',
                 width: '100%' }}>
-                <Box sx={{ boxSizing: 'border-box', 
-                            width: 'fit-content', 
+                <Box sx={{ boxSizing: 'border-box',
+                            width: 'fit-content',
                             borderRight: '2px solid #000' }}>
                     <NavBar
                         tables={tablesData}
-                        setSelectedTable={(tableId) =>
+                        setSelectedTable={(tableId: number) =>
                             setSelectedTableById(tablesData, tableId, setSelectedTable)
                         }
                     />
+                    <SpeedDial
+                      ariaLabel="SpeedDial basic example"
+                      sx={{ position: 'absolute', bottom: 16, left: '2.5dvh'}}
+                      icon={<SpeedDialIcon openIcon={<CloseIcon />} icon={<DollarIcon />} />}
+                      FabProps={{ size: 'large'}}
+                    >
+                      {speedDialActions.map((action) => (
+                        <SpeedDialAction
+                          key={action.name}
+                          icon={action.icon}
+                          tooltipTitle={action.name}
+                          onClick={action.operation}
+                        />
+                      ))}
+                    </SpeedDial>
                 </Box>
-                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}> 
-                    <BackButton color={'black'} top={20} left={150}></BackButton>
+                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                    <BackButton onClick={onClickBackButton} color={'black'} top={20} left={150}></BackButton>
                     {selectedTable && <OrderingChoices selectedTable={selectedTable} />}
                     <Orders></Orders>
                 </Box>

diff --git a/libs/ui/common/src/lib/commandsR/orederingChoices.tsx b/libs/ui/common/src/lib/commandsR/orederingChoices.tsx
@@ -82,11 +82,11 @@ export const OrderingChoices = ({ selectedTable }) => {
             className="custom-scrollbar"
             sx={{
                 padding: '16px',
-                marginTop: '90px',
+                marginTop: '110px', 
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '14px',
-                height: '460px',
+                height: '80vh',
                 overflowY: 'auto',
                 border: '1px solid #ccc',
                 width: 'calc(100% - 32px)',

diff --git a/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx b/libs/ui/common/src/lib/groupBillingPage/groupBillingPage.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import BackButton from "../utils/backButton";
 
 export function GroupBilling() {
   const navigate = useNavigate();
@@ -31,6 +32,11 @@ export function GroupBilling() {
     navigate("/");
   }
 
+  function onClickBackButton() {
+    console.log('clicked on back button... redirection to be implemented');
+    navigate("/commands");
+  }
+
   return (
     <Box sx={{ backgroundColor: '#d9d9d9', minHeight: '100dvh', paddingTop: '5dvh', paddingLeft: '5dvw', paddingRight: '5dvw',
       display: 'flex', flexDirection: 'column', justifyContent: 'space-around'}}>
@@ -41,6 +47,7 @@ export function GroupBilling() {
         <Box sx={{overflow: 'auto', maxHeight: '70dvh'}}>
           {billingData.map((table, index) => (
             <Box key={index} sx={{ margin: '2vh 0', backgroundColor: '#d9d9d9' }}>
+              <BackButton onClick={onClickBackButton} color={'black'} top={20} left={20}></BackButton>
               <Typography variant="h3" component="h3" sx={{ fontSize: '5vw', fontWeight: 'bold', textDecoration: 'underline' }}>
                 {"Table " + table.number}
               </Typography>

diff --git a/libs/ui/common/src/lib/offers/offers.tsx b/libs/ui/common/src/lib/offers/offers.tsx
@@ -19,9 +19,9 @@ export function Offers() {
 
   return (
     <Box display={"flex"} alignItems={"center"} flexDirection={"column"} justifyContent={"start"}
-         width={"100%"}
+         width={"100vw"}
          height={"100vh"}>
-      <Typography align='center' variant="h1" component="h2" fontWeight="bold" paddingTop={"150px"}>
+      <Typography align='center' variant="h1" component="h2" fontWeight="bold" paddingTop={"17vh"}>
         Offers
       </Typography>
       <Box
@@ -30,17 +30,17 @@ export function Offers() {
         display={"flex"}
         flexDirection={"column"}
         alignItems={"center"}
-        paddingTop={"50px"}
-
+        paddingTop={"7vh"}
+        width="60vw"
       >
         {offers.map((offer) => (
           <Button onClick={onClick(offer)} variant="contained" fullWidth={true} style={{
             borderRadius: "60px",
             color: 'white',
-            margin: '10px',
+            margin: '10px', 
             background: '#313131',
           }} key={offer.name}>
-            <Typography variant={"h6"}>{offer.name}</Typography>
+            <Typography variant={"h3"}>{offer.name}</Typography>
           </Button>
         ))}
       </Box>

diff --git a/libs/ui/common/src/lib/orders/orders.css b/libs/ui/common/src/lib/orders/orders.css
@@ -22,6 +22,7 @@
     border-top-left-radius: 90px;
     border-top-right-radius: 90px;
     padding-top: 40px; 
+    margin-left: 135px;
 }
 
 .close-button {

diff --git a/libs/ui/common/src/lib/orders/orders.tsx b/libs/ui/common/src/lib/orders/orders.tsx
@@ -31,7 +31,7 @@ export function Orders() {
     const togglePopup = () => setOpen(prevOpen => !prevOpen);
 
     return (
-        <Box margin={10} marginTop="20vw">
+        <Box margin={10}>
             <Box className="bottom-button">
             <Button
                     onClick={togglePopup}