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

apps/builder/components/shared/CredentialsDropdown.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  IconButton,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -7,19 +8,22 @@ import {
   MenuList,
   Stack,
   Text,
+  useToast,
 } from '@chakra-ui/react'
-import { ChevronLeftIcon, PlusIcon } from 'assets/icons'
-import React, { useEffect, useMemo } from 'react'
+import { ChevronLeftIcon, PlusIcon, TrashIcon } from 'assets/icons'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useUser } from 'contexts/UserContext'
 import { useRouter } from 'next/router'
 import { CredentialsType } from 'models'
+import { deleteCredentials, useCredentials } from 'services/credentials'
 
 type Props = Omit<MenuButtonProps, 'type'> & {
   type: CredentialsType
   currentCredentialsId?: string
-  onCredentialsSelect: (credentialId: string) => void
+  onCredentialsSelect: (credentialId?: string) => void
   onCreateNewClick: () => void
   defaultCredentialLabel?: string
+  refreshDropdownKey?: number
 }
 
 export const CredentialsDropdown = ({
@@ -28,10 +32,21 @@ export const CredentialsDropdown = ({
   onCredentialsSelect,
   onCreateNewClick,
   defaultCredentialLabel,
+  refreshDropdownKey,
   ...props
 }: Props) => {
   const router = useRouter()
-  const { credentials } = useUser()
+  const { user } = useUser()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { credentials, mutate } = useCredentials({
+    userId: user?.id,
+    onError: (error) =>
+      toast({ title: error.name, description: error.message }),
+  })
+  const [isDeleting, setIsDeleting] = useState<string>()
 
   const defaultCredentialsLabel = defaultCredentialLabel ?? `Select an account`
 
@@ -44,10 +59,15 @@ export const CredentialsDropdown = ({
     [currentCredentialsId, credentials]
   )
 
-  const handleMenuItemClick = (credentialId: string) => () => {
-    onCredentialsSelect(credentialId)
+  const handleMenuItemClick = (credentialsId: string) => () => {
+    onCredentialsSelect(credentialsId)
   }
 
+  useEffect(() => {
+    if ((refreshDropdownKey ?? 0) > 0) mutate({ credentials })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshDropdownKey])
+
   useEffect(() => {
     if (!router.isReady) return
     if (router.query.credentialsId) {
@@ -63,6 +83,16 @@ export const CredentialsDropdown = ({
       router.push(router.asPath.split('?')[0], undefined, { shallow: true })
   }
 
+  const handleDeleteDomainClick = (credentialsId: string) => async () => {
+    if (!user?.id) return
+    setIsDeleting(credentialsId)
+    const { error } = await deleteCredentials(user?.id, credentialsId)
+    setIsDeleting(undefined)
+    if (error) return toast({ title: error.name, description: error.message })
+    onCredentialsSelect(undefined)
+    mutate({ credentials: credentials.filter((c) => c.id !== credentialsId) })
+  }
+
   return (
     <Menu isLazy placement="bottom-end" matchWidth>
       <MenuButton
@@ -91,16 +121,27 @@ export const CredentialsDropdown = ({
             </MenuItem>
           )}
           {credentialsList.map((credentials) => (
-            <MenuItem
+            <Button
+              role="menuitem"
+              minH="40px"
               key={credentials.id}
-              maxW="500px"
-              overflow="hidden"
-              whiteSpace="nowrap"
-              textOverflow="ellipsis"
               onClick={handleMenuItemClick(credentials.id)}
+              fontSize="16px"
+              fontWeight="normal"
+              rounded="none"
+              colorScheme="gray"
+              variant="ghost"
+              justifyContent="space-between"
             >
               {credentials.name}
-            </MenuItem>
+              <IconButton
+                icon={<TrashIcon />}
+                aria-label="Remove credentials"
+                size="xs"
+                onClick={handleDeleteDomainClick(credentials.id)}
+                isLoading={isDeleting === credentials.id}
+              />
+            </Button>
           ))}
           <MenuItem
             maxW="500px"

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)