feat(workspace): 🚸 Improve plan upgrade flow

apps/builder/components/dashboard/DashboardHeader.tsx

@@ -25,6 +25,7 @@ import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
 import { WorkspaceSettingsModal } from './WorkspaceSettingsModal'
+import { isNotDefined } from 'utils'
 
 export const DashboardHeader = () => {
   const { user } = useUser()
@@ -66,7 +67,11 @@ export const DashboardHeader = () => {
               workspace={workspace}
             />
           )}
-          <Button leftIcon={<SettingsIcon />} onClick={onOpen}>
+          <Button
+            leftIcon={<SettingsIcon />}
+            onClick={onOpen}
+            isLoading={isNotDefined(workspace)}
+          >
             Settings & Members
           </Button>
           <Menu placement="bottom-end">

apps/builder/components/dashboard/WorkspaceSettingsModal/BillingForm.tsx

@@ -1,6 +1,7 @@
 import { Stack, HStack, Button, Text, Tag } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import React from 'react'
@@ -9,11 +10,33 @@ export const BillingForm = () => {
   const { workspace } = useWorkspace()
 
   return (
-    <Stack spacing="6">
+    <Stack spacing="6" w="full">
       <HStack>
-        <Text>Workspace subscription: </Text>
+        <Text>Current workspace subscription: </Text>
         <PlanTag plan={workspace?.plan} />
       </HStack>
+      {workspace &&
+        !([Plan.TEAM, Plan.LIFETIME, Plan.OFFERED] as Plan[]).includes(
+          workspace.plan
+        ) && (
+          <HStack>
+            {workspace?.plan === Plan.FREE && (
+              <UpgradeButton colorScheme="orange" variant="outline" w="full">
+                Upgrade to Pro plan
+              </UpgradeButton>
+            )}
+            {workspace?.plan !== Plan.TEAM && (
+              <UpgradeButton
+                colorScheme="purple"
+                variant="outline"
+                w="full"
+                plan={Plan.TEAM}
+              >
+                Upgrade to Team plan
+              </UpgradeButton>
+            )}
+          </HStack>
+        )}
       {workspace?.stripeId && (
         <>
           <Text>

apps/builder/components/shared/buttons/UpgradeButton.tsx

@@ -1,16 +1,25 @@
 import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
+import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
 import React from 'react'
+import { isNotDefined } from 'utils'
 import { UpgradeModal } from '../modals/UpgradeModal'
 import { LimitReached } from '../modals/UpgradeModal/UpgradeModal'
 
-type Props = { type?: LimitReached } & ButtonProps
+type Props = { plan?: Plan; type?: LimitReached } & ButtonProps
 
-export const UpgradeButton = ({ type, ...props }: Props) => {
+export const UpgradeButton = ({ type, plan = Plan.PRO, ...props }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { workspace } = useWorkspace()
   return (
-    <Button colorScheme="blue" {...props} onClick={onOpen}>
+    <Button
+      colorScheme="blue"
+      {...props}
+      isLoading={isNotDefined(workspace)}
+      onClick={onOpen}
+    >
       {props.children ?? 'Upgrade'}
-      <UpgradeModal isOpen={isOpen} onClose={onClose} type={type} />
+      <UpgradeModal isOpen={isOpen} onClose={onClose} type={type} plan={plan} />
     </Button>
   )
 }

apps/builder/components/shared/modals/UpgradeModal/UpgradeModal.tsx

@@ -16,6 +16,7 @@ import {
   ListProps,
   Button,
   HStack,
+  useToast,
 } from '@chakra-ui/react'
 import { pay } from 'services/stripe'
 import { useUser } from 'contexts/UserContext'
@@ -23,6 +24,7 @@ import { Plan } from 'db'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { TypebotLogo } from 'assets/logos'
 import { CheckIcon } from 'assets/icons'
+import { toTitleCase } from 'utils'
 
 export enum LimitReached {
   BRAND = 'Remove branding',
@@ -43,9 +45,10 @@ export const UpgradeModal = ({
   plan = Plan.PRO,
 }: UpgradeModalProps) => {
   const { user } = useUser()
-  const { workspace } = useWorkspace()
+  const { workspace, refreshWorkspace } = useWorkspace()
   const [payLoading, setPayLoading] = useState(false)
   const [currency, setCurrency] = useState<'usd' | 'eur'>('usd')
+  const toast = useToast()
 
   useEffect(() => {
     setCurrency(
@@ -56,12 +59,24 @@ export const UpgradeModal = ({
   const handlePayClick = async () => {
     if (!user || !workspace) return
     setPayLoading(true)
-    await pay({
+    const response = await pay({
+      customerId: workspace.stripeId ?? undefined,
       user,
       currency,
       plan: plan === Plan.TEAM ? 'team' : 'pro',
       workspaceId: workspace.id,
     })
+    setPayLoading(false)
+    if (response?.newPlan) {
+      refreshWorkspace({ plan: response.newPlan })
+      toast({
+        status: 'success',
+        title: 'Upgrade success!',
+        description: `Workspace successfully upgraded to ${toTitleCase(
+          response.newPlan
+        )} plan 🎉`,
+      })
+    }
   }
 
   return (