import React, { useState, useRef, useEffect } from "react"; import jsQR from "jsqr"; import { getImageUrl } from "../helpers/itemHelper"; import { getTables, updateTable, createTable } from "../helpers/tableHelper"; import { getCafe, saveCafeDetails, setConfirmationStatus, } from "../helpers/cafeHelpers"; import { toPng } from 'html-to-image'; const SetPaymentQr = ({ shop }) => { const [initialPos, setInitialPos] = useState({ left: shop.xposition, 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); const [initialFontPos, setInitialFontPos] = useState({ left: shop.fontxposition, top: shop.fontyposition, }); const [initialSize, setInitialSize] = useState(shop.scale); const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground)); const qrBackgroundInputRef = useRef(null); const [cafeIdentifyNameDefault, setCafeIdentifyNameDefault] = useState(shop.cafeIdentifyName); const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName); const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate; const cafeIdentifyNameRef = useRef(null); const [isconfigcafeidentityname, setIsConfigCafeIdentityName] = useState(false); const generateQRCodeUrl = (tableCode) => { if (tableCode != null) { return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent( shopUrl + "/" + tableCode )}`; } else { return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent( shopUrl )}`; } }; const [isConfig, setIsConfig] = useState(false); const [isConfigQR, setIsConfigQR] = useState(false); const [isViewTables, setIsViewTables] = useState(false); const [tables, setTables] = useState([]); const [selectedTable, setSelectedTable] = useState(null); const [tableNo, setTableNo] = useState(null); useEffect(() => { const fetchData = async () => { try { console.log(shop); const fetchedTables = await getTables(shop.cafeId); setTables(fetchedTables); } catch (error) { console.error("Error fetching tables:", error); } }; fetchData(); }, [shop.cafeId]); const handleSave = () => { const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground // Prepare the details object const details = { qrSize: initialSize, qrPosition: initialPos, qrBackgroundFile, fontsize, fontcolor, fontPosition: initialFontPos, }; // Call saveCafeDetails function with the updated details object saveCafeDetails(shop.cafeId, details) .then((response) => { console.log("Cafe details saved:", response); }) .catch((error) => { console.error("Error saving cafe details:", error); }); }; const handlePositionChange = (e) => { const { name, value } = e.target; setInitialPos((prevPosition) => ({ ...prevPosition, [name]: parseFloat(value).toFixed(2), })); }; const handleFontPositionChange = (e) => { const { name, value } = e.target; setInitialFontPos((prevPosition) => ({ ...prevPosition, [name]: parseFloat(value).toFixed(2), })); }; const handleSizeChange = (e) => { setInitialSize(parseFloat(e.target.value).toFixed(2)); }; const handleFontSizeChange = (e) => { setfontsize(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 setBgImageUrl(newBgImage); } }; 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; // Save the original background color const originalBackgroundColor = node.style.backgroundColor; // Temporarily remove the background color node.style.backgroundColor = 'transparent'; 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); }) .finally(() => { // Restore the original background color after the download node.style.backgroundColor = originalBackgroundColor; }); } return (

Identifikasi kedai

{window.location.hostname}/
{ // Convert to lowercase, replace spaces with underscores, and remove invalid characters const updatedValue = e.target.value .toLowerCase() // Convert input to lowercase .replace(/ /g, '_') // Replace spaces with underscores .replace(/[^a-z0-9_]/g, ''); // Remove characters that are not lowercase letters, numbers, or underscores setCafeIdentifyNameUpdate(updatedValue); }} value={cafeIdentifyNameUpdate} onFocus={() => { setIsConfigCafeIdentityName(true); // Set the state to true when input is focused }} onBlur={() => { setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus setCafeIdentifyNameUpdate(cafeIdentifyNameDefault); // Reset to default value on blur }} // Handle blur event to reset the state />
KedaiMaster .
{!isconfigcafeidentityname ?
{ setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }} // Open the config modal style={{ backgroundColor: '#303034', right: 0, color: 'white', borderRadius: '0 0 6px 6px', fontFamily: 'Roboto', fontSize: '13px', padding: 3, cursor: 'pointer', marginBottom: '10px' }} > Ganti alamat kedai
: (
setIsConfigCafeIdentityName(false)} // Close the config modal style={{ backgroundColor: '#303034', width: '47%', color: 'white', borderRadius: '0 0 0px 6px', fontFamily: 'Roboto', fontSize: '13px', padding: 3, cursor: 'pointer', }} > Batalkan
{ setCafeIdentifyNameDefault(cafeIdentifyNameUpdate) // Handle save functionality here setIsConfigCafeIdentityName(false); // Close after saving }} style={{ backgroundColor: '#303034', width: '47%', color: 'white', borderRadius: '0 0 6px 0px', fontFamily: 'Roboto', fontSize: '13px', padding: 3, cursor: 'pointer', }} > Simpan
)}
QR Code QR Code
50 ? -1 : 1})`, position: "absolute", fontSize: `${fontsize * 3}%`, left: `${initialFontPos.left}%`, top: `${initialFontPos.top}%`, textAlign: initialFontPos.left > 50 ? 'right' : 'left' }}>

50 ? -1 : 1})`, width: '200%', lineHeight: 0, fontFamily: 'Plus Jakarta Sans', color: fontcolor }} >{selectedTable == null ? (isConfigFont ? 'Nomor meja' : '') : selectedTable.tableNo}

{!isViewingQR ? <>

Klik untuk ganti background

{ setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfig ? '˅' : '˃'} Konfigurasi QR

qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti
{isConfig &&
{/*

{ setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfigQR ? '˅' : '˃'} Konfigurasi QR

*/} {isConfigQR && <>
} {/*

{ setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}> {isConfigFont ? '˅' : '˃'} Konfigurasi nomor

*/} {isConfigFont && ( <>
)}
} {/*

setIsViewTables(!isViewTables)}> {isViewTables ? '˅' : '˃'} Daftar meja

*/} {isViewTables &&
setTableNo(e.target.value)} value={tableNo} />
Buat meja
{tables && tables .filter((table) => table.tableNo !== 0) .map((table) => (
  • setSelectedTable(selectedTable == table ? null : table)} >
    {table.tableNo}
    • )) }
    }
    : <>

    Ini adalah QR yang dapat di scan oleh tamu untuk memesan

    {/*

    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.'}

    */}

    setIsViewingQR(false)} > Kembali

    }
    ); }; // Styles const styles = { container: { 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: '8px', position: "relative", width: "100%", height: "200px", backgroundSize: "contain", overflow: "hidden", margin: "0 auto", // Center the QR code container }, uploadMessage: { fontWeight: 600, textAlign: "left", fontSize: "15px" }, changeButton: { paddingRight: '10px', backgroundColor: 'green', borderRadius: '30px', color: 'white', fontWeight: 700, height: '36px', lineHeight: '36px', paddingLeft: '10px', paddingHeight: '10px', }, uploadButton: { paddingRight: '10px', backgroundColor: 'green', borderRadius: '30px', color: 'white', fontWeight: 700, height: '36px', lineHeight: '36px', paddingLeft: '10px', paddingHeight: '10px', width: '40%', textAlign: 'center' }, resultMessage: { marginTop: "-24px", marginBottom: "10px", textAlign: "left", display: 'flex', justifyContent: 'space-between' }, 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 15px", fontSize: "16px", backgroundColor: "#28a745", color: "#fff", border: "none", borderRadius: "30px", cursor: "pointer", transition: "background-color 0.3s", }, switchContainer: { textAlign: "left", marginTop: '-15px' }, description: { margin: "10px 0", }, sliderContainer: { marginBottom: "20px", }, label: { display: "block", marginBottom: "10px", }, sliderWrapper: { display: "flex", alignItems: "center", }, input: { flex: "1", margin: "0 10px", }, }; export default SetPaymentQr;