ok

2025-03-15 18:59:44 +07:00
parent 43ad59a1f8
commit a64b999a05
30 changed files with 1818 additions and 391 deletions
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -5,20 +5,24 @@ import {
  getCafe,
  saveCafeDetails,
  setConfirmationStatus,
+  setOpenBillAvailability
 } from "../helpers/cafeHelpers";
 import Switch from "react-switch"; // Import the Switch component

-const SetPaymentQr = ({ shopId, 
+const SetPaymentQr = ({ shopId,
  qrCodeUrl }) => {
  const [qrPosition, setQrPosition] = useState([50, 50]);
  const [qrSize, setQrSize] = useState(50);
  const [qrPayment, setQrPayment] = useState();
  const [qrCodeDetected, setQrCodeDetected] = useState(false);
  const [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
+  const [isQRISavailable, setIsQRISavailable] = useState(0);
  const qrPaymentInputRef = useRef(null);
  const qrCodeContainerRef = useRef(null);
  const [cafe, setCafe] = useState({});
-  const [isConfig, setIsConfig] = useState(false);
+
+  const [isConfigQRIS, setIsConfigQRIS] = useState(false);
+  const [isOpenBillAvailable, setIsOpenBillAvailable] = useState(false);

  useEffect(() => {
    const fetchCafe = async () => {
@@ -29,6 +33,8 @@ const SetPaymentQr = ({ shopId,
        console.log(response.needsConfirmation);

        setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
+        setIsQRISavailable(response.isQRISavailable === true ? 1 : 0); // Set state based on fetched data
+        setIsOpenBillAvailable(response.isOpenBillAvailable === true ? 1 : 0); // Set state based on fetched data
        setQrPosition([response.xposition, response.yposition]);
        setQrSize(response.scale);
      } catch (error) {
@@ -40,10 +46,10 @@ const SetPaymentQr = ({ shopId,

  // Detect QR code when qrPayment updates
  useEffect(() => {
-    if (qrPayment) {
+    if (qrPayment && isConfigQRIS) {
      detectQRCodeFromContainer();
    }
-  }, [qrPayment]);
+  }, [qrPayment, isConfigQRIS]);

  // Handle file input change
  const handleFileChange = (e) => {
@@ -77,76 +83,139 @@ const SetPaymentQr = ({ shopId,

  // Save cafe details
  const handleSave = async () => {
-    const qrPaymentFile = qrPaymentInputRef.current.files[0];
+    let qrPaymentFile;
+    if(qrPaymentInputRef?.current?.files[0])
+      qrPaymentFile = qrPaymentInputRef.current.files[0];
    const details = {
      qrPosition,
      qrSize,
      qrPaymentFile,
+      isQRISavailable: isQRISavailable === 1,
+      isOpenBillAvailable: isOpenBillAvailable === 1,
+      isNeedConfirmationState: isNeedConfirmationState === 1
    };

    try {
      const response = await saveCafeDetails(cafe.cafeId, details);
+
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
+      setIsQRISavailable(response.isQRISavailable ? 1 : 0); // Update state after saving
+      setIsOpenBillAvailable(response.isOpenBillAvailable ? 1 : 0); // Update state after saving
+
      console.log("Cafe details saved:", response);
    } catch (error) {
      console.error("Error saving cafe details:", error);
    }
-
-    try {
-      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
-      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
-    } catch (error) {
-      console.error(error);
-      setIsNeedConfirmationState(cafe.needsConfirmation ? 1 : 0); // Fallback to initial value
-    }
-  };
-
-  // Handle Switch toggle
-  const handleChange = (checked) => {
-    setIsNeedConfirmationState(checked ? 1 : 0); // Toggle state based on the switch
-  };
-
-  const handleError = () => {
-    setQrPayment('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU'); // Set your fallback image here
  };

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
-      <div
-        id="qr-code-container"
-        ref={qrCodeContainerRef}
-        onClick={() => qrPaymentInputRef.current.click()}
-        style={{
-          ...styles.qrCodeContainer,
-          backgroundImage: `url(${qrPayment})`,
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "contain",
-        }}
-      >
-        <input
-          type="file"
-          accept="image/*"
-          ref={qrPaymentInputRef}
-          style={{ display: "none" }}
-          onChange={handleFileChange}
-        />
-      </div>
-      <div style={styles.uploadMessage}>
-        <p>Klik untuk ganti background</p>
-      </div>
-      <div style={styles.resultMessage}>
-        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
-        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
-          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
-            onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
+
+      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Pembayaran QRIS.
+        </p>
+
+        {isConfigQRIS ?
+          <>
+            <div
+              id="qr-code-container"
+              ref={qrCodeContainerRef}
+              onClick={() => qrPaymentInputRef.current.click()}
+              style={{
+                ...styles.qrCodeContainer,
+                backgroundImage: `url(${qrPayment})`,
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "contain",
+              }}
+            >
+              <input
+                type="file"
+                accept="image/*"
+                ref={qrPaymentInputRef}
+                style={{ display: "none" }}
+                onChange={handleFileChange}
+              />
+            </div>
+            <div style={styles.uploadMessage}>
+              <p>Klik untuk ganti background</p>
+            </div>
+            <div style={styles.resultMessage}>
+              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
+              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
+                onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
+                  onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
+            </div>
+
+            <div onClick={() => setIsConfigQRIS(false)}
+
+              style={{
+                ...styles.qrisConfigButton,
+                width: '100%',
+                marginLeft: "0",
+              }}
+            >Terapkan</div>
+          </>
+          :
+          <>
+            <p style={styles.description}>
+              Aktifkan fitur agar pelanggan dapat menggunakan opsi pembayaran QRIS, namun kasir anda perlu memeriksa rekening untuk memastikan pembayaran.
+            </p>
+            <div style={{ display: 'flex' }}>
+              <Switch
+                onChange={(checked) => setIsQRISavailable(checked ? 1 : 0)}
+                checked={isQRISavailable === 1} // Convert to boolean
+                offColor="#888"
+                onColor="#4CAF50"
+                uncheckedIcon={false}
+                checkedIcon={false}
+                height={25}
+                width={50}
+              />
+              <div
+                onClick={() => setIsConfigQRIS(true)}
+                style={{
+                  ...styles.qrisConfigButton,
+                  backgroundColor: isQRISavailable == 1 ? styles.qrisConfigButton.backgroundColor : 'gray',
+                }}
+              >
+                Konfigurasi QRIS
+              </div>
+
+            </div>
+          </>
+        }
      </div>
      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Open bill
+        </p>
+        <p style={styles.description}>
+          Aktifkan fitur agar pelanggan dapat menambahkan pesanan selama sesi berlangsung tanpa perlu melakukan transaksi baru dan hanya membayar di akhir.
+        </p>
+        <Switch
+          onChange={(checked) => setIsOpenBillAvailable(checked ? 1 : 0)}
+          checked={isOpenBillAvailable === 1} // Convert to boolean
+          offColor="#888"
+          onColor="#4CAF50"
+          uncheckedIcon={false}
+          checkedIcon={false}
+          height={25}
+          width={50}
+        />
+      </div>
+
+      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Pengecekan ganda
+        </p>
        <p style={styles.description}>
          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
        </p>
        <Switch
-          onChange={handleChange}
+          onChange={(checked) => setIsNeedConfirmationState(checked ? 1 : 0)}
          checked={isNeedConfirmationState === 1} // Convert to boolean
          offColor="#888"
          onColor="#4CAF50"
@@ -169,6 +238,11 @@ const SetPaymentQr = ({ shopId,
 // Styles
 const styles = {
  container: {
+    position: 'relative',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    maxHeight: '80vh',
+    width: '100%',
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "8px",
@@ -188,14 +262,24 @@ const styles = {
    backgroundSize: "contain",
    overflow: "hidden",
    margin: "0 auto", // Center the QR code container
+    marginTop: '10px'
  },
  uploadMessage: {
    fontWeight: 600,
    textAlign: "left",
  },
+  qrisConfigButton: {
+    borderRadius: '15px',
+    backgroundColor: '#28a745',
+    width: '144px',
+    textAlign: 'center',
+    color: 'white',
+    lineHeight: '24px',
+    marginLeft: '14px',
+  },
  uploadButton: {
    paddingRight: '10px',
-    backgroundColor: 'green',
+    backgroundColor: '#28a745',
    borderRadius: '30px',
    color: 'white',
    fontWeight: 700,