ok

src/components/Modal.module.css

@@ -13,6 +13,7 @@
 
 .modalContent {
   width: 80vw;
+  max-height: 80vh;
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */
   display: flex;

src/components/PaymentOptions.js

@@ -7,7 +7,8 @@ import {
   saveCafeDetails,
   setConfirmationStatus,
 } from "../helpers/cafeHelpers";
-import Switch from "react-switch"; // Import the Switch component
+
+import { toPng } from 'html-to-image';
 
 const SetPaymentQr = ({ shop }) => {
   const [initialPos, setInitialPos] = useState({
@@ -15,6 +16,7 @@ const SetPaymentQr = ({ shop }) => {
     top: shop.yposition,
   });
 
+  const [isViewingQR, setIsViewingQR] = useState(false);
   const [isConfigFont, setIsConfigFont] = useState(false);
   const [fontsize, setfontsize] = useState(shop.fontsize);
   const [fontcolor, setfontcolor] = useState(shop.fontcolor);
@@ -48,6 +50,8 @@ const SetPaymentQr = ({ shop }) => {
 
   const [selectedTable, setSelectedTable] = useState(null);
 
+  const [tableNo, setTableNo] = useState(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -118,6 +122,45 @@ const SetPaymentQr = ({ shop }) => {
     }
   };
 
+  const handleCreate = async () => {
+    // if (newTable) {
+      try {
+        const createdTable = await createTable(shop.cafeId, {
+          // ...newTable,
+          tableNo,
+        });
+        setTables([...tables, createdTable]);
+        setTableNo("");
+      } catch (error) {
+        console.error("Error creating table:", error);
+      }
+  };
+
+  function downloadQrCodeContainer({ selectedTable, shop }) {
+    const node = document.getElementById('qr-code-container');
+  
+    if (!node) return;
+  
+    const isTableSelected = selectedTable != null;
+  
+    toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
+      .then((dataUrl) => {
+        const link = document.createElement('a');
+        link.href = dataUrl;
+  
+        // Set the file name based on whether selectedTable exists
+        link.download = isTableSelected 
+          ? `QR Meja (${selectedTable.tableNo}).png` 
+          : `QR ${shop.name}.png`;
+  
+        link.click();
+      })
+      .catch((err) => {
+        console.error('Could not download the image', err);
+      })
+  }
+  
+  
   return (
     <div style={styles.container}>
       <h3 style={styles.title}>QR kedai dan meja</h3>
@@ -156,6 +199,7 @@ const SetPaymentQr = ({ shop }) => {
           textAlign: initialFontPos.left > 50 ? 'right' : 'left'
         }}>
           <h1 style={{
+            visibility: !selectedTable && isViewingQR ? 'hidden' : 'visible',
             transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
             width: '200%',
             lineHeight: 0,
@@ -171,11 +215,13 @@ const SetPaymentQr = ({ shop }) => {
           onChange={handleFileChange}
         />
       </div>
+      {!isViewingQR ?
+      <>
       <div style={styles.uploadMessage}>
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
         <div
           onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
       </div>
@@ -332,9 +378,9 @@ const SetPaymentQr = ({ shop }) => {
         {isViewTables &&
           <div style={{marginTop: '34px', marginLeft: '15px'}}>
             <div style={styles.resultMessage}>
-              <input style={{borderRadius: '12px', paddingLeft: '13px'}} placeholder="Meja A1"/>
+              <input style={{borderRadius: '12px', paddingLeft: '13px', marginRight: '10px'}} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo}/>
               <div
-                onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Buat meja</div>
+                onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
             </div>
             {tables && tables
               .filter((table) => table.tableNo !== 0)
@@ -364,12 +410,31 @@ const SetPaymentQr = ({ shop }) => {
           </div>
         }
       </div>
-
       <div style={styles.buttonContainer}>
         <button onClick={handleSave} style={styles.saveButton}>
           Simpan
         </button>
+        <button onClick={()=>setIsViewingQR(true)} style={styles.saveButton}>
+          Download QR {selectedTable? 'meja' : 'kedai'}
+        </button>
       </div>
+      </> :
+      <>
+      <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>
+      </div>
+      <div style={styles.buttonContainer}>
+        <button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}>
+          Download QR {selectedTable? 'meja' : 'kedai'}
+        </button>
+      </div>
+      <div style={styles.backButtonContainer}>
+        <p onClick={()=>setIsViewingQR(false)} >
+          Kembali
+        </p>
+      </div>
+      </>
+      }
     </div>
   );
 };
@@ -377,6 +442,9 @@ const SetPaymentQr = ({ shop }) => {
 // Styles
 const styles = {
   container: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    maxHeight: '100%',
     width: '100%',
     backgroundColor: "white",
     padding: "20px",
@@ -401,6 +469,7 @@ const styles = {
   uploadMessage: {
     fontWeight: 600,
     textAlign: "left",
+    fontSize: "15px"
   },
   uploadButton: {
     paddingRight: '10px',
@@ -415,6 +484,7 @@ const styles = {
   },
   resultMessage: {
     marginTop: "-24px",
+    marginBottom: "10px",
     textAlign: "left",
     display: 'flex',
     justifyContent: 'space-between'
@@ -422,9 +492,18 @@ const styles = {
   buttonContainer: {
     marginTop: "20px",
     textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  backButtonContainer: {
+    marginTop: "2px",
+    marginBottom: "-10px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
   },
   saveButton: {
-    padding: "10px 20px",
+    padding: "10px 15px",
     fontSize: "16px",
     backgroundColor: "#28a745",
     color: "#fff",