stripe

src/app/(app)/create/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { QRCodeSVG } from 'qrcode.react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
@@ -16,22 +17,42 @@ export default function CreatePage() {
   const router = useRouter();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  
+  const [userPlan, setUserPlan] = useState<string>('FREE');
+
   // Form state
   const [title, setTitle] = useState('');
   const [contentType, setContentType] = useState('URL');
   const [content, setContent] = useState<any>({ url: '' });
   const [isDynamic, setIsDynamic] = useState(true);
   const [tags, setTags] = useState('');
-  
+
   // 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;
@@ -141,8 +162,9 @@ export default function CreatePage() {
         isStatic: !isDynamic, // Add this flag
         tags: tags.split(',').map(t => t.trim()).filter(Boolean),
         style: {
-          foregroundColor,
-          backgroundColor,
+          // FREE users can only use black/white
+          foregroundColor: canCustomizeColors ? foregroundColor : '#000000',
+          backgroundColor: canCustomizeColors ? backgroundColor : '#FFFFFF',
           cornerStyle,
           size,
         },
@@ -354,9 +376,26 @@ export default function CreatePage() {
             {/* Style Section */}
             <Card>
               <CardHeader>
-                <CardTitle>{t('create.style')}</CardTitle>
+                <div className="flex items-center justify-between">
+                  <CardTitle>{t('create.style')}</CardTitle>
+                  {!canCustomizeColors && (
+                    <Badge variant="warning">PRO Feature</Badge>
+                  )}
+                </div>
               </CardHeader>
               <CardContent className="space-y-4">
+                {!canCustomizeColors && (
+                  <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4">
+                    <p className="text-sm text-blue-900">
+                      <strong>Upgrade to PRO</strong> to customize colors, add logos, and brand your QR codes.
+                    </p>
+                    <Link href="/pricing">
+                      <Button variant="primary" size="sm" className="mt-2">
+                        Upgrade Now
+                      </Button>
+                    </Link>
+                  </div>
+                )}
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
@@ -368,15 +407,17 @@ export default function CreatePage() {
                         value={foregroundColor}
                         onChange={(e) => setForegroundColor(e.target.value)}
                         className="w-12 h-10 rounded border border-gray-300"
+                        disabled={!canCustomizeColors}
                       />
                       <Input
                         value={foregroundColor}
                         onChange={(e) => setForegroundColor(e.target.value)}
                         className="flex-1"
+                        disabled={!canCustomizeColors}
                       />
                     </div>
                   </div>
-                  
+
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
                       Background Color
@@ -387,11 +428,13 @@ export default function CreatePage() {
                         value={backgroundColor}
                         onChange={(e) => setBackgroundColor(e.target.value)}
                         className="w-12 h-10 rounded border border-gray-300"
+                        disabled={!canCustomizeColors}
                       />
                       <Input
                         value={backgroundColor}
                         onChange={(e) => setBackgroundColor(e.target.value)}
                         className="flex-1"
+                        disabled={!canCustomizeColors}
                       />
                     </div>
                   </div>