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

50
src/App.js
View File

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

7
src/components/ButtonWithReplica.css
View File

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

2
src/components/ButtonWithReplica.js
View File

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

2
src/components/Header.js
View File

@@ -316,7 +316,7 @@ const Header = ({
</Title>
<div style={{ visibility: showProfile ? "visible" : "hidden" }}>
<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"
onClick={user.username !== undefined ? handleImageClick : null}
animate={showRectangle && animate}

474
src/components/TablesPage.js
View File

@@ -176,6 +176,480 @@ const SetPaymentQr = ({ shop }) => {
<div style={styles.container}>
<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
id="qr-code-container"
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) {
try {
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";
function CafePage({
shopId,
table,
sendParam,
welcomePageConfig,
@@ -44,8 +45,8 @@ function CafePage({
const location = useLocation();
const [searchParams] = useSearchParams();
const token = searchParams.get("token");
const { shopId, tableCode } = useParams();
sendParam({ shopId, tableCode });
const { shopIdentifier, tableCode } = useParams();
sendParam({ shopIdentifier, tableCode });
const navigate = useNavigate();

6
src/pages/Cart.js
View File

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

6
src/pages/Invoice.js
View File

@@ -11,9 +11,9 @@ import {
handlePaymentFromGuestDevice,
} from "../helpers/transactionHelpers";
export default function Invoice({ table, sendParam, deviceType, socket }) {
const { shopId, tableCode } = useParams();
sendParam({ shopId, tableCode });
export default function Invoice({ shopId, table, sendParam, deviceType, socket }) {
const { shopIdentifier, tableCode } = useParams();
sendParam({ shopIdentifier, tableCode });
const location = useLocation(); // Use useLocation hook instead of useSearchParams
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"
}`}
</h2>
{(transaction.notes !== "" || isPaymentOpen) && (
{(transaction.notes !== "") && (
<>
<div
className={styles.NoteContainer}
@@ -233,9 +233,7 @@ export default function Transactions({
</ButtonWithReplica>
</div>
<h5
className={`${styles.DeclineButton} ${
isPaymentOpen ? styles.active : ""
}`}
className={`${styles.DeclineButton}`}
onClick={() =>
isPaymentOpen
? setIsPaymentOpen(false)

6
src/pages/Transactions.js
View File

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

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

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