({ url: '' });
- const [isDynamic, setIsDynamic] = useState(true);
-
- // Style state
- const [foregroundColor, setForegroundColor] = useState('#000000');
- const [backgroundColor, setBackgroundColor] = useState('#FFFFFF');
- const [cornerStyle, setCornerStyle] = useState('square');
- const [size, setSize] = useState(200);
-
- // QR preview
- const [qrDataUrl, setQrDataUrl] = useState('');
-
- // Check if user can customize colors (PRO+ only)
- const canCustomizeColors = userPlan === 'PRO' || userPlan === 'BUSINESS';
-
- // Load user plan
- useEffect(() => {
- const fetchUserPlan = async () => {
- try {
- const response = await fetch('/api/user/plan');
- if (response.ok) {
- const data = await response.json();
- setUserPlan(data.plan || 'FREE');
- }
- } catch (error) {
- console.error('Error fetching user plan:', error);
- }
- };
- fetchUserPlan();
- }, []);
-
- const contrast = calculateContrast(foregroundColor, backgroundColor);
- const hasGoodContrast = contrast >= 4.5;
-
- const contentTypes = [
- { value: 'URL', label: 'URL / Website' },
- { value: 'VCARD', label: 'Contact Card' },
- { value: 'GEO', label: 'Location/Maps' },
- { value: 'PHONE', label: 'Phone Number' },
- ];
-
- // Get QR content based on content type
- const getQRContent = () => {
- switch (contentType) {
- case 'URL':
- return content.url || 'https://example.com';
- case 'PHONE':
- return `tel:${content.phone || '+1234567890'}`;
- case 'SMS':
- return `sms:${content.phone || '+1234567890'}${content.message ? `?body=${encodeURIComponent(content.message)}` : ''}`;
- case 'VCARD':
- return `BEGIN:VCARD\nVERSION:3.0\nFN:${content.firstName || 'John'} ${content.lastName || 'Doe'}\nORG:${content.organization || 'Company'}\nTITLE:${content.title || 'Position'}\nEMAIL:${content.email || 'email@example.com'}\nTEL:${content.phone || '+1234567890'}\nEND:VCARD`;
- case 'GEO':
- const lat = content.latitude || 37.7749;
- const lon = content.longitude || -122.4194;
- const label = content.label ? `?q=${encodeURIComponent(content.label)}` : '';
- return `geo:${lat},${lon}${label}`;
- case 'TEXT':
- return content.text || 'Sample text';
- case 'WHATSAPP':
- return `https://wa.me/${content.phone || '+1234567890'}${content.message ? `?text=${encodeURIComponent(content.message)}` : ''}`;
- default:
- return 'https://example.com';
- }
- };
-
- const qrContent = getQRContent();
-
- const downloadQR = async (format: 'svg' | 'png') => {
- try {
- // Get the content based on content type
- let qrContent = '';
- switch (contentType) {
- case 'URL':
- qrContent = content.url || '';
- break;
- case 'PHONE':
- qrContent = `tel:${content.phone || ''}`;
- break;
- case 'EMAIL':
- qrContent = `mailto:${content.email || ''}${content.subject ? `?subject=${encodeURIComponent(content.subject)}` : ''}`;
- break;
- case 'TEXT':
- qrContent = content.text || '';
- break;
- default:
- qrContent = content.url || '';
- }
-
- if (!qrContent) return;
-
- const QRCode = (await import('qrcode')).default;
-
- if (format === 'svg') {
- const svg = await QRCode.toString(qrContent, {
- type: 'svg',
- width: size,
- margin: 2,
- color: {
- dark: foregroundColor,
- light: backgroundColor,
- },
- });
-
- const blob = new Blob([svg], { type: 'image/svg+xml' });
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = `qrcode-${title || 'download'}.svg`;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
- } else {
- const a = document.createElement('a');
- a.href = qrDataUrl;
- a.download = `qrcode-${title || 'download'}.png`;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- }
- } catch (err) {
- console.error('Error downloading QR code:', err);
- }
- };
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- setLoading(true);
-
- try {
- const qrData = {
- title,
- contentType,
- content,
- isStatic: !isDynamic,
- tags: [],
- style: {
- // FREE users can only use black/white
- foregroundColor: canCustomizeColors ? foregroundColor : '#000000',
- backgroundColor: canCustomizeColors ? backgroundColor : '#FFFFFF',
- cornerStyle,
- size,
- },
- };
-
- console.log('SENDING QR DATA:', qrData);
-
- const response = await fetchWithCsrf('/api/qrs', {
- method: 'POST',
- body: JSON.stringify(qrData),
- });
-
- const responseData = await response.json();
- console.log('RESPONSE DATA:', responseData);
-
- if (response.ok) {
- showToast(`QR Code "${title}" created successfully!`, 'success');
-
- // Wait a moment so user sees the toast, then redirect
- setTimeout(() => {
- router.push('/dashboard');
- router.refresh();
- }, 1000);
- } else {
- console.error('Error creating QR code:', responseData);
- showToast(responseData.error || 'Error creating QR code', 'error');
- }
- } catch (error) {
- console.error('Error creating QR code:', error);
- showToast('Error creating QR code. Please try again.', 'error');
- } finally {
- setLoading(false);
- }
- };
-
- const renderContentFields = () => {
- switch (contentType) {
- case 'URL':
- return (
- setContent({ url: e.target.value })}
- placeholder="https://example.com"
- required
- />
- );
- case 'PHONE':
- return (
- setContent({ phone: e.target.value })}
- placeholder="+1234567890"
- required
- />
- );
- case 'VCARD':
- return (
- <>
- setContent({ ...content, firstName: e.target.value })}
- placeholder="John"
- required
- />
- setContent({ ...content, lastName: e.target.value })}
- placeholder="Doe"
- required
- />
- setContent({ ...content, email: e.target.value })}
- placeholder="john@example.com"
- />
- setContent({ ...content, phone: e.target.value })}
- placeholder="+1234567890"
- />
- setContent({ ...content, organization: e.target.value })}
- placeholder="Company Name"
- />
- setContent({ ...content, title: e.target.value })}
- placeholder="CEO"
- />
-
- );
- case 'GEO':
- return (
- <>
- setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
- placeholder="37.7749"
- required
- />
- setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
- placeholder="-122.4194"
- required
- />
- setContent({ ...content, label: e.target.value })}
- placeholder="Golden Gate Bridge"
- />
-
- );
- case 'TEXT':
- return (
-
-
-