kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-01-18 07:42:39 +07:00
parent b111195491
commit 6b95656c4d
12 changed files with 548 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/App.js
View File

@@ -53,6 +53,7 @@ function App() {
const [guestSideOfClerk, setGuestSideOfClerk] = useState(null); const [guestSideOfClerk, setGuestSideOfClerk] = useState(null);
const [guestSides, setGuestSides] = useState([]); const [guestSides, setGuestSides] = useState([]);
const [shopId, setShopId] = useState(""); const [shopId, setShopId] = useState("");
const [shopIdentifier, setShopIdentifier] = useState("");
const [table, setTable] = useState([]); const [table, setTable] = useState([]);
const [totalItemsCount, setTotalItemsCount] = useState(0); const [totalItemsCount, setTotalItemsCount] = useState(0);
const [deviceType, setDeviceType] = useState(""); const [deviceType, setDeviceType] = useState("");
@@ -94,12 +95,12 @@ function App() {
}; };
}, [shopId]); }, [shopId]);
const handleSetParam = async ({ shopId, tableCode }) => { const handleSetParam = async ({ shopIdentifier, tableCode }) => {
setShopId(shopId); setShopIdentifier(shopIdentifier);
if (tableCode) if (tableCode)
if (table.length == 0) { if (table.length == 0) {
const gettable = await getTableByCode(shopId, tableCode); const gettable = await getTableByCode(shopIdentifier, tableCode);
if (gettable) setTable(gettable); if (gettable) setTable(gettable);
} }
}; };
@@ -108,8 +109,9 @@ function App() {
const fetchData = async () => { const fetchData = async () => {
console.log("gettingItems"); console.log("gettingItems");
try { try {
const { response, cafe, data } = await getItemTypesWithItems(shopId); const { response, cafe, data } = await getItemTypesWithItems(shopIdentifier);
if (response.status === 200) { if (response.status === 200) {
setShopId(cafe.cafeId)
setShop(cafe); setShop(cafe);
setShopItems(data); setShopItems(data);
console.log(data) console.log(data)
@@ -124,11 +126,11 @@ function App() {
// Update local storage by removing unavailable items // Update local storage by removing unavailable items
const updatedLocalStorage = const updatedLocalStorage =
JSON.parse(localStorage.getItem("cart")) || []; JSON.parse(localStorage.getItem("cart")) || [];
const newLocalStorage = updatedLocalStorage.map((cafe) => { const newLocalStorage = updatedLocalStorage.map((cafee) => {
if (cafe.cafeId === shopId) { if (cafee.cafeId === cafe.cafeId) {
return { return {
...cafe, ...cafee,
items: cafe.items.filter((item) => items: cafee.items.filter((item) =>
filteredData.some((filtered) => filteredData.some((filtered) =>
filtered.itemList.some( filtered.itemList.some(
(i) => i.itemId === item.itemId && i.availability (i) => i.itemId === item.itemId && i.availability
@@ -137,7 +139,7 @@ function App() {
), ),
}; };
} }
return cafe; return cafee;
}); });
localStorage.setItem("cart", JSON.stringify(newLocalStorage)); localStorage.setItem("cart", JSON.stringify(newLocalStorage));
@@ -150,8 +152,8 @@ function App() {
} }
}; };
if (shopId !== "") fetchData(); if (shopIdentifier !== "") fetchData();
}, [shopId]); }, [shopIdentifier]);
const rmConnectedGuestSides = async (gueseSideSessionId) => { const rmConnectedGuestSides = async (gueseSideSessionId) => {
const sessionLeft = await removeConnectedGuestSides(gueseSideSessionId); const sessionLeft = await removeConnectedGuestSides(gueseSideSessionId);
@@ -265,7 +267,7 @@ function App() {
navigate("/guest-side"); navigate("/guest-side");
}); });
socket.on("updateQueue", ({queue}) => { socket.on("updateQueue", ({ queue }) => {
setQueue(queue); // Only set the queue if it's a valid non-empty array setQueue(queue); // Only set the queue if it's a valid non-empty array
console.log("Updated Queue:", queue); // Log the valid queue console.log("Updated Queue:", queue); // Log the valid queue
@@ -533,10 +535,11 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/:tableCode?" path="/:shopIdentifier/:tableCode?"
element={ element={
<> <>
<CafePage <CafePage
shopId={shopId}
table={table} table={table}
sendParam={handleSetParam} sendParam={handleSetParam}
welcomePageConfig={shop.welcomePageConfig || false} welcomePageConfig={shop.welcomePageConfig || false}
@@ -556,7 +559,7 @@ function App() {
/> />
<Footer <Footer
showTable={true} showTable={true}
shopId={shopId} shopId={shopIdentifier}
table={table} table={table}
cartItemsLength={totalItemsCount} cartItemsLength={totalItemsCount}
selectedPage={0} selectedPage={0}
@@ -565,7 +568,7 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/:tableCode?/search" path="/:shopIdentifier/:tableCode?/search"
element={ element={
<> <>
<SearchResult <SearchResult
@@ -579,7 +582,7 @@ function App() {
setModal={setModal} // Pass the function to open modal setModal={setModal} // Pass the function to open modal
/> />
<Footer <Footer
shopId={shopId} shopId={shopIdentifier}
table={table} table={table}
cartItemsLength={totalItemsCount} cartItemsLength={totalItemsCount}
selectedPage={1} selectedPage={1}
@@ -588,10 +591,11 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/:tableCode?/cart" path="/:shopIdentifier/:tableCode?/cart"
element={ element={
<> <>
<Cart <Cart
shopId={shopId}
table={table} table={table}
sendParam={handleSetParam} sendParam={handleSetParam}
socket={socket} socket={socket}
@@ -599,7 +603,7 @@ function App() {
deviceType={deviceType} deviceType={deviceType}
/> />
<Footer <Footer
shopId={shopId} shopId={shopIdentifier}
table={table} table={table}
cartItemsLength={totalItemsCount} cartItemsLength={totalItemsCount}
selectedPage={2} selectedPage={2}
@@ -608,17 +612,18 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/:tableCode?/invoice" path="/:shopIdentifier/:tableCode?/invoice"
element={ element={
<> <>
<Invoice <Invoice
shopId={shopId}
table={table} table={table}
sendParam={handleSetParam} sendParam={handleSetParam}
socket={socket} socket={socket}
deviceType={deviceType} deviceType={deviceType}
/> />
<Footer <Footer
shopId={shopId} shopId={shopIdentifier}
table={table} table={table}
cartItemsLength={totalItemsCount} cartItemsLength={totalItemsCount}
selectedPage={2} selectedPage={2}
@@ -627,15 +632,16 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/:tableCode?/transactions" path="/:shopIdentifier/:tableCode?/transactions"
element={ element={
<> <>
<Transactions <Transactions
shopId={shopId}
sendParam={handleSetParam} sendParam={handleSetParam}
deviceType={deviceType} deviceType={deviceType}
/> />
<Footer <Footer
shopId={shopId} shopId={shopIdentifier}
table={table} table={table}
cartItemsLength={totalItemsCount} cartItemsLength={totalItemsCount}
selectedPage={3} selectedPage={3}
@@ -644,7 +650,7 @@ function App() {
} }
/> />
<Route <Route
path="/:shopId/guest-side-login" path="/:shopIdentifier/guest-side-login"
element={<GuestSideLogin shopId={shopId} socket={socket} />} element={<GuestSideLogin shopId={shopId} socket={socket} />}
/> />
<Route path="/guest-side" element={<GuestSide socket={socket} />} /> <Route path="/guest-side" element={<GuestSide socket={socket} />} />

7
src/components/ButtonWithReplica.css
View File

@@ -64,7 +64,7 @@
} }
.bussinessName.active { .bussinessName.active {
top: -1000%; top: -900%;
position: absolute; position: absolute;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
width: 60vw; width: 60vw;
@@ -75,12 +75,13 @@
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.bussinessName h2 { .bussinessName h2 {
overflow-wrap: break-word;
color: inherit; /* Ensures that it inherits the color from the parent */ color: inherit; /* Ensures that it inherits the color from the parent */
} }
.bussinessQR { .bussinessQR {
position: absolute; position: absolute;
height: 25vh; height: 480%;
width: 25vh; width: 480%;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);

2
src/components/ButtonWithReplica.js
View File

@@ -60,7 +60,7 @@ const ButtonWithReplica = ({
try { try {
console.log(paymentUrl); console.log(paymentUrl);
const qrv = await decodeQRCodeFromUrl(paymentUrl); const qrv = await decodeQRCodeFromUrl(paymentUrl);
setQRValue(qrv); setQRValue('00020101021126760024ID.CO.SPEEDCASH.MERCHANT01189360081530001108500215ID10210011085060303UBE51440014ID.CO.QRIS.WWW0215ID20211101828900303UBE5204829953033605802ID5908DINNCAFE6008SURABAYA61056029462260506S155880105280940703A0163041E7B');
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }

2
src/components/Header.js
View File

@@ -316,7 +316,7 @@ const Header = ({
</Title> </Title>
<div style={{ visibility: showProfile ? "visible" : "hidden" }}> <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
<ProfileImage <ProfileImage
src={user.username == undefined ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"} src={user.username == undefined && shopImage && !shopImage.includes('undefined') ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
alt="Profile" alt="Profile"
onClick={user.username !== undefined ? handleImageClick : null} onClick={user.username !== undefined ? handleImageClick : null}
animate={showRectangle && animate} animate={showRectangle && animate}

474
src/components/TablesPage.js
View File

@@ -176,6 +176,480 @@ const SetPaymentQr = ({ shop }) => {
<div style={styles.container}> <div style={styles.container}>
<h3 style={styles.title}>QR kedai</h3> <h3 style={styles.title}>QR kedai</h3>
<div style={{ height: 80, position: 'relative', scale: '80%' }}>
<div
style={{
width: '100%',
height: 38,
left: 0,
top: 42,
position: 'absolute',
zIndex: 1,
}}
>
<div
style={{
width: '100%',
height: 38,
left: 0,
top: 0,
position: 'absolute',
overflow: 'hidden'
}}
>
<div
style={{
width: '100%',
height: 38,
left: 0,
top: 0,
position: 'absolute',
background: '#35363A',
boxShadow: '0px -1px 0px #DADCE0 inset',
}}
/>
<div
style={{
width: 51,
height: 22,
left: 1375,
top: 8,
position: 'absolute',
}}
>
<div
style={{
width: 16,
height: 16,
left: 35,
top: 3,
position: 'absolute',
}}
>
<img
style={{
width: 3,
height: 12,
left: 6.67,
top: 2,
position: 'absolute',
}}
src='https://via.placeholder.com/3x12'
/>
</div>
<img
style={{
width: 22,
height: 22,
left: 0,
top: 0,
position: 'absolute',
borderRadius: 9999,
}}
src='https://via.placeholder.com/22x22'
/>
</div>
<div
style={{
width: '100%',
height: 28,
left: 134,
top: 5,
position: 'absolute',
}}
>
<div
style={{
width: '100%',
height: 28,
left: 0,
top: 0,
position: 'absolute',
background: '#202124',
borderRadius: 14,
}}
/>
<div
style={{
width: 16,
height: 16,
left: 1199,
top: 6,
position: 'absolute',
}}
>
<img
style={{
width: 12,
height: 11.47,
left: 2,
top: 2,
position: 'absolute',
}}
src='https://via.placeholder.com/12x11'
/>
</div>
<div
style={{
width: 165,
height: 16,
left: 33,
top: 6,
position: 'absolute',
}}
>
<div
style={{
left: 0,
top: 0,
position: 'absolute',
justifyContent: 'flex-start',
alignItems: 'center',
display: 'inline-flex',
}}
>
<div
style={{
color: 'white',
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: '400',
letterSpacing: 0.25,
wordWrap: 'break-word',
}}
>
kedaimaster.com/
</div>
<div
style={{
color: '#86888A',
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: '400',
letterSpacing: 0.25,
wordWrap: 'break-word',
}}
>
galauers
</div>
</div>
</div>
<div
style={{
width: 12,
height: 12,
left: 11,
top: 8,
position: 'absolute',
}}
>
<img
style={{
width: 8,
height: 10.5,
left: 2,
top: 0.5,
position: 'absolute',
}}
src='https://via.placeholder.com/8x10'
/>
</div>
</div>
<div
style={{
width: 109,
height: 16,
left: 12,
top: 11,
position: 'absolute',
}}
>
<div
style={{
width: 16,
height: 16,
left: 93,
top: 0,
position: 'absolute',
}}
>
<img
style={{
width: 12,
height: 12,
left: 2,
top: 2,
position: 'absolute',
}}
src='https://via.placeholder.com/12x12'
/>
</div>
<div
style={{
width: 16,
height: 16,
left: 62,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: 12,
height: 12,
left: 2,
top: 2,
position: 'absolute',
background: 'white',
}}
></div>
</div>
<div
style={{
width: 16,
height: 16,
left: 31,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: 12,
height: 11.69,
left: 2,
top: 2,
position: 'absolute',
background: '#86888A',
}}
></div>
</div>
<div
style={{
width: 16,
height: 16,
left: 0,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: 12,
height: 11.69,
left: 2,
top: 2,
position: 'absolute',
background: 'white',
}}
></div>
</div>
</div>
</div>
</div>
<div
style={{
width: '100%',
height: 42,
left: 0,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: '100%',
height: 42,
left: 0,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: '100%',
height: 42,
left: 0,
top: 0,
position: 'absolute',
background: '#202124',
boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
}}
/>
<div
style={{
width: 167,
height: 34,
left: 72,
top: 8,
position: 'absolute',
}}
>
<div
style={{
width: 131,
height: 34,
left: 8,
top: 0,
position: 'absolute',
}}
>
<div
style={{
left: -6,
top: 0,
position: 'absolute',
justifyContent: 'flex-start',
alignItems: 'center',
gap: 8,
display: 'inline-flex',
}}
>
<div
style={{
justifyContent: 'flex-start',
alignItems: 'flex-start',
display: 'flex',
}}
>
<div
style={{ width: 6, height: 8, background: '#35363A' }}
></div>
<div
style={{
padding: 8,
background: '#35363A',
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
overflow: 'hidden',
justifyContent: 'flex-start',
alignItems: 'center',
gap: 9,
display: 'flex',
}}
>
<img
style={{ width: 16, height: 16 }}
src='https://via.placeholder.com/16x16'
/>
<div>
<span
style={{
color: 'white',
fontSize: 12,
fontFamily: 'Roboto',
fontWeight: '400',
letterSpacing: 0.2,
wordWrap: 'break-word',
}}
>
KedaiMaster
</span>
<span
style={{
color: '#35363A',
fontSize: 12,
fontFamily: 'Roboto',
fontWeight: '400',
letterSpacing: 0.2,
wordWrap: 'break-word',
}}
>
.
</span>
</div>
<div
style={{ width: 18, height: 18, position: 'relative' }}
>
<div
style={{
width: 7.5,
height: 7.5,
left: 5.25,
top: 5.25,
position: 'absolute',
background: 'white',
}}
></div>
</div>
</div>
<div
style={{
width: 6,
height: 8,
transform: 'rotate(180deg)',
transformOrigin: '0 0',
background: '#35363A',
}}
></div>
</div>
<div style={{ width: 20, height: 20, position: 'relative' }}>
<div
style={{
width: 13.33,
height: 13.33,
left: 3.33,
top: 3.33,
position: 'absolute',
background: '#BDC1C6',
}}
></div>
</div>
</div>
</div>
</div>
<div
style={{
width: 52,
height: 12,
left: 13,
top: 15.5,
position: 'absolute',
}}
>
<div
style={{
width: 12,
height: 12,
left: 40,
top: 0,
position: 'absolute',
background: '#27CA40',
borderRadius: 9999,
border: '0.50px #3EAF3F solid',
}}
/>
<div
style={{
width: 12,
height: 12,
left: 20,
top: 0,
position: 'absolute',
background: '#FFC130',
borderRadius: 9999,
border: '0.50px #E1A325 solid',
}}
/>
<div
style={{
width: 12,
height: 12,
left: 0,
top: 0,
position: 'absolute',
background: '#FF6058',
borderRadius: 9999,
border: '0.50px #E14942 solid',
}}
/>
</div>
</div>
</div>
</div>
<div <div
id="qr-code-container" id="qr-code-container"
style={{ style={{

22
src/helpers/cafeHelpers.js
View File

@@ -62,6 +62,28 @@ export const saveWelcomePageConfig = async (cafeId, details) => {
}; };
export async function getCafeByIdentifier(cafeIdentifyName) {
try {
const response = await fetch(
`${API_BASE_URL}/cafe/get-cafeId/` + cafeIdentifyName,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
return -1;
}
const cafeId = await response.json();
return cafeId;
} catch (error) {
return -1;
}
}
export async function getOwnedCafes(userId) { export async function getOwnedCafes(userId) {
try { try {
const response = await fetch( const response = await fetch(

5
src/pages/CafePage.js
View File

@@ -24,6 +24,7 @@ import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
import WelcomePage from "./WelcomePage.js"; import WelcomePage from "./WelcomePage.js";
function CafePage({ function CafePage({
shopId,
table, table,
sendParam, sendParam,
welcomePageConfig, welcomePageConfig,
@@ -44,8 +45,8 @@ function CafePage({
const location = useLocation(); const location = useLocation();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const token = searchParams.get("token"); const token = searchParams.get("token");
const { shopId, tableCode } = useParams(); const { shopIdentifier, tableCode } = useParams();
sendParam({ shopId, tableCode }); sendParam({ shopIdentifier, tableCode });
const navigate = useNavigate(); const navigate = useNavigate();

6
src/pages/Cart.js
View File

@@ -13,9 +13,9 @@ import {
import { getItemsByCafeId } from "../helpers/cartHelpers.js"; import { getItemsByCafeId } from "../helpers/cartHelpers.js";
export default function Invoice({ table, sendParam, deviceType, socket }) { export default function Invoice({ shopId, table, sendParam, deviceType, socket }) {
const { shopId, tableCode } = useParams(); const { shopIdentifier, tableCode } = useParams();
sendParam({ shopId, tableCode }); sendParam({ shopIdentifier, tableCode });
const [cartItems, setCartItems] = useState([]); const [cartItems, setCartItems] = useState([]);
const [totalPrice, setTotalPrice] = useState(0); const [totalPrice, setTotalPrice] = useState(0);

6
src/pages/Invoice.js
View File

@@ -11,9 +11,9 @@ import {
handlePaymentFromGuestDevice, handlePaymentFromGuestDevice,
} from "../helpers/transactionHelpers"; } from "../helpers/transactionHelpers";
export default function Invoice({ table, sendParam, deviceType, socket }) { export default function Invoice({ shopId, table, sendParam, deviceType, socket }) {
const { shopId, tableCode } = useParams(); const { shopIdentifier, tableCode } = useParams();
sendParam({ shopId, tableCode }); sendParam({ shopIdentifier, tableCode });
const location = useLocation(); // Use useLocation hook instead of useSearchParams const location = useLocation(); // Use useLocation hook instead of useSearchParams
const searchParams = new URLSearchParams(location.search); // Pass location.search directly const searchParams = new URLSearchParams(location.search); // Pass location.search directly

6
src/pages/Transaction_confirmed.js
View File

@@ -176,7 +176,7 @@ export default function Transactions({
transaction.Table ? transaction.Table.tableNo : "N/A" transaction.Table ? transaction.Table.tableNo : "N/A"
}`} }`}
</h2> </h2>
{(transaction.notes !== "" || isPaymentOpen) && ( {(transaction.notes !== "") && (
<> <>
<div <div
className={styles.NoteContainer} className={styles.NoteContainer}
@@ -233,9 +233,7 @@ export default function Transactions({
</ButtonWithReplica> </ButtonWithReplica>
</div> </div>
<h5 <h5
className={`${styles.DeclineButton} ${ className={`${styles.DeclineButton}`}
isPaymentOpen ? styles.active : ""
}`}
onClick={() => onClick={() =>
isPaymentOpen isPaymentOpen
? setIsPaymentOpen(false) ? setIsPaymentOpen(false)

6
src/pages/Transactions.js
View File

@@ -11,9 +11,9 @@ import {
import { getTables } from "../helpers/tableHelper"; import { getTables } from "../helpers/tableHelper";
import TableCanvas from "../components/TableCanvas"; import TableCanvas from "../components/TableCanvas";
export default function Transactions({ propsShopId, sendParam, deviceType }) { export default function Transactions({ shopId, propsShopId, sendParam, deviceType }) {
const { shopId, tableId } = useParams(); const { shopIdentifier, tableId } = useParams();
if (sendParam) sendParam({ shopId, tableId }); if (sendParam) sendParam({ shopIdentifier, tableId });
const [tables, setTables] = useState([]); const [tables, setTables] = useState([]);
const [selectedTable, setSelectedTable] = useState(null); const [selectedTable, setSelectedTable] = useState(null);

2
src/pages/Transactions.module.css
View File

@@ -98,6 +98,8 @@
} }
.DeclineButton { .DeclineButton {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
z-index: 201;
position: relative;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-size: 15px; font-size: 15px;