) => {
const file = e.target.files?.[0];
if (file) {
if (file.size > 10 * 1024 * 1024) { // 10MB limit (soft limit for upload, will be resized)
showToast('Logo file size too large (max 10MB)', 'error');
return;
}
const reader = new FileReader();
reader.onload = (evt) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const maxDimension = 500; // Resize to max 500px
let width = img.width;
let height = img.height;
if (width > maxDimension || height > maxDimension) {
if (width > height) {
height = Math.round((height * maxDimension) / width);
width = maxDimension;
} else {
width = Math.round((width * maxDimension) / height);
height = maxDimension;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0, width, height);
// Compress to JPEG/PNG with reduced quality to save space
const dataUrl = canvas.toDataURL(file.type === 'image/png' ? 'image/png' : 'image/jpeg', 0.8);
setLogoUrl(dataUrl);
};
img.src = evt.target?.result as string;
};
reader.readAsDataURL(file);
}
};
// Load the user's active dynamic codes so the limit modal can offer a way out
// that does not cost money. Silent failure is fine here - the modal simply
// hides the pause option if this does not come back.
const loadActiveCodes = async () => {
try {
const res = await fetch('/api/qrs');
if (!res.ok) return;
const all = await res.json();
setActiveCodes(
(Array.isArray(all) ? all : [])
.filter((qr: any) => qr.type === 'DYNAMIC' && qr.status === 'ACTIVE')
.map((qr: any) => ({
id: qr.id,
title: qr.title || 'Untitled',
scans30d: qr.scans30d ?? 0,
}))
);
} catch {
// ignore
}
};
const handlePauseCode = async (id: string) => {
const res = await fetchWithCsrf(`/api/qrs/${id}`, {
method: 'PATCH',
body: JSON.stringify({ status: 'PAUSED' }),
});
if (!res.ok) {
const data = await res.json().catch(() => null);
throw new Error(data?.error || 'Could not pause that code.');
}
trackEvent('dynamic_code_paused_for_slot', { qr_id: id });
setUpgradeOpen(false);
showToast('Slot freed. Saving your code now.', 'success');
// The form state was never lost, so the original save just runs again.
await handleSubmit({ preventDefault: () => {} } as React.FormEvent);
};
// Last resort that still leaves the user with something usable. A static code
// cannot be edited or tracked, but it works forever on every plan - and
// saying so here is what makes the rest of the modal credible.
const handleDownloadStatic = () => {
trackEvent('static_fallback_from_limit', { plan: userPlan });
setUpgradeOpen(false);
setIsDynamic(false);
showToast(
'Switched to a static code. It cannot be edited or tracked, but it never expires.',
'info'
);
};
// The logo belongs in the preset. For an agency, "client A looks the same on
// all 500 codes" is mostly about the mark in the middle - a preset that
// carries the colours but drops the logo solves the smaller half of the job.
const currentDesign = () => ({
foregroundColor,
backgroundColor,
moduleShape,
eyeFrameShape,
eyeBallShape,
gradientMode,
gradientTo,
frameType,
logoUrl: canUseLogo ? logoUrl : '',
logoSize,
});
const applyDesign = (style: any) => {
if (!style) return;
if (style.foregroundColor) setForegroundColor(style.foregroundColor);
if (style.backgroundColor) setBackgroundColor(style.backgroundColor);
if (style.moduleShape) setModuleShape(style.moduleShape);
if (style.eyeFrameShape) setEyeFrameShape(style.eyeFrameShape);
if (style.eyeBallShape) setEyeBallShape(style.eyeBallShape);
if (style.gradientMode) setGradientMode(style.gradientMode);
if (style.gradientTo) setGradientTo(style.gradientTo);
if (style.frameType) setFrameType(style.frameType);
if (typeof style.logoUrl === 'string' && canUseLogo) setLogoUrl(style.logoUrl);
if (style.logoSize) setLogoSize(style.logoSize);
};
const loadPresets = async () => {
try {
const res = await fetch('/api/design-presets');
if (res.ok) setPresets(await res.json());
} catch {
// presets are a convenience, never block the page on them
}
};
useEffect(() => {
if (canUseFullDesign) void loadPresets();
}, [canUseFullDesign]);
const savePreset = async () => {
const name = presetName.trim();
if (!name) {
showToast('Give the preset a name first.', 'error');
return;
}
const res = await fetchWithCsrf('/api/design-presets', {
method: 'POST',
body: JSON.stringify({ name, style: currentDesign() }),
});
if (res.ok) {
setPresetName('');
await loadPresets();
trackEvent('design_preset_saved', { plan: userPlan });
showToast(`Preset "${name}" saved.`, 'success');
} else {
const err = await res.json().catch(() => null);
showToast(err?.message || 'Could not save the preset.', 'error');
}
};
const deletePreset = async (id: string) => {
const res = await fetchWithCsrf(`/api/design-presets?id=${id}`, { method: 'DELETE' });
if (res.ok) await loadPresets();
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
try {
const qrData = {
title,
contentType,
content,
isStatic: !isDynamic,
tags: [],
style: {
// Colors are available on every plan, including Free.
foregroundColor,
backgroundColor,
cornerStyle,
size,
moduleShape,
eyeFrameShape,
eyeBallShape,
gradientMode,
gradientTo,
imageSettings: (canUseLogo && logoUrl) ? {
src: logoUrl,
height: logoSize,
width: logoSize,
excavate,
} : undefined,
frameType, // Save frame type
},
};
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) {
trackEvent('qr_code_created', {
content_type: contentType,
qr_type: isDynamic ? 'dynamic' : 'static',
plan: userPlan,
has_logo: Boolean(logoUrl),
frame_type: frameType,
});
showToast(`QR Code "${title}" created successfully!`, 'success');
// Wait a moment so user sees the toast, then redirect
setTimeout(() => {
const redirectTarget = sanitizeRedirectPath(searchParams.get('redirect'));
if (searchParams.get('onboarding') === '1') {
router.push(appendRedirectParam('/onboarding', redirectTarget, { step: '8' }));
} else {
router.push('/dashboard');
}
router.refresh();
}, 1000);
} else {
console.error('Error creating QR code:', responseData);
if (response.status === 403 && responseData.error === 'Limit reached') {
// Do NOT navigate away. The finished code only exists in this
// component's state - a redirect throws away the user's work at the
// exact moment they were most willing to pay for it.
trackEvent('dynamic_limit_reached', {
plan: responseData.plan,
current_count: responseData.currentCount,
});
setLimitInfo({
current: responseData.currentCount ?? 3,
limit: responseData.limit ?? 3,
});
setUpgradeReason('limit');
void loadActiveCodes();
setUpgradeOpen(true);
return;
}
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 (