feat: implement pricing strategy, subscription tiers, and core infrastructure for QR code management

2026-04-14 19:34:47 +02:00
parent 82101ca08f
commit 6b73ac5c50
16 changed files with 1718 additions and 1344 deletions
--- a/src/app/(main)/(app)/bulk-creation/page.tsx
+++ b/src/app/(main)/(app)/bulk-creation/page.tsx
@@ -22,8 +22,10 @@ interface BulkQRData {

 interface GeneratedQR {
  title: string;
-  content: string; // Original URL
-  svg: string; // SVG markup
+  content: string;
+  svg: string;
+  slug?: string;
+  redirectUrl?: string;
 }

 export default function BulkCreationPage() {
@@ -35,16 +37,25 @@ export default function BulkCreationPage() {
  const [loading, setLoading] = useState(false);
  const [generatedQRs, setGeneratedQRs] = useState<GeneratedQR[]>([]);
  const [userPlan, setUserPlan] = useState<string>('FREE');
+  const [isDynamic, setIsDynamic] = useState(false);
+  const [remainingDynamic, setRemainingDynamic] = useState(0);

-  // Check user plan on mount
+  // Check user plan and dynamic quota on mount
  React.useEffect(() => {
    const checkPlan = async () => {
      try {
-        const response = await fetch('/api/user/plan');
-        if (response.ok) {
-          const data = await response.json();
+        const [planRes, statsRes] = await Promise.all([
+          fetch('/api/user/plan'),
+          fetch('/api/user/stats'),
+        ]);
+        if (planRes.ok) {
+          const data = await planRes.json();
          setUserPlan(data.plan || 'FREE');
        }
+        if (statsRes.ok) {
+          const stats = await statsRes.json();
+          setRemainingDynamic((stats.dynamicLimit || 0) - (stats.dynamicUsed || 0));
+        }
      } catch (error) {
        console.error('Error checking plan:', error);
      }
@@ -196,6 +207,58 @@ export default function BulkCreationPage() {
    }
  };

+  const generateDynamicQRCodes = async () => {
+    setLoading(true);
+    const toProcess = remainingDynamic > 0 ? data.slice(0, remainingDynamic) : [];
+
+    if (toProcess.length === 0) {
+      showToast('Du hast keine dynamischen QR-Codes mehr übrig. Bitte upgrade deinen Plan.', 'error');
+      setLoading(false);
+      return;
+    }
+
+    if (data.length > remainingDynamic) {
+      showToast(`Nur ${remainingDynamic} dynamische Codes verfügbar. Es werden nur die ersten ${remainingDynamic} Zeilen verarbeitet.`, 'warning');
+    }
+
+    try {
+      const QRCode = require('qrcode');
+      const results: GeneratedQR[] = [];
+
+      for (const row of toProcess) {
+        const title = String(row[mapping.title as keyof typeof row] || 'Untitled');
+        const url = String(row[mapping.content as keyof typeof row] || 'https://example.com');
+
+        const res = await fetchWithCsrf('/api/qrs', {
+          method: 'POST',
+          body: JSON.stringify({
+            title,
+            contentType: 'URL',
+            content: { url },
+            isStatic: false,
+          }),
+        });
+
+        if (res.ok) {
+          const qr = await res.json();
+          const redirectUrl = `${window.location.origin}/r/${qr.slug}`;
+          const svg = await QRCode.toString(redirectUrl, { type: 'svg', width: 300, margin: 2 });
+          results.push({ title, content: url, svg, slug: qr.slug, redirectUrl });
+        }
+      }
+
+      setGeneratedQRs(results);
+      setRemainingDynamic(prev => Math.max(0, prev - results.length));
+      setStep('complete');
+      showToast(`${results.length} dynamische QR-Codes erstellt!`, 'success');
+    } catch (error) {
+      console.error('Dynamic QR generation error:', error);
+      showToast('Fehler beim Erstellen der dynamischen QR-Codes', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
  const downloadAllQRCodes = async () => {
    const zip = new JSZip();

@@ -204,6 +267,18 @@ export default function BulkCreationPage() {
      zip.file(fileName, qr.svg);
    });

+    // Add metadata CSV for dynamic QR codes
+    const hasDynamic = generatedQRs.some(qr => qr.slug);
+    if (hasDynamic) {
+      const csvRows = ['title,original_url,redirect_url,slug'];
+      generatedQRs.forEach(qr => {
+        if (qr.slug) {
+          csvRows.push(`"${qr.title}","${qr.content}","${qr.redirectUrl}","${qr.slug}"`);
+        }
+      });
+      zip.file('metadata.csv', csvRows.join('\n'));
+    }
+
    const blob = await zip.generateAsync({ type: 'blob' });
    saveAs(blob, 'qr-codes-bulk.zip');
    showToast('Download started!', 'success');
@@ -274,8 +349,8 @@ export default function BulkCreationPage() {
    URL.revokeObjectURL(url);
  };

-  // Show upgrade prompt if not Business plan
-  if (userPlan !== 'BUSINESS') {
+  // Show upgrade prompt if not Business or Enterprise plan
+  if (userPlan !== 'BUSINESS' && userPlan !== 'ENTERPRISE') {
    return (
      <div className="max-w-4xl mx-auto">
        <Card className="mt-12">
@@ -309,6 +384,39 @@ export default function BulkCreationPage() {
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">{t('bulk.title')}</h1>
        <p className="text-gray-600 mt-2">{t('bulk.subtitle')}</p>
+
+        {/* Static / Dynamic Toggle */}
+        <div className="mt-4 flex items-center gap-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
+          <span className="text-sm font-medium text-gray-700">QR Code Type:</span>
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              checked={!isDynamic}
+              onChange={() => setIsDynamic(false)}
+              className="accent-primary-600"
+            />
+            <span className="text-sm font-medium">Static</span>
+            <span className="text-xs text-gray-500">(download only, no tracking)</span>
+          </label>
+          <label className={`flex items-center gap-2 ${userPlan === 'BUSINESS' || userPlan === 'ENTERPRISE' ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed'}`}>
+            <input
+              type="radio"
+              checked={isDynamic}
+              onChange={() => setIsDynamic(true)}
+              disabled={userPlan !== 'BUSINESS' && userPlan !== 'ENTERPRISE'}
+              className="accent-primary-600"
+            />
+            <span className="text-sm font-medium">Dynamic</span>
+            {isDynamic && remainingDynamic > 0 && (
+              <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">
+                {remainingDynamic} verbleibend
+              </span>
+            )}
+            {(userPlan !== 'BUSINESS' && userPlan !== 'ENTERPRISE') && (
+              <span className="text-xs text-amber-600">(Business Plan erforderlich)</span>
+            )}
+          </label>
+        </div>
      </div>

      {/* Template Warning Banner */}
@@ -641,8 +749,13 @@ export default function BulkCreationPage() {
              <Button variant="outline" onClick={() => setStep('upload')}>
                Back
              </Button>
-              <Button onClick={generateStaticQRCodes} loading={loading}>
-                Generate {data.length} Static QR Codes
+              <Button
+                onClick={isDynamic ? generateDynamicQRCodes : generateStaticQRCodes}
+                loading={loading}
+              >
+                {isDynamic
+                  ? `Generate ${Math.min(data.length, remainingDynamic)} Dynamic QR Codes`
+                  : `Generate ${data.length} Static QR Codes`}
              </Button>
            </div>
          </CardContent>
--- a/src/app/(main)/(app)/create/page.tsx
+++ b/src/app/(main)/(app)/create/page.tsx
@@ -15,8 +15,9 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useCsrf } from '@/hooks/useCsrf';
 import { showToast } from '@/components/ui/Toast';
 import {
-  Globe, User, MapPin, Phone, FileText, Smartphone, Ticket, Star, HelpCircle, Upload
+  Globe, User, MapPin, Phone, FileText, Smartphone, Ticket, Star, HelpCircle, Upload, Barcode as BarcodeIcon
 } from 'lucide-react';
+import Barcode from 'react-barcode';

 // Tooltip component for form field help
 const Tooltip = ({ text }: { text: string }) => (
@@ -140,6 +141,7 @@ export default function CreatePage() {
    { value: 'APP', label: 'App Download', icon: Smartphone },
    { value: 'COUPON', label: 'Coupon / Discount', icon: Ticket },
    { value: 'FEEDBACK', label: 'Feedback / Review', icon: Star },
+    { value: 'BARCODE', label: 'Barcode', icon: BarcodeIcon },
  ];

  // Get QR content based on content type
@@ -170,6 +172,8 @@ export default function CreatePage() {
        return `Coupon: ${content.code || 'SAVE20'} - ${content.discount || '20% OFF'}`;
      case 'FEEDBACK':
        return content.feedbackUrl || 'https://example.com/feedback';
+      case 'BARCODE':
+        return content.value || '123456789';
      default:
        return 'https://example.com';
    }
@@ -642,6 +646,68 @@ export default function CreatePage() {
            />
          </>
        );
+      case 'BARCODE':
+        return (
+          <>
+            {isDynamic ? (
+              <>
+                <div className="rounded-lg bg-blue-50 border border-blue-200 p-3 text-sm text-blue-800">
+                  <strong>How dynamic barcodes work:</strong> The barcode encodes a short redirect URL
+                  (e.g. <span className="font-mono text-xs">qrmaster.net/r/…</span>). When scanned with a
+                  smartphone camera, it opens the browser and redirects to your destination — which you
+                  can update anytime. Works with smartphone cameras, not POS laser scanners.
+                </div>
+                <Input
+                  label="Destination URL"
+                  value={content.url || ''}
+                  onChange={(e) => setContent({ ...content, url: e.target.value })}
+                  placeholder="https://example.com"
+                  required
+                />
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Barcode Format</label>
+                  <select
+                    value={['CODE128', 'CODE39'].includes(content.format) ? content.format : 'CODE128'}
+                    onChange={(e) => setContent({ ...content, format: e.target.value })}
+                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  >
+                    <option value="CODE128">CODE128 — General purpose (recommended)</option>
+                    <option value="CODE39">CODE39 — Industrial / logistics</option>
+                  </select>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Only URL-capable formats available. EAN-13, UPC, and ITF-14 encode numbers only and cannot embed a redirect URL.
+                  </p>
+                </div>
+              </>
+            ) : (
+              <>
+                <Input
+                  label="Barcode Value"
+                  value={content.value || ''}
+                  onChange={(e) => setContent({ ...content, value: e.target.value })}
+                  placeholder="123456789012"
+                  required
+                />
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Barcode Format</label>
+                  <select
+                    value={content.format || 'CODE128'}
+                    onChange={(e) => setContent({ ...content, format: e.target.value })}
+                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  >
+                    <option value="CODE128">CODE128 — General purpose (recommended)</option>
+                    <option value="EAN13">EAN-13 — Retail products (international)</option>
+                    <option value="UPC">UPC — Retail products (USA/Canada)</option>
+                    <option value="CODE39">CODE39 — Industrial / logistics</option>
+                    <option value="ITF14">ITF-14 — Shipping containers</option>
+                    <option value="MSI">MSI — Shelf labeling / inventory</option>
+                    <option value="pharmacode">Pharmacode — Pharmaceutical packaging</option>
+                  </select>
+                </div>
+              </>
+            )}
+          </>
+        );
      default:
        return null;
    }
@@ -992,7 +1058,25 @@ export default function CreatePage() {
                      </div>
                    )}

-                    {qrContent ? (
+                    {contentType === 'BARCODE' ? (
+                      qrContent ? (
+                        <div className="p-2 bg-white">
+                          <Barcode
+                            value={qrContent}
+                            format={content.format || 'CODE128'}
+                            lineColor={foregroundColor}
+                            background={backgroundColor}
+                            width={2}
+                            height={100}
+                            displayValue={true}
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-[200px] h-[200px] bg-gray-100 rounded flex items-center justify-center text-gray-500">
+                          Enter barcode value
+                        </div>
+                      )
+                    ) : qrContent ? (
                      <div className={cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
                        <QRCodeSVG
                          value={qrContent}
--- a/src/app/(main)/(app)/settings/page.tsx
+++ b/src/app/(main)/(app)/settings/page.tsx
@@ -165,6 +165,8 @@ export default function SettingsPage() {
        return { dynamic: 50, price: '€9', period: 'per month' };
      case 'BUSINESS':
        return { dynamic: 500, price: '€29', period: 'per month' };
+      case 'ENTERPRISE':
+        return { dynamic: 99999, price: 'Custom', period: 'per month' };
      default:
        return { dynamic: 3, price: '€0', period: 'forever' };
    }