460 lines
18 KiB
TypeScript
460 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter, useParams } from 'next/navigation';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { showToast } from '@/components/ui/Toast';
|
|
import { useCsrf } from '@/hooks/useCsrf';
|
|
import { Upload, FileText, HelpCircle } from 'lucide-react';
|
|
|
|
// Tooltip component for form field help
|
|
const Tooltip = ({ text }: { text: string }) => (
|
|
<div className="group relative inline-block ml-1">
|
|
<HelpCircle className="w-4 h-4 text-gray-400 cursor-help" />
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 w-48 text-center">
|
|
{text}
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default function EditQRPage() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const qrId = params.id as string;
|
|
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [qrCode, setQrCode] = useState<any>(null);
|
|
const [title, setTitle] = useState('');
|
|
const [content, setContent] = useState<any>({});
|
|
|
|
useEffect(() => {
|
|
const fetchQRCode = async () => {
|
|
try {
|
|
const response = await fetch(`/api/qrs/${qrId}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setQrCode(data);
|
|
setTitle(data.title);
|
|
setContent(data.content || {});
|
|
} else {
|
|
showToast('Failed to load QR code', 'error');
|
|
router.push('/dashboard');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching QR code:', error);
|
|
showToast('Failed to load QR code', 'error');
|
|
router.push('/dashboard');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchQRCode();
|
|
}, [qrId, router]);
|
|
|
|
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
// 10MB limit
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
showToast('File size too large (max 10MB)', 'error');
|
|
return;
|
|
}
|
|
|
|
setUploading(true);
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
const response = await fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
setContent({ ...content, fileUrl: data.url, fileName: data.filename });
|
|
showToast('File uploaded successfully!', 'success');
|
|
} else {
|
|
showToast(data.error || 'Upload failed', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
showToast('Error uploading file', 'error');
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
|
|
try {
|
|
const response = await fetchWithCsrf(`/api/qrs/${qrId}`, {
|
|
method: 'PATCH',
|
|
body: JSON.stringify({
|
|
title,
|
|
content,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
showToast('QR code updated successfully!', 'success');
|
|
router.push('/dashboard');
|
|
} else {
|
|
const error = await response.json();
|
|
showToast(error.error || 'Failed to update QR code', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating QR code:', error);
|
|
showToast('Failed to update QR code', 'error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Loading QR code...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!qrCode) {
|
|
return null;
|
|
}
|
|
|
|
// Static QR codes cannot be edited
|
|
if (qrCode.type === 'STATIC') {
|
|
return (
|
|
<div className="max-w-2xl mx-auto mt-12">
|
|
<Card>
|
|
<CardContent className="p-12 text-center">
|
|
<div className="w-20 h-20 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<svg className="w-10 h-10 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Static QR Code</h2>
|
|
<p className="text-gray-600 mb-8">
|
|
Static QR codes cannot be edited because their content is embedded directly in the QR code image.
|
|
</p>
|
|
<Button onClick={() => router.push('/dashboard')}>
|
|
Back to Dashboard
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Edit QR Code</h1>
|
|
<p className="text-gray-600 mt-2">Update your dynamic QR code content</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>QR Code Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<Input
|
|
label="Title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Enter QR code title"
|
|
required
|
|
/>
|
|
|
|
{qrCode.contentType === 'URL' && (
|
|
<Input
|
|
label="URL"
|
|
type="url"
|
|
value={content.url || ''}
|
|
onChange={(e) => setContent({ ...content, url: e.target.value })}
|
|
placeholder="https://example.com"
|
|
required
|
|
/>
|
|
)}
|
|
|
|
{qrCode.contentType === 'PHONE' && (
|
|
<Input
|
|
label="Phone Number"
|
|
type="tel"
|
|
value={content.phone || ''}
|
|
onChange={(e) => setContent({ ...content, phone: e.target.value })}
|
|
placeholder="+1234567890"
|
|
required
|
|
/>
|
|
)}
|
|
|
|
{qrCode.contentType === 'VCARD' && (
|
|
<>
|
|
<Input
|
|
label="First Name"
|
|
value={content.firstName || ''}
|
|
onChange={(e) => setContent({ ...content, firstName: e.target.value })}
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Last Name"
|
|
value={content.lastName || ''}
|
|
onChange={(e) => setContent({ ...content, lastName: e.target.value })}
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Email"
|
|
type="email"
|
|
value={content.email || ''}
|
|
onChange={(e) => setContent({ ...content, email: e.target.value })}
|
|
placeholder="john@example.com"
|
|
/>
|
|
<Input
|
|
label="Phone"
|
|
value={content.phone || ''}
|
|
onChange={(e) => setContent({ ...content, phone: e.target.value })}
|
|
placeholder="+1234567890"
|
|
/>
|
|
<Input
|
|
label="Organization"
|
|
value={content.organization || ''}
|
|
onChange={(e) => setContent({ ...content, organization: e.target.value })}
|
|
placeholder="Company Name"
|
|
/>
|
|
<Input
|
|
label="Job Title"
|
|
value={content.title || ''}
|
|
onChange={(e) => setContent({ ...content, title: e.target.value })}
|
|
placeholder="CEO"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'GEO' && (
|
|
<>
|
|
<Input
|
|
label="Latitude"
|
|
type="number"
|
|
step="any"
|
|
value={content.latitude || ''}
|
|
onChange={(e) => setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
|
|
placeholder="37.7749"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Longitude"
|
|
type="number"
|
|
step="any"
|
|
value={content.longitude || ''}
|
|
onChange={(e) => setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
|
|
placeholder="-122.4194"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Location Label (Optional)"
|
|
value={content.label || ''}
|
|
onChange={(e) => setContent({ ...content, label: e.target.value })}
|
|
placeholder="Golden Gate Bridge"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'TEXT' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Text Content
|
|
</label>
|
|
<textarea
|
|
value={content.text || ''}
|
|
onChange={(e) => setContent({ ...content, text: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
rows={4}
|
|
placeholder="Enter your text content"
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{qrCode.contentType === 'PDF' && (
|
|
<>
|
|
<div>
|
|
<div className="flex items-center mb-1">
|
|
<label className="block text-sm font-medium text-gray-700">Upload Menu / PDF</label>
|
|
<Tooltip text="Upload your menu PDF (Max 10MB). Hosted securely." />
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:bg-gray-50 transition-colors relative">
|
|
<div className="space-y-1 text-center">
|
|
{uploading ? (
|
|
<div className="flex flex-col items-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
|
|
<p className="text-sm text-gray-500">Uploading...</p>
|
|
</div>
|
|
) : content.fileUrl ? (
|
|
<div className="flex flex-col items-center">
|
|
<div className="mx-auto h-12 w-12 text-primary-500 bg-primary-50 rounded-full flex items-center justify-center mb-2">
|
|
<FileText className="h-6 w-6" />
|
|
</div>
|
|
<p className="text-sm text-green-600 font-medium mb-1">Upload Complete!</p>
|
|
<a href={content.fileUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-500 hover:underline break-all max-w-xs mb-3 block">
|
|
{content.fileName || 'View File'}
|
|
</a>
|
|
<label htmlFor="file-upload" className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
|
<span>Replace File</span>
|
|
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
|
|
</label>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Upload className="mx-auto h-12 w-12 text-gray-400" />
|
|
<div className="flex text-sm text-gray-600 justify-center">
|
|
<label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
|
|
<span>Upload a file</span>
|
|
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
|
|
</label>
|
|
<p className="pl-1">or drag and drop</p>
|
|
</div>
|
|
<p className="text-xs text-gray-500">PDF, PNG, JPG up to 10MB</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{content.fileUrl && (
|
|
<Input
|
|
label="File Name / Menu Title"
|
|
value={content.fileName || ''}
|
|
onChange={(e) => setContent({ ...content, fileName: e.target.value })}
|
|
placeholder="Product Catalog 2026"
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'APP' && (
|
|
<>
|
|
<Input
|
|
label="iOS App Store URL"
|
|
value={content.iosUrl || ''}
|
|
onChange={(e) => setContent({ ...content, iosUrl: e.target.value })}
|
|
placeholder="https://apps.apple.com/app/..."
|
|
/>
|
|
<Input
|
|
label="Android Play Store URL"
|
|
value={content.androidUrl || ''}
|
|
onChange={(e) => setContent({ ...content, androidUrl: e.target.value })}
|
|
placeholder="https://play.google.com/store/apps/..."
|
|
/>
|
|
<Input
|
|
label="Fallback URL (Desktop)"
|
|
value={content.fallbackUrl || ''}
|
|
onChange={(e) => setContent({ ...content, fallbackUrl: e.target.value })}
|
|
placeholder="https://yourapp.com"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'COUPON' && (
|
|
<>
|
|
<Input
|
|
label="Coupon Code"
|
|
value={content.code || ''}
|
|
onChange={(e) => setContent({ ...content, code: e.target.value })}
|
|
placeholder="SUMMER20"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Discount"
|
|
value={content.discount || ''}
|
|
onChange={(e) => setContent({ ...content, discount: e.target.value })}
|
|
placeholder="20% OFF"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Title"
|
|
value={content.title || ''}
|
|
onChange={(e) => setContent({ ...content, title: e.target.value })}
|
|
placeholder="Summer Sale 2026"
|
|
/>
|
|
<Input
|
|
label="Description (optional)"
|
|
value={content.description || ''}
|
|
onChange={(e) => setContent({ ...content, description: e.target.value })}
|
|
placeholder="Valid on all products"
|
|
/>
|
|
<Input
|
|
label="Expiry Date (optional)"
|
|
type="date"
|
|
value={content.expiryDate || ''}
|
|
onChange={(e) => setContent({ ...content, expiryDate: e.target.value })}
|
|
/>
|
|
<Input
|
|
label="Redeem URL (optional)"
|
|
value={content.redeemUrl || ''}
|
|
onChange={(e) => setContent({ ...content, redeemUrl: e.target.value })}
|
|
placeholder="https://shop.example.com"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'FEEDBACK' && (
|
|
<>
|
|
<Input
|
|
label="Business Name"
|
|
value={content.businessName || ''}
|
|
onChange={(e) => setContent({ ...content, businessName: e.target.value })}
|
|
placeholder="Your Restaurant Name"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Google Review URL (optional)"
|
|
value={content.googleReviewUrl || ''}
|
|
onChange={(e) => setContent({ ...content, googleReviewUrl: e.target.value })}
|
|
placeholder="https://search.google.com/local/writereview?placeid=..."
|
|
/>
|
|
<Input
|
|
label="Thank You Message"
|
|
value={content.thankYouMessage || ''}
|
|
onChange={(e) => setContent({ ...content, thankYouMessage: e.target.value })}
|
|
placeholder="Thanks for your feedback!"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<div className="flex justify-end space-x-4 pt-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => router.push('/dashboard')}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
loading={saving}
|
|
disabled={csrfLoading || saving}
|
|
>
|
|
{csrfLoading ? 'Loading...' : 'Save Changes'}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|