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"

apps/builder/playwright/tests/settings.spec.ts

@@ -89,4 +89,24 @@ test.describe.parallel('Settings page', () => {
       await page.fill('textarea#description', 'Lorem ipsum')
     })
   })
+
+  test.describe('Free user', () => {
+    test.use({
+      storageState: path.join(__dirname, '../freeUser.json'),
+    })
+    test("can't remove branding", async ({ page }) => {
+      const typebotId = 'free-branding-typebot'
+      await importTypebotInDatabase(
+        path.join(__dirname, '../fixtures/typebots/theme.json'),
+        {
+          id: typebotId,
+        }
+      )
+      await page.goto(`/typebots/${typebotId}/settings`)
+      await page.click('button:has-text("General")')
+      await expect(page.locator('text=Pro')).toBeVisible()
+      await page.click('text=Typebot.io branding')
+      await expect(page.locator('text=Upgrade now')).toBeVisible()
+    })
+  })
 })