chore(web): improve upgrade to pro dashboard cta

web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx

@@ -19,33 +19,58 @@ export default function UpgradeToProAlert() {
         .then((res) => res.data),
   })
 
-  const ctaMessages = useMemo(() => [
+  const monthlyUsagePercentage = currentSubscription?.usage?.monthlyUsagePercentage || 0
+  const monthlyLimit = currentSubscription?.usage?.monthlyLimit || 0
+  const processedSmsLastMonth = currentSubscription?.usage?.processedSmsLastMonth || 0
+
+  const alertConfig = useMemo(() => {
+    if (monthlyUsagePercentage >= 100 ) {
+      return {
+        bgColor: 'bg-gradient-to-r from-red-600 to-red-800',
+        message: "⚠️ Monthly limit exceeded! Your requests will be rejected until you upgrade.",
+        subMessage: `You've used ${processedSmsLastMonth} of ${monthlyLimit} SMS this month.`,
+        buttonText: "Upgrade Now!",
+        buttonColor: 'bg-white text-red-600 hover:bg-red-50 hover:text-red-700 border-red-600',
+        urgency: 'critical'
+      }
+    } else if (monthlyUsagePercentage >= 80) {
+      return {
+        bgColor: 'bg-gradient-to-r from-orange-500 to-red-500',
+        message: "⚠️ Approaching limit! Upgrade to Pro to avoid service interruption.",
+        subMessage: `You've used ${monthlyUsagePercentage}% of your monthly SMS limit (${processedSmsLastMonth}/${monthlyLimit}).`,
+        buttonText: "Upgrade Before Limit!",
+        buttonColor: 'bg-white text-orange-600 hover:bg-orange-50 hover:text-orange-700 border-orange-600',
+        urgency: 'warning'
+      }
+    } else {
+      const ctaMessages = [
         "Upgrade to Pro for exclusive features and benefits!",
         "Offer: You are eligible for a 30% discount when upgrading to Pro!",
         "Unlock premium features with our Pro plan today!",
         "Take your experience to the next level with Pro!",
         "Pro users get priority support and advanced features!",
         "Limited time offer: Upgrade to Pro and save 30%!",
-  ], []);
-
-  const buttonTexts = useMemo(() => [
+      ]
+      const buttonTexts = [
         "Get Pro Now!",
         "Upgrade Today!",
         "Go Pro!",
         "Unlock Pro!",
         "Claim Your Discount!",
         "Upgrade & Save!",
-  ], []);
+      ]
+      const randomIndex = Math.floor(Math.random() * ctaMessages.length)
       
-  const randomCta = useMemo(() => {
-    const randomIndex = Math.floor(Math.random() * ctaMessages.length);
-    return ctaMessages[randomIndex];
-  }, [ctaMessages]);
-
-  const randomButtonText = useMemo(() => {
-    const randomIndex = Math.floor(Math.random() * buttonTexts.length);
-    return buttonTexts[randomIndex];
-  }, [buttonTexts]);
+      return {
+        bgColor: 'bg-gradient-to-r from-purple-500 to-pink-500',
+        message: ctaMessages[randomIndex],
+        subMessage: `Use discount code SAVE30P at checkout for a 30% discount!`,
+        buttonText: buttonTexts[randomIndex],
+        buttonColor: 'bg-red-500 text-white hover:bg-red-600 border-red-500',
+        urgency: 'normal'
+      }
+    }
+  }, [monthlyUsagePercentage, monthlyLimit, processedSmsLastMonth])
 
   if (isLoadingSubscription || !currentSubscription || subscriptionError) {
     return null
@@ -56,24 +81,28 @@ export default function UpgradeToProAlert() {
   }
 
   return (
-    <Alert className='bg-gradient-to-r from-purple-500 to-pink-500 text-white'>
+    <Alert className={`${alertConfig.bgColor} text-white`}>
       <AlertDescription className='flex flex-col sm:flex-row flex-wrap items-center gap-2 md:gap-4'>
         <span className='w-full sm:flex-1 text-center sm:text-left text-sm md:text-base font-medium'>
-          {randomCta}
+          {alertConfig.message}
         </span>
         <span className='w-full sm:flex-1 text-center sm:text-left text-xs md:text-sm'>
-          Use discount code <strong className="text-yellow-200">SAVE30P</strong> at checkout for a 30%
-          discount!
+          {alertConfig.urgency === 'normal' ? (
+            <>Use discount code <strong className="text-yellow-200">SAVE30P</strong> at checkout for a 30% discount!</>
+          ) : (
+            alertConfig.subMessage
+          )}
         </span>
         <div className='w-full sm:w-auto mt-2 sm:mt-0 flex justify-center sm:justify-end flex-wrap gap-1 md:gap-2'>
           <Button
             variant='outline'
             size='sm'
             asChild
-            className='bg-red-500 text-white hover:bg-red-600 text-xs md:text-sm'
+            className={`${alertConfig.buttonColor} text-xs md:text-sm`}
           >
-            <Link href={'/checkout/pro'}>{randomButtonText}</Link>
+            <Link href={'/checkout/pro'}>{alertConfig.buttonText}</Link>
           </Button>
+          {alertConfig.urgency === 'normal' && (
             <Button
               variant='outline'
               size='sm'
@@ -82,6 +111,7 @@ export default function UpgradeToProAlert() {
             >
               <Link href={'/#pricing'}>Learn More</Link>
             </Button>
+          )}
         </div>
       </AlertDescription>
     </Alert>