ok

src/components/Modal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import styles from "./Modal.module.css";
 import CreateClerk from "../pages/CreateClerk"
 import CreateCafe from "../pages/CreateCafe"
@@ -23,7 +23,19 @@ import GuidePage from "../pages/GuidePage";
 import Join from "../pages/Join";
 import Login from "../pages/Login";
 import ResetPassword from "../pages/ResetPassword";
-const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
+import { getImageUrl } from "../helpers/itemHelper.js";
+
+const Modal = ({ shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig }) => {
+  
+  const [shopImg, setShopImg] = useState('');
+
+  useEffect(() => {
+    if (welcomePageConfig) {
+      const parsedConfig = JSON.parse(welcomePageConfig);
+      setShopImg( getImageUrl(parsedConfig.image) || "")
+    }
+  }, [welcomePageConfig]);
+  
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
@@ -49,7 +61,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
         {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
         {modalContent === "edit_tables" && <TablesPage shop={shop} />}
         {modalContent === "new_transaction" && (
-          <Transaction propsShopId={shop.cafeId} />
+          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} shopImg={shopImg} />
         )}
         {modalContent === "transaction_canceled" && (
           <Transaction propsShopId={shop.cafeId} />

src/components/Modal.module.css

@@ -12,9 +12,7 @@
 }
 
 .modalContent {
-  width: 90%;
-  /* height: 80%; */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 80%;
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */
 }