From dbc43d18fa0f934ed8a9dfdf960ec26b693f7170 Mon Sep 17 00:00:00 2001 From: frontend perkafean <165241731+frontendperkafean@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:40:55 +0000 Subject: [PATCH] ok --- package-lock.json | 13 ++ package.json | 1 + src/components/Footer.js | 35 +++- src/components/Footer.module.css | 3 - src/components/Header.js | 23 +++ src/components/Item.js | 8 +- src/components/Item.module.css | 253 ++++++++++++++------------- src/components/ItemLister.js | 35 ++-- src/components/ItemLister.module.css | 17 ++ src/components/ItemTypeLister.css | 24 +-- src/components/Modal.js | 5 +- src/helpers/transactionHelpers.js | 2 +- src/pages/CafePage.js | 4 + src/pages/Transaction.js | 3 + src/pages/Transaction_confirmed.js | 1 + src/pages/Transactions.js | 8 + src/pages/Transactions.module.css | 28 ++- src/services/socketService.js | 13 +- 18 files changed, 310 insertions(+), 166 deletions(-) diff --git a/package-lock.json b/package-lock.json index 88889af..0a0b37b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-qr-reader": "^3.0.0-beta-1", "react-router-dom": "^6.24.0", "react-scripts": "5.0.1", + "react-switch": "^7.0.0", "socket.io-client": "^4.7.5", "styled-components": "^6.1.11", "web-vitals": "^2.1.4" @@ -16186,6 +16187,18 @@ } } }, + "node_modules/react-switch": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz", + "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index a5eb987..dcfd829 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-qr-reader": "^3.0.0-beta-1", "react-router-dom": "^6.24.0", "react-scripts": "5.0.1", + "react-switch": "^7.0.0", "socket.io-client": "^4.7.5", "styled-components": "^6.1.11", "web-vitals": "^2.1.4" diff --git a/src/components/Footer.js b/src/components/Footer.js index e56c515..639734d 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -87,11 +87,36 @@ export default function Footer({ {/* Profile Icon */}
- - + + + + +
diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css index efd1418..8b8a904 100644 --- a/src/components/Footer.module.css +++ b/src/components/Footer.module.css @@ -1,5 +1,4 @@ .footerContainer { - margin-top: 40px; } .footer-rect { height: 75px; @@ -22,8 +21,6 @@ width: calc(100vw); /* Adjust size as needed, subtracting margin */ height: 75px; - /* Adjust size as needed */ - margin-top: 10px; } .footer-icon { diff --git a/src/components/Header.js b/src/components/Header.js index 7165b6d..717e8da 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -222,6 +222,7 @@ const Header = ({ guestSides, guestSideOfClerk, removeConnectedGuestSides, + setIsEditMode, }) => { const { goToLogin, goToGuestSideLogin, goToAdminCafes } = useNavigationHelpers(shopId, tableCode); @@ -320,6 +321,17 @@ const Header = ({ */} {shopName} +
+ setIsEditMode(e.target.checked)} + /> + +
setModal("add_material")}> stock @@ -360,6 +372,17 @@ const Header = ({ user.roleId === 2 && ( {shopName} +
+ setIsEditMode(e.target.checked)} + /> + +
setModal("add_material")}> stock diff --git a/src/components/Item.js b/src/components/Item.js index 3182bb6..eae27b6 100644 --- a/src/components/Item.js +++ b/src/components/Item.js @@ -111,7 +111,9 @@ const Item = ({ )}
{ const [items, setItems] = useState( itemList.map((item) => ({ @@ -177,18 +179,27 @@ const ItemLister = ({ )} {items.map((item) => { return !forCart || (forCart && item.qty > 0) ? ( - handlePlusClick(item.itemId)} - onNegativeClick={() => handleNegativeClick(item.itemId)} - onRemoveClick={() => handleRemoveClick(item.itemId)} - /> +
+ {isEditMode && ( +
+ +

out of stock

+
+ )} + handlePlusClick(item.itemId)} + onNegativeClick={() => handleNegativeClick(item.itemId)} + onRemoveClick={() => handleRemoveClick(item.itemId)} + isEditMode={isEditMode} + /> +
) : null; })} diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css index 25f012c..227cf1b 100644 --- a/src/components/ItemLister.module.css +++ b/src/components/ItemLister.module.css @@ -6,6 +6,9 @@ box-sizing: border-box; /* Ensure padding doesn't affect width */ } +.item-lister:last-child { + margin-bottom: 50px; +} .title-container { display: flex; align-items: center; @@ -59,3 +62,17 @@ .noborder { border: 1px solid #ffffff00; } +.itemWrapper { + position: relative; +} +.editModeLayout { + position: absolute; + z-index: 100; + background-color: #0000008c; + width: 100%; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css index 91e960d..7f13c41 100644 --- a/src/components/ItemTypeLister.css +++ b/src/components/ItemTypeLister.css @@ -1,19 +1,19 @@ .item-type-lister { - width: 100vw; - overflow-x: auto; - white-space: nowrap; - padding: 3px 0px; + width: 100vw; + overflow-x: auto; + white-space: nowrap; + padding: 3px 0px; } .item-type-list { - display: inline-flex; - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - overflow-y: hidden; + display: inline-flex; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + overflow-y: hidden; } .item-type { - display: inline-block; - margin-right: 20px; - /* Space between items */ -} \ No newline at end of file + display: inline-block; + margin-right: 20px; + /* Space between items */ +} diff --git a/src/components/Modal.js b/src/components/Modal.js index 3555ec0..f1c7431 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -38,7 +38,10 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => { {modalContent === "edit_tables" && } {modalContent === "new_transaction" && ( - )}{" "} + )} + {modalContent === "transaction_canceled" && ( + + )} {modalContent === "transaction_pending" && } {modalContent === "transaction_confirmed" && ( diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js index 1fa44a8..97a2f51 100644 --- a/src/helpers/transactionHelpers.js +++ b/src/helpers/transactionHelpers.js @@ -55,7 +55,7 @@ export async function cancelTransaction(transactionId) { console.log(transactionId); const token = getLocalStorage("auth"); const response = await fetch( - `${API_BASE_URL}/transaction/claim-transaction/${transactionId}`, + `${API_BASE_URL}/transaction/cancel-transaction/${transactionId}`, { method: "POST", headers: { diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index 0f3ee46..dc958c1 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -46,6 +46,8 @@ function CafePage({ const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true); const [isModalOpen, setIsModalOpen] = useState(false); + const [isEditMode, setIsEditMode] = useState(false); + useEffect(() => { if (user.cafeId != null && user.cafeId != shopId) { navigate("/" + user.cafeId); @@ -109,6 +111,7 @@ function CafePage({ guestSides={guestSides} guestSideOfClerk={guestSideOfClerk} removeConnectedGuestSides={removeConnectedGuestSides} + setIsEditMode={(e) => setIsEditMode(e)} />
@@ -137,6 +140,7 @@ function CafePage({ itemTypeId={itemType.itemTypeId} typeName={itemType.name} itemList={itemType.itemList} + isEditMode={isEditMode} /> ))} diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js index cc1f7e7..4e11766 100644 --- a/src/pages/Transaction.js +++ b/src/pages/Transaction.js @@ -120,6 +120,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { setSelectedTable(transaction.Table || { tableId: 0 }) } > +

Transaction ID: {transaction.transactionId}

@@ -176,6 +177,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1) ) : transaction.confirmed === -1 ? ( "Declined" // Display "Declined" if the transaction is declined (-1) + ) : transaction.confirmed === -2 ? ( + "Canceled" // Display "Declined" if the transaction is declined (-1) ) : transaction.confirmed === 2 ? ( "Confirm item has ready" // Display "Item ready" if the transaction is ready (2) ) : transaction.confirmed === 3 ? ( diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js index f1a0c81..bc5a378 100644 --- a/src/pages/Transaction_confirmed.js +++ b/src/pages/Transaction_confirmed.js @@ -5,6 +5,7 @@ import { ColorRing } from "react-loader-spinner"; import { getTransaction, confirmTransaction, + handleClaimHasPaid, declineTransaction, cancelTransaction, } from "../helpers/transactionHelpers"; diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js index 8ba21ec..1a89086 100644 --- a/src/pages/Transactions.js +++ b/src/pages/Transactions.js @@ -109,6 +109,12 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { setSelectedTable(transaction.Table || { tableId: 0 }) } > + {transaction.paymentClaimed && ( +
+ +

payment claimed

+
+ )}

Transaction ID: {transaction.transactionId}

@@ -148,6 +154,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1) ) : transaction.confirmed === -1 ? ( "Declined" // Display "Declined" if the transaction is declined (-1) + ) : transaction.confirmed === -2 ? ( + "Canceled" // Display "Declined" if the transaction is declined (-1) ) : transaction.confirmed === 2 ? ( "Confirm item has ready" // Display "Item ready" if the transaction is ready (2) ) : transaction.confirmed === 3 ? ( diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css index 31118f6..3448c00 100644 --- a/src/pages/Transactions.module.css +++ b/src/pages/Transactions.module.css @@ -54,7 +54,7 @@ font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; - font-size: 24px; /* Adjusted for better readability */ + font-size: 70%; /* Adjusted for better readability */ padding: 12px 24px; /* Added padding for a better look */ border-radius: 50px; background-color: rgba(88, 55, 50, 1); @@ -81,6 +81,7 @@ margin-bottom: 23px; /* Space at the bottom to match the PayButton */ } .RoundedRectangle { + position: relative; border-radius: 20px; padding: 15px; /* Adjusted for better spacing */ margin: 26px; @@ -116,3 +117,28 @@ resize: none; /* Prevent resizing */ overflow-wrap: break-word; /* Ensure text wraps */ } + +.RibbonBanner { + position: absolute; + top: 0; + width: 200px; + height: 200px; + left: -18px; +} + +.RibbonBanner img { + object-fit: contain; + width: 100%; + height: auto; +} + +.RibbonBanner h1 { + margin: 0; /* Remove default margin */ + font-size: 20px; /* Adjust font size as needed */ + transform: rotate(-44.7deg); /* Rotate the text */ + transform-origin: center; /* Rotate around its center */ + white-space: nowrap; /* Prevent text wrapping */ + position: absolute; + top: 60px; + left: -15px; +} diff --git a/src/services/socketService.js b/src/services/socketService.js index a705bad..0c00b97 100644 --- a/src/services/socketService.js +++ b/src/services/socketService.js @@ -1,6 +1,13 @@ -import socketIOClient from 'socket.io-client'; -import API_BASE_URL from '../config.js'; +import socketIOClient from "socket.io-client"; +import API_BASE_URL from "../config.js"; -const socket = socketIOClient(API_BASE_URL); +const socket = socketIOClient(API_BASE_URL, { + transports: ["websocket"], // Use WebSocket for better performance + reconnection: true, // Enable automatic reconnection + reconnectionAttempts: Infinity, // Set to Infinity to keep trying + reconnectionDelay: 1000, // Time in ms to wait before attempting reconnection + reconnectionDelayMax: 5000, // Max delay in ms for reconnection attempts + timeout: 20000, // Connection timeout +}); export default socket;