feat(results): 🛂 Limit typebot branding

apps/builder/components/account/SubscriptionTag.tsx

@@ -13,7 +13,7 @@ export const SubscriptionTag = ({ plan }: { plan?: Plan }) => {
       return <Tag>Offered</Tag>
     }
     case Plan.PRO: {
-      return <Tag colorScheme="blue">Pro plan</Tag>
+      return <Tag colorScheme="orange">Pro plan</Tag>
     }
     default: {
       return <Tag>Free plan</Tag>

apps/builder/components/settings/GeneralSettingsForm.tsx

@@ -1,6 +1,16 @@
-import { Flex, FormLabel, Stack, Switch } from '@chakra-ui/react'
+import {
+  Flex,
+  FormLabel,
+  Stack,
+  Switch,
+  Tag,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { UpgradeModal } from 'components/shared/modals/UpgradeModal.'
+import { useUser } from 'contexts/UserContext'
 import { GeneralSettings } from 'models'
 import React from 'react'
+import { isFreePlan } from 'services/user'
 
 type Props = {
   generalSettings: GeneralSettings
@@ -11,16 +21,27 @@ export const GeneralSettingsForm = ({
   generalSettings,
   onGeneralSettingsChange,
 }: Props) => {
-  const handleSwitchChange = () =>
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { user } = useUser()
+  const isUserFreePlan = isFreePlan(user)
+  const handleSwitchChange = () => {
+    if (generalSettings?.isBrandingEnabled && isUserFreePlan) return
     onGeneralSettingsChange({
       isBrandingEnabled: !generalSettings?.isBrandingEnabled,
     })
+  }
 
   return (
     <Stack spacing={6}>
-      <Flex justifyContent="space-between" align="center">
+      <UpgradeModal isOpen={isOpen} onClose={onClose} />
+      <Flex
+        justifyContent="space-between"
+        align="center"
+        onClick={isUserFreePlan ? onOpen : undefined}
+      >
         <FormLabel htmlFor="branding" mb="0">
-          Typebot.io branding
+          Typebot.io branding{' '}
+          {isUserFreePlan && <Tag colorScheme="orange">Pro</Tag>}
         </FormLabel>
         <Switch
           id="branding"