ok

2025-04-04 05:03:09 +07:00
parent 931f3f90e8
commit 6b59349eff
18 changed files with 998 additions and 698 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,29 @@ body {
  /* overflow-x: hidden; */
 }

+.Cafe {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+  position: relative;
+}
+
+.Cafe.grayscale {
+  filter: grayscale(1);
+  pointer-events: none; /* Disable pointer events when the deadline is exceeded */
+}
+
+.Watermark {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-image: url(https://i.ibb.co.com/F4FMw1jz/testuseonly.png);
+  z-index: 1000;
+  filter: opacity(0.05);
+  pointer-events: none;
+}
+
 .App-logo {
  height: 40vmin;
  pointer-events: none;
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,8 @@ import {
 } from "./helpers/subscribeHelpers.js";
 import Modal from "./components/Modal"; // Import your modal component

+import { requestNotificationPermission } from './services/notificationService'; // Import the notification service
+
 function App() {
  const location = useLocation();
  const navigate = useNavigate();
@@ -63,6 +65,7 @@ function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);
  const [onModalCloseFunction, setOnModalCloseFunction] = useState(null);
+  const [onModalYesFunction, setOnModalYesFunction] = useState(null);
  const transactionList = useRef(null);
  const [queue, setQueue] = useState([]);

@@ -83,14 +86,14 @@ function App() {
    setTotalItemsCount(totalCount);
    setTotalPrice(totalPrice);

-    
-      // If 'lastTransaction' exists, proceed
-      const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
-      console.log(lastTransaction);
-    
-      if (lastTransaction != null) {
-        setLastTransaction(lastTransaction);
-      }
+
+    // If 'lastTransaction' exists, proceed
+    const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
+    console.log(lastTransaction);
+
+    if (lastTransaction != null) {
+      setLastTransaction(lastTransaction);
+    }
  };

  useEffect(() => {
@@ -194,26 +197,26 @@ function App() {
      setModal("transaction_pending", data);

      localStorage.setItem('cart', []);
-      
+
      calculateTotalsFromLocalStorage();
    });

    socket.on("transaction_confirmed", async (data) => {
      console.log("transaction notification: " + data);
      setModal("transaction_confirmed", data);
-    
+
      localStorage.setItem('cart', []);
-      
+
      const startTime = Date.now(); // Capture the start time
      const timeout = 10000; // 10 seconds timeout in milliseconds
-      
+
      calculateTotalsFromLocalStorage();

      while (localStorage.getItem("lastTransaction") === null) {
        if (Date.now() - startTime > timeout) {
          return; // Exit the function and don't proceed further
        }
-    
+
        await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
      }

@@ -221,12 +224,12 @@ function App() {
      // If 'lastTransaction' exists, proceed
      const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
      console.log(lastTransaction);
-    
+
      if (lastTransaction != null) {
        setLastTransaction(lastTransaction);
      }
    });
-    
+

    socket.on("transaction_success", async (data) => {
      console.log("transaction notification");
@@ -249,6 +252,18 @@ function App() {
    });


+    const handleNotificationClick = async () => {
+      const permission = await requestNotificationPermission();
+
+      if (permission === "granted") {
+        console.log("Notification permission granted.");
+        // Set up notifications or show a success modal
+      } else {
+        console.error("Notification permission denied.");
+        setModal('blocked_notification'); // Show modal for blocked notifications
+      }
+    };
+
    const checkNotifications = () => {
      let permission = Notification.permission;

@@ -257,7 +272,7 @@ function App() {
      let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string

      if (permission !== "granted" && searchModal == '') {
-        setModal("req_notification");
+        setModal("message", { captMessage: 'Notifikasi tidak aktif', descMessage: 'Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.' }, null, handleNotificationClick);
      }
    };

@@ -268,7 +283,7 @@ function App() {
      } else {
        console.log(data)
        setUser(data.data.user);
-        if(data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
+        if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
        if (
          data.data.user.password == "unsetunsetunset" &&
          localStorage.getItem("settings")
@@ -438,7 +453,7 @@ function App() {
  }, [navigate]);

  // Function to open the modal
-  const setModal = (content, params = {}, onCloseFunction) => {
+  const setModal = (content, params = {}, onCloseFunction, onYesFunction) => {
    const queryParams = new URLSearchParams(location.search);

    // Update the modal and any additional params
@@ -462,6 +477,11 @@ function App() {
    } else {
      setOnModalCloseFunction(null);
    }
+    if (onYesFunction) {
+      setOnModalYesFunction(() => onYesFunction); // Store the close function
+    } else {
+      setOnModalYesFunction(null);
+    }
  };

  const closeModal = (closeTheseContent = []) => {
@@ -693,7 +713,7 @@ function App() {
            element={
              <>
                <Transactions
-                shop={shop}
+                  shop={shop}
                  shopId={shopId}
                  sendParam={handleSetParam}
                  deviceType={deviceType}
@@ -725,6 +745,7 @@ function App() {
        onClose={closeModal}
        setModal={setModal}
        onModalCloseFunction={onModalCloseFunction}
+        onModalYesFunction={onModalYesFunction}
      />
    </div>
  );
--- a/src/components/AccountUpdatePage.js
+++ b/src/components/AccountUpdatePage.js
@@ -58,7 +58,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {

        <div className={styles.LoginForm}>
        <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-          <label htmlFor="username" className={styles.usernameLabel}>--------------------------------------------</label>
+          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------</label>
          
          <input
            name="username"
@@ -85,7 +85,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
        <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
          <span>
            <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
-            <label htmlFor="password" className={styles.usernameLabel}>-------------------------</label>
+            <label htmlFor="password" className={styles.usernameLabel}>----------------------</label>
          </span>

          <input
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -34,7 +34,7 @@ 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,welcomePageConfig, onModalCloseFunction }) => {
+const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => {
  
  const [shopImg, setShopImg] = useState('');
  const [updateKey, setUpdateKey] = useState(0);
@@ -62,6 +62,15 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
    onClose(); // Close the modal
  };

+  const handleYes = (event) => {
+    if(onModalYesFunction) 
+      console.log('dawnawddjwand')
+    onModalYesFunction();
+  }
+
+  const handleNo = (event) => {
+    if(onModalCloseFunction) onModalCloseFunction();
+  }

  // Function to handle clicks on the modal content
  const handleContentClick = (event) => {
@@ -123,7 +132,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
        {modalContent === "join" && <Join setModal={setModal} />}
        {modalContent === "claim-coupon" && <Join setModal={setModal} />}
        {modalContent === "loading" && <Loading setModal={setModal} />}
-        {modalContent === "message" && <Message/>}
+        {modalContent === "message" && <Message handleYes={handleYes}/>}
      </div>
    </div>
  );
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -130,7 +130,7 @@
 }

 .expandable-container > div:first-child {
-  padding-top: 20px;
+  padding-top: 28px;
  
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
@@ -167,7 +167,7 @@
  outline: none;
  
  transition: padding-top 0.3s ease;
-  padding-top: 8px;
+  padding-top: 13px;
  }

 .expand-button h5 {
--- a/src/components/StepByStep.js
+++ b/src/components/StepByStep.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from './StepByStep.module.css'; // Import the CSS Module
+import styles from './StepByStep.module.css'; // Import the CSS module

 const StepByStep = () => {
  return (
-  <div className={styles.container}>
+    <div className={styles.container}>
    <div className={styles.screen}>
      <div className={styles.main}>
        <img src="https://i.ibb.co.com/F4VK6KHs/header.jpg" alt="Header" />
@@ -11,26 +11,38 @@ const StepByStep = () => {
          <img src="https://i.ibb.co.com/6cGq6byM/player1.jpg" alt="Player 1" />
          <img src="https://i.ibb.co.com/0VDjJdXV/player2.jpg" alt="Player 2" />
          <img src="https://i.ibb.co.com/8D3mSp4g/player3.jpg" alt="Player 3" />
-          <img src="https://i.ibb.co.com/XxS1DhRy/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/tw7KkmZ1/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/9k4PHW5W/player5.jpg" alt="Player 5" />
+          
+          <div>
+            <img src="https://i.ibb.co.com/TBYM6htX/search.jpg" alt="Search" />
+            <div></div>
+          </div>
+          
+          <img src="https://i.ibb.co.com/cSqD0LKR/music1.jpg" alt="Music 1" />
+          <img src="https://i.ibb.co.com/Q737mTn5/music2.jpg" alt="Music 2" />
+          <img src="https://i.ibb.co.com/Rk4tQW6M/music3.jpg" alt="Music 3" />
+          <div className={styles.borderRight}></div>
+          <div className={styles.whiteBg}></div>
        </div>
        <div>
          <img src="https://i.ibb.co.com/4z5zdsS/body.jpg" alt="Body" />
          <div className={styles.escappucino}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 1" />
          </div>
          <div className={styles.chickenkatsu}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chickenkatsu 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chickenkatsu 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chicken Katsu" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chicken Katsu 1" />
          </div>
        </div>
      </div>
      <div className={styles.cartbutton}>
-        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="Cart Button" />
-        <img src="https://i.ibb.co.com/Y7wbjGDz/cart-2.png" alt="Cart Icon" />
+        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="New Project" />
+        <img src="https://i.ibb.co.com/Y 7wbjGDz/cart-2.png" alt="Cart" />
      </div>
      <div className={styles.cart}>
-        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart Image" />
+        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart" />
        <img src="https://i.ibb.co.com/Mxrjc9Dc/checkout.png" alt="Checkout" />
      </div>
      <div className={styles.transaction}>
@@ -39,11 +51,11 @@ const StepByStep = () => {
    </div>
    <div className={styles.secondscreen}>
      <div className={styles.secondmain}>
-        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg"/>
+        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg" alt="Second Main" />
      </div>
    </div>
    </div>
  );
 };

-export default StepByStep;
+export default StepByStep;
--- a/src/components/StepByStep.module.css
+++ b/src/components/StepByStep.module.css
--- a/src/components/Watermark.js
+++ b/src/components/Watermark.js
@@ -6,7 +6,7 @@ const Watermark = ({dontShowName}) => {
    <div style={{ zIndex: 5, marginTop: '30px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '15px', lineHeight: '1rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}>
      {!dontShowName && <div>KEDAIMASTER.COM</div>}
      <div style={{ display: 'flex' }}>
-        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba pesanan udah dimejamu</div>
+        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw</div>
        <StepByStep />
      </div>
      <div style={{ marginTop: '8px' }}>© 2025 KEDIRITECHNOPARK.COM</div>
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js

-const API_BASE_URL = 'https://dev.api.kedaimaster.com';
+const API_BASE_URL = 'https://api.kedaimaster.com';

 export default API_BASE_URL;
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -10,6 +10,7 @@ import {

 import "../App.css";

+import API_BASE_URL from '../config';
 import Watermark from "../components/Watermark";
 import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js";
 import SearchInput from "../components/SearchInput";
@@ -140,7 +141,7 @@ function CafePage({
      socket.on("joined-room", (response) => {
        const { isSpotifyNeedLogin, isExceededDeadline } = response;
        setNeedSpotifyLogin(isSpotifyNeedLogin);
-        if (isExceededDeadline) setModal('message',{returnMessage:'Kafe sedang tidak tersedia'});
+        if (isExceededDeadline) setModal('message',{captMessage:'Kafe sedang tidak tersedia'});
        setIsExceededDeadline(isExceededDeadline);
      });
    }
@@ -199,7 +200,7 @@ function CafePage({
  else
    return (
      <>
-        {welcomePageConfig && isStarted ? (
+        {/* {welcomePageConfig && isStarted ? (
          <WelcomePage
            image={config.image}
            welcomingText={config.welcomingText}
@@ -209,9 +210,12 @@ function CafePage({
            onGetStarted={handleGetStarted}
            isFullscreen={true}
          />
-        ) : (
-          welcomePageConfig != null && (
-            <div className="Cafe" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: '100vh', filter: isExceededDeadline ? 'grayscale(1)' : '', pointerEvents: isExceededDeadline ? 'none' : '' }}>
+        ) : ( */}
+            <div className={`Cafe ${isExceededDeadline ? 'grayscale' : ''}`}>
+              
+            {API_BASE_URL != 'https://api.kedaimaster.com' &&
+              <div className="Watermark"></div>
+            }
              <div className="App-header">
                <Header
                  HeaderText={"Menu"}
@@ -363,8 +367,7 @@ function CafePage({
              </div>
              <Watermark/>
            </div>
-          )
-        )}
+        {/* )} */}
      </>
    );
 }
--- a/src/pages/CreateCoupon.js
+++ b/src/pages/CreateCoupon.js
@@ -46,7 +46,7 @@ const CreateCouponPage = () => {
      let encodedCouponCode = encodeURIComponent(encryptedCouponCode);
      
      // Construct the URL with the encoded coupon code as a query parameter
-      const urlWithCoupon = `https://dev.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
+      const urlWithCoupon = `https://coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
  
      // Optionally, set the URL to use with the coupon
      setCouponUrl(urlWithCoupon);
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -35,7 +35,6 @@ const LinktreePage = ({ user, setModal }) => {
  const [selectedSubItemId, setSelectedSubItemId] = useState(0);
  const [coupons, setCoupons] = useState(null);

-
  useEffect(() => {
    const urlParams = new URLSearchParams(location.search);
    const modalParam = urlParams.get('modal');
@@ -126,6 +125,7 @@ const LinktreePage = ({ user, setModal }) => {
  useEffect(() => {
    if (user) {
      setLoading(true);
+      document.body.style.backgroundColor = "white";
      switch (user.roleId) {
        case 0:
          getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
@@ -138,6 +138,7 @@ const LinktreePage = ({ user, setModal }) => {
          break;
        default:
          setLoading(false);
+          document.body.style.backgroundColor = "rgb(222, 237, 100)";
          break;
      }
    }
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -192,11 +192,11 @@ const LinktreePage = ({ data, setModal }) => {
                    
                          const loggingcoupon = await handleLogCouponForUser(); // Await the coupon logging process
                          setModal('message', { 
-                            returnMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' 
+                            captMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' 
                          });
                        } catch (error) {
                          console.error('Error during coupon handling:', error);
-                          setModal('message', { returnMessage: 'Kupon gagal ditambahkan' });
+                          setModal('message', { captMessage: 'Kupon gagal ditambahkan' });
                        }
                      }
                    }}                    
--- a/src/pages/Join.module.css
+++ b/src/pages/Join.module.css
@@ -12,7 +12,7 @@

 .dashboardContainer {
  z-index: 6;
-  padding-top: 40px;
+  padding: 40px 3px 15px 3px;
 }

 /* Main Heading */
@@ -25,7 +25,27 @@
  letter-spacing: -1px;
  color: rgb(37, 79, 26);
 }
+.button {
+  color: white;
+  background-color: rgb(37, 79, 26);
+  border-radius: 25px;
+  padding: 0px 0px 0px 18px;
+  width: 222px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 2.25rem;
+  letter-spacing: -1px;
+}

+.descHeading {
+  width: 99%;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 1.25rem;
+  margin-bottom: 1rem;
+  letter-spacing: -1px;
+  color: rgb(37, 79, 26);
+}
 /* Main Heading */
 .voucherHeading {
  font-weight: 700;
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -20,6 +20,7 @@
  z-index: 6;
  padding: 0 1rem;
  padding-top: 100px;
+  margin-bottom: 30px;
 }

 /* Main Heading */
--- a/src/pages/Message.js
+++ b/src/pages/Message.js
@@ -2,24 +2,26 @@
 import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file

-const LinktreePage = () => {
-  const [returnMessage, setReturnMessage] = useState('');
+const LinktreePage = ({ handleYes }) => {
+  const [captMessage, setCaptMessage] = useState('');
+  const [descMessage, setDescMessage] = useState('');

  useEffect(() => {
      const newQueryParams = new URLSearchParams(window.location.search);
-      const r = newQueryParams.get('returnMessage');
+      const r = newQueryParams.get('captMessage');
+      const s = newQueryParams.get('descMessage');
      if (r) {
-        setReturnMessage(r)
+        setCaptMessage(r)
+        setDescMessage(s)
      }
  }, []);

  return (
    <div className={styles.linktreePage}>
        <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>{returnMessage}</div>
-          <div className={styles.subHeadingTransparent}>
-            Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
-          </div>
+          <div className={styles.mainHeading}>{captMessage}</div>
+          <div className={styles.descHeading}>{descMessage}</div>
+          {handleYes && <div onClick={handleYes} className={styles.button}>Aktifkan</div>}
        </div>
    </div>
  );
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -452,7 +452,7 @@ const App = ({ forCafe = true, cafeId = -1,
      setModal('loading');
      const create = await createCafe(itemName);
      setModal('message', { 
-        returnMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' 
+        captMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' 
      });

      // Add a 2-second delay before proceeding