🚸 (sendEmail) Make custom sender name optional

apps/builder/components/settings/GeneralSettingsForm.tsx

@@ -73,14 +73,12 @@ export const GeneralSettingsForm = ({
         />
       </Flex>
       <SwitchWithLabel
-        id="prefill"
         label="Prefill input"
         initialValue={generalSettings.isInputPrefillEnabled ?? true}
         onCheckChange={handleInputPrefillChange}
         moreInfoContent="Inputs are automatically pre-filled whenever their associated variable has a value"
       />
       <SwitchWithLabel
-        id="new-result"
         label="Remember session"
         initialValue={
           isDefined(generalSettings.isNewResultOnRefreshEnabled)
@@ -91,7 +89,6 @@ export const GeneralSettingsForm = ({
         moreInfoContent="If the user refreshes the page, its existing results will be overwritten. Disable this if you want to create a new results every time the user refreshes the page."
       />
       <SwitchWithLabel
-        id="query-params"
         label="Hide query params on bot start"
         initialValue={generalSettings.isHideQueryParamsEnabled ?? true}
         onCheckChange={handleHideQueryParamsChange}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx

@@ -24,8 +24,7 @@ export const ChoiceInputSettingsBody = ({
   return (
     <Stack spacing={4}>
       <SwitchWithLabel
-        id={'is-multiple'}
-        label={'Multiple choice?'}
+        label="Multiple choice?"
         initialValue={options?.isMultipleChoice ?? false}
         onCheckChange={handleIsMultipleChange}
       />

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/CodeSettings.tsx

@@ -33,7 +33,6 @@ export const CodeSettings = ({ options, onOptionsChange }: Props) => {
         />
       </Stack>
       <SwitchWithLabel
-        id="shouldExecuteInParentContext"
         label="Execute in parent window"
         moreInfoContent="Execute the code in the parent window context (when the bot is embedded). If it isn't detected, the code will be executed in the current window context."
         initialValue={options.shouldExecuteInParentContext ?? false}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx

@@ -30,14 +30,12 @@ export const DateInputSettingsBody = ({
   return (
     <Stack spacing={4}>
       <SwitchWithLabel
-        id="is-range"
-        label={'Is range?'}
+        label="Is range?"
         initialValue={options.isRange}
         onCheckChange={handleIsRangeChange}
       />
       <SwitchWithLabel
-        id="with-time"
-        label={'With time?'}
+        label="With time?"
         initialValue={options.isRange}
         onCheckChange={handleHasTimeChange}
       />

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx

@@ -28,13 +28,11 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
   return (
     <Stack spacing={4}>
       <SwitchWithLabel
-        id="required"
         label="Required?"
         initialValue={options.isRequired ?? true}
         onCheckChange={handleRequiredChange}
       />
       <SwitchWithLabel
-        id="switch"
         label="Allow multiple files?"
         initialValue={options.isMultipleAllowed}
         onCheckChange={handleMultipleFilesChange}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RatingInputSettingsBody.tsx

@@ -68,7 +68,6 @@ export const RatingInputSettings = ({
 
       {options.buttonType === 'Icons' && (
         <SwitchWithLabel
-          id="switch"
           label="Custom icon?"
           initialValue={options.customIcon.isEnabled}
           onCheckChange={handleCustomIconCheck}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RedirectSettings.tsx

@@ -29,7 +29,6 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
         />
       </Stack>
       <SwitchWithLabel
-        id="new-tab"
         label="Open in new tab?"
         initialValue={options.isNewTab}
         onCheckChange={handleIsNewTabChange}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx

@@ -154,7 +154,6 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
         />
       </Stack>
       <SwitchWithLabel
-        id={'custom-body'}
         label={'Custom content?'}
         initialValue={options.isCustomBody ?? false}
         onCheckChange={handleIsCustomBodyChange}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx

@@ -28,60 +28,53 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
 
   return (
     <Stack as="form" spacing={4}>
-      <FormControl isRequired>
-        <FormLabel>From email:</FormLabel>
-        <Input
-          defaultValue={config.from.email ?? ''}
-          onChange={handleFromEmailChange}
-          placeholder="notifications@provider.com"
-          withVariableButton={false}
-        />
-      </FormControl>
-      <FormControl isRequired>
-        <FormLabel>From name:</FormLabel>
-        <Input
-          defaultValue={config.from.name ?? ''}
-          onChange={handleFromNameChange}
-          placeholder="John Smith"
-          withVariableButton={false}
-        />
-      </FormControl>
-      <FormControl isRequired>
-        <FormLabel>Host:</FormLabel>
-        <Input
-          defaultValue={config.host ?? ''}
-          onChange={handleHostChange}
-          placeholder="mail.provider.com"
-          withVariableButton={false}
-        />
-      </FormControl>
-      <FormControl isRequired>
-        <FormLabel>Username / Email:</FormLabel>
-        <Input
-          type="email"
-          defaultValue={config.username ?? ''}
-          onChange={handleUsernameChange}
-          placeholder="user@provider.com"
-          withVariableButton={false}
-        />
-      </FormControl>
-      <FormControl isRequired>
-        <FormLabel>Password:</FormLabel>
-        <Input
-          type="password"
-          defaultValue={config.password ?? ''}
-          onChange={handlePasswordChange}
-          withVariableButton={false}
-        />
-      </FormControl>
+      <Input
+        isRequired
+        label="From email"
+        defaultValue={config.from.email ?? ''}
+        onChange={handleFromEmailChange}
+        placeholder="notifications@provider.com"
+        withVariableButton={false}
+      />
+      <Input
+        label="From name"
+        defaultValue={config.from.name ?? ''}
+        onChange={handleFromNameChange}
+        placeholder="John Smith"
+        withVariableButton={false}
+      />
+      <Input
+        isRequired
+        label="Host"
+        defaultValue={config.host ?? ''}
+        onChange={handleHostChange}
+        placeholder="mail.provider.com"
+        withVariableButton={false}
+      />
+      <Input
+        isRequired
+        label="Username / Email"
+        type="email"
+        defaultValue={config.username ?? ''}
+        onChange={handleUsernameChange}
+        placeholder="user@provider.com"
+        withVariableButton={false}
+      />
+      <Input
+        isRequired
+        label="Password"
+        type="password"
+        defaultValue={config.password ?? ''}
+        onChange={handlePasswordChange}
+        withVariableButton={false}
+      />
       <SwitchWithLabel
-        id="Tls"
-        label={'Secure?'}
+        label="Secure?"
         initialValue={config.isTlsEnabled ?? false}
         onCheckChange={handleTlsCheck}
         moreInfoContent="If enabled, the connection will use TLS when connecting to server. If disabled then TLS is used if server supports the STARTTLS extension. In most cases enable it if you are connecting to port 465. For port 587 or 25 keep it disabled."
       />
-      <FormControl as={HStack} justifyContent="space-between">
+      <FormControl as={HStack} justifyContent="space-between" isRequired>
         <FormLabel mb="0">Port number:</FormLabel>
         <SmartNumberInput
           placeholder="25"

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigModal.tsx

@@ -83,10 +83,10 @@ export const SmtpConfigModal = ({
             onClick={handleCreateClick}
             isDisabled={
               isNotDefined(smtpConfig.from.email) ||
-              isNotDefined(smtpConfig.from.name) ||
               isNotDefined(smtpConfig.host) ||
               isNotDefined(smtpConfig.username) ||
-              isNotDefined(smtpConfig.password)
+              isNotDefined(smtpConfig.password) ||
+              isNotDefined(smtpConfig.port)
             }
             isLoading={isCreating}
           >

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx

@@ -26,7 +26,6 @@ export const TextInputSettingsBody = ({
   return (
     <Stack spacing={4}>
       <SwitchWithLabel
-        id="switch"
         label="Long text?"
         initialValue={options?.isLong ?? false}
         onCheckChange={handleLongChange}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -172,7 +172,6 @@ export const WebhookSettings = ({
         withVariableButton={!provider}
       />
       <SwitchWithLabel
-        id={'easy-config'}
         label="Advanced configuration"
         initialValue={options.isAdvancedConfig ?? true}
         onCheckChange={handleAdvancedConfigChange}
@@ -225,7 +224,6 @@ export const WebhookSettings = ({
               </AccordionButton>
               <AccordionPanel pb={4} as={Stack} spacing="6">
                 <SwitchWithLabel
-                  id={'custom-body'}
                   label="Custom body"
                   initialValue={options.isCustomBody ?? true}
                   onCheckChange={handleBodyFormStateChange}

apps/builder/components/shared/SwitchWithLabel.tsx

@@ -1,9 +1,14 @@
-import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
+import {
+  FormControl,
+  FormLabel,
+  HStack,
+  Switch,
+  SwitchProps,
+} from '@chakra-ui/react'
 import React, { useState } from 'react'
 import { MoreInfoTooltip } from './MoreInfoTooltip'
 
 type SwitchWithLabelProps = {
-  id: string
   label: string
   initialValue: boolean
   moreInfoContent?: string
@@ -11,12 +16,11 @@ type SwitchWithLabelProps = {
 } & SwitchProps
 
 export const SwitchWithLabel = ({
-  id,
   label,
   initialValue,
   moreInfoContent,
   onCheckChange,
-  ...props
+  ...switchProps
 }: SwitchWithLabelProps) => {
   const [isChecked, setIsChecked] = useState(initialValue)
 
@@ -25,21 +29,16 @@ export const SwitchWithLabel = ({
     onCheckChange(!isChecked)
   }
   return (
-    <HStack justifyContent="space-between">
-      <HStack>
-        <FormLabel htmlFor={id} mb="0" mr="0">
-          {label}
-        </FormLabel>
+    <FormControl as={HStack} justifyContent="space-between">
+      <FormLabel mb="0">
+        {label}
         {moreInfoContent && (
-          <MoreInfoTooltip>{moreInfoContent}</MoreInfoTooltip>
+          <>
+            &nbsp;<MoreInfoTooltip>{moreInfoContent}</MoreInfoTooltip>
+          </>
         )}
-      </HStack>
-      <Switch
-        isChecked={isChecked}
-        onChange={handleChange}
-        id={id}
-        {...props}
-      />
-    </HStack>
+      </FormLabel>
+      <Switch isChecked={isChecked} onChange={handleChange} {...switchProps} />
+    </FormControl>
   )
 }

apps/builder/features/chatwoot/chatwoot.spec.ts

@@ -3,7 +3,6 @@ import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import cuid from 'cuid'
 import { defaultChatwootOptions, IntegrationBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 
 const typebotId = cuid()
 

apps/builder/playwright/tests/logic/typebotLink.spec.ts

@@ -21,6 +21,7 @@ test('should be configurable', async ({ page }) => {
   await page.click('input[placeholder="Select a typebot"]')
   await page.click('text=My link typebot 2')
   await expect(page.locator('input[value="My link typebot 2"]')).toBeVisible()
+  await expect(page.getByText('Jump in My link typebot 2')).toBeVisible()
   await page.click('[aria-label="Navigate to typebot"]')
   await expect(page).toHaveURL(
     `/typebots/${linkedTypebotId}/edit?parentId=${typebotId}`

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

@@ -6,19 +6,16 @@ import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { freeWorkspaceId } from 'utils/playwright/databaseSetup'
 import { typebotViewer } from 'utils/playwright/testHelpers'
 
-const typebotId = cuid()
-
 test.describe.parallel('Settings page', () => {
-  test.beforeAll(async () => {
-    await importTypebotInDatabase(
-      path.join(__dirname, '../fixtures/typebots/settings.json'),
-      {
-        id: typebotId,
-      }
-    )
-  })
   test.describe('General', () => {
     test('should reflect change in real-time', async ({ page }) => {
+      const typebotId = cuid()
+      await importTypebotInDatabase(
+        path.join(__dirname, '../fixtures/typebots/settings.json'),
+        {
+          id: typebotId,
+        }
+      )
       await page.goto(`/typebots/${typebotId}/settings`)
       await expect(
         typebotViewer(page).locator('a:has-text("Made with Typebot")')
@@ -72,7 +69,7 @@ test.describe.parallel('Settings page', () => {
     test('should be fillable', async ({ page }) => {
       const favIconUrl = 'https://www.baptistearno.com/favicon.png'
       const imageUrl = 'https://www.baptistearno.com/images/site-preview.png'
-      const typebotId = 'metadata-typebot'
+      const typebotId = cuid()
       await importTypebotInDatabase(
         path.join(__dirname, '../fixtures/typebots/settings.json'),
         {
@@ -124,7 +121,7 @@ test.describe.parallel('Settings page', () => {
 
   test.describe('Free workspace', () => {
     test("can't remove branding", async ({ page }) => {
-      const typebotId = 'free-branding-typebot'
+      const typebotId = cuid()
       await importTypebotInDatabase(
         path.join(__dirname, '../fixtures/typebots/settings.json'),
         {

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

@@ -66,11 +66,7 @@ test('can create and delete a new workspace', async ({ page }) => {
     )
   ).toBeVisible()
   await page.click('text="Delete"')
-  await expect(page.locator('text=Free workspace')).toBeVisible()
-  await page.click('text=Free workspace')
-  await expect(
-    page.locator('text="John Doe\'s workspace" >> nth=1')
-  ).toBeHidden()
+  await expect(page.locator('text="John Doe\'s workspace"')).toBeHidden()
 })
 
 test('can update workspace info', async ({ page }) => {