Email retention

This commit is contained in:
Timo Knuth
2026-04-02 11:37:58 +02:00
parent 1cff96a553
commit 7afd39c18c
18 changed files with 4110 additions and 2951 deletions

View File

@@ -12,6 +12,7 @@ import { useTranslation } from '@/hooks/useTranslation';
import { useCsrf } from '@/hooks/useCsrf';
import { showToast } from '@/components/ui/Toast';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/Dialog';
import { QrCode } from 'lucide-react';
interface QRCodeData {
id: string;
@@ -45,68 +46,6 @@ export default function DashboardPage() {
});
const [analyticsData, setAnalyticsData] = useState<any>(null);
const mockQRCodes = [
{
id: '1',
title: 'Support Phone',
type: 'DYNAMIC' as const,
contentType: 'PHONE',
slug: 'support-phone-demo',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:00:00Z',
scans: 0,
},
{
id: '2',
title: 'Event Details',
type: 'DYNAMIC' as const,
contentType: 'URL',
slug: 'event-details-demo',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:01:00Z',
scans: 0,
},
{
id: '3',
title: 'Product Demo',
type: 'DYNAMIC' as const,
contentType: 'URL',
slug: 'product-demo-qr',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:02:00Z',
scans: 0,
},
{
id: '4',
title: 'Company Website',
type: 'DYNAMIC' as const,
contentType: 'URL',
slug: 'company-website-qr',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:03:00Z',
scans: 0,
},
{
id: '5',
title: 'Contact Card',
type: 'DYNAMIC' as const,
contentType: 'VCARD',
slug: 'contact-card-qr',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:04:00Z',
scans: 0,
},
{
id: '6',
title: 'Event Details',
type: 'DYNAMIC' as const,
contentType: 'URL',
slug: 'event-details-dup',
status: 'ACTIVE' as const,
createdAt: '2025-08-07T10:05:00Z',
scans: 0,
},
];
const blogPosts = [
// NEW POSTS
@@ -384,7 +323,11 @@ export default function DashboardPage() {
<div className="flex items-start justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">{t('dashboard.title')}</h1>
<p className="text-gray-600 mt-2">{t('dashboard.subtitle')}</p>
<p className="text-gray-600 mt-2">
{!loading && qrCodes.length === 0
? 'Start here — create your first QR code in under 2 minutes'
: t('dashboard.subtitle')}
</p>
</div>
<div className="flex items-center space-x-3">
<Badge variant={getPlanBadgeColor(userPlan)} className="text-lg px-4 py-2">
@@ -445,6 +388,17 @@ export default function DashboardPage() {
</Card>
))}
</div>
) : qrCodes.length === 0 ? (
<div className="text-center py-16 border-2 border-dashed border-gray-200 rounded-xl">
<QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<h3 className="text-lg font-semibold text-gray-700 mb-2">Create your first QR code</h3>
<p className="text-gray-500 mb-6 max-w-sm mx-auto">
You have 3 free dynamic QR codes. They redirect wherever you want and track every scan.
</p>
<Link href="/create">
<Button>Create QR Code it takes 90 seconds</Button>
</Link>
</div>
) : (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{qrCodes.map((qr) => (

View File

@@ -1,179 +1,179 @@
"use client";
import { useState } from 'react';
type Step = 'use-case' | 'region' | 'result';
type Result = {
format: string;
label: string;
description: string;
example: string;
color: string;
};
const RESULTS: Record<string, Result> = {
'ean13': {
format: 'EAN-13',
label: 'EAN-13',
description: 'The global retail standard. Used on consumer products sold in supermarkets, pharmacies, and online shops worldwide.',
example: '4006381333931 (a common product barcode)',
color: 'blue',
},
'upca': {
format: 'UPC-A',
label: 'UPC-A',
description: 'The North American retail standard. Functionally equivalent to EAN-13 but with 12 digits. Required by US and Canadian retailers.',
example: '012345678905',
color: 'indigo',
},
'code128': {
format: 'Code 128',
label: 'Code 128',
description: 'The most versatile barcode. Supports letters, numbers, and special characters. Used in shipping labels, inventory systems, and internal tracking.',
example: 'SHIP-2026-ABC-001',
color: 'emerald',
},
'code39': {
format: 'Code 39',
label: 'Code 39',
description: 'A legacy alphanumeric format still widely used in automotive, defense, and industrial environments. Simpler than Code 128 but less compact.',
example: 'PART-7734-A',
color: 'orange',
},
'msi': {
format: 'MSI',
label: 'MSI',
description: 'Designed for inventory and shelf labeling in retail warehouses. Numeric-only. Used for bin locations, shelf tags, and stockroom management.',
example: '123456',
color: 'purple',
},
'pharmacode': {
format: 'Pharmacode',
label: 'Pharmacode',
description: 'A pharmaceutical packaging standard used to verify correct product packaging. Encodes a single numeric value (3131071).',
example: '12345',
color: 'red',
},
};
const colorMap: Record<string, string> = {
blue: 'bg-blue-50 border-blue-300 text-blue-900',
indigo: 'bg-indigo-50 border-indigo-300 text-indigo-900',
emerald: 'bg-emerald-50 border-emerald-300 text-emerald-900',
orange: 'bg-orange-50 border-orange-300 text-orange-900',
purple: 'bg-purple-50 border-purple-300 text-purple-900',
red: 'bg-red-50 border-red-300 text-red-900',
};
const badgeMap: Record<string, string> = {
blue: 'bg-blue-100 text-blue-800',
indigo: 'bg-indigo-100 text-indigo-800',
emerald: 'bg-emerald-100 text-emerald-800',
orange: 'bg-orange-100 text-orange-800',
purple: 'bg-purple-100 text-purple-800',
red: 'bg-red-100 text-red-800',
};
export function BarcodeFormatPicker() {
const [step, setStep] = useState<Step>('use-case');
const [useCase, setUseCase] = useState<string>('');
const [result, setResult] = useState<string>('');
const selectUseCase = (value: string) => {
setUseCase(value);
if (value === 'retail') {
setStep('region');
} else {
const map: Record<string, string> = {
logistics: 'code128',
inventory: 'code128',
industrial: 'code39',
warehouse: 'msi',
pharma: 'pharmacode',
};
setResult(map[value] ?? 'code128');
setStep('result');
}
};
const selectRegion = (region: string) => {
setResult(region === 'us' ? 'upca' : 'ean13');
setStep('result');
};
const reset = () => {
setStep('use-case');
setUseCase('');
setResult('');
};
const res = result ? RESULTS[result] : null;
return (
<div className="not-prose my-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
<h3 className="text-lg font-bold text-slate-900 mb-1">Which barcode format do I need?</h3>
<p className="text-sm text-slate-500 mb-5">Answer two quick questions to find the right format for your use case.</p>
{step === 'use-case' && (
<div>
<p className="text-sm font-semibold text-slate-700 mb-3">What will you use the barcode for?</p>
<div className="grid sm:grid-cols-2 gap-3">
{[
{ value: 'retail', label: 'Retail products', sub: 'Selling in stores or online' },
{ value: 'logistics', label: 'Shipping & logistics', sub: 'Parcel labels, supply chain' },
{ value: 'inventory', label: 'Inventory tracking', sub: 'Internal stock management' },
{ value: 'industrial', label: 'Industrial / automotive', sub: 'Manufacturing, defense' },
{ value: 'warehouse', label: 'Shelf & bin labeling', sub: 'Warehouse locations' },
{ value: 'pharma', label: 'Pharmaceutical packaging', sub: 'Medication packaging control' },
].map((opt) => (
<button
key={opt.value}
onClick={() => selectUseCase(opt.value)}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">{opt.label}</div>
<div className="text-xs text-slate-500 mt-0.5">{opt.sub}</div>
</button>
))}
</div>
</div>
)}
{step === 'region' && (
<div>
<p className="text-sm font-semibold text-slate-700 mb-3">Where will you primarily sell?</p>
<div className="grid sm:grid-cols-2 gap-3">
<button
onClick={() => selectRegion('eu')}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">Europe / International</div>
<div className="text-xs text-slate-500 mt-0.5">EU, UK, Asia, global retail</div>
</button>
<button
onClick={() => selectRegion('us')}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">USA / Canada</div>
<div className="text-xs text-slate-500 mt-0.5">North American retail market</div>
</button>
</div>
<button onClick={reset} className="mt-3 text-xs text-slate-400 hover:text-slate-600 underline"> Start over</button>
</div>
)}
{step === 'result' && res && (
<div className={`rounded-xl border-2 p-5 ${colorMap[res.color]}`}>
<div className="flex items-center gap-3 mb-3">
<span className={`text-xs font-bold px-2.5 py-1 rounded-full ${badgeMap[res.color]}`}>Recommended</span>
<span className="font-bold text-xl">{res.label}</span>
</div>
<p className="text-sm mb-2">{res.description}</p>
<p className="text-xs opacity-70 font-mono">Example: {res.example}</p>
<button onClick={reset} className="mt-4 text-xs underline opacity-60 hover:opacity-90"> Try again</button>
</div>
)}
</div>
);
}
"use client";
import { useState } from 'react';
type Step = 'use-case' | 'region' | 'result';
type Result = {
format: string;
label: string;
description: string;
example: string;
color: string;
};
const RESULTS: Record<string, Result> = {
'ean13': {
format: 'EAN-13',
label: 'EAN-13',
description: 'The global retail standard. Used on consumer products sold in supermarkets, pharmacies, and online shops worldwide.',
example: '4006381333931 (a common product barcode)',
color: 'blue',
},
'upca': {
format: 'UPC-A',
label: 'UPC-A',
description: 'The North American retail standard. Functionally equivalent to EAN-13 but with 12 digits. Required by US and Canadian retailers.',
example: '012345678905',
color: 'indigo',
},
'code128': {
format: 'Code 128',
label: 'Code 128',
description: 'The most versatile barcode. Supports letters, numbers, and special characters. Used in shipping labels, inventory systems, and internal tracking.',
example: 'SHIP-2026-ABC-001',
color: 'emerald',
},
'code39': {
format: 'Code 39',
label: 'Code 39',
description: 'A legacy alphanumeric format still widely used in automotive, defense, and industrial environments. Simpler than Code 128 but less compact.',
example: 'PART-7734-A',
color: 'orange',
},
'msi': {
format: 'MSI',
label: 'MSI',
description: 'Designed for inventory and shelf labeling in retail warehouses. Numeric-only. Used for bin locations, shelf tags, and stockroom management.',
example: '123456',
color: 'purple',
},
'pharmacode': {
format: 'Pharmacode',
label: 'Pharmacode',
description: 'A pharmaceutical packaging standard used to verify correct product packaging. Encodes a single numeric value (3131071).',
example: '12345',
color: 'red',
},
};
const colorMap: Record<string, string> = {
blue: 'bg-blue-50 border-blue-300 text-blue-900',
indigo: 'bg-indigo-50 border-indigo-300 text-indigo-900',
emerald: 'bg-emerald-50 border-emerald-300 text-emerald-900',
orange: 'bg-orange-50 border-orange-300 text-orange-900',
purple: 'bg-purple-50 border-purple-300 text-purple-900',
red: 'bg-red-50 border-red-300 text-red-900',
};
const badgeMap: Record<string, string> = {
blue: 'bg-blue-100 text-blue-800',
indigo: 'bg-indigo-100 text-indigo-800',
emerald: 'bg-emerald-100 text-emerald-800',
orange: 'bg-orange-100 text-orange-800',
purple: 'bg-purple-100 text-purple-800',
red: 'bg-red-100 text-red-800',
};
export function BarcodeFormatPicker() {
const [step, setStep] = useState<Step>('use-case');
const [useCase, setUseCase] = useState<string>('');
const [result, setResult] = useState<string>('');
const selectUseCase = (value: string) => {
setUseCase(value);
if (value === 'retail') {
setStep('region');
} else {
const map: Record<string, string> = {
logistics: 'code128',
inventory: 'code128',
industrial: 'code39',
warehouse: 'msi',
pharma: 'pharmacode',
};
setResult(map[value] ?? 'code128');
setStep('result');
}
};
const selectRegion = (region: string) => {
setResult(region === 'us' ? 'upca' : 'ean13');
setStep('result');
};
const reset = () => {
setStep('use-case');
setUseCase('');
setResult('');
};
const res = result ? RESULTS[result] : null;
return (
<div className="not-prose my-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
<h3 className="text-lg font-bold text-slate-900 mb-1">Which barcode format do I need?</h3>
<p className="text-sm text-slate-500 mb-5">Answer two quick questions to find the right format for your use case.</p>
{step === 'use-case' && (
<div>
<p className="text-sm font-semibold text-slate-700 mb-3">What will you use the barcode for?</p>
<div className="grid sm:grid-cols-2 gap-3">
{[
{ value: 'retail', label: 'Retail products', sub: 'Selling in stores or online' },
{ value: 'logistics', label: 'Shipping & logistics', sub: 'Parcel labels, supply chain' },
{ value: 'inventory', label: 'Inventory tracking', sub: 'Internal stock management' },
{ value: 'industrial', label: 'Industrial / automotive', sub: 'Manufacturing, defense' },
{ value: 'warehouse', label: 'Shelf & bin labeling', sub: 'Warehouse locations' },
{ value: 'pharma', label: 'Pharmaceutical packaging', sub: 'Medication packaging control' },
].map((opt) => (
<button
key={opt.value}
onClick={() => selectUseCase(opt.value)}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">{opt.label}</div>
<div className="text-xs text-slate-500 mt-0.5">{opt.sub}</div>
</button>
))}
</div>
</div>
)}
{step === 'region' && (
<div>
<p className="text-sm font-semibold text-slate-700 mb-3">Where will you primarily sell?</p>
<div className="grid sm:grid-cols-2 gap-3">
<button
onClick={() => selectRegion('eu')}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">Europe / International</div>
<div className="text-xs text-slate-500 mt-0.5">EU, UK, Asia, global retail</div>
</button>
<button
onClick={() => selectRegion('us')}
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
>
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">USA / Canada</div>
<div className="text-xs text-slate-500 mt-0.5">North American retail market</div>
</button>
</div>
<button onClick={reset} className="mt-3 text-xs text-slate-400 hover:text-slate-600 underline"> Start over</button>
</div>
)}
{step === 'result' && res && (
<div className={`rounded-xl border-2 p-5 ${colorMap[res.color]}`}>
<div className="flex items-center gap-3 mb-3">
<span className={`text-xs font-bold px-2.5 py-1 rounded-full ${badgeMap[res.color]}`}>Recommended</span>
<span className="font-bold text-xl">{res.label}</span>
</div>
<p className="text-sm mb-2">{res.description}</p>
<p className="text-xs opacity-70 font-mono">Example: {res.example}</p>
<button onClick={reset} className="mt-4 text-xs underline opacity-60 hover:opacity-90"> Try again</button>
</div>
)}
</div>
);
}

View File

@@ -1,5 +1,6 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import TeamsGenerator from './TeamsGenerator';
import { Users, Shield, Zap, Video, MessageCircle, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
@@ -250,6 +251,18 @@ export default function TeamsQRCodePage() {
</div>
</section>
{/* DEEP DIVE BLOG LINK */}
<section className="py-10 px-4 sm:px-6 lg:px-8 bg-white border-t border-slate-100">
<div className="max-w-3xl mx-auto text-center">
<p className="text-slate-600 text-base">
Want a deeper guide?{' '}
<Link href="/blog/microsoft-teams-qr-code" className="text-[#6264A7] font-semibold underline hover:opacity-80 transition-opacity">
How to Create a Microsoft Teams QR Code for Instant Meeting Joins
</Link>
</p>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />

View File

@@ -7,6 +7,7 @@ import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
import { getAuthCookieOptions } from '@/lib/cookieConfig';
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
import { sendWelcomeEmail } from '@/lib/email';
export async function POST(request: NextRequest) {
try {
@@ -74,6 +75,13 @@ export async function POST(request: NextRequest) {
},
});
// Send welcome email (fire-and-forget — never block signup)
try {
await sendWelcomeEmail(user.email, user.name ?? 'there');
} catch (emailError) {
console.error('Welcome email failed:', emailError);
}
// Create response
const response = NextResponse.json({
success: true,

View File

@@ -0,0 +1,113 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { sendActivationNudgeEmail, sendUpgradeNudgeEmail, sendThirtyDayNudgeEmail } from '@/lib/email';
// Protect with a shared secret — set CRON_SECRET in Vercel env vars
function isAuthorized(request: NextRequest): boolean {
const authHeader = request.headers.get('authorization');
const cronSecret = process.env.CRON_SECRET;
if (!cronSecret) return false;
return authHeader === `Bearer ${cronSecret}`;
}
export async function GET(request: NextRequest) {
if (!isAuthorized(request)) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const now = new Date();
const threeDaysAgo = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000);
const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
let activationSent = 0;
let upgradeSent = 0;
let thirtyDaySent = 0;
// Day-3: signed up > 3 days ago, never created a QR code, hasn't received this email yet
const activationCandidates = await db.user.findMany({
where: {
createdAt: { lt: threeDaysAgo },
activationNudgeSentAt: null,
},
include: {
_count: { select: { qrCodes: true } },
},
});
for (const user of activationCandidates) {
if (user._count.qrCodes === 0 && user.email) {
try {
await sendActivationNudgeEmail(user.email, user.name ?? 'there');
await db.user.update({
where: { id: user.id },
data: { activationNudgeSentAt: now },
});
activationSent++;
} catch (err) {
console.error(`Activation nudge failed for ${user.email}:`, err);
}
}
}
// Day-7: signed up > 7 days ago, has ≥1 QR code, still FREE, hasn't received this email yet
const upgradeCandidates = await db.user.findMany({
where: {
createdAt: { lt: sevenDaysAgo },
upgradeNudgeSentAt: null,
plan: 'FREE',
},
include: {
_count: { select: { qrCodes: true } },
},
});
for (const user of upgradeCandidates) {
if (user._count.qrCodes > 0 && user.email) {
try {
await sendUpgradeNudgeEmail(user.email, user.name ?? 'there', user._count.qrCodes);
await db.user.update({
where: { id: user.id },
data: { upgradeNudgeSentAt: now },
});
upgradeSent++;
} catch (err) {
console.error(`Upgrade nudge failed for ${user.email}:`, err);
}
}
}
// Day-30: signed up > 30 days ago, has ≥1 QR code, still FREE, hasn't received this email yet
const thirtyDayCandidates = await (db.user as any).findMany({
where: {
createdAt: { lt: thirtyDaysAgo },
thirtyDayNudgeSentAt: null,
plan: 'FREE',
},
include: {
_count: { select: { qrCodes: true } },
},
});
for (const user of thirtyDayCandidates) {
if (user._count.qrCodes > 0 && user.email) {
try {
await sendThirtyDayNudgeEmail(user.email, user.name ?? 'there', user._count.qrCodes);
await (db.user as any).update({
where: { id: user.id },
data: { thirtyDayNudgeSentAt: now },
});
thirtyDaySent++;
} catch (err) {
console.error(`30-day nudge failed for ${user.email}:`, err);
}
}
}
return NextResponse.json({
ok: true,
activationNudgesSent: activationSent,
upgradeNudgesSent: upgradeSent,
thirtyDayNudgesSent: thirtyDaySent,
});
}