ok

src/components/Modal.js

@@ -7,7 +7,6 @@ import CreateCafe from "../pages/CreateCafe"
 import CreateTenant from "../pages/CreateTenant"
 import TablesPage from "./TablesPage.js";
 import PaymentOptions from "./PaymentOptions.js";
-import TableMaps from "../components/TableMaps";
 import Transaction from "../pages/Transaction";
 import Transaction_pending from "../pages/Transaction_pending";
 import Transaction_confirmed from "../pages/Transaction_confirmed";

src/components/TablesPage.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import jsQR from "jsqr";
+import API_BASE_URL from "../config.js";
 import { getImageUrl } from "../helpers/itemHelper";
 import { getTables, updateTable, createTable } from "../helpers/tableHelper";
 import {
@@ -9,6 +9,7 @@ import {
 } from "../helpers/cafeHelpers";
 
 import { toPng } from 'html-to-image';
+import { ColorRing } from "react-loader-spinner";
 
 const SetPaymentQr = ({ shop }) => {
   const [initialPos, setInitialPos] = useState({
@@ -29,7 +30,6 @@ const SetPaymentQr = ({ shop }) => {
   const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
   const qrBackgroundInputRef = useRef(null);
 
-  const [cafeIdentifyNameDefault, setCafeIdentifyNameDefault] = useState(shop.cafeIdentifyName);
   const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName);
   const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate;
 
@@ -59,6 +59,8 @@ const SetPaymentQr = ({ shop }) => {
   const [selectedTable, setSelectedTable] = useState(null);
 
   const [tableNo, setTableNo] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [identifyNameResponse, setIdentifyNameResponse] = useState('-----------------');
 
   useEffect(() => {
     const fetchData = async () => {
@@ -178,7 +180,46 @@ const SetPaymentQr = ({ shop }) => {
       });
   }
 
+  // This will hold the timeout ID so we can clear it when needed
+  const typingTimeoutRef = useRef(null);
 
+  const handleInputChange = (e) => {
+    setIsLoading(true)
+    const updatedValue = e.target.value
+      .toLowerCase()
+      .replace(/ /g, '_')
+      .replace(/[^a-z0-9_]/g, '');
+    setCafeIdentifyNameUpdate(updatedValue);
+
+    // Clear the existing timeout
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+
+    // Set a new timeout
+    typingTimeoutRef.current = setTimeout(() => {
+      // Call the function to check if the name is already used
+      checkIfNameIsUsed(updatedValue);
+    }, 1000); // 1 second delay
+  };
+
+  const checkIfNameIsUsed = async (newIdentifyName) => {
+    // Replace this with your actual API call
+    try {
+      const response = await fetch(API_BASE_URL+`/cafe/check-identifyName/${newIdentifyName}`);
+      console.log(response)
+      if (response.ok) {
+        setIsLoading(false);
+        setIdentifyNameResponse(200)
+      }
+      else {
+        setIsLoading(false);
+        setIdentifyNameResponse(409)
+      }
+    } catch (error) {
+
+    }
+  };
 
   return (
     <div style={styles.container}>
@@ -343,22 +384,13 @@ const SetPaymentQr = ({ shop }) => {
                       paddingLeft: isconfigcafeidentityname ? '10px' : '0', // Adjust padding when focused
                       borderLeft: isconfigcafeidentityname ? '1px solid #ccc' : '0', // Adjust border when focused
                     }}
-                    onChange={(e) => {
-                      // Convert to lowercase, replace spaces with underscores, and remove invalid characters
-                      const updatedValue = e.target.value
-                        .toLowerCase() // Convert input to lowercase
-                        .replace(/ /g, '_') // Replace spaces with underscores
-                        .replace(/[^a-z0-9_]/g, ''); // Remove characters that are not lowercase letters, numbers, or underscores
-                      setCafeIdentifyNameUpdate(updatedValue);
-                    }}
+                    onChange={
+                      handleInputChange
+                    }
                     value={cafeIdentifyNameUpdate}
                     onFocus={() => {
                       setIsConfigCafeIdentityName(true); // Set the state to true when input is focused
                     }}
-                    onBlur={() => {
-                      setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus
-                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault); // Reset to default value on blur
-                    }} // Handle blur event to reset the state
                   />
 
                 </div>
@@ -615,52 +647,56 @@ const SetPaymentQr = ({ shop }) => {
             <p>Klik untuk ganti alamat</p>
           </div>
           <div style={styles.resultMessage}>
-            <p onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }}>-----------------</p>
+            <p>-----------------</p>
             <div
-              onClick={() => {setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} style={styles.changeButton}>Ganti</div>
+              onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+            </div>
           </div>
         </> : (
-          <div style={{
-            display: 'flex', justifyContent: 'space-between', width: '100%',
-            marginBottom: '10px'
-          }}>
-            <div
-              onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
-              style={{
-                backgroundColor: '#303034',
-                width: '47%',
-                color: 'white',
-                borderRadius: '0 0 0px 6px',
-                fontFamily: 'Roboto',
-                fontSize: '13px',
-                padding: 3,
-                cursor: 'pointer',
-              }}
-            >
-              Batalkan
-            </div>
+          <>
 
-            <div
-              onClick={() => {
-                setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
-                // Handle save functionality here
-                setIsConfigCafeIdentityName(false); // Close after saving
+            <div style={styles.uploadMessage}>
+              <p>{cafeIdentifyNameUpdate == shop.cafeIdentifyName ?
+                '-----------------' :
+                !isLoading && identifyNameResponse == 200 ?
+                'Alamat tersedia'
+                :
+                !isLoading && identifyNameResponse != 200 ?
+                'Alamat terpakai'
+                :
+                < ColorRing
+                  height="16"
+                  width="16" style={{ marginTop: '5px' }} />
 
-              }}
-              style={{
-                backgroundColor: '#303034',
-                width: '47%',
-                color: 'white',
-                borderRadius: '0 0 6px 0px',
-                fontFamily: 'Roboto',
-                fontSize: '13px',
-                padding: 3,
-                cursor: 'pointer',
-              }}
-            >
-              Simpan
+              }
+              </p>
             </div>
-          </div>
+            <div style={styles.resultMessage}>
+              <p>{cafeIdentifyNameUpdate != shop.cafeIdentifyName && identifyNameResponse == 200 && !isLoading ? 
+                <div
+                  onClick={() => setIsConfigCafeIdentityName(false)} style={styles.changeButton2}>Terapkan
+                </div>
+                :
+                '----------'}</p>
+              {isconfigcafeidentityname ?
+                <div
+                  onClick={() => { setIdentifyNameResponse(0); setCafeIdentifyNameUpdate(shop.cafeIdentifyName); setIsConfigCafeIdentityName(false); }} style={styles.changeButton}>Batal
+                </div>
+                :
+                <div
+                  onClick={() => {  setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+                </div>
+              }
+            </div>
+            {/* <div
+                onClick={() => { }} style={styles.changeButton}>Simpan
+                {isLoading &&
+                  <ColorRing
+                    height="20"
+                    width="20" style={{ marginTop: '5px' }} />
+                }
+              </div> */}
+          </>
         )}
       <div
         id="qr-code-container"
@@ -982,6 +1018,14 @@ const styles = {
     lineHeight: '32px',
     paddingLeft: '10px',
     paddingHeight: '10px',
+    marginBottom: '22px',
+    width: '80px',
+    textAlign: 'center'
+  },
+  changeButton2: {
+    color: 'black',
+    fontWeight: 700,
+    textAlign: 'left'
   },
   uploadButton: {
     paddingRight: '10px',
@@ -1003,6 +1047,13 @@ const styles = {
     display: 'flex',
     justifyContent: 'space-between'
   },
+  resultMessage2: {
+    marginTop: "-24px",
+    marginBottom: "10px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
   buttonContainer: {
     marginTop: "20px",
     textAlign: "left",