ok

src/App.css

@@ -1,5 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
-html, body{
+html,
+body {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
@@ -38,7 +39,7 @@ html, body{
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 28px;
   color: rgba(88, 55, 50, 1);
   text-align: left;
   margin-left: 20px;

src/App.js

@@ -423,6 +423,7 @@ function App() {
                 <CafePage
                   table={table}
                   sendParam={handleSetParam}
+                  welcomePageConfig={shop.welcomePageConfig}
                   shopName={shop.name}
                   shopOwnerId={shop.ownerId}
                   shopItems={shopItems}

src/components/Header.js

@@ -353,6 +353,10 @@ const Header = ({
                           onChange={() => setIsEditMode(!isEditMode)}
                         />
                       </div>
+
+                      <Child onClick={() => setModal("welcome_config")}>
+                        welcoming page
+                      </Child>
                       <Child onClick={() => setModal("add_material")}>
                         stock
                       </Child>

src/components/ItemLister.module.css

@@ -19,7 +19,7 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 28px;
   color: rgba(88, 55, 50, 1);
   text-align: left;
   width: calc(70% - 10px);

src/components/ItemType.js

@@ -101,6 +101,14 @@ export default function ItemType({
           create
         </button>
       )}
+      <div
+        style={{
+          backgroundColor: "black",
+          width: "200%",
+          height: "200%",
+          position: "absolute",
+        }}
+      ></div>
     </div>
   );
 }

src/components/Modal.js

@@ -63,7 +63,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         {modalContent === "update_stock" && (
           <MaterialMutationsPage cafeId={shop.cafeId} />
         )}
-        {modalContent === "welcome_config" && <WelcomePageEditor />}
+        {modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
         {modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
       </div>
     </div>

src/components/MusicPlayer.css

@@ -104,7 +104,7 @@
   position: relative;
   left: 0;
   right: 0;
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
   /* background-color: rgb(218 163 99); */
   border-radius: 0 0 23px 23px;
   /* Rounded corners at the bottom */
@@ -121,7 +121,7 @@
 }
 
 .expand-button:hover {
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
 }
 
 /* Adjust height of the music player container when expanded */
@@ -134,7 +134,7 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
 }
 
 .search-box input[type="text"] {
@@ -167,7 +167,7 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
 }
 
 .auth-box input[type="text"] {

src/components/SearchInput.css

@@ -18,7 +18,7 @@
   right: 0;
   height: 122px;
   /* Adjust height as needed */
-  background-image: url('https://s3-alpha-sig.figma.com/img/3678/baa2/4bf884c3841dee965b827acbd7555b98?Expires=1719792000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=bKQcSkMF~H8797MOcDHKeUzRWE1Ei9V2SWIyc4LsB-xzHOzMfd5WUNyFnDVr5pOMJdOWNI2xtsxaeVoH4h6g84vAyK6MUrCvWKhsxYrRK4O-3A0VTeIdGKICTMMj~EXZ7mjFoG5JwSGAGyj7Jx8iKS1OkoT0mTl7RDCRTvdChWZyv24BQaXsl~DfbNizjInhvwCvl3IcsdZBEnGYNSq2BbM4ZzU6w07-zMvNvC~EYPm33pAYXkDUsMh4XEQGc9gMAsNxJJZ4a5bo2vGwHREkkBDYgNGhwetefH6B0iZ7OnTqEFm3mcO3bAZtKdH0Evrcu2hNL-62pkK4JtdQ6~Anww__');
+  background-image: url("https://s3-alpha-sig.figma.com/img/3678/baa2/4bf884c3841dee965b827acbd7555b98?Expires=1719792000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=bKQcSkMF~H8797MOcDHKeUzRWE1Ei9V2SWIyc4LsB-xzHOzMfd5WUNyFnDVr5pOMJdOWNI2xtsxaeVoH4h6g84vAyK6MUrCvWKhsxYrRK4O-3A0VTeIdGKICTMMj~EXZ7mjFoG5JwSGAGyj7Jx8iKS1OkoT0mTl7RDCRTvdChWZyv24BQaXsl~DfbNizjInhvwCvl3IcsdZBEnGYNSq2BbM4ZzU6w07-zMvNvC~EYPm33pAYXkDUsMh4XEQGc9gMAsNxJJZ4a5bo2vGwHREkkBDYgNGhwetefH6B0iZ7OnTqEFm3mcO3bAZtKdH0Evrcu2hNL-62pkK4JtdQ6~Anww__");
   background-size: cover;
   /* Adjust background image size */
   background-position: center;
@@ -103,7 +103,7 @@
   left: 0;
   right: 0;
   height: 25px;
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
   border-radius: 0 0 15px 15px;
   /* Rounded corners at the bottom */
   cursor: pointer;
@@ -117,7 +117,7 @@
 }
 
 .expand-button:hover {
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
 }
 
 /* Adjust height of the music player container when expanded */
@@ -130,7 +130,7 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(108, 255, 128);
+  background-color: rgb(29, 185, 84);
 }
 
 .search-box input[type="text"] {

src/helpers/cafeHelpers.js

@@ -24,13 +24,13 @@ export async function getCafe(cafeId) {
   }
 }
 // api.js
-export const saveWelcomePageConfig = async (details) => {
+export const saveWelcomePageConfig = async (cafeId, 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
+    formData.append("cafeLogo", blob, "welcome-image.png"); // Specify filename if needed
   }
 
   // Append other form fields
@@ -38,8 +38,11 @@ export const saveWelcomePageConfig = async (details) => {
   formData.append("backgroundColor", details.backgroundColor);
   formData.append("textColor", details.textColor);
   
+  // Append the isWelcomePageActive field
+  formData.append("isWelcomePageActive", details.isWelcomePageActive);
+
   try {
-    const response = await fetch(`${API_BASE_URL}/welcome-config`, {
+    const response = await fetch(`${API_BASE_URL}/cafe/welcome-config/${cafeId}`, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${getAuthToken()}`, // Assuming you have an auth token
@@ -58,6 +61,7 @@ export const saveWelcomePageConfig = async (details) => {
   }
 };
 
+
 export async function getOwnedCafes(userId) {
   try {
     const response = await fetch(

src/pages/CafePage.js

@@ -9,6 +9,8 @@ import {
 } from "react-router-dom";
 
 import "../App.css";
+
+import { getImageUrl } from "../helpers/itemHelper.js";
 import SearchInput from "../components/SearchInput";
 import ItemTypeLister from "../components/ItemTypeLister";
 import { MusicPlayer } from "../components/MusicPlayer";
@@ -29,6 +31,7 @@ import WelcomePage from "./WelcomePage.js";
 function CafePage({
   table,
   sendParam,
+  welcomePageConfig,
   shopName,
   shopOwnerId,
   shopItems,
@@ -58,27 +61,34 @@ function CafePage({
   const [filterId, setFilterId] = useState(0);
   const [isStarted, setIsStarted] = useState(false);
 
-  useEffect(() => {
+  const [config, setConfig] = useState({});
-    // 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 checkWelcomePageConfig = () => {
-    const handleStorageChange = (event) => {
+    const parsedConfig = JSON.parse(welcomePageConfig);
-      if (event.detail === "getStartedClicked") {
+    if (parsedConfig.isWelcomePageActive == "true") {
+      const clicked = sessionStorage.getItem("getStartedClicked");
+      if (!clicked) {
+        sessionStorage.setItem("getStartedClicked", true);
+        document.body.style.overflow = "hidden";
         setIsStarted(true);
       }
+    }
+    setLoading(false);
   };
 
-    // Listen for custom events
+  useEffect(() => {
-    window.addEventListener("storageChange", handleStorageChange);
+    if (welcomePageConfig) {
-
+      const parsedConfig = JSON.parse(welcomePageConfig);
-    // Cleanup the event listener
+      setConfig({
-    return () => {
+        image: getImageUrl(parsedConfig.image) || "",
-      window.removeEventListener("storageChange", handleStorageChange);
+        welcomingText: parsedConfig.welcomingText || "Enjoy your coffee!",
-    };
+        backgroundColor: parsedConfig.backgroundColor || "#ffffff",
-  }, []);
+        textColor: parsedConfig.textColor || "#000000",
+        isActive: parsedConfig.isWelcomePageActive === "true",
+      });
+      checkWelcomePageConfig();
+    }
+  }, [welcomePageConfig]);
   useEffect(() => {
     if (user.cafeId != null && user.cafeId !== shopId) {
       // Preserve existing query parameters
@@ -105,10 +115,6 @@ function CafePage({
     navigate(0);
   };
 
-  useEffect(() => {
-    setLoading(false);
-  }, [shopItems]);
-
   useEffect(() => {
     async function fetchData() {
       socket.on("joined-room", (response) => {
@@ -120,6 +126,11 @@ function CafePage({
     if (socket) fetchData();
   }, [socket]);
 
+  const handleGetStarted = () => {
+    setIsStarted(false);
+
+    document.body.style.overflow = "auto";
+  };
   if (loading)
     return (
       <div className="Loader">
@@ -132,8 +143,19 @@ function CafePage({
   else
     return (
       <>
-        {!isStarted && <WelcomePage></WelcomePage>}
+        {welcomePageConfig && isStarted ? (
-        <div className="App">
+          <WelcomePage
+            image={config.image}
+            welcomingText={config.welcomingText}
+            backgroundColor={config.backgroundColor}
+            textColor={config.textColor}
+            isActive={config.isActive}
+            onGetStarted={handleGetStarted}
+            isFullscreen={true}
+          />
+        ) : (
+          welcomePageConfig != null && (
+            <div className="Cafe">
               <body className="App-header">
                 <Header
                   HeaderText={"Menu"}
@@ -182,7 +204,8 @@ function CafePage({
                 <div style={{ marginTop: "-15px" }}></div>
                 {shopItems
                   .filter(
-                (itemType) => filterId == 0 || itemType.itemTypeId === filterId
+                    (itemType) =>
+                      filterId == 0 || itemType.itemTypeId === filterId
                   )
                   .map((itemType) => (
                     <ItemLister
@@ -206,6 +229,8 @@ function CafePage({
                 />
               )}
             </div>
+          )
+        )}
       </>
     );
 }

src/pages/WelcomePage.css

@@ -47,10 +47,11 @@
 
 /* Fullscreen styles */
 .fullscreen {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
   width: 100vw;
   height: 100vh;
   transform: translate(-50%, -50%);
+  z-index: 300;
 }

src/pages/WelcomePage.js

@@ -1,168 +1,38 @@
-// WelcomePageEditor.js
+// WelcomePage.js
-import React, { useState } from "react";
+import React from "react";
-import WelcomePage from "./WelcomePage";
+import "./WelcomePage.css";
-import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
-import Switch from "react-switch"; // Import react-switch
-import "./WelcomePageEditor.css";
 
-const WelcomePageEditor = () => {
+const WelcomePage = ({
-  const [image, setImage] = useState("");
+  onGetStarted,
-  const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
+  isFullscreen,
-  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 (
-      <WelcomePage
-        image={image}
-        welcomingText={welcomingText}
-        backgroundColor={backgroundColor}
-        textColor={textColor}
-        isFullscreen={true}
-        onGetStarted={() => setIsFullscreen(false)}
-      />
-    );
-
   return (
     <div
-      className="welcome-page-editor"
+      className={`welcome-page ${isFullscreen ? "fullscreen" : ""}`} // Corrected the className syntax
-      style={{ width: "80vw", height: "80vh" }}
-    >
-      <h2>Edit Welcome Page</h2>
-      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
-        <input type="file" accept="image/*" onChange={handleImageChange} />
-        <textarea
-          value={welcomingText}
-          onChange={handleTextChange}
-          placeholder="Enter welcoming text..."
-          style={{ height: "40px", resize: "none" }}
-        />
-        <div
       style={{
-            display: "flex",
+        backgroundColor,
-            justifyContent: "space-between",
-            alignItems: "center",
       }}
     >
-          <label>
-            Background Color:
-            <input
-              type="color"
-              value={backgroundColor}
-              onChange={handleColorChange}
-            />
-          </label>
-          <label>
-            Text Color:
-            <input
-              type="color"
-              value={textColor}
-              onChange={handleTextColorChange}
-            />
-          </label>
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <span>Enable Welcoming Page:</span>
-            <Switch
-              onChange={() =>
-                setIsWelcomingPageEnabled(!isWelcomingPageEnabled)
-              }
-              checked={isWelcomingPageEnabled}
-              offColor="#888"
-              onColor="#0a74da"
-              uncheckedIcon={false}
-              checkedIcon={false}
-              height={20}
-              width={48}
-            />
-          </div>
-        </div>
-        <button onClick={handleSave} disabled={loading}>
-          {loading ? "Saving..." : "Save Configuration"}
-        </button>
-      </div>
       <div
-        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+        style={{
+          backgroundColor: image ? "transparent" : "black",
+        }}
+        className="image-container"
       >
-        {isWelcomingPageEnabled && (
+        {image && <img src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
-          <WelcomePage
-            image={image}
-            welcomingText={welcomingText}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-          />
-        )}
-        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
-          <svg
-            width="100"
-            height="100"
-            style={{ position: "absolute", bottom: 0, right: 0 }}
-            onClick={() => setIsFullscreen(true)}
-          >
-            <g transform="rotate(45 50 50)">
-              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
-              <text
-                x="50"
-                y="50"
-                textAnchor="middle"
-                dominantBaseline="middle"
-                fontSize="24"
-                fill="white"
-              >
-                &lt;&gt;
-              </text>
-            </g>
-          </svg>
-        </div>
       </div>
+      <h1 className="welcoming-text" style={{ color: textColor }}>
+        {welcomingText}
+      </h1>
+      <button className="get-started-button" onClick={onGetStarted}>
+        Get Started
+      </button>
     </div>
   );
 };
 
-export default WelcomePageEditor;
+export default WelcomePage;

src/pages/WelcomePageEditor.js

@@ -1,17 +1,33 @@
 // WelcomePageEditor.js
-import React, { useState } from "react";
+import React, { useEffect, 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";
+import { getImageUrl } from "../helpers/itemHelper.js";
 
-const WelcomePageEditor = () => {
+const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
   const [image, setImage] = useState("");
   const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
   const [backgroundColor, setBackgroundColor] = useState("#ffffff");
   const [textColor, setTextColor] = useState("#000000");
+  const [isWelcomePageActive, setIsWelcomePageActive] = useState(false); // State for the switch
   const [loading, setLoading] = useState(false); // Loading state
   const [isFullscreen, setIsFullscreen] = useState(false);
 
+  // Load existing welcome page configuration when component mounts
+  useEffect(() => {
+    if (welcomePageConfig) {
+      const config = JSON.parse(welcomePageConfig);
+      setImage(getImageUrl(config.image) || ""); // Load image path
+      setWelcomingText(config.welcomingText || "Enjoy your coffee!");
+      setBackgroundColor(config.backgroundColor || "#ffffff");
+      setTextColor(config.textColor || "#000000");
+      setIsWelcomePageActive(config.isWelcomePageActive === "true"); // Convert string to boolean
+    }
+    console.log(welcomePageConfig);
+  }, [welcomePageConfig]);
+
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     if (file) {
@@ -43,10 +59,11 @@ const WelcomePageEditor = () => {
       welcomingText,
       backgroundColor,
       textColor,
+      isWelcomePageActive, // Include the isWelcomePageActive state
     };
 
     try {
-      const result = await saveWelcomePageConfig(details);
+      const result = await saveWelcomePageConfig(cafeId, details);
       console.log("Configuration saved:", result);
     } catch (error) {
       console.error("Error saving configuration:", error);
@@ -55,18 +72,6 @@ const WelcomePageEditor = () => {
     }
   };
 
-  if (isFullscreen)
-    return (
-      <WelcomePage
-        image={image}
-        welcomingText={welcomingText}
-        backgroundColor={backgroundColor}
-        textColor={textColor}
-        isFullscreen={true}
-        onGetStarted={() => setIsFullscreen(false)}
-      />
-    );
-
   return (
     <div
       className="welcome-page-editor"
@@ -99,6 +104,17 @@ const WelcomePageEditor = () => {
             />
           </label>
         </div>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <label style={{ marginRight: "10px" }}>Is Welcome Page Active:</label>
+          <Switch
+            onChange={() => setIsWelcomePageActive(!isWelcomePageActive)}
+            checked={isWelcomePageActive}
+            offColor="#888"
+            onColor="#0a0"
+            uncheckedIcon={false}
+            checkedIcon={false}
+          />
+        </div>
         <button onClick={handleSave} disabled={loading}>
           {loading ? "Saving..." : "Save Configuration"}
         </button>
@@ -111,6 +127,8 @@ const WelcomePageEditor = () => {
           welcomingText={welcomingText}
           backgroundColor={backgroundColor}
           textColor={textColor}
+          onGetStarted={() => setIsFullscreen(false)}
+          isFullscreen={isFullscreen}
         />
         <div style={{ position: "absolute", bottom: 0, right: 0 }}>
           <svg