🚸 (billing) Improve upgrade UX for non admin

Closes #1299

apps/builder/src/features/billing/components/BillingSettingsLayout.tsx

@@ -1,6 +1,5 @@
 import { Stack } from '@chakra-ui/react'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { Plan } from '@typebot.io/prisma'
 import React from 'react'
 import { InvoicesList } from './InvoicesList'
 import { ChangePlanForm } from './ChangePlanForm'
@@ -8,7 +7,7 @@ import { UsageProgressBars } from './UsageProgressBars'
 import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
 
 export const BillingSettingsLayout = () => {
-  const { workspace } = useWorkspace()
+  const { workspace, currentRole } = useWorkspace()
 
   if (!workspace) return null
   return (
@@ -16,12 +15,7 @@ export const BillingSettingsLayout = () => {
       <UsageProgressBars workspace={workspace} />
       <Stack spacing="4">
         <CurrentSubscriptionSummary workspace={workspace} />
-        {workspace.plan !== Plan.CUSTOM &&
-          workspace.plan !== Plan.LIFETIME &&
-          workspace.plan !== Plan.UNLIMITED &&
-          workspace.plan !== Plan.OFFERED && (
-            <ChangePlanForm workspace={workspace} />
-          )}
+        <ChangePlanForm workspace={workspace} currentRole={currentRole} />
       </Stack>
 
       {workspace.stripeId && <InvoicesList workspaceId={workspace.id} />}

apps/builder/src/features/billing/components/ChangePlanForm.tsx

@@ -1,5 +1,5 @@
 import { Stack, HStack, Text } from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
+import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import { TextLink } from '@/components/TextLink'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
@@ -16,10 +16,15 @@ import { WorkspaceInApp } from '@/features/workspace/WorkspaceProvider'
 
 type Props = {
   workspace: WorkspaceInApp
+  currentRole?: WorkspaceRole
   excludedPlans?: ('STARTER' | 'PRO')[]
 }
 
-export const ChangePlanForm = ({ workspace, excludedPlans }: Props) => {
+export const ChangePlanForm = ({
+  workspace,
+  currentRole,
+  excludedPlans,
+}: Props) => {
   const { t } = useTranslate()
 
   const { user } = useUser()
@@ -82,6 +87,20 @@ export const ChangePlanForm = ({ workspace, excludedPlans }: Props) => {
   )
     return null
 
+  const isSubscribed =
+    (workspace.plan === Plan.STARTER || workspace.plan === Plan.PRO) &&
+    workspace.stripeId
+
+  if (workspace.plan !== Plan.FREE && !isSubscribed) return null
+
+  if (currentRole !== WorkspaceRole.ADMIN)
+    return (
+      <Text>
+        Only workspace admins can change the subscription plan. Contact your
+        workspace admin to change the plan.
+      </Text>
+    )
+
   return (
     <Stack spacing={6}>
       <HStack maxW="500px">

apps/builder/src/features/billing/components/ChangePlanModal.tsx

@@ -27,7 +27,8 @@ export const ChangePlanModal = ({
   excludedPlans,
 }: ChangePlanModalProps) => {
   const { t } = useTranslate()
-  const { workspace } = useWorkspace()
+  const { workspace, currentRole } = useWorkspace()
+
   return (
     <Modal
       isOpen={isOpen}
@@ -46,6 +47,7 @@ export const ChangePlanModal = ({
             <ChangePlanForm
               workspace={workspace}
               excludedPlans={excludedPlans}
+              currentRole={currentRole}
             />
           )}
         </ModalBody>