ok

2025-01-14 14:07:54 +07:00
parent 5d8b2af2c9
commit 1cb8ccf934
9 changed files with 101 additions and 13 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "caniuse-lite": "^1.0.30001690",
+        "html-to-image": "^1.11.11",
        "html2canvas": "^1.4.1",
        "jsqr": "^1.4.0",
        "qrcode.react": "^3.1.0",
@@ -10264,6 +10265,12 @@
        "node": ">=12"
      }
    },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==",
+      "license": "MIT"
+    },
    "node_modules/html-webpack-plugin": {
      "version": "5.6.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "groovebrew-mockup",
  "version": "0.1.0",
  "private": true,
-  "homepage": ".",
+  "homepage": "https://dev.kedaimaster.com",
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
@@ -11,6 +11,7 @@
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "caniuse-lite": "^1.0.30001690",
+    "html-to-image": "^1.11.11",
    "html2canvas": "^1.4.1",
    "jsqr": "^1.4.0",
    "qrcode.react": "^3.1.0",
--- a/src/components/Modal.module.css
+++ b/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;
--- a/src/components/PaymentOptions.js
+++ b/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",
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -220,7 +220,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {

 {table.tableNo != null && (
        <div className={styles.OrderTypeContainer}>
-            <span htmlFor="orderType">Diantar ke meja {table.tableNo}</span>
+            <span htmlFor="orderType">Diantar ke {table.tableNo}</span>
          {/* <select
            id="orderType"
            value={orderType}
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -183,7 +183,7 @@ const LinktreePage = ({ user, setModal }) => {
  ];
  console.log(items)

-  const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
+  const selectedItems = items?.items?.find(item => (item.userId || item.cafeId) === selectedItemId);

  // If the selected tenant is found, extract the cafes
  const selectedSubItems = selectedItems?.subItems || [];
--- a/src/pages/Invoice.js
+++ b/src/pages/Invoice.js
@@ -103,7 +103,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
        <h2 className={styles["Invoice-detail"]}>
          {orderType === "pickup"
            ? "Diambil di kasir"
-            : `Diantar ke meja nomor ${table.tableNo || tableNumber || "-"}`}
+            : `Diantar ke ${table.tableNo || tableNumber || "-"}`}
        </h2>
        <div className={styles.TotalContainer}>
          <span>Total:</span>
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -182,7 +182,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
            <h2 className={styles["Transactions-detail"]}>
              {transaction.serving_type === "pickup"
                ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                }`}
            </h2>
            {transaction.notes != "" && (
--- a/src/pages/Transaction_pending.js
+++ b/src/pages/Transaction_pending.js
@@ -139,7 +139,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                <p>Pembayaran: {transaction.payment_type}</p>
                <p>{transaction.serving_type === "pickup"
                ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                }`}</p>
              </div>
            </div>
@@ -163,7 +163,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
            <h2 className={styles["Transactions-detail"]}>
              {transaction.serving_type === "pickup"
                ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                }`}
            </h2>
            {transaction.notes != "" && (