ok

2025-02-18 22:39:26 +07:00
parent 9e7c80ddad
commit 066878ccbd
4 changed files with 87 additions and 15 deletions
--- a/public/styles.css
+++ b/public/styles.css
@@ -0,0 +1,20 @@
+/* Default styles - for mobile view */
+#wrapper {
+    width: 100%;
+    max-width: 375px; /* Mobile width ratio */
+    margin: 0 auto;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  /* Desktop view - simulate mobile ratio on desktop */
+  @media (min-width: 1024px) {
+    #wrapper {
+      width: 100%;
+      max-width: 375px; /* Keep mobile width ratio on desktop */
+      margin: 0 auto;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+  }
+  
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -35,6 +35,7 @@ import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
 const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
  
  const [shopImg, setShopImg] = useState('');
+  const [updateKey, setUpdateKey] = useState(0);

  useEffect(() => {
    if (welcomePageConfig) {
@@ -43,6 +44,10 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
    }
  }, [welcomePageConfig]);
  
+  useEffect(() => {
+    setUpdateKey(updateKey+1);
+  }, [shop]);
+
  if (!isOpen) return null;

  // Function to handle clicks on the overlay
@@ -63,7 +68,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
  };
  if(modalContent == '') handleOverlayClick();
  return (
-    <div onClick={handleOverlayClick} className={styles.modalOverlay}>
+    <div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
      <div className={styles.modalContent} onClick={handleContentClick}>
        
      {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
--- a/src/components/TablesPage.js
+++ b/src/components/TablesPage.js
@@ -87,12 +87,16 @@ const SetPaymentQr = ({ shop }) => {
      fontsize,
      fontcolor,
      fontPosition: initialFontPos,
+      cafeIdentifyName: shop.cafeIdentifyName != cafeIdentifyNameUpdate ? cafeIdentifyNameUpdate : null
    };

    // Call saveCafeDetails function with the updated details object
    saveCafeDetails(shop.cafeId, details)
      .then((response) => {
        console.log("Cafe details saved:", response);
+        if (shop.cafeIdentifyName != cafeIdentifyNameUpdate) {
+          window.location.href = `/${cafeIdentifyNameUpdate}?modal=edit_tables`;
+        }
      })
      .catch((error) => {
        console.error("Error saving cafe details:", error);
@@ -206,7 +210,7 @@ const SetPaymentQr = ({ shop }) => {
  const checkIfNameIsUsed = async (newIdentifyName) => {
    // Replace this with your actual API call
    try {
-      const response = await fetch(API_BASE_URL+`/cafe/check-identifyName/${newIdentifyName}`);
+      const response = await fetch(API_BASE_URL + `/cafe/check-identifyName/${newIdentifyName}`);
      console.log(response)
      if (response.ok) {
        setIsLoading(false);
@@ -659,22 +663,39 @@ const SetPaymentQr = ({ shop }) => {
              <p>{cafeIdentifyNameUpdate == shop.cafeIdentifyName ?
                '-----------------' :
                !isLoading && identifyNameResponse == 200 ?
-                'Alamat tersedia'
-                :
-                !isLoading && identifyNameResponse != 200 ?
-                'Alamat terpakai'
-                :
-                < ColorRing
-                  height="16"
-                  width="16" style={{ marginTop: '5px' }} />
+                  'Alamat tersedia'
+                  :
+                  !isLoading && identifyNameResponse != 200 ?
+                    'Alamat terpakai'
+                    :
+                    < ColorRing
+                      height="16"
+                      width="16" style={{ marginTop: '5px' }} />

              }
              </p>
            </div>
+            {identifyNameResponse == 199 &&
+              <div style={{ position: 'absolute', height: '100%', width: '100%', top: 0, left: 0, zIndex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#252525a8', borderRadius: '8px' }}>
+                <div style={{ width: '80%', backgroundColor: 'white', borderRadius: '8px' }}>
+                  <h3>ⓘ</h3>
+                  <p style={{ padding: '0px 14px 14px 14px' }}>Perubahan alamat bisnis akan menyebabkan seluruh QR kode identifikasi kedai atau meja yang telah dicetak sebelumnya menjadi tidak berlaku.</p>
+                  <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+                    <div
+                      onClick={() => { setIdentifyNameResponse(200); }} style={styles.changeButton}>Batal
+                    </div>
+                    <div
+                      onClick={() => { setIsConfigCafeIdentityName(false); setIdentifyNameResponse(200); }} style={styles.changeButton}>Terapkan
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            }
            <div style={styles.resultMessage}>
              <p>{cafeIdentifyNameUpdate != shop.cafeIdentifyName && identifyNameResponse == 200 && !isLoading ?
                <div
-                  onClick={() => setIsConfigCafeIdentityName(false)} style={styles.changeButton2}>Terapkan
+                  onClick={() => { setIdentifyNameResponse(199) }} style={styles.changeButton2}>Terapkan
                </div>
                :
                '----------'}</p>
@@ -684,7 +705,7 @@ const SetPaymentQr = ({ shop }) => {
                </div>
                :
                <div
-                  onClick={() => {  setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+                  onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
                </div>
              }
            </div>
@@ -698,6 +719,23 @@ const SetPaymentQr = ({ shop }) => {
              </div> */}
          </>
        )}
+      <div style={{ height: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px' }}>
+        <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+          <div style={{height: '27.4px'}}><input style={{fontSize: '17.6px'}} value={shop.name}></input> menu</div>
+          <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s'></img>
+        </div>
+      </div>
+      <>
+          <div style={styles.uploadMessage}>
+            <p>Klik untuk ganti nama</p>
+          </div>
+          <div style={styles.resultMessage}>
+            <p>-----------------</p>
+            <div
+              onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+            </div>
+          </div>
+        </> 
      <div
        id="qr-code-container"
        style={{
@@ -947,7 +985,13 @@ const SetPaymentQr = ({ shop }) => {
            }
          </div>
          <div style={styles.buttonContainer}>
-            <button onClick={handleSave} style={styles.saveButton}>
+            <button
+              onClick={handleSave}
+              style={{
+                ...styles.saveButton,
+                backgroundColor: isconfigcafeidentityname ? 'rgb(125, 125, 125)' : styles.saveButton.backgroundColor
+              }}
+            >
              Simpan
            </button>
            <button onClick={() => setIsViewingQR(true)} style={styles.saveButton}>
@@ -1042,7 +1086,7 @@ const styles = {
  },
  resultMessage: {
    marginTop: "-24px",
-    marginBottom: "10px",
+    // marginBottom: "10px",
    textAlign: "left",
    display: 'flex',
    justifyContent: 'space-between'
--- a/src/helpers/cafeHelpers.js
+++ b/src/helpers/cafeHelpers.js
@@ -220,6 +220,9 @@ export async function saveCafeDetails(cafeId, details) {
    }
    if (details.qrSize) formData.append("scale", details.qrSize);

+    if (details.cafeIdentifyName) formData.append("cafeIdentifyName", details.cafeIdentifyName);
+    console.log(details.cafeIdentifyName)
+
    const response = await fetch(`${API_BASE_URL}/cafe/set-cafe/${cafeId}`, {
      method: "PUT",
      headers: {