feat(editor): ✨ Add cc & bcc + Deletable credentials

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx

@@ -1,5 +1,4 @@
 import { Divider, Stack, Text } from '@chakra-ui/react'
-import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
 import { DropdownList } from 'components/shared/DropdownList'
 import { TableList, TableListItemProps } from 'components/shared/TableList'
 import { useTypebot } from 'contexts/TypebotContext'
@@ -24,6 +23,8 @@ import { SheetsDropdown } from './SheetsDropdown'
 import { SpreadsheetsDropdown } from './SpreadsheetDropdown'
 import { CellWithValueStack } from './CellWithValueStack'
 import { CellWithVariableIdStack } from './CellWithVariableIdStack'
+import { omit } from 'services/utils'
+import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
 
 type Props = {
   options: GoogleSheetsOptions
@@ -45,8 +46,8 @@ export const GoogleSheetsSettingsBody = ({
     () => sheets?.find((s) => s.id === options?.sheetId),
     [sheets, options?.sheetId]
   )
-  const handleCredentialsIdChange = (credentialsId: string) =>
-    onOptionsChange({ ...options, credentialsId })
+  const handleCredentialsIdChange = (credentialsId?: string) =>
+    onOptionsChange({ ...omit(options, 'credentialsId'), credentialsId })
   const handleSpreadsheetIdChange = (spreadsheetId: string) =>
     onOptionsChange({ ...options, spreadsheetId })
   const handleSheetIdChange = (sheetId: string) =>

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

@@ -5,7 +5,7 @@ import {
   TextareaWithVariableButton,
 } from 'components/shared/TextboxWithVariableButton'
 import { CredentialsType, SendEmailOptions } from 'models'
-import React from 'react'
+import React, { useState } from 'react'
 import { SmtpConfigModal } from './SmtpConfigModal'
 
 type Props = {
@@ -15,11 +15,15 @@ type Props = {
 
 export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const handleCredentialsSelect = (credentialsId: string) =>
+  const [refreshCredentialsKey, setRefreshCredentialsKey] = useState(0)
+
+  const handleCredentialsSelect = (credentialsId?: string) => {
+    setRefreshCredentialsKey(refreshCredentialsKey + 1)
     onOptionsChange({
       ...options,
-      credentialsId,
+      credentialsId: credentialsId === undefined ? 'default' : credentialsId,
     })
+  }
 
   const handleToChange = (recipientsStr: string) => {
     const recipients: string[] = recipientsStr
@@ -31,6 +35,22 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
     })
   }
 
+  const handleCcChange = (ccStr: string) => {
+    const cc: string[] = ccStr.split(',').map((str) => str.trim())
+    onOptionsChange({
+      ...options,
+      cc,
+    })
+  }
+
+  const handleBccChange = (bccStr: string) => {
+    const bcc: string[] = bccStr.split(',').map((str) => str.trim())
+    onOptionsChange({
+      ...options,
+      bcc,
+    })
+  }
+
   const handleSubjectChange = (subject: string) =>
     onOptionsChange({
       ...options,
@@ -55,6 +75,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
           defaultCredentialLabel={
             process.env.NEXT_PUBLIC_EMAIL_NOTIFICATIONS_FROM_EMAIL
           }
+          refreshDropdownKey={refreshCredentialsKey}
         />
       </Stack>
       <Stack>
@@ -65,6 +86,22 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
           placeholder="email1@gmail.com, email2@gmail.com"
         />
       </Stack>
+      <Stack>
+        <Text>Cc: </Text>
+        <InputWithVariableButton
+          onChange={handleCcChange}
+          initialValue={options.cc?.join(', ') ?? ''}
+          placeholder="email1@gmail.com, email2@gmail.com"
+        />
+      </Stack>
+      <Stack>
+        <Text>Bcc: </Text>
+        <InputWithVariableButton
+          onChange={handleBccChange}
+          initialValue={options.bcc?.join(', ') ?? ''}
+          placeholder="email1@gmail.com, email2@gmail.com"
+        />
+      </Stack>
       <Stack>
         <Text>Subject: </Text>
         <InputWithVariableButton

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

@@ -13,6 +13,7 @@ import { useUser } from 'contexts/UserContext'
 import { CredentialsType, SmtpCredentialsData } from 'models'
 import React, { useState } from 'react'
 import { createCredentials } from 'services/credentials'
+import { testSmtpConfig } from 'services/integrations'
 import { isNotDefined } from 'utils'
 import { SmtpConfigForm } from './SmtpConfigForm'
 
@@ -27,7 +28,7 @@ export const SmtpConfigModal = ({
   onNewCredentials,
   onClose,
 }: Props) => {
-  const { user, mutateCredentials } = useUser()
+  const { user } = useUser()
   const [isCreating, setIsCreating] = useState(false)
   const toast = useToast({
     position: 'top-right',
@@ -39,14 +40,24 @@ export const SmtpConfigModal = ({
   })
 
   const handleCreateClick = async () => {
-    if (!user) return
+    if (!user?.email) return
     setIsCreating(true)
+    const { error: testSmtpError } = await testSmtpConfig(
+      smtpConfig,
+      user.email
+    )
+    if (testSmtpError) {
+      setIsCreating(false)
+      return toast({
+        title: 'Invalid configuration',
+        description: "We couldn't send the test email with your configuration",
+      })
+    }
     const { data, error } = await createCredentials(user.id, {
       data: smtpConfig,
       name: smtpConfig.from.email as string,
       type: CredentialsType.SMTP,
     })
-    await mutateCredentials()
     setIsCreating(false)
     if (error) return toast({ title: error.name, description: error.message })
     if (!data?.credentials)