ok

src/components/PaymentOptions.js

@@ -6,27 +6,27 @@ import {
   saveCafeDetails,
   setConfirmationStatus,
 } from "../helpers/cafeHelpers";
-import Switch from "react-switch";
+import Switch from "react-switch"; // Import the Switch component
 
-// Main Component
 const SetPaymentQr = ({ shopId }) => {
   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 qrPaymentInputRef = useRef(null);
   const qrCodeContainerRef = useRef(null);
-  const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
   const [cafe, setCafe] = useState({});
 
-  // Fetch cafe details on mount or shopId change
   useEffect(() => {
     const fetchCafe = async () => {
       try {
         const response = await getCafe(shopId);
         setCafe(response);
         setQrPayment(getImageUrl(response.qrPayment));
-        setIsNeedConfirmation(response.needsConfirmation);
+        console.log(response.needsConfirmation);
+
+        setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
         setQrPosition([response.xposition, response.yposition]);
         setQrSize(response.scale);
       } catch (error) {
@@ -88,28 +88,32 @@ const SetPaymentQr = ({ shopId }) => {
     } catch (error) {
       console.error("Error saving cafe details:", error);
     }
-  };
 
-  // Toggle confirmation status
-  const handleChange = async () => {
     try {
-      const response = await setConfirmationStatus(
-        cafe.cafeId,
-        !isNeedConfirmation
-      );
-      setIsNeedConfirmation(response.needsConfirmation);
+      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
     } catch (error) {
       console.error(error);
-      setIsNeedConfirmation(cafe.needsConfirmation);
+      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}>
-      <h2 style={styles.title}>QR pembayaran</h2>
+      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
       <div
         id="qr-code-container"
         ref={qrCodeContainerRef}
+        onClick={() => qrPaymentInputRef.current.click()}
         style={{
           ...styles.qrCodeContainer,
           backgroundImage: `url(${qrPayment})`,
@@ -118,12 +122,12 @@ const SetPaymentQr = ({ shopId }) => {
           backgroundSize: "contain",
         }}
       >
-        <div
-          style={styles.overlayText}
-          onClick={() => qrPaymentInputRef.current.click()}
-        >
-          Click To Change
-        </div>
+        <img
+          src={qrPayment}
+          onError={handleError}
+          alt="QR Payment"
+          style={{ maxWidth: '100%',visibility: 'hidden' }} // hide the img element
+        />
         <input
           type="file"
           accept="image/*"
@@ -132,20 +136,36 @@ const SetPaymentQr = ({ shopId }) => {
           onChange={handleFileChange}
         />
       </div>
-      <div style={styles.resultMessage}>
-        {qrCodeDetected ? <p>QR Code Detected</p> : <p>Tidak ada qr yang terdeteksi</p>}
+      <div style={styles.uploadMessage}>
+        <p>Klik untuk unggah QRIS</p>
       </div>
-      <div style={styles.buttonContainer}>
-        <button onClick={handleSave} style={styles.saveButton}>
-          Save
-        </button>
+      <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 style={styles.switchContainer}>
         <h3>Pengecekan ketersediaan ganda</h3>
         <p style={styles.description}>
-        Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
+          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
         </p>
-        <Switch onChange={handleChange} checked={isNeedConfirmation} />
+        <Switch
+          onChange={handleChange}
+          checked={isNeedConfirmationState === 1} // Convert to boolean
+          offColor="#888"
+          onColor="#4CAF50"
+          uncheckedIcon={false}
+          checkedIcon={false}
+          height={25}
+          width={50}
+        />
+      </div>
+
+      <div style={styles.buttonContainer}>
+        <button onClick={handleSave} style={styles.saveButton}>
+          Simpan
+        </button>
       </div>
     </div>
   );
@@ -162,40 +182,42 @@ const styles = {
   },
   title: {
     marginBottom: "20px",
-    fontSize: "24px",
     fontWeight: "bold",
   },
   qrCodeContainer: {
+    backgroundColor: '#999999',
+    borderRadius: '20px',
     position: "relative",
-    width: "300px",
-    height: "300px",
+    width: "100%",
+    height: "200px",
     backgroundSize: "contain",
-    border: "1px solid #ddd",
     overflow: "hidden",
     margin: "0 auto", // Center the QR code container
   },
-  overlayText: {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    fontSize: "550%",
+  uploadMessage: {
+    fontWeight: 600,
     textAlign: "left",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    color: "rgba(256, 256, 256, 0.5)",
-    padding: "10px",
-    borderRadius: "5px",
-    cursor: "pointer",
+  },
+  uploadButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
   },
   resultMessage: {
-    marginTop: "20px",
-    textAlign: "center",
+    marginTop: "-24px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-between'
   },
   buttonContainer: {
     marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
   },
   saveButton: {
     padding: "10px 20px",
@@ -203,13 +225,13 @@ const styles = {
     backgroundColor: "#28a745",
     color: "#fff",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: "30px",
     cursor: "pointer",
     transition: "background-color 0.3s",
   },
   switchContainer: {
     marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
   },
   description: {
     margin: "10px 0",