import React, { useState, useRef } from "react"; import html2canvas from "html2canvas"; import { getImageUrl } from "../helpers/itemHelper"; import { saveCafeDetails } from "../helpers/cafeHelpers"; // Import the helper function const QRCodeWithBackground = ({ isConfigure, tableNo, qrCodeUrl, backgroundUrl, initialQrPosition, initialQrSize, handleQrSave, shopId, // Pass cafeId as a prop to identify which cafe to update }) => { const [qrPosition, setQrPosition] = useState(initialQrPosition); const [qrSize, setQrSize] = useState(initialQrSize); const [bgImage, setBgImage] = useState(getImageUrl(backgroundUrl)); // URL or File const qrBackgroundInputRef = useRef(null); const overlayTextRef = useRef(null); const handlePositionChange = (e) => { const { name, value } = e.target; setQrPosition((prevPosition) => ({ ...prevPosition, [name]: parseFloat(value).toFixed(2), })); }; const handleSizeChange = (e) => { setQrSize(parseFloat(e.target.value).toFixed(2)); }; const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { const newBgImage = URL.createObjectURL(file); // Create a temporary URL for display setBgImage(newBgImage); } }; const handleSave = () => { const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground // Prepare the details object const details = { qrPosition, qrSize, qrBackgroundFile, // Include qrBackground file }; // Call saveCafeDetails function with the updated details object saveCafeDetails(shopId, details) .then((response) => { console.log("Cafe details saved:", response); handleQrSave(qrPosition, qrSize, bgImage); }) .catch((error) => { console.error("Error saving cafe details:", error); }); }; const printQRCode = () => { const element = document.getElementById("qr-code-container"); if (element) { // Hide overlay text const overlayText = overlayTextRef.current; if (overlayText) overlayText.style.display = "none"; html2canvas(element, { useCORS: true, backgroundColor: null, }) .then((canvas) => { const img = canvas.toDataURL("image/png"); const printWindow = window.open("", "", "height=600,width=800"); printWindow.document.write( "Print QR Code" ); printWindow.document.write( '' ); printWindow.document.write(""); printWindow.document.close(); printWindow.focus(); printWindow.print(); }) .catch((err) => { console.error("Error capturing image:", err); }) .finally(() => { // Show overlay text again if (overlayText) overlayText.style.display = "flex"; }); } else { console.error("Element not found for printing."); } }; const saveImage = () => { const element = document.getElementById("qr-code-container"); if (element) { // Hide overlay text const overlayText = overlayTextRef.current; if (overlayText) overlayText.style.display = "none"; html2canvas(element, { useCORS: true, backgroundColor: null, }) .then((canvas) => { canvas.toBlob((blob) => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `table ${tableNo}_QRCode.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); }) .catch((err) => { console.error("Error capturing image:", err); }) .finally(() => { // Show overlay text again if (overlayText) overlayText.style.display = "flex"; }); } else { console.error("Element not found for saving."); } }; return (
QR Code {/* Overlay text that triggers file input */} {isConfigure && (
qrBackgroundInputRef.current.click()} > Click To Change Background
)} {/* Hidden file input */}
{isConfigure ? (
) : (
)}
); }; const styles = { overlayText: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", backgroundColor: "rgba(0, 0, 0, 0.5)", color: "#fff", padding: "10px", borderRadius: "5px", cursor: "pointer", }, sliderContainer: { marginBottom: "20px", }, label: { display: "block", marginBottom: "10px", }, sliderWrapper: { display: "flex", alignItems: "center", }, input: { flex: "1", margin: "0 10px", }, labelStart: { marginRight: "10px", }, labelEnd: { marginLeft: "10px", }, value: { marginLeft: "10px", }, }; export default QRCodeWithBackground;