959 lines
30 KiB
JavaScript
959 lines
30 KiB
JavaScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { Messages } from '../../Components/Notifications/Messages';
|
|
import FormHeader from '../PageComponents/FormHeader';
|
|
import { Tables } from '../../Components/Tables/Table';
|
|
import { DropDowns } from '../../Components/Forms/DropDown';
|
|
import { useDispatch } from 'react-redux';
|
|
import {
|
|
getConfiguration,
|
|
PublicQrCodepost,
|
|
} from '../../Features/ConfigMasterPage/ConfigMasterPage';
|
|
import Buttons from '../../Components/Forms/Buttons';
|
|
import { PlusOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
|
|
import { MdClear } from 'react-icons/md';
|
|
import { getDineinTableData } from '../../Features/Dinein/Dinein';
|
|
import { encryptObject, getSession } from '../../Services/Others';
|
|
import QRCode from 'react-qr-code';
|
|
import jsPDF from 'jspdf';
|
|
import html2canvas from 'html2canvas';
|
|
import { Modal } from 'antd';
|
|
import {
|
|
ApplicationPreferences,
|
|
getBranchDetail,
|
|
} from '../../Features/BrachLogin/BranchLogin';
|
|
import { changeBreadCrumb, getEmpAccess } from '../../Features/AppPage/CenterPage';
|
|
import { useSelector } from 'react-redux';
|
|
import PublicQrCodeShare from './PublicQrCodeShare/PublicQrCodeShare';
|
|
import { FeatureAddon } from '../../Features/BookingScreen/BookingData/BookingData';
|
|
import { getPaymentOptionsData } from '../../Features/Payment/Paymentoptions/Paymentoptions';
|
|
import { useAuth } from '../../AuthContext';
|
|
|
|
const subDirectory = import.meta.env.ENV_MAIN_BASE_URL;
|
|
const items = [
|
|
{
|
|
name: 'Home',
|
|
link: `${subDirectory}app-page/home`,
|
|
},
|
|
];
|
|
|
|
const PublicQrCode = () => {
|
|
const dispatch = useDispatch();
|
|
console.log('PublicQrCode component rendered', `${subDirectory}`);
|
|
const appPreferences = useSelector(ApplicationPreferences);
|
|
|
|
const commonModulePreference = appPreferences?.find(
|
|
(preference) => preference?.PreferredCatName === 'Common Module'
|
|
)?.PreferenceCatDetails;
|
|
const sportsAppPreference = commonModulePreference?.find(
|
|
(preference) =>
|
|
preference?.PreferredSubCatName === 'SportsApp' &&
|
|
preference?.PreferredStatus == 'Y'
|
|
);
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [configdatas, setConfigdatas] = useState([]);
|
|
const [configId, setConfigId] = useState(null);
|
|
const [TableId, setTableId] = useState(null);
|
|
const [WaiterId, setWaiterId] = useState(null);
|
|
const [Tabledata, setTabledata] = useState([]);
|
|
const [CheckTabledata, setCheckTabledata] = useState([]);
|
|
const [qrCodeUrl, setQrCodeUrl] = useState('');
|
|
const [empData, setEmpData] = useState();
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
|
const [selectedConfig, setSelectedConfig] = useState({
|
|
id: '',
|
|
name: 'Both',
|
|
});
|
|
const [SelectedSelfBooking, setSelectedSelfBooking] = useState({
|
|
id: '',
|
|
name: '',
|
|
});
|
|
const initializedRef = useRef(false);
|
|
const configIdInitializedRef = useRef(false);
|
|
const handleSubmitCalledRef = useRef(false);
|
|
|
|
const [branchData, setBranchData] = useState([]);
|
|
const [page, setPage] = useState(1);
|
|
const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
|
|
const [pdfPreviewUrl, setPdfPreviewUrl] = useState('');
|
|
const qrCodeRef = useRef(null);
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const AppId = getSession('AppId');
|
|
const UserId = getSession('UserId');
|
|
const UserType = getSession('UserType');
|
|
const { SadminuserAccess } = useAuth();
|
|
const SAAccessCommonMaster = SadminuserAccess?.find(
|
|
(e) => e?.MenuName === 'SelfBooking QR Code'
|
|
);
|
|
const allowed = ['TakeAway', CheckTabledata?.length > 0 ? 'Dine In' : ''];
|
|
const bookingTypePreference = appPreferences?.find(
|
|
(preference) => preference?.PreferredCatName === 'Booking Type'
|
|
)?.PreferenceCatDetails;
|
|
const dinePreference = bookingTypePreference?.find(
|
|
(type) =>
|
|
type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
|
|
type?.PreferredStatus === 'Y'
|
|
);
|
|
const takeAwayPreference = bookingTypePreference?.find(
|
|
(type) =>
|
|
type?.PreferredSubCatName?.toLowerCase() === 'take away' &&
|
|
type?.PreferredStatus === 'Y'
|
|
);
|
|
|
|
const filtered = configdatas.filter(
|
|
(item) =>
|
|
allowed.includes(item.ConfigName) && item?.TypeName == 'Booking Type'
|
|
);
|
|
const SelfBooking = configdatas.filter(
|
|
(item) => item?.TypeName === 'SelfBookingOption'
|
|
);
|
|
const SelfBookingtype = configdatas.filter(
|
|
(item) => item?.TypeName === 'SelfBookingType'
|
|
);
|
|
|
|
// Check if filtered contains both "Dine In" and "TakeAway"
|
|
const hasDineIn = filtered.some(
|
|
(item) => item.ConfigName?.toLowerCase() === 'dine in'
|
|
);
|
|
const hasTakeAway = filtered.some(
|
|
(item) => item.ConfigName?.toLowerCase() === 'takeaway'
|
|
);
|
|
const hasBoth = hasDineIn && hasTakeAway;
|
|
|
|
let finalFiltered = [];
|
|
|
|
filtered.forEach((item) => {
|
|
const name = item.ConfigName?.toLowerCase();
|
|
if (sportsAppPreference) {
|
|
if (name === 'takeaway') {
|
|
finalFiltered.push({ ...item, ConfigName: 'Online Booking' });
|
|
}
|
|
} else {
|
|
if (name === 'dine in') {
|
|
if (dinePreference) {
|
|
finalFiltered.push(item); // keep dine in
|
|
}
|
|
} else if (name === 'takeaway') {
|
|
if (takeAwayPreference) {
|
|
finalFiltered.push(item); // keep take away
|
|
} else {
|
|
// rename to Sales if takeaway not allowed
|
|
finalFiltered.push({ ...item, ConfigName: 'Sales' });
|
|
}
|
|
} else {
|
|
finalFiltered.push(item); // keep any other booking type
|
|
}
|
|
}
|
|
});
|
|
|
|
// Remove duplicates by ConfigName
|
|
finalFiltered = finalFiltered.filter(
|
|
(item, index, self) =>
|
|
index === self.findIndex((t) => t.ConfigName === item.ConfigName)
|
|
);
|
|
|
|
// Add "Both" option only if filtered contains both "Dine In" and "TakeAway" and sportsAppPreference is false
|
|
if (hasBoth && !sportsAppPreference) {
|
|
finalFiltered.unshift({
|
|
ConfigId: 'All', // you can give a special id
|
|
ConfigName: 'Both',
|
|
});
|
|
}
|
|
console.log(finalFiltered, filtered, 'Final Filtered');
|
|
|
|
useEffect(() => {
|
|
fetchApi();
|
|
fetchBranchData();
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, []);
|
|
|
|
// Reset initialization refs when CheckTabledata or sportsAppPreference changes
|
|
useEffect(() => {
|
|
configIdInitializedRef.current = false;
|
|
}, [CheckTabledata]);
|
|
|
|
useEffect(() => {
|
|
handleSubmitCalledRef.current = false;
|
|
}, [sportsAppPreference]);
|
|
|
|
// Set default configId based on available options
|
|
useEffect(() => {
|
|
if (configIdInitializedRef.current || !finalFiltered?.length) return;
|
|
|
|
if (sportsAppPreference) {
|
|
// Set default to "Online Booking" when sportsAppPreference is true
|
|
const onlineBookingOption = finalFiltered.find(
|
|
(option) => option.ConfigName === 'Online Booking'
|
|
);
|
|
if (onlineBookingOption) {
|
|
setConfigId(onlineBookingOption.ConfigId);
|
|
configIdInitializedRef.current = true;
|
|
}
|
|
} else if (hasBoth) {
|
|
// Set default to "Both" if both options are available
|
|
setConfigId('All');
|
|
configIdInitializedRef.current = true;
|
|
} else if (finalFiltered?.length > 0) {
|
|
// Set default to first available option if only one is available
|
|
setConfigId(finalFiltered[0]?.ConfigId || null);
|
|
configIdInitializedRef.current = true;
|
|
}
|
|
}, [sportsAppPreference, finalFiltered, hasBoth]);
|
|
|
|
const fetchBranchData = async () => {
|
|
const response = await dispatch(
|
|
getBranchDetail({ BrId: BranchId })
|
|
).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setBranchData(response?.data?.data);
|
|
} else {
|
|
setBranchData();
|
|
}
|
|
let response2 = await dispatch(
|
|
getDineinTableData({ CompId: CompId, BranchId: BranchId, AppId: AppId })
|
|
).unwrap();
|
|
if (response2?.data?.statusCode == 1) {
|
|
setCheckTabledata(response2?.data?.data);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
let hasAccess = false;
|
|
|
|
if (UserType === 'Admin' || UserType === 'Super Admin') {
|
|
hasAccess = true;
|
|
} else if (UserType === 'Employee') {
|
|
hasAccess = empData?.AddAccess === 'Y';
|
|
} else if (UserType === 'Super Admin User') {
|
|
hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
|
|
}
|
|
|
|
setaddnewAccess(!hasAccess);
|
|
}, [empData, SAAccessCommonMaster, UserType]);
|
|
useEffect(() => {
|
|
if (UserType === "Employee") {
|
|
fetchApiEmpAccess()
|
|
}
|
|
}, [UserType])
|
|
const fetchApiEmpAccess = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
EmpId: UserId,
|
|
};
|
|
let response = await dispatch(getEmpAccess(data)).unwrap();
|
|
let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
|
|
(item) => item.ConfigName === 'SelfBooking QR Code'
|
|
);
|
|
setEmpData(datas?.[0]);
|
|
};
|
|
|
|
const fetchApi = async () => {
|
|
let response = await dispatch(getConfiguration({ Type: 'SA' })).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setConfigdatas(response?.data?.data);
|
|
}
|
|
};
|
|
|
|
const ConfigSelect = (e) => {
|
|
let isDinein =
|
|
filtered?.find((item) => item.ConfigId === e)?.ConfigName === 'Dine In';
|
|
if (isDinein && !sportsAppPreference) {
|
|
TableData();
|
|
} else {
|
|
setTabledata([]);
|
|
}
|
|
setConfigId(e);
|
|
setQrCodeUrl(''); // Clear QR code when booking type changes
|
|
setTableId(null);
|
|
setWaiterId(null);
|
|
|
|
// Reset table selection
|
|
};
|
|
const TableSelect = (e) => {
|
|
let getWaiterId = Tabledata?.find((a) => a?.TableId == e);
|
|
setTableId(e);
|
|
setWaiterId(getWaiterId?.WaiterId);
|
|
setQrCodeUrl(''); // Clear QR code when table changes
|
|
};
|
|
|
|
const TableData = async () => {
|
|
let response = await dispatch(
|
|
getDineinTableData({ CompId: CompId, BranchId: BranchId, AppId: AppId })
|
|
).unwrap();
|
|
if (response?.data?.statusCode == 1) {
|
|
setTabledata(response?.data?.data);
|
|
}
|
|
};
|
|
|
|
const HandleSubmit = async () => {
|
|
if (!sportsAppPreference) {
|
|
try {
|
|
const bookingTypeName =
|
|
filtered?.find((item) => item.ConfigId === configId)?.ConfigName ||
|
|
'Both';
|
|
const tableName =
|
|
Tabledata?.find((item) => item.TableId === TableId)?.TableName || '';
|
|
console.log(bookingTypeName, 'bookingTypeName');
|
|
|
|
if (!configId) {
|
|
setMessageType('error');
|
|
setMessageData('Please select a booking type.');
|
|
return;
|
|
}
|
|
|
|
let data = {};
|
|
if (Tabledata?.length > 0) {
|
|
if (!TableId) {
|
|
setMessageType('error');
|
|
setMessageData('Please select a table.');
|
|
return;
|
|
}
|
|
|
|
data = {
|
|
BranchId,
|
|
BookingType: configId,
|
|
TableId,
|
|
bookingTypeName,
|
|
tableName,
|
|
WaiterId,
|
|
selfBookingOption: selectedConfig.name,
|
|
selfBookingtype: SelectedSelfBooking.name,
|
|
};
|
|
} else {
|
|
data = {
|
|
BranchId,
|
|
BookingType: configId,
|
|
bookingTypeName,
|
|
selfBookingOption: selectedConfig.name,
|
|
selfBookingtype: SelectedSelfBooking.name,
|
|
};
|
|
}
|
|
|
|
const encrypted = encryptObject(data);
|
|
const postData = { Url: encrypted, CreatedBy: UserId };
|
|
|
|
const res = await dispatch(PublicQrCodepost(postData)).unwrap();
|
|
|
|
if (res?.data?.statusCode == 1) {
|
|
const QrUrl = `${subDirectory}selfBooking/${res?.data?.ReferenceNo}`;
|
|
setQrCodeUrl(QrUrl);
|
|
generatePDF(true, QrUrl);
|
|
}
|
|
} catch (error) {
|
|
console.error('HandleSubmit Error:', error);
|
|
setMessageType('error');
|
|
setMessageData('An unexpected error occurred.');
|
|
}
|
|
} else {
|
|
let Data1 = filtered?.find((e) => e?.ConfigName === 'TakeAway');
|
|
let data = {
|
|
BranchId,
|
|
BookingType: Data1?.ConfigId,
|
|
bookingTypeName: Data1?.ConfigName,
|
|
selfBookingOption: selectedConfig.name,
|
|
selfBookingtype: SelectedSelfBooking.name,
|
|
};
|
|
|
|
const encrypted = encryptObject(data);
|
|
const postData = { Url: encrypted, CreatedBy: UserId };
|
|
|
|
const res = await dispatch(PublicQrCodepost(postData)).unwrap();
|
|
|
|
if (res?.data?.statusCode == 1) {
|
|
const QrUrl = `${subDirectory}selfBooking/${res?.data?.ReferenceNo}`;
|
|
setQrCodeUrl(QrUrl);
|
|
generatePDF(true, QrUrl);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Auto-submit when sportsAppPreference is true (only once)
|
|
useEffect(() => {
|
|
if (
|
|
sportsAppPreference &&
|
|
!handleSubmitCalledRef.current &&
|
|
finalFiltered?.length > 0 &&
|
|
configId
|
|
) {
|
|
const onlineBookingOption = finalFiltered.find(
|
|
(option) => option.ConfigName === 'Online Booking'
|
|
);
|
|
if (onlineBookingOption && configId === onlineBookingOption.ConfigId) {
|
|
handleSubmitCalledRef.current = true;
|
|
// Use setTimeout to avoid calling during render
|
|
setTimeout(() => {
|
|
HandleSubmit();
|
|
}, 0);
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [sportsAppPreference, finalFiltered, configId]);
|
|
|
|
// Function to generate PDF
|
|
const generatePDF = async (isPreview = false, encrypted) => {
|
|
console.log('generatePDF called with:', { isPreview, encrypted });
|
|
|
|
if (!encrypted) {
|
|
setMessageType('error');
|
|
setMessageData('Please generate QR code first');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get booking type name and table name for display
|
|
const bookingTypeName =
|
|
filtered?.find((item) => item.ConfigId === configId)?.ConfigName ||
|
|
'Both';
|
|
const tableName =
|
|
Tabledata?.find((item) => item.TableId === TableId)?.TableName || '';
|
|
|
|
// Get branch details
|
|
const branch = branchData?.[0] || {};
|
|
const branchName = branch.BrName || branch.CompName || '';
|
|
const branchMobile = branch.BrMobile || '';
|
|
const companyLogo = branch.CompLogo || '';
|
|
const branchAddress =
|
|
[
|
|
branch.Address1,
|
|
branch.Address2,
|
|
branch.City,
|
|
branch.State,
|
|
branch.Zip,
|
|
]
|
|
.filter(Boolean)
|
|
.join(', ') || '';
|
|
|
|
// Create a temporary div for PDF content
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.style.padding = '40px';
|
|
tempDiv.style.backgroundColor = 'white';
|
|
tempDiv.style.fontFamily = 'Arial, sans-serif';
|
|
tempDiv.style.textAlign = 'center';
|
|
tempDiv.style.width = '600px';
|
|
tempDiv.style.margin = '0 auto';
|
|
|
|
// Add content to the temporary div
|
|
tempDiv.innerHTML = `
|
|
<div style="
|
|
margin: auto;
|
|
font-family: 'Arial', sans-serif;
|
|
background: linear-gradient(180deg, #f9fbff, #eef4ff);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
|
|
text-align: center;
|
|
">
|
|
|
|
${
|
|
companyLogo
|
|
? `
|
|
<div style="margin-bottom: 12px;">
|
|
<img id="company-logo"
|
|
src="${companyLogo}"
|
|
style="max-width: 140px; max-height: 90px; object-fit: contain;"
|
|
crossorigin="anonymous" />
|
|
</div>`
|
|
: ''
|
|
}
|
|
|
|
<h1 style="
|
|
color: #2b2b2b;
|
|
font-size: 22px;
|
|
margin: 6px 0;
|
|
font-weight: bold;
|
|
">
|
|
${branchName || ''}
|
|
</h1>
|
|
|
|
<p style="color:#555; font-size:13px; margin:4px 0;">
|
|
${branchAddress || ''}
|
|
</p>
|
|
|
|
<p style="color:#333; font-size:14px; margin:6px 0;">
|
|
<strong>${branchMobile || ''}</strong>
|
|
</p>
|
|
|
|
<hr style="margin:18px 0; border:none; border-top:2px dashed #d6e0ff;" />
|
|
|
|
<h2 style="
|
|
color:#4a6cff;
|
|
font-size:18px;
|
|
margin-bottom:14px;
|
|
">
|
|
Scan & Book Easily
|
|
</h2>
|
|
|
|
<div style="
|
|
display:inline-block;
|
|
padding:18px;
|
|
background:#ffffff;
|
|
border-radius:14px;
|
|
box-shadow:0 4px 12px rgba(0,0,0,0.15);
|
|
">
|
|
<div id="qr-code-container"></div>
|
|
</div>
|
|
|
|
<p style="
|
|
margin-top:14px;
|
|
font-size:12px;
|
|
color:#777;
|
|
word-break:break-all;
|
|
">
|
|
🔗 ${encrypted}
|
|
</p>
|
|
</div>
|
|
`;
|
|
|
|
// Add the temporary div to the document
|
|
document.body.appendChild(tempDiv);
|
|
|
|
// Create QR code in the container
|
|
const qrContainer = tempDiv.querySelector('#qr-code-container');
|
|
const qrCodeSvg = document.createElementNS(
|
|
'http://www.w3.org/2000/svg',
|
|
'svg'
|
|
);
|
|
qrCodeSvg.setAttribute('width', '200');
|
|
qrCodeSvg.setAttribute('height', '200');
|
|
qrCodeSvg.setAttribute('viewBox', '0 0 256 256');
|
|
|
|
// Use the QRCode library to generate SVG content
|
|
const QRCodeLib = await import('qrcode');
|
|
const qrDataUrl = await QRCodeLib.toDataURL(encrypted, {
|
|
width: 200,
|
|
margin: 2,
|
|
});
|
|
|
|
// Create an image element for the QR code
|
|
const qrImage = document.createElement('img');
|
|
qrImage.src = qrDataUrl;
|
|
qrImage.style.width = '200px';
|
|
qrImage.style.height = '200px';
|
|
qrContainer.appendChild(qrImage);
|
|
|
|
// Wait for all images to load (QR code and company logo if present)
|
|
const imagesToLoad = [qrImage];
|
|
const companyLogoImg = tempDiv.querySelector('#company-logo');
|
|
if (companyLogoImg) {
|
|
imagesToLoad.push(companyLogoImg);
|
|
}
|
|
|
|
await Promise.all(
|
|
imagesToLoad.map(
|
|
(img) =>
|
|
new Promise((resolve) => {
|
|
if (img.complete) {
|
|
resolve();
|
|
} else {
|
|
img.onload = resolve;
|
|
img.onerror = resolve; // Continue even if logo fails to load
|
|
}
|
|
})
|
|
)
|
|
);
|
|
|
|
// Generate PDF using html2canvas and jsPDF
|
|
const canvas = await html2canvas(tempDiv, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
allowTaint: true,
|
|
backgroundColor: '#ffffff',
|
|
});
|
|
|
|
const imgData = canvas.toDataURL('image/png');
|
|
const pdf = new jsPDF('p', 'mm', 'a4');
|
|
|
|
const imgWidth = 190;
|
|
const pageHeight = 295;
|
|
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
|
let heightLeft = imgHeight;
|
|
let position = 10;
|
|
|
|
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
|
heightLeft -= pageHeight;
|
|
|
|
while (heightLeft >= 0) {
|
|
position = heightLeft - imgHeight;
|
|
pdf.addPage();
|
|
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
|
heightLeft -= pageHeight;
|
|
}
|
|
|
|
// Clean up
|
|
document.body.removeChild(tempDiv);
|
|
|
|
if (isPreview) {
|
|
// Generate blob URL for preview
|
|
console.log('Generating PDF preview...');
|
|
const pdfBlob = pdf.output('blob');
|
|
const pdfUrl = URL.createObjectURL(pdfBlob);
|
|
console.log('PDF preview URL created:', pdfUrl);
|
|
setPdfPreviewUrl(pdfUrl);
|
|
setIsPreviewModalOpen(true);
|
|
} else {
|
|
// Download the PDF
|
|
console.log('Downloading PDF...');
|
|
const branch = branchData?.[0] || {};
|
|
const branchName = (
|
|
branch.BrName ||
|
|
branch.CompName ||
|
|
'Branch'
|
|
).replace(/[^a-zA-Z0-9]/g, '_');
|
|
const fileName = `QR_Code_${branchName}_${bookingTypeName}_${tableName}_${new Date().toISOString().split('T')[0]}.pdf`;
|
|
console.log('PDF filename:', fileName);
|
|
pdf.save(fileName);
|
|
console.log('PDF download initiated');
|
|
setMessageType('success');
|
|
setMessageData('PDF downloaded successfully!');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating PDF:', error);
|
|
console.error('Error details:', {
|
|
message: error.message,
|
|
stack: error.stack,
|
|
encrypted: encrypted,
|
|
configId: configId,
|
|
TableId: TableId,
|
|
});
|
|
setMessageType('error');
|
|
setMessageData(
|
|
`Error generating PDF: ${error.message}. Please try again.`
|
|
);
|
|
}
|
|
};
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
const selfSelect = (selectedValue) => {
|
|
const selectedOption = SelfBooking.find(
|
|
(option) => option.ConfigId === selectedValue
|
|
);
|
|
if (selectedOption) {
|
|
setSelectedConfig({
|
|
id: selectedOption.ConfigId,
|
|
name: selectedOption.ConfigName,
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!initializedRef.current && sportsAppPreference && SelfBooking?.length) {
|
|
const bothOption = SelfBooking.find(
|
|
(option) => option.ConfigName === 'Both'
|
|
);
|
|
if (bothOption) {
|
|
selfSelect(bothOption.ConfigId);
|
|
initializedRef.current = true; // prevents infinite loop
|
|
}
|
|
}
|
|
}, [sportsAppPreference, SelfBooking]);
|
|
|
|
// const selfBookingType = (selectedValue) => {
|
|
// const selectedOption = SelfBookingtype.find(
|
|
// (option) => option.ConfigId === selectedValue
|
|
// );
|
|
// if (selectedOption) {
|
|
// setSelectedSelfBooking({
|
|
// id: selectedOption.ConfigId,
|
|
// name: selectedOption.ConfigName,
|
|
// });
|
|
// }
|
|
// };
|
|
|
|
const selfBookingType = (selectedValue) => {
|
|
const selectedOption = SelfBookingtype.find(
|
|
(option) => option.ConfigId === selectedValue
|
|
);
|
|
if (selectedOption) {
|
|
setSelectedSelfBooking({
|
|
id: selectedOption.ConfigId,
|
|
name: selectedOption.ConfigName,
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (
|
|
sportsAppPreference &&
|
|
SelfBookingtype?.length &&
|
|
!SelectedSelfBooking
|
|
) {
|
|
const inShopOption = SelfBookingtype.find(
|
|
(option) => option.ConfigName === 'In Shop'
|
|
);
|
|
if (inShopOption) {
|
|
setSelectedSelfBooking({
|
|
id: inShopOption.ConfigId,
|
|
name: inShopOption.ConfigName,
|
|
});
|
|
}
|
|
}
|
|
}, [sportsAppPreference, SelfBookingtype, SelectedSelfBooking]);
|
|
|
|
return (
|
|
<div className="userPageTable">
|
|
<div className="userPageContent">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
<div className="formAddNew">
|
|
<div>
|
|
<FormHeader title={'QR Code Generator'} />
|
|
</div>
|
|
<div className="searchAddDiv">
|
|
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
|
{!sportsAppPreference && (
|
|
<DropDowns
|
|
options={[
|
|
// { value: 'All', label: 'Both' }, // Add "Select" option
|
|
...finalFiltered?.map((option) => ({
|
|
value: option.ConfigId,
|
|
label: option.ConfigName,
|
|
})),
|
|
]}
|
|
defaultValue={configId}
|
|
valueData={configId}
|
|
label="Booking Type"
|
|
onChangeFunction={(e) => ConfigSelect(e)}
|
|
isOnchanges={configId !== null ? true : false}
|
|
className="field-DropDown"
|
|
/>
|
|
)}
|
|
{Tabledata?.length > 0 && !sportsAppPreference && (
|
|
<DropDowns
|
|
options={[
|
|
...Tabledata?.map((option) => ({
|
|
value: option.TableId,
|
|
label: option.TableName,
|
|
})),
|
|
]}
|
|
defaultValue={TableId}
|
|
label="Table Name"
|
|
onChangeFunction={(e) => TableSelect(e)}
|
|
isOnchanges={TableId ? true : false}
|
|
className="field-DropDown"
|
|
/>
|
|
)}
|
|
|
|
{!sportsAppPreference && (
|
|
<DropDowns
|
|
options={
|
|
SelfBooking?.map((option) => ({
|
|
value: option.ConfigId,
|
|
label: option.ConfigName,
|
|
})) || []
|
|
}
|
|
defaultValue={
|
|
SelfBooking?.find((option) => option.ConfigName === 'Both')
|
|
?.ConfigId || 'Both'
|
|
}
|
|
label="Screen Type"
|
|
onChangeFunction={selfSelect}
|
|
isOnchanges={SelfBooking !== null ? true : false}
|
|
className="field-DropDown"
|
|
/>
|
|
)}
|
|
|
|
{!sportsAppPreference && (
|
|
<DropDowns
|
|
options={
|
|
SelfBookingtype?.filter(
|
|
(option) =>
|
|
option.ConfigName === 'In Shop' ||
|
|
option.ConfigName === 'Public'
|
|
)?.map((option) => ({
|
|
value: option.ConfigId,
|
|
label: option.ConfigName,
|
|
})) || []
|
|
}
|
|
defaultValue={
|
|
SelfBookingtype?.find(
|
|
(option) => option.ConfigName === 'In Shop'
|
|
)?.ConfigId
|
|
}
|
|
label="Self Booking"
|
|
onChangeFunction={selfBookingType}
|
|
isOnchanges={SelfBookingtype !== null}
|
|
className="field-DropDown"
|
|
/>
|
|
)}
|
|
{!sportsAppPreference && (
|
|
<div className="productMaster-input">
|
|
<Buttons
|
|
buttonText="Generate QR"
|
|
className="tertiary_Button"
|
|
color="901D77"
|
|
handleSubmit={HandleSubmit}
|
|
disabled={addnewAccess}
|
|
icon={<PlusOutlined />}
|
|
>
|
|
GENERATE
|
|
</Buttons>
|
|
</div>
|
|
)}
|
|
{qrCodeUrl && (
|
|
<>
|
|
{!sportsAppPreference && (
|
|
<div className="productMaster-input clearGenQRCode">
|
|
<Buttons
|
|
buttonText="Clear"
|
|
className="secondary_Button"
|
|
color="dc3545"
|
|
handleSubmit={() => {
|
|
setQrCodeUrl('');
|
|
setConfigId(null);
|
|
setTableId(null);
|
|
setWaiterId(null);
|
|
setTabledata([]);
|
|
setPdfPreviewUrl('');
|
|
setIsPreviewModalOpen(false);
|
|
}}
|
|
icon={<MdClear size={17} />}
|
|
>
|
|
CLEAR
|
|
</Buttons>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="reportTable" style={{ height: '78vh' }}>
|
|
{qrCodeUrl && (
|
|
<div
|
|
ref={qrCodeRef}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '10px',
|
|
backgroundColor: '#f9f9f9',
|
|
borderRadius: '8px',
|
|
margin: '8px 0',
|
|
}}
|
|
>
|
|
<h3
|
|
style={{
|
|
marginBottom: '16px',
|
|
color: '#333',
|
|
fontFamily: 'Poppins',
|
|
fontWeight: '500',
|
|
}}
|
|
>
|
|
Generated QR Code
|
|
</h3>
|
|
<div
|
|
style={{
|
|
padding: '20px',
|
|
backgroundColor: 'white',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
<QRCode
|
|
size={256}
|
|
style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
|
|
value={qrCodeUrl}
|
|
viewBox={`0 0 256 256`}
|
|
/>
|
|
</div>
|
|
<p
|
|
style={{
|
|
marginTop: '15px',
|
|
fontSize: '14px',
|
|
color: 'rgb(0, 0, 0)',
|
|
textAlign: 'center',
|
|
wordBreak: 'break-all',
|
|
background: '#d3d3d3',
|
|
padding: '6px 12px',
|
|
border: '1px solid rgb(184, 184, 184)',
|
|
borderRadius: '4px',
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
URL: {qrCodeUrl}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{qrCodeUrl && SelectedSelfBooking.name === 'Public' && (
|
|
<PublicQrCodeShare qrCodeUrl={qrCodeUrl} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* PDF Preview Modal */}
|
|
<Modal
|
|
title="PDF Preview"
|
|
open={isPreviewModalOpen}
|
|
onCancel={() => {
|
|
setIsPreviewModalOpen(false);
|
|
if (pdfPreviewUrl) {
|
|
URL.revokeObjectURL(pdfPreviewUrl);
|
|
setPdfPreviewUrl('');
|
|
}
|
|
}}
|
|
footer={false}
|
|
// footer={[
|
|
// <Buttons
|
|
// key="download"
|
|
// buttonText="Download PDF"
|
|
// className="tertiary_Button"
|
|
// color="28a745"
|
|
// handleSubmit={() => {
|
|
// generatePDF(false, qrCodeUrl);
|
|
// setIsPreviewModalOpen(false);
|
|
// if (pdfPreviewUrl) {
|
|
// URL.revokeObjectURL(pdfPreviewUrl);
|
|
// setPdfPreviewUrl('');
|
|
// }
|
|
// }}
|
|
// icon={<DownloadOutlined />}
|
|
// >
|
|
// DOWNLOAD
|
|
// </Buttons>,
|
|
// <Buttons
|
|
// key="close"
|
|
// buttonText="Close"
|
|
// className="secondary_Button"
|
|
// color="6c757d"
|
|
// handleSubmit={() => {
|
|
// setIsPreviewModalOpen(false);
|
|
// if (pdfPreviewUrl) {
|
|
// URL.revokeObjectURL(pdfPreviewUrl);
|
|
// setPdfPreviewUrl('');
|
|
// }
|
|
// }}
|
|
// >
|
|
// CLOSE
|
|
// </Buttons>
|
|
// ]}
|
|
width={1000}
|
|
style={{ top: 20 }}
|
|
>
|
|
{pdfPreviewUrl && (
|
|
<div style={{ textAlign: 'center' }}>
|
|
<iframe
|
|
src={pdfPreviewUrl}
|
|
width="100%"
|
|
height="600px"
|
|
style={{ border: 'none', borderRadius: '4px' }}
|
|
title="PDF Preview"
|
|
/>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PublicQrCode;
|