🚸 (theme) Move isBrandingEnable param in the Theme tab

apps/builder/src/features/settings/components/GeneralSettingsForm.tsx

@@ -1,24 +1,15 @@
 import {
-  Flex,
   FormControl,
   FormLabel,
   HStack,
   Stack,
-  Switch,
   Tag,
-  useDisclosure,
   Text,
 } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { Plan } from '@typebot.io/prisma'
 import { GeneralSettings, rememberUserStorages } from '@typebot.io/schemas'
 import React from 'react'
 import { isDefined } from '@typebot.io/lib'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
-import { LockTag } from '@/features/billing/components/LockTag'
-import { isFreePlan } from '@/features/billing/helpers/isFreePlan'
-import { useI18n } from '@/locales'
 import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 import { DropdownList } from '@/components/DropdownList'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
@@ -32,18 +23,6 @@ export const GeneralSettingsForm = ({
   generalSettings,
   onGeneralSettingsChange,
 }: Props) => {
-  const t = useI18n()
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const { workspace } = useWorkspace()
-  const isWorkspaceFreePlan = isFreePlan(workspace)
-  const handleSwitchChange = () => {
-    if (generalSettings?.isBrandingEnabled && isWorkspaceFreePlan) return
-    onGeneralSettingsChange({
-      ...generalSettings,
-      isBrandingEnabled: !generalSettings?.isBrandingEnabled,
-    })
-  }
-
   const toggleRememberUser = (isEnabled: boolean) =>
     onGeneralSettingsChange({
       ...generalSettings,
@@ -78,26 +57,6 @@ export const GeneralSettingsForm = ({
 
   return (
     <Stack spacing={6}>
-      <ChangePlanModal
-        isOpen={isOpen}
-        onClose={onClose}
-        type={t('billing.limitMessage.brand')}
-      />
-      <Flex
-        justifyContent="space-between"
-        align="center"
-        onClick={isWorkspaceFreePlan ? onOpen : undefined}
-      >
-        <FormLabel htmlFor="branding" mb="0">
-          Typebot.io branding{' '}
-          {isWorkspaceFreePlan && <LockTag plan={Plan.STARTER} />}
-        </FormLabel>
-        <Switch
-          id="branding"
-          isChecked={generalSettings.isBrandingEnabled}
-          onChange={handleSwitchChange}
-        />
-      </Flex>
       <SwitchWithLabel
         label="Prefill input"
         initialValue={generalSettings.isInputPrefillEnabled ?? true}

apps/builder/src/features/theme/components/ThemeSideMenu.tsx

@@ -42,6 +42,12 @@ export const ThemeSideMenu = () => {
     })
   }
 
+  const updateBranding = (isBrandingEnabled: boolean) =>
+    typebot &&
+    updateTypebot({
+      settings: { ...typebot.settings, general: { isBrandingEnabled } },
+    })
+
   return (
     <Stack
       flex="1"
@@ -87,15 +93,17 @@ export const ThemeSideMenu = () => {
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
               <DropletIcon />
-              <Heading fontSize="lg">Font & Background</Heading>
+              <Heading fontSize="lg">Global</Heading>
             </HStack>
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
             {typebot && (
               <GeneralSettings
+                isBrandingEnabled={typebot.settings.general.isBrandingEnabled}
                 generalTheme={typebot.theme.general}
                 onGeneralThemeChange={updateGeneralTheme}
+                onBrandingChange={updateBranding}
               />
             )}
           </AccordionPanel>

apps/builder/src/features/theme/components/general/GeneralSettings.tsx

@@ -1,26 +1,66 @@
-import { Stack } from '@chakra-ui/react'
+import { Flex, FormLabel, Stack, Switch, useDisclosure } from '@chakra-ui/react'
 import { Background, GeneralTheme } from '@typebot.io/schemas'
 import React from 'react'
 import { BackgroundSelector } from './BackgroundSelector'
 import { FontSelector } from './FontSelector'
+import { LockTag } from '@/features/billing/components/LockTag'
+import { Plan } from '@typebot.io/prisma'
+import { isFreePlan } from '@/features/billing/helpers/isFreePlan'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import { useI18n } from '@/locales'
 
 type Props = {
+  isBrandingEnabled: boolean
   generalTheme: GeneralTheme
   onGeneralThemeChange: (general: GeneralTheme) => void
+  onBrandingChange: (isBrandingEnabled: boolean) => void
 }
 
 export const GeneralSettings = ({
+  isBrandingEnabled,
   generalTheme,
   onGeneralThemeChange,
+  onBrandingChange,
 }: Props) => {
+  const t = useI18n()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { workspace } = useWorkspace()
+  const isWorkspaceFreePlan = isFreePlan(workspace)
+
   const handleSelectFont = (font: string) =>
     onGeneralThemeChange({ ...generalTheme, font })
 
   const handleBackgroundChange = (background: Background) =>
     onGeneralThemeChange({ ...generalTheme, background })
 
+  const updateBranding = () => {
+    if (isBrandingEnabled && isWorkspaceFreePlan) return
+    onBrandingChange(!isBrandingEnabled)
+  }
+
   return (
     <Stack spacing={6}>
+      <ChangePlanModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={t('billing.limitMessage.brand')}
+      />
+      <Flex
+        justifyContent="space-between"
+        align="center"
+        onClick={isWorkspaceFreePlan ? onOpen : undefined}
+      >
+        <FormLabel htmlFor="branding" mb="0" cursor="pointer">
+          Show Typebot brand{' '}
+          {isWorkspaceFreePlan && <LockTag plan={Plan.STARTER} />}
+        </FormLabel>
+        <Switch
+          id="branding"
+          isChecked={isBrandingEnabled}
+          onChange={updateBranding}
+        />
+      </Flex>
       <FontSelector
         activeFont={generalTheme.font}
         onSelectFont={handleSelectFont}