From 3d05102199a090d49511f2d94cf86339675f2b09 Mon Sep 17 00:00:00 2001
From: zadit <75159257+insvrgent@users.noreply.github.com>
Date: Thu, 16 Jan 2025 07:27:07 +0700
Subject: [PATCH] ok

---
 package.json                         |  2 +-
 src/components/ButtonWithReplica.css |  4 +--
 src/components/Header.js             |  2 +-
 src/components/TablesPage.js         | 51 ++++++++++++++++++----------
 src/config.js                        |  2 +-
 src/pages/Transaction_confirmed.js   |  1 -
 6 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 833756d..5c30e14 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "groovebrew-mockup",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://dev.kedaimaster.com",
+  "homepage": "https://kedaimaster.com",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
diff --git a/src/components/ButtonWithReplica.css b/src/components/ButtonWithReplica.css
index 4b5ca07..2008495 100644
--- a/src/components/ButtonWithReplica.css
+++ b/src/components/ButtonWithReplica.css
@@ -64,7 +64,7 @@
 }
 
 .bussinessName.active {
-  top: -700%;
+  top: -1000%;
   position: absolute;
   color: rgb(0, 0, 0);
   width: 60vw;
@@ -90,7 +90,7 @@
 
 .bussinessQR.active {
   position: absolute;
-  top: -250%;
+  top: -321%;
   transform: translate(-50%, -80%);
 
   transition: all 0.5s ease-in-out;
diff --git a/src/components/Header.js b/src/components/Header.js
index d0a46bb..66d984a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -378,7 +378,7 @@ const Header = ({
                           Desain kafe
                         </Child>
                         <Child onClick={() => setModal("edit_tables")}>
-                          QR kedai dan meja
+                          QR kedai
                         </Child>
                         <Child onClick={() => setModal("payment_option")}>
                           Metode pembayaran
diff --git a/src/components/TablesPage.js b/src/components/TablesPage.js
index dbd9c2d..e3d4396 100644
--- a/src/components/TablesPage.js
+++ b/src/components/TablesPage.js
@@ -138,9 +138,15 @@ const SetPaymentQr = ({ shop }) => {
 
   function downloadQrCodeContainer({ selectedTable, shop }) {
     const node = document.getElementById('qr-code-container');
-  
+    
     if (!node) return;
   
+    // Save the original background color
+    const originalBackgroundColor = node.style.backgroundColor;
+    
+    // Temporarily remove the background color
+    node.style.backgroundColor = 'transparent';
+    
     const isTableSelected = selectedTable != null;
   
     toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
@@ -158,27 +164,35 @@ const SetPaymentQr = ({ shop }) => {
       .catch((err) => {
         console.error('Could not download the image', err);
       })
+      .finally(() => {
+        // Restore the original background color after the download
+        node.style.backgroundColor = originalBackgroundColor;
+      });
   }
   
   
+  
   return (
     <div style={styles.container}>
-      <h3 style={styles.title}>QR kedai dan meja</h3>
+      <h3 style={styles.title}>QR kedai</h3>
 
       <div
         id="qr-code-container"
         style={{
-          background: `center center / contain no-repeat url(${bgImageUrl})`,
-          backgroundSize: "contain",
-          border: "1px solid #ddd",
-
           ...styles.qrCodeContainer,
-          backgroundImage: `url(${bgImageUrl})`,
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "contain",
+          backgroundColor: '#cdcdcd'
         }}
       >
+      <img
+        src={bgImageUrl}
+        alt="QR Code"
+        style={{
+          position: "absolute",
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          transform: "translate(-50%, 0%)",
+        }} />
         <img
           src={generateQRCodeUrl(selectedTable?.tableCode || null)}
           alt="QR Code"
@@ -221,16 +235,16 @@ const SetPaymentQr = ({ shop }) => {
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
         <div
           onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
       </div>
       <div style={styles.switchContainer}>
         {isConfig &&
           <div style={{ marginLeft: '15px' }}>
-            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
+            {/* <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
               {isConfigQR ? '˅' : '˃'} Konfigurasi QR
-            </p>
+            </p> */}
             {isConfigQR && <>
               <div style={styles.sliderContainer}>
                 <label style={styles.label}>
@@ -290,9 +304,9 @@ const SetPaymentQr = ({ shop }) => {
               </div>
             </>}
 
-            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
+            {/* <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
               {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
-            </p>
+            </p> */}
             {isConfigFont && (
               <>
                 <div style={styles.sliderContainer}>
@@ -371,9 +385,9 @@ const SetPaymentQr = ({ shop }) => {
 
           </div>
         }
-        <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
+        {/* <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
           {isViewTables ? '˅' : '˃'} Daftar meja
-        </p>
+        </p> */}
 
         {isViewTables &&
           <div style={{marginTop: '34px', marginLeft: '15px'}}>
@@ -421,7 +435,8 @@ const SetPaymentQr = ({ shop }) => {
       </> :
       <>
       <div style={styles.uploadMessage}>
-        <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p>
+        <p>Ini adalah QR yang dapat di scan oleh tamu untuk memesan </p>
+        {/* <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p> */}
       </div>
       <div style={styles.buttonContainer}>
         <button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}>
diff --git a/src/config.js b/src/config.js
index 6cf67cc..967c5ce 100644
--- 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;
diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js
index d131740..51dbc17 100644
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -132,7 +132,6 @@ export default function Transactions({
             onClick={() =>
               setSelectedTable(transaction.Table || { tableId: 0 })
             }
-            style={{ overflow: "hidden" }}
           >
             
             <div className={styles['receipt-header']}>