360 lines
11 KiB
JavaScript
360 lines
11 KiB
JavaScript
import React, { useState, useRef, useEffect } from "react";
|
|
import QrScanner from "qr-scanner"; // Import qr-scanner
|
|
import { getImageUrl } from "../helpers/itemHelper";
|
|
import {
|
|
getCafe,
|
|
saveCafeDetails,
|
|
setConfirmationStatus,
|
|
setOpenBillAvailability
|
|
} from "../helpers/cafeHelpers";
|
|
import Switch from "react-switch"; // Import the Switch component
|
|
|
|
const SetPaymentQr = ({ shopId,
|
|
qrCodeUrl }) => {
|
|
const [qrPosition, setQrPosition] = useState([50, 50]);
|
|
const [qrSize, setQrSize] = useState(50);
|
|
const [qrPayment, setQrPayment] = useState();
|
|
const [qrPaymentFile, setQrPaymentFile] = 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 [qrCodeData, setQrCodeData] = useState(null);
|
|
const [cafe, setCafe] = useState({});
|
|
|
|
const [isConfigQRIS, setIsConfigQRIS] = useState(false);
|
|
const [isOpenBillAvailable, setIsOpenBillAvailable] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchCafe = async () => {
|
|
try {
|
|
const response = await getCafe(shopId);
|
|
setCafe(response);
|
|
setQrPayment(getImageUrl(response.qrPayment));
|
|
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) {
|
|
console.error("Error fetching cafe:", error);
|
|
}
|
|
};
|
|
fetchCafe();
|
|
}, [shopId]);
|
|
|
|
|
|
// Handle file input change
|
|
const handleFileChange = (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const newqrPayment = URL.createObjectURL(file);
|
|
setQrPayment(newqrPayment);
|
|
setQrPaymentFile(file);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (qrPayment && isConfigQRIS) {
|
|
detectQRCodeFromContainer();
|
|
}
|
|
}, [qrPayment, isConfigQRIS]);
|
|
|
|
const detectQRCodeFromContainer = () => {
|
|
const container = qrCodeContainerRef.current;
|
|
if (!container) return;
|
|
|
|
const img = new Image();
|
|
img.crossOrigin = "Anonymous";
|
|
img.src = qrPayment;
|
|
|
|
img.onload = () => {
|
|
// Buat canvas dari image
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
context.drawImage(img, 0, 0);
|
|
|
|
// Ambil data URL dari canvas (png)
|
|
const imageDataUrl = canvas.toDataURL();
|
|
|
|
QrScanner.scanImage(imageDataUrl, { returnDetailedScanResult: true })
|
|
.then(result => {
|
|
setQrCodeDetected(true);
|
|
setQrCodeData(result.data);
|
|
console.log("QR Code detected:", result.data);
|
|
})
|
|
.catch(() => {
|
|
setQrCodeDetected(false);
|
|
setQrCodeData(null);
|
|
console.log("QR Code not detected");
|
|
});
|
|
};
|
|
|
|
img.onerror = () => {
|
|
setQrCodeDetected(false);
|
|
setQrCodeData(null);
|
|
};
|
|
};
|
|
|
|
// Save cafe details
|
|
const handleSave = async () => {
|
|
let qrPaymentFileCache;
|
|
console.log(qrPaymentFile)
|
|
if(qrPaymentFile != null)
|
|
qrPaymentFileCache = qrPaymentFile;
|
|
|
|
const details = {
|
|
qrPosition,
|
|
qrSize,
|
|
qrPaymentFile: qrPaymentFileCache,
|
|
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);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<h3 style={styles.title}>Konfigurasi pembayaran</h3>
|
|
|
|
<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={(checked) => setIsNeedConfirmationState(checked ? 1 : 0)}
|
|
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>
|
|
);
|
|
};
|
|
|
|
// Styles
|
|
const styles = {
|
|
container: {
|
|
position: 'relative',
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
maxHeight: '80vh',
|
|
width: '100%',
|
|
backgroundColor: "white",
|
|
padding: "20px",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
|
textAlign: "center", // Center text and children
|
|
},
|
|
title: {
|
|
marginBottom: "20px",
|
|
fontWeight: "bold",
|
|
},
|
|
qrCodeContainer: {
|
|
backgroundColor: '#999999',
|
|
borderRadius: '20px',
|
|
position: "relative",
|
|
width: "100%",
|
|
height: "200px",
|
|
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: '#28a745',
|
|
borderRadius: '30px',
|
|
color: 'white',
|
|
fontWeight: 700,
|
|
height: '36px',
|
|
lineHeight: '36px',
|
|
paddingLeft: '10px',
|
|
paddingHeight: '10px',
|
|
},
|
|
resultMessage: {
|
|
marginTop: "-24px",
|
|
textAlign: "left",
|
|
display: 'flex',
|
|
justifyContent: 'space-between'
|
|
},
|
|
buttonContainer: {
|
|
marginTop: "20px",
|
|
textAlign: "left",
|
|
},
|
|
saveButton: {
|
|
padding: "10px 20px",
|
|
fontSize: "16px",
|
|
backgroundColor: "#28a745",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: "30px",
|
|
cursor: "pointer",
|
|
transition: "background-color 0.3s",
|
|
},
|
|
switchContainer: {
|
|
textAlign: "left",
|
|
},
|
|
description: {
|
|
margin: "10px 0",
|
|
fontSize: "14px",
|
|
color: "#666",
|
|
},
|
|
sliderContainer: {
|
|
marginBottom: "20px",
|
|
},
|
|
label: {
|
|
display: "block",
|
|
marginBottom: "10px",
|
|
},
|
|
sliderWrapper: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
},
|
|
input: {
|
|
flex: "1",
|
|
margin: "0 10px",
|
|
},
|
|
};
|
|
|
|
export default SetPaymentQr;
|