Add CTA depending on subscription plan

studio/components/layouts/ProjectLayout/ProjectPausedState.tsx

@@ -13,6 +13,7 @@ import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { Button, IconPauseCircle, Modal } from 'ui'
 import { useProjectContext } from './ProjectContext'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
 
 export interface ProjectPausedStateProps {
   product?: string
@@ -25,6 +26,8 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
   const selectedOrganization = useSelectedOrganization()
   const { project } = useProjectContext()
   const orgSlug = selectedOrganization?.slug
+  const { data: subscription } = useProjectSubscriptionV2Query({ projectRef: ref })
+  const isFreePlan = subscription?.plan.id === 'free'
 
   const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug: orgSlug })
   const hasMembersExceedingFreeTierLimit = (membersExceededLimit || []).length > 0
@@ -96,6 +99,11 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                     'Restore this project and get back to building the next big thing!'
                   )}
                 </p>
+                {isFreePlan && (
+                  <p className="text-sm text-scale-1100 text-center">
+                    You can also prevent project pausing in the future by upgrading to Pro.
+                  </p>
+                )}
               </div>
 
               <div className="flex items-center justify-center gap-4">
@@ -128,11 +136,21 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                     </Tooltip.Portal>
                   )}
                 </Tooltip.Root>
-                <Link href={`/project/${ref}/settings/general`}>
-                  <a>
-                    <Button type="default">View project settings</Button>
-                  </a>
-                </Link>
+                {isFreePlan ? (
+                  <Link
+                    href={`/project/${ref}/settings/billing/subscription?panel=subscriptionPlan`}
+                  >
+                    <a>
+                      <Button type="default">Change Plan</Button>
+                    </a>
+                  </Link>
+                ) : (
+                  <Link href={`/project/${ref}/settings/general`}>
+                    <a>
+                      <Button type="default">View project settings</Button>
+                    </a>
+                  </Link>
+                )}
               </div>
             </div>
           </div>