From 53f5318423739cecbc4a416af0e061e8e23aca6e Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Thu, 6 Mar 2025 07:12:34 +0300
Subject: [PATCH] chore(web): add upgrade to pro CTA in dashboard

---
 .../(components)/dashboard-layout.tsx         |  5 +-
 .../(components)/upgrade-to-pro-alert.tsx     | 60 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx

diff --git a/web/app/(app)/dashboard/(components)/dashboard-layout.tsx b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
index 8f4cd91..e7a3abe 100644
--- a/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
+++ b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
@@ -13,7 +13,7 @@ import GenerateApiKey from './generate-api-key'
 import { useSession } from 'next-auth/react'
 import { JoinCommunityModal } from '@/components/shared/join-community-modal'
 import { ContributeModal } from '@/components/shared/contribute-modal'
-
+import UpgradeToProAlert from './upgrade-to-pro-alert'
 export default function Dashboard({
   children,
 }: {
@@ -66,15 +66,18 @@ export default function Dashboard({
 
         <TabsContent value='dashboard' className='space-y-4'>
           <CommunityAlert />
+          <UpgradeToProAlert />
           <MainDashboard />
         </TabsContent>
 
         <TabsContent value='community' className='space-y-4'>
           <CommunityLinks />
+          <UpgradeToProAlert />
         </TabsContent>
 
         <TabsContent value='account' className='space-y-4'>
           <CommunityAlert />
+          <UpgradeToProAlert />
           <AccountSettings />
         </TabsContent>
       </Tabs>
diff --git a/web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx b/web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx
new file mode 100644
index 0000000..07b909a
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx
@@ -0,0 +1,60 @@
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { ApiEndpoints } from '@/config/api'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { useQuery } from '@tanstack/react-query'
+import Link from 'next/link'
+
+export default function UpgradeToProAlert() {
+  const {
+    data: currentSubscription,
+    isLoading: isLoadingSubscription,
+    error: subscriptionError,
+  } = useQuery({
+    queryKey: ['currentSubscription'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.billing.currentSubscription())
+        .then((res) => res.data),
+  })
+
+  if (isLoadingSubscription || !currentSubscription || subscriptionError) {
+    return null
+  }
+
+  if (['pro', 'custom'].includes(currentSubscription?.plan?.name)) {
+    return null
+  }
+
+  return (
+    <Alert className='bg-gradient-to-r from-purple-500 to-pink-500 text-white'>
+      <AlertDescription className='flex flex-wrap items-center gap-2 md:gap-4'>
+        <span className='flex-1'>
+          Upgrade to Pro for exclusive features and benefits!
+        </span>
+        <span className='flex-1'>
+          Use discount code <strong>SAVEBIG50</strong> at checkout for a 50%
+          discount!
+        </span>
+        <div className='flex flex-wrap gap-1 md:gap-2'>
+          <Button
+            variant='outline'
+            size='lg'
+            asChild
+            className='bg-red-500 text-white hover:bg-red-600'
+          >
+            <Link href={'/checkout/pro'}>Get Pro Now!</Link>
+          </Button>
+          <Button
+            variant='outline'
+            size='lg'
+            asChild
+            className='bg-orange-500 text-white hover:bg-orange-600'
+          >
+            <Link href={'/#pricing'}>Learn More</Link>
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  )
+}