ok

src/components/Modal.js

@@ -65,8 +65,8 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
 
   const handleYes = (event) => {
     if(onModalYesFunction) 
-      console.log('dawnawddjwand')
       onModalYesFunction();
+    onClose(); // Close the modal
   }
 
   const handleNo = (event) => {
@@ -134,7 +134,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "claim-coupon" && <Join setModal={setModal} />}
         {modalContent === "loading" && <Loading setModal={setModal} />}
         {modalContent === "message" && <Message handleYes={handleYes}/>}
-        {modalContent === "player-prompt" && <PlayerPrompt/>}
+        {modalContent === "player-prompt" && <PlayerPrompt cafeId={shop.cafeId} setModal={setModal} handleClose={handleOverlayClick} welcomePageConfig={shop.welcomePageConfig}/>}
       </div>
     </div>
   );

src/components/MusicPlayer.js

@@ -129,7 +129,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     if (!socket) return;
 
     socket.on("requestResponse", (response) => {
-      if(response.status)      setModal("message", { captMessage: 'Berhasil menambahkan lagu' }, null, null);
+      if(response.success) setModal("message", { captMessage: 'Berhasil menambahkan lagu' }, null, null);
       else setModal("message", { captMessage: 'Gagal menambahkan lagu', descMessage: response.alasan }, null, null);
     });
     socket.on("searchResponse", (response) => {

src/helpers/cafeHelpers.js

@@ -58,6 +58,7 @@ export const saveWelcomePageConfig = async (cafeId, details) => {
   formData.append("welcomingText", details.welcomingText);
   formData.append("backgroundColor", details.backgroundColor);
   formData.append("textColor", details.textColor);
+  formData.append("musicFilter", details.musicFilter);
   
   // Append the isWelcomePageActive field
   formData.append("isWelcomePageActive", details.isWelcomePageActive);

src/pages/Message.js

@@ -5,14 +5,17 @@ import styles from './Join.module.css'; // Import the module.css file
 const LinktreePage = ({ handleYes }) => {
   const [captMessage, setCaptMessage] = useState('');
   const [descMessage, setDescMessage] = useState('');
+  const [closeText, setCloseText] = useState('');
 
   useEffect(() => {
       const newQueryParams = new URLSearchParams(window.location.search);
       const r = newQueryParams.get('captMessage');
       const s = newQueryParams.get('descMessage');
+      const v = newQueryParams.get('closeText') || 'Tutup';
       if (r) {
         setCaptMessage(r)
         setDescMessage(s)
+        setCloseText(v)
       }
   }, []);
 
@@ -20,8 +23,8 @@ const LinktreePage = ({ handleYes }) => {
     <div className={styles.linktreePage}>
         <div className={styles.dashboardContainer} >
           <div className={styles.mainHeading}>{captMessage}</div>
-          <div className={styles.descHeading}>{descMessage}</div>
-          {handleYes && <div onClick={handleYes} className={styles.button}>Aktifkan</div>}
+          {descMessage && <div className={styles.descHeading}>{descMessage}</div>}
+          {handleYes && <div onClick={handleYes} className={styles.button}>{closeText}</div>}
         </div>
     </div>
   );

src/pages/PlayerPrompt.js

@@ -1,28 +1,42 @@
 // LinktreePage.js
 import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
 
-const LinktreePage = ({ handleYes }) => {
-  const [captMessage, setCaptMessage] = useState('');
-  const [descMessage, setDescMessage] = useState('');
+const LinktreePage = ({ cafeId, setModal, handleClose, welcomePageConfig }) => {
+  const [musicFilter, setMusicFilter] = useState('');
 
   useEffect(() => {
-      const newQueryParams = new URLSearchParams(window.location.search);
-      const r = newQueryParams.get('captMessage');
-      const s = newQueryParams.get('descMessage');
-      if (r) {
-        setCaptMessage(r)
-        setDescMessage(s)
+    console.log(welcomePageConfig)
+    if (welcomePageConfig) {
+      const parsedConfig = JSON.parse(welcomePageConfig);
+      setMusicFilter(parsedConfig.musicFilter)
     }
-  }, []);
+  }, [welcomePageConfig]);
+
+  const handleSave = async () => {
+    setModal("loading");
+
+    const details = {
+      musicFilter
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(cafeId, details);
+    } catch (error) {
+      setModal("message", { captMessage: 'Gagal menerapkan filter' }, null, null);
+    } finally {
+      handleClose();
+    }
+  };
 
   return (
     <div className={styles.linktreePage}>
         <div className={styles.dashboardContainer}>
           <div className={styles.mainHeading}>Filter jenis musik</div>
           <div className={styles.descHeading}>Masukkan prompt untuk Gemini AI</div>
-          <input className={styles.input} placeholder="hanya musik santai"type="text"/>
-          <div onClick={handleYes} className={styles.button}>Simpan</div>
+          <input value={musicFilter} onChange={(e)=>setMusicFilter(e.target.value)} className={styles.input} placeholder="hanya musik santai"type="text"/>
+          <div onClick={handleSave} className={styles.button}>Simpan</div>
         </div>
     </div>
   );