From a86aaef4f67f722a13cff1b1dc6a4802ab3d8c85 Mon Sep 17 00:00:00 2001 From: zadit frontend Date: Tue, 1 Oct 2024 09:49:22 +0000 Subject: [PATCH] ok --- src/App.js | 15 +-- src/components/ButtonWithReplica.css | 2 +- src/components/ButtonWithReplica.js | 30 ++--- src/components/ItemType.js | 9 +- src/components/Modal.js | 3 +- src/components/Modal.module.css | 2 +- src/components/PaymentOptions.js | 176 +++++++++++++++------------ src/config.js | 2 +- src/helpers/cafeHelpers.js | 34 ++++++ src/helpers/transactionHelpers.js | 24 ++++ src/pages/CafePage.js | 170 +++++++++++++++----------- src/pages/MaterialList.js | 13 +- src/pages/Transaction.js | 2 +- src/pages/Transaction_confirmed.js | 14 +-- src/pages/Transactions.js | 61 +++++++--- src/pages/WelcomePage.css | 56 +++++++++ src/pages/WelcomePage.js | 168 +++++++++++++++++++++++++ src/pages/WelcomePageEditor.css | 56 +++++++++ src/pages/WelcomePageEditor.js | 142 +++++++++++++++++++++ src/pages/WelcomePageEditorr.js | 130 ++++++++++++++++++++ 20 files changed, 902 insertions(+), 207 deletions(-) create mode 100644 src/pages/WelcomePage.css create mode 100644 src/pages/WelcomePage.js create mode 100644 src/pages/WelcomePageEditor.css create mode 100644 src/pages/WelcomePageEditor.js create mode 100644 src/pages/WelcomePageEditorr.js diff --git a/src/App.js b/src/App.js index 1087aef..74846d3 100644 --- a/src/App.js +++ b/src/App.js @@ -58,7 +58,6 @@ function App() { const [shopItems, setShopItems] = useState([]); const [isModalOpen, setIsModalOpen] = useState(false); const [modalContent, setModalContent] = useState(null); - const [nextModalContent, setNextModalContent] = useState(null); useEffect(() => { const calculateTotalsFromLocalStorage = () => { @@ -213,6 +212,8 @@ function App() { console.log("transaction notification"); setModal("new_transaction", data); + let permission = Notification.permission; + if (permission != "granted") return; navigator.serviceWorker.ready.then((registration) => { registration.showNotification("New Transaction", { body: `A new transaction was created: ${data.transactionDetails}`, // Customize as needed @@ -289,10 +290,6 @@ function App() { // Function to open the modal const setModal = (content, params = {}) => { - if (modalContent) { - setNextModalContent(content); - return; - } // Prepare query parameters const queryParams = new URLSearchParams(location.search); // Update the modal and any additional params @@ -329,9 +326,6 @@ function App() { // Update the URL without the 'modal' parameter navigate({ search: queryParams.toString() }, { replace: true }); - - if (nextModalContent) setModal(nextModalContent); - setNextModalContent(""); } }; @@ -373,8 +367,11 @@ function App() { } }; const handleLoad = async () => { - if (user != null && (user.roleId < 3 || user.roleId > 2)) { + const ses = sessionStorage.getItem("notifAsk"); + + if (!ses && user != null && (user.roleId < 3 || user.roleId > 2)) { await askNotificationPermission(); + sessionStorage.setItem("notifAsk", true); } }; handleLoad(); diff --git a/src/components/ButtonWithReplica.css b/src/components/ButtonWithReplica.css index 9249d5f..9ce5333 100644 --- a/src/components/ButtonWithReplica.css +++ b/src/components/ButtonWithReplica.css @@ -29,7 +29,7 @@ width: 140px; border-radius: 30px; position: absolute; - background-color: rgb(146, 146, 146); /* Semi-transparent blue */ + background-color: rgba(146, 146, 146, 0); /* Semi-transparent blue */ border: none; transition: all 0.5s ease-in-out; top: 50%; diff --git a/src/components/ButtonWithReplica.js b/src/components/ButtonWithReplica.js index 225322a..3198a47 100644 --- a/src/components/ButtonWithReplica.js +++ b/src/components/ButtonWithReplica.js @@ -134,20 +134,22 @@ const ButtonWithReplica = ({ > {children} -
- -
-

{qrisComponent.merchantName}

- {qrisComponent.nmid != "" &&

NMID : {qrisComponent.nmid}

} -
-
-

{price}

-
+ <> +
+ +
+

{qrisComponent.merchantName}

+ {qrisComponent.nmid != "" &&

NMID : {qrisComponent.nmid}

} +
+
+

{price}

+
+ ); }; diff --git a/src/components/ItemType.js b/src/components/ItemType.js index 8cc748c..be87c97 100644 --- a/src/components/ItemType.js +++ b/src/components/ItemType.js @@ -55,7 +55,9 @@ export default function ItemType({
{blank && (
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index b4b6e91..a4c93dd 100644 --- a/src/components/Modal.module.css +++ b/src/components/Modal.module.css @@ -13,7 +13,7 @@ .modalContent { width: 90%; - height: 80%; + /* height: 80%; */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: visible; /* Add this line to enable scrolling */ diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js index da344b2..0254135 100644 --- a/src/components/PaymentOptions.js +++ b/src/components/PaymentOptions.js @@ -1,25 +1,25 @@ import React, { useState, useRef, useEffect } from "react"; -import jsQR from "jsqr"; // Import jsQR library +import jsQR from "jsqr"; import { getImageUrl } from "../helpers/itemHelper"; import { getCafe, saveCafeDetails, setConfirmationStatus, -} from "../helpers/cafeHelpers"; // Import the helper function +} from "../helpers/cafeHelpers"; import Switch from "react-switch"; +// Main Component const SetPaymentQr = ({ shopId }) => { const [qrPosition, setQrPosition] = useState([50, 50]); const [qrSize, setQrSize] = useState(50); const [qrPayment, setQrPayment] = useState(); const [qrCodeDetected, setQrCodeDetected] = useState(false); const qrPaymentInputRef = useRef(null); - const overlayTextRef = useRef(null); const qrCodeContainerRef = useRef(null); const [isNeedConfirmation, setIsNeedConfirmation] = useState(false); - const [cafe, setCafe] = useState([]); + const [cafe, setCafe] = useState({}); - // Use useEffect to detect QR code after qrPayment updates + // Fetch cafe details on mount or shopId change useEffect(() => { const fetchCafe = async () => { try { @@ -29,119 +29,100 @@ const SetPaymentQr = ({ shopId }) => { setIsNeedConfirmation(response.needsConfirmation); setQrPosition([response.xposition, response.yposition]); setQrSize(response.scale); - console.log(response); } catch (error) { console.error("Error fetching cafe:", error); } }; - fetchCafe(); }, [shopId]); + // Detect QR code when qrPayment updates useEffect(() => { if (qrPayment) { detectQRCodeFromContainer(); } }, [qrPayment]); + // Handle file input change const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { - const newqrPayment = URL.createObjectURL(file); // Create a temporary URL for display + const newqrPayment = URL.createObjectURL(file); setQrPayment(newqrPayment); } }; + // Detect QR code from the container const detectQRCodeFromContainer = () => { const container = qrCodeContainerRef.current; const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); - - // Create an image element to load the background image const img = new Image(); - img.crossOrigin = "Anonymous"; // Handle CORS if needed + img.crossOrigin = "Anonymous"; img.onload = () => { - // Set canvas size canvas.width = container.offsetWidth; canvas.height = container.offsetHeight; - - // Draw image on canvas context.drawImage(img, 0, 0, canvas.width, canvas.height); - const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const qrCode = jsQR(imageData.data, canvas.width, canvas.height); - + setQrCodeDetected(!!qrCode); if (qrCode) { - setQrCodeDetected(true); console.log("QR Code detected:", qrCode.data); - } else { - setQrCodeDetected(false); - console.log("No QR Code detected"); } }; - img.src = qrPayment; // Load the image URL + img.src = qrPayment; }; - const handleSave = () => { - const qrPaymentFile = qrPaymentInputRef.current.files[0]; // Get the selected file for qrPayment - - // Prepare the details object + // Save cafe details + const handleSave = async () => { + const qrPaymentFile = qrPaymentInputRef.current.files[0]; const details = { qrPosition, qrSize, - qrPaymentFile, // Include qrPayment file + qrPaymentFile, }; - // Call saveCafeDetails function with the updated details object - saveCafeDetails(cafe.cafeId, details) - .then((response) => { - console.log("Cafe details saved:", response); - // handleQrSave(qrPosition, qrSize, qrPayment); - }) - .catch((error) => { - console.error("Error saving cafe details:", error); - }); + try { + const response = await saveCafeDetails(cafe.cafeId, details); + console.log("Cafe details saved:", response); + } catch (error) { + console.error("Error saving cafe details:", error); + } }; + // Toggle confirmation status const handleChange = async () => { - console.log(isNeedConfirmation); - setIsNeedConfirmation(!isNeedConfirmation); - console.log(!isNeedConfirmation); try { - // Wait for the updateItemAvailability response const response = await setConfirmationStatus( cafe.cafeId, !isNeedConfirmation ); - setIsNeedConfirmation(response.needsConfirmation); } catch (error) { - console.log(error); + console.error(error); setIsNeedConfirmation(cafe.needsConfirmation); } }; return ( -
+
+

Payment QRIS

qrPaymentInputRef.current.click()} > - Click To Change Image + Click To Change
{ onChange={handleFileChange} />
-
+
{qrCodeDetected ?

QR Code Detected

:

No QR Code Detected

} -
- -
- - handleChange()} checked={isNeedConfirmation} /> +
+ +
+
+

Double Check tem Availability

+

+ Turn on the switch for the clerk to double check before customer pay. +

+ +
); }; +// Styles const styles = { + container: { + backgroundColor: "white", + padding: "20px", + borderRadius: "8px", + boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)", + textAlign: "center", // Center text and children + }, + title: { + marginBottom: "20px", + fontSize: "24px", + fontWeight: "bold", + }, + qrCodeContainer: { + position: "relative", + width: "300px", + height: "300px", + backgroundSize: "contain", + border: "1px solid #ddd", + overflow: "hidden", + margin: "0 auto", // Center the QR code container + }, overlayText: { position: "absolute", + width: "100%", + height: "100%", + fontSize: "550%", + textAlign: "left", top: "50%", left: "50%", transform: "translate(-50%, -50%)", backgroundColor: "rgba(0, 0, 0, 0.5)", - color: "#fff", + color: "rgba(256, 256, 256, 0.5)", padding: "10px", borderRadius: "5px", cursor: "pointer", }, - // Other styles omitted for brevity + resultMessage: { + marginTop: "20px", + textAlign: "center", + }, + buttonContainer: { + marginTop: "20px", + textAlign: "center", + }, + saveButton: { + padding: "10px 20px", + fontSize: "16px", + backgroundColor: "#28a745", + color: "#fff", + border: "none", + borderRadius: "4px", + cursor: "pointer", + transition: "background-color 0.3s", + }, + switchContainer: { + marginTop: "20px", + textAlign: "center", + }, + description: { + margin: "10px 0", + fontSize: "14px", + color: "#666", + }, }; export default SetPaymentQr; diff --git a/src/config.js b/src/config.js index d2c38df..3e87dec 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ // src/config.js -const API_BASE_URL = "https://2jtmkn-5000.csb.app"; // Replace with your actual backend URL +const API_BASE_URL = "https://fmcf2m-5000.csb.app"; // Replace with your actual backend URL export default API_BASE_URL; diff --git a/src/helpers/cafeHelpers.js b/src/helpers/cafeHelpers.js index e23e08c..04459bf 100644 --- a/src/helpers/cafeHelpers.js +++ b/src/helpers/cafeHelpers.js @@ -23,6 +23,40 @@ export async function getCafe(cafeId) { console.error("Error:", error); } } +// api.js +export const saveWelcomePageConfig = async (details) => { + const formData = new FormData(); + + // Append image file if it exists + if (details.image) { + const blob = await fetch(details.image).then((res) => res.blob()); + formData.append("image", blob, "welcome-image.png"); // Specify filename if needed + } + + // Append other form fields + formData.append("welcomingText", details.welcomingText); + formData.append("backgroundColor", details.backgroundColor); + formData.append("textColor", details.textColor); + + try { + const response = await fetch(`${API_BASE_URL}/welcome-config`, { + method: "POST", + headers: { + Authorization: `Bearer ${getAuthToken()}`, // Assuming you have an auth token + }, + body: formData, + }); + + if (!response.ok) { + throw new Error("Failed to save welcome page configuration"); + } + + return await response.json(); + } catch (error) { + console.error("Error saving welcome page config:", error); + return null; + } +}; export async function getOwnedCafes(userId) { try { diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js index b833a5a..c31f34f 100644 --- a/src/helpers/transactionHelpers.js +++ b/src/helpers/transactionHelpers.js @@ -149,6 +149,30 @@ export async function getTransaction(transactionId) { } } +export async function getMyTransactions(shopId, demand) { + try { + const token = getLocalStorage("auth"); + const response = await fetch( + `${API_BASE_URL}/transaction/get-my-transactions`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + } + ); + + if (!response.ok) { + return false; + } + + const transactions = await response.json(); + return transactions; + } catch (error) { + console.error("Error:", error); + } +} export async function getTransactions(shopId, demand) { try { const token = getLocalStorage("auth"); diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index 3082697..a4bccca 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -24,6 +24,7 @@ import { updateLocalStorage, } from "../helpers/localStorageHelpers"; import { unsubscribeUser } from "../helpers/subscribeHelpers.js"; +import WelcomePage from "./WelcomePage.js"; function CafePage({ table, @@ -55,7 +56,29 @@ function CafePage({ const [isEditMode, setIsEditMode] = useState(false); const [filterId, setFilterId] = useState(0); + const [isStarted, setIsStarted] = useState(false); + useEffect(() => { + // Check sessionStorage for 'getStartedClicked' on mount + const clicked = sessionStorage.getItem("getStartedClicked"); + if (clicked) setIsStarted(true); + else document.body.style.overflow = "hidden"; + + // Define a custom event + const handleStorageChange = (event) => { + if (event.detail === "getStartedClicked") { + setIsStarted(true); + } + }; + + // Listen for custom events + window.addEventListener("storageChange", handleStorageChange); + + // Cleanup the event listener + return () => { + window.removeEventListener("storageChange", handleStorageChange); + }; + }, []); useEffect(() => { if (user.cafeId != null && user.cafeId !== shopId) { // Preserve existing query parameters @@ -108,79 +131,82 @@ function CafePage({ ); else return ( -
- -
setIsEditMode(e)} - isEditMode={isEditMode} - /> -
- -
- setFilterId(e)} - filterId={filterId} - /> -
- {filterId === 0 ? ( - <> -

Music Req.

- - - ) : ( -
- )} + <> + {!isStarted && } +
+ +
setIsEditMode(e)} + isEditMode={isEditMode} + /> +
+ +
+ setFilterId(e)} + filterId={filterId} + /> +
+ {filterId === 0 ? ( + <> +

Music Req.

+ + + ) : ( +
+ )} -
- {shopItems - .filter( - (itemType) => filterId == 0 || itemType.itemTypeId === filterId - ) - .map((itemType) => ( - - ))} - - {user.username && ( - - )} -
+
+ {shopItems + .filter( + (itemType) => filterId == 0 || itemType.itemTypeId === filterId + ) + .map((itemType) => ( + + ))} + + {user.username && ( + + )} +
+ ); } diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js index e86ee6e..006a10b 100644 --- a/src/pages/MaterialList.js +++ b/src/pages/MaterialList.js @@ -84,7 +84,7 @@ const MaterialList = ({ cafeId }) => { ? mutations.filter((mutation) => mutation.materialId === selectedMaterialId) : []; - const sortedMutations = filteredMutations + const sortedMutations = filteredMutations .filter((mutation) => mutation.materialId === selectedMaterialId) .sort((a, b) => { if (sortOrder === "asc") { @@ -206,7 +206,7 @@ const MaterialList = ({ cafeId }) => { const date = new Date(timestamp); return date.toLocaleString(); }; - + return (

Materials List

@@ -317,7 +317,7 @@ const MaterialList = ({ cafeId }) => { -
@@ -382,7 +382,9 @@ const MaterialList = ({ cafeId }) => { {sortedMutations.length > 0 ? ( sortedMutations.map((mutation) => (
-

{formatDate(mutation.createdAt)}

+

+ {formatDate(mutation.createdAt)} +

Details: {mutation.reason}

stok {mutation.newStock}

@@ -404,6 +406,7 @@ const styles = { margin: "0 auto", height: "100%", // Adjust height based on your needs overflowY: "auto", // Enables vertical scrolling + backgroundColor: "white", }, heading: { textAlign: "center", diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js index e5537ab..50e912f 100644 --- a/src/pages/Transaction.js +++ b/src/pages/Transaction.js @@ -192,7 +192,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { )}
- {transaction.confirmed < 2 && ( + {transaction.confirmed >= 0 && transaction.confirmed < 2 && (
handleDecline(transaction.transactionId)} diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js index fc8a82b..5600dca 100644 --- a/src/pages/Transaction_confirmed.js +++ b/src/pages/Transaction_confirmed.js @@ -123,14 +123,8 @@ export default function Transactions({ onClick={() => setSelectedTable(transaction.Table || { tableId: 0 }) } - style={{ overflow: isPaymentOpen ? "hidden" : "" }} + style={{ overflow: "hidden" }} > - {transaction.paymentClaimed && transaction.confirmed < 2 && ( -
- -

payment claimed

-
- )}

Transaction ID: {transaction.transactionId}

@@ -138,13 +132,17 @@ export default function Transactions({ Payment Type: {transaction.payment_type}
    - {transaction.DetailedTransactions.map((detail) => ( + {(isPaymentOpen + ? transaction.DetailedTransactions.slice(0, 2) + : transaction.DetailedTransactions + ).map((detail) => (
  • {detail.Item.name} - {detail.qty} x Rp{" "} {detail.Item.price}
    • ))}
+

{transaction.serving_type === "pickup" ? "Self pickup" diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js index 9081397..e6a15e5 100644 --- a/src/pages/Transactions.js +++ b/src/pages/Transactions.js @@ -3,6 +3,7 @@ import styles from "./Transactions.module.css"; import { useParams } from "react-router-dom"; import { ColorRing } from "react-loader-spinner"; import { + getMyTransactions, getTransactions, confirmTransaction, declineTransaction, @@ -22,7 +23,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { useEffect(() => { const fetchTransactions = async () => { try { - const response = await getTransactions(shopId || propsShopId, 5); + let response; + if (deviceType == "clerk") + response = await getTransactions(shopId || propsShopId, 5); + else if (deviceType == "guestDevice") + response = await getMyTransactions(shopId || propsShopId, 5); setTransactions(response); } catch (error) { console.error("Error fetching transactions:", error); @@ -147,25 +152,53 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) { className={styles.PayButton} onClick={() => handleConfirm(transaction.transactionId)} disabled={ - transaction.confirmed === -1 || - transaction.confirmed === 3 || - isPaymentLoading - } // Disable button if confirmed (1) or declined (-1) or loading + isPaymentLoading || // Disable if loading + (deviceType === "clerk" && + transaction.confirmed !== 1 && + transaction.confirmed !== 2 && + transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability + (deviceType !== "clerk" && + transaction.confirmed !== 1 && + transaction.paymentClaimed) || // Disable for buyer when not Claim has paid + transaction.confirmed === 3 || // Disable if Transaction success + transaction.confirmed === -1 || // Disable if Declined + transaction.confirmed === -2 || // Disable if Canceled + transaction.confirmed === 2 || // Disable if In process + (transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment + } > - {isPaymentLoading ? ( + {deviceType === "clerk" ? ( + isPaymentLoading ? ( + + ) : transaction.confirmed === 1 ? ( + "Confirm has paid" + ) : transaction.confirmed === -1 ? ( + "Declined" + ) : transaction.confirmed === -2 ? ( + "Canceled" + ) : transaction.confirmed === 2 ? ( + "Confirm item is ready" + ) : transaction.confirmed === 3 ? ( + "Transaction success" + ) : ( + "Confirm availability" + ) + ) : isPaymentLoading ? ( - ) : transaction.confirmed === 1 ? ( - "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1) + ) : transaction.confirmed === 1 && + !transaction.paymentClaimed ? ( + "Claim has paid" + ) : transaction.confirmed === 1 && + transaction.paymentClaimed ? ( + "Verifying your payment" ) : transaction.confirmed === -1 ? ( - "Declined" // Display "Declined" if the transaction is declined (-1) + "Declined" ) : transaction.confirmed === -2 ? ( - "Canceled" // Display "Declined" if the transaction is declined (-1) + "Canceled" ) : transaction.confirmed === 2 ? ( - "Confirm item has ready" // Display "Item ready" if the transaction is ready (2) - ) : transaction.confirmed === 3 ? ( - "Transaction success" // Display "Item ready" if the transaction is ready (2) + "In process" ) : ( - "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0) + "Transaction success" )}

diff --git a/src/pages/WelcomePage.css b/src/pages/WelcomePage.css new file mode 100644 index 0000000..b7fed8e --- /dev/null +++ b/src/pages/WelcomePage.css @@ -0,0 +1,56 @@ +/* WelcomePage.css */ +.welcome-page { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; +} + +.image-container { + width: 150px; /* Adjust as needed */ + height: 150px; /* Adjust as needed */ + overflow: hidden; + border-radius: 50%; + margin-bottom: 20px; +} + +.circular-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.welcoming-text { + font-size: 24px; + margin-bottom: 20px; + font-family: poppins; +} + +.get-started-button { + padding: 10px 20px; + border: none; + border-radius: 25px; + background-color: #007bff; /* Bootstrap primary color */ + color: white; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; + font-family: poppins; +} + +.get-started-button:hover { + background-color: #0056b3; /* Darker shade on hover */ +} + +/* Fullscreen styles */ +.fullscreen { + position: absolute; + top: 50%; + left: 50%; + width: 100vw; + height: 100vh; + transform: translate(-50%, -50%); +} diff --git a/src/pages/WelcomePage.js b/src/pages/WelcomePage.js new file mode 100644 index 0000000..3a1a45a --- /dev/null +++ b/src/pages/WelcomePage.js @@ -0,0 +1,168 @@ +// WelcomePageEditor.js +import React, { useState } from "react"; +import WelcomePage from "./WelcomePage"; +import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function +import Switch from "react-switch"; // Import react-switch +import "./WelcomePageEditor.css"; + +const WelcomePageEditor = () => { + const [image, setImage] = useState(""); + const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!"); + const [backgroundColor, setBackgroundColor] = useState("#ffffff"); + const [textColor, setTextColor] = useState("#000000"); + const [loading, setLoading] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + const [isWelcomingPageEnabled, setIsWelcomingPageEnabled] = useState(true); // State for toggle switch + + const handleImageChange = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setImage(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + const handleTextChange = (e) => { + setWelcomingText(e.target.value); + }; + + const handleColorChange = (e) => { + setBackgroundColor(e.target.value); + }; + + const handleTextColorChange = (e) => { + setTextColor(e.target.value); + }; + + const handleSave = async () => { + setLoading(true); + + const details = { + image, + welcomingText, + backgroundColor, + textColor, + isWelcomingPageEnabled, // Include the toggle state + }; + + try { + const result = await saveWelcomePageConfig(details); + console.log("Configuration saved:", result); + } catch (error) { + console.error("Error saving configuration:", error); + } finally { + setLoading(false); + } + }; + + if (isFullscreen) + return ( + setIsFullscreen(false)} + /> + ); + + return ( +
+

Edit Welcome Page

+
+ +