feat(workspace): 🚸 Improve plan upgrade flow

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 (