ok

src/pages/Message.js

@@ -5,23 +5,26 @@ 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)
       }
   }, []);
 
   return (
     <div className={styles.linktreePage}>
-        <div className={styles.dashboardContainer}>
+        <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>
   );