140 lines
6.4 KiB
JavaScript
140 lines
6.4 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
import styles from "./Modal.module.css";
|
|
|
|
import AccountUpdatePage from "../components/AccountUpdatePage.js";
|
|
import CreateClerk from "../pages/CreateClerk"
|
|
import CreateCafe from "../pages/CreateCafe"
|
|
import CreateTenant from "../pages/CreateTenant"
|
|
import IdentifyCafeModal from "./IdentifyCafeModal.js";
|
|
import PaymentOptions from "./PaymentOptions.js";
|
|
import Transaction from "../pages/Transaction";
|
|
import Transaction_item from "../pages/Transaction_item";
|
|
import Transaction_pending from "../pages/Transaction_pending";
|
|
import Transaction_confirmed from "../pages/Transaction_confirmed";
|
|
import Transaction_success from "../pages/Transaction_success";
|
|
import Transaction_end from "../pages/Transaction_end";
|
|
import Transaction_failed from "../pages/Transaction_failed";
|
|
import Payment_claimed from "../pages/Payment_claimed";
|
|
import MaterialList from "../pages/MaterialList.js";
|
|
import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
|
|
import Reports from "../pages/Reports.js";
|
|
import NotificationRequest from "../pages/NotificationRequest.js";
|
|
import NotificationBlocked from "../pages/NotificationBlocked.js";
|
|
import WelcomePageEditor from "../pages/WelcomePageEditor.js";
|
|
import GuidePage from "../pages/GuidePage";
|
|
import Join from "../pages/Join";
|
|
import Loading from "../pages/Loading";
|
|
import Message from "../pages/Message";
|
|
import PlayerPrompt from "../pages/PlayerPrompt";
|
|
import Login from "../pages/Login";
|
|
import ResetPassword from "../pages/ResetPassword";
|
|
import { getImageUrl } from "../helpers/itemHelper.js";
|
|
|
|
|
|
import CreateCoupon from "../pages/CreateCoupon";
|
|
import CheckCoupon from "../pages/CheckCoupon";
|
|
import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
|
|
|
|
const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction, depth,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => {
|
|
|
|
const [shopImg, setShopImg] = useState('');
|
|
const [updateKey, setUpdateKey] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (welcomePageConfig) {
|
|
const parsedConfig = JSON.parse(welcomePageConfig);
|
|
setShopImg( getImageUrl(parsedConfig.image) || "")
|
|
}
|
|
}, [welcomePageConfig]);
|
|
|
|
useEffect(() => {
|
|
setUpdateKey(updateKey+1);
|
|
}, [shop]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
// Function to handle clicks on the overlay
|
|
|
|
const handleOverlayClick = (event) => {
|
|
console.log(onModalCloseFunction)
|
|
if (onModalCloseFunction) {
|
|
onModalCloseFunction(); // Execute the passed closure
|
|
}
|
|
onClose(); // Close the modal
|
|
};
|
|
|
|
const handleNo = (event) => {
|
|
if(onModalCloseFunction)
|
|
onModalCloseFunction();
|
|
onClose();
|
|
}
|
|
|
|
// Function to handle clicks on the modal content
|
|
const handleContentClick = (event) => {
|
|
// Prevent click event from propagating to the overlay
|
|
event.stopPropagation();
|
|
};
|
|
if(modalContent == '') handleOverlayClick();
|
|
return (
|
|
<div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
|
|
<div className={`${styles.modalContent} ${(modalContent === 'edit_tables' || modalContent === 'payment_option' || modalContent === 'create_clerk') ? styles.modalContentWide : ''}`} onClick={handleContentClick}>
|
|
|
|
{modalContent === "edit_account" && <AccountUpdatePage user={user} />}
|
|
{modalContent === "reset-password" && <ResetPassword />}
|
|
{modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
|
|
{modalContent === "blocked_notification" && <NotificationBlocked />}
|
|
{modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
|
|
{modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
|
|
{modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
|
|
{modalContent === "edit_tables" && <IdentifyCafeModal shop={shop} />}
|
|
{modalContent === "new_transaction" && (
|
|
<Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} setModal={setModal}/>
|
|
)}
|
|
{modalContent === "transaction_canceled" && (
|
|
<Transaction propsShopId={shop.cafeId} />
|
|
)}
|
|
{modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType} setModal={setModal}/>}
|
|
{modalContent === "transaction_item" && <Transaction_item />}
|
|
{modalContent === "transaction_confirmed" && (
|
|
<Transaction_confirmed deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
|
|
)}
|
|
{modalContent === "payment_claimed" && (
|
|
<Payment_claimed paymentUrl={shop.qrPayment} />
|
|
)}
|
|
|
|
{modalContent === "create_item" && (
|
|
<GuidePage guideType={'create_item'} />
|
|
)}
|
|
{modalContent === "transaction_success" && <Transaction_success setModal={setModal}/>}
|
|
{modalContent === "transaction_end" && <Transaction_end />}
|
|
{modalContent === "transaction_failed" && <Transaction_failed />}
|
|
{modalContent === "payment_option" && (
|
|
<PaymentOptions shop={shop} shopId={shop.cafeId} />
|
|
)}
|
|
{modalContent === "add_material" && (
|
|
<MaterialList handleClose={handleOverlayClick} cafeId={shop.cafeId} />
|
|
)}
|
|
{modalContent === "update_stock" && (
|
|
<MaterialMutationsPage handleClose={handleOverlayClick} cafeId={shop.cafeId} />
|
|
)}
|
|
{modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
|
|
{modalContent === "reports" && <Reports user={user} handleClose={handleOverlayClick} cafeId={shop.cafeId} />}
|
|
|
|
|
|
{modalContent === "create_coupon" && <CreateCoupon />}
|
|
{modalContent === "check_coupon" && <CheckCoupon />}
|
|
{modalContent === "create_user" && <CreateUserWithCoupon setModal={setModal}/>}
|
|
|
|
|
|
{modalContent === "join" && <Join setModal={setModal} />}
|
|
{modalContent === "claim-coupon" && <Join setModal={setModal} />}
|
|
{modalContent === "loading" && <Loading setModal={setModal} />}
|
|
{modalContent === "message" && <Message handleYes={onModalYesFunction} handleNo={handleNo}/>}
|
|
{modalContent === "player-prompt" && <PlayerPrompt cafeId={shop.cafeId} setModal={setModal} handleClose={handleOverlayClick} welcomePageConfig={shop.welcomePageConfig}/>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|