From 3686465a85d21bf6342ab8395a5037063e379cac Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 14 Nov 2022 11:02:30 +0100
Subject: [PATCH] :children_crossing: (sendEmail) Make custom sender name
 optional

---
 .../settings/GeneralSettingsForm.tsx          |  3 -
 .../bodies/ChoiceInputSettingsBody.tsx        |  3 +-
 .../bodies/CodeSettings.tsx                   |  1 -
 .../bodies/DateInputSettingsBody.tsx          |  6 +-
 .../bodies/FileInputSettings.tsx              |  2 -
 .../bodies/RatingInputSettingsBody.tsx        |  1 -
 .../bodies/RedirectSettings.tsx               |  1 -
 .../SendEmailSettings/SendEmailSettings.tsx   |  1 -
 .../SendEmailSettings/SmtpConfigForm.tsx      | 91 +++++++++----------
 .../SendEmailSettings/SmtpConfigModal.tsx     |  4 +-
 .../bodies/TextInputSettingsBody.tsx          |  1 -
 .../WebhookSettings/WebhookSettings.tsx       |  2 -
 .../components/shared/SwitchWithLabel.tsx     | 35 ++++---
 .../features/chatwoot/chatwoot.spec.ts        |  1 -
 .../tests/logic/typebotLink.spec.ts           |  1 +
 .../builder/playwright/tests/settings.spec.ts | 21 ++---
 .../playwright/tests/workspaces.spec.ts       |  6 +-
 17 files changed, 75 insertions(+), 105 deletions(-)

diff --git a/apps/builder/components/settings/GeneralSettingsForm.tsx b/apps/builder/components/settings/GeneralSettingsForm.tsx
index 3534b6b78..36398b01f 100644
--- a/apps/builder/components/settings/GeneralSettingsForm.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
index ea2ad7e0e..e9a1f35ec 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
+++ b/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}
       />
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/CodeSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/CodeSettings.tsx
index 844c5e780..ff4c2a953 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/CodeSettings.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
index 47f9be93c..5ee9406b8 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
+++ b/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}
       />
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx
index f28124d72..9f1012073 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RatingInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RatingInputSettingsBody.tsx
index 2a556c315..005f04b97 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RatingInputSettingsBody.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RedirectSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
index 83a7a25b9..91737316c 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
index 48574792c..394ee0207 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
index 46e339f1c..637b99773 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
+++ b/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"
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigModal.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigModal.tsx
index e17fa4490..90e070824 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigModal.tsx
+++ b/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}
           >
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
index 67a6c88b3..9e8aa1a99 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
index ca5835c3e..e959139d5 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/SwitchWithLabel.tsx b/apps/builder/components/shared/SwitchWithLabel.tsx
index 778422060..34b723725 100644
--- a/apps/builder/components/shared/SwitchWithLabel.tsx
+++ b/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>
   )
 }
diff --git a/apps/builder/features/chatwoot/chatwoot.spec.ts b/apps/builder/features/chatwoot/chatwoot.spec.ts
index 55d1784c7..2ff99a9b1 100644
--- a/apps/builder/features/chatwoot/chatwoot.spec.ts
+++ b/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()
 
diff --git a/apps/builder/playwright/tests/logic/typebotLink.spec.ts b/apps/builder/playwright/tests/logic/typebotLink.spec.ts
index b1c651b96..f6d1d9137 100644
--- a/apps/builder/playwright/tests/logic/typebotLink.spec.ts
+++ b/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}`
diff --git a/apps/builder/playwright/tests/settings.spec.ts b/apps/builder/playwright/tests/settings.spec.ts
index cfcc23897..13070b085 100644
--- a/apps/builder/playwright/tests/settings.spec.ts
+++ b/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'),
         {
diff --git a/apps/builder/playwright/tests/workspaces.spec.ts b/apps/builder/playwright/tests/workspaces.spec.ts
index d0e505b39..18eef7f22 100644
--- a/apps/builder/playwright/tests/workspaces.spec.ts
+++ b/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 }) => {