From a77b98cecb8224a46ffad9e46589e5bb2092cf06 Mon Sep 17 00:00:00 2001
From: sharath <29162020+tnfssc@users.noreply.github.com>
Date: Thu, 26 Jun 2025 19:09:36 +0000
Subject: [PATCH] feat(billing): update authentication redirect for
 subscription and enhance billing modal integration in chat input

---
 frontend/src/components/home/sections/pricing-section.tsx | 2 +-
 .../src/components/thread/chat-input/message-input.tsx    | 7 ++++---
 .../src/components/thread/chat-input/model-selector.tsx   | 8 +++++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/home/sections/pricing-section.tsx b/frontend/src/components/home/sections/pricing-section.tsx
index 0ad8f0f8..074b2602 100644
--- a/frontend/src/components/home/sections/pricing-section.tsx
+++ b/frontend/src/components/home/sections/pricing-section.tsx
@@ -181,7 +181,7 @@ function PricingTier({
   // Auto-select the correct plan only on initial load - simplified since no more Custom tier
   const handleSubscribe = async (planStripePriceId: string) => {
     if (!isAuthenticated) {
-      window.location.href = '/auth';
+      window.location.href = '/auth?mode=signup';
       return;
     }
 
diff --git a/frontend/src/components/thread/chat-input/message-input.tsx b/frontend/src/components/thread/chat-input/message-input.tsx
index 97488a89..00bfbacd 100644
--- a/frontend/src/components/thread/chat-input/message-input.tsx
+++ b/frontend/src/components/thread/chat-input/message-input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { Square, Loader2, ArrowUp } from 'lucide-react';
@@ -76,6 +76,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
     },
     ref,
   ) => {
+    const [billingModalOpen, setBillingModalOpen] = useState(false);
     useEffect(() => {
       const textarea = ref as React.RefObject<HTMLTextAreaElement>;
       if (!textarea.current) return;
@@ -156,8 +157,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger>
-                  <p className='text-sm text-amber-500 hidden sm:block'>Upgrade for full performance</p>
-
+                  <p role='button' className='text-sm text-amber-500 hidden sm:block cursor-pointer' onClick={() => setBillingModalOpen(true)}>Upgrade for full performance</p>
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>The free tier is severely limited by inferior models; upgrade to experience the true full Suna experience.</p>
@@ -173,6 +173,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               subscriptionStatus={subscriptionStatus}
               canAccessModel={canAccessModel}
               refreshCustomModels={refreshCustomModels}
+              billingModalOpenParent={billingModalOpen}
             />
             <Button
               type="submit"
diff --git a/frontend/src/components/thread/chat-input/model-selector.tsx b/frontend/src/components/thread/chat-input/model-selector.tsx
index 45308556..267d2cb7 100644
--- a/frontend/src/components/thread/chat-input/model-selector.tsx
+++ b/frontend/src/components/thread/chat-input/model-selector.tsx
@@ -46,6 +46,7 @@ interface ModelSelectorProps {
   canAccessModel: (modelId: string) => boolean;
   subscriptionStatus: SubscriptionStatus;
   refreshCustomModels?: () => void;
+  billingModalOpenParent: boolean;
 }
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
@@ -55,9 +56,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   canAccessModel,
   subscriptionStatus,
   refreshCustomModels,
+  billingModalOpenParent,
 }) => {
   const [paywallOpen, setPaywallOpen] = useState(false);
-  const [billingModalOpen, setBillingModalOpen] = useState(false);
+  const [billingModalOpen, setBillingModalOpen] = useState(billingModalOpenParent);
   const [lockedModel, setLockedModel] = useState<string | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -79,6 +81,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     }
   }, []);
 
+  useEffect(() => {
+    setBillingModalOpen(billingModalOpenParent);
+  }, [billingModalOpenParent]);
+
   // Save custom models to localStorage whenever they change
   useEffect(() => {
     if (isLocalMode() && customModels.length > 0) {