feat(integrations): 🚸 Add Reply-To field for email sending

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

@@ -1,8 +1,10 @@
 import { Stack, useDisclosure, Text } from '@chakra-ui/react'
 import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
 import { Input, Textarea } from 'components/shared/Textbox'
+import { useTypebot } from 'contexts/TypebotContext'
 import { CredentialsType, SendEmailOptions } from 'models'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { isDefined } from 'utils'
 import { SmtpConfigModal } from './SmtpConfigModal'
 
 type Props = {
@@ -11,9 +13,16 @@ type Props = {
 }
 
 export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
+  const { owner } = useTypebot()
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [refreshCredentialsKey, setRefreshCredentialsKey] = useState(0)
 
+  useEffect(() => {
+    if (isDefined(options.replyTo) || !owner?.email) return
+    handleReplyToChange(owner.email)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const handleCredentialsSelect = (credentialsId?: string) => {
     setRefreshCredentialsKey(refreshCredentialsKey + 1)
     onOptionsChange({
@@ -60,6 +69,12 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
       body,
     })
 
+  const handleReplyToChange = (replyTo: string) =>
+    onOptionsChange({
+      ...options,
+      replyTo,
+    })
+
   return (
     <Stack spacing={4}>
       <Stack>
@@ -75,6 +90,14 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
           refreshDropdownKey={refreshCredentialsKey}
         />
       </Stack>
+      <Stack>
+        <Text>Reply to: </Text>
+        <Input
+          onChange={handleReplyToChange}
+          defaultValue={options.replyTo}
+          placeholder={owner?.email ?? 'email@gmail.com'}
+        />
+      </Stack>
       <Stack>
         <Text>To: </Text>
         <Input

apps/builder/components/shared/Textbox/TextBox.tsx

@@ -36,14 +36,21 @@ export const TextBox = ({
     null
   )
   const [carretPosition, setCarretPosition] = useState<number>(0)
-  const [value, setValue] = useState(props.defaultValue)
+  const [value, setValue] = useState(props.defaultValue ?? '')
+  const [isTouched, setIsTouched] = useState(false)
   const debounced = useDebouncedCallback(
     (value) => {
       onChange(value)
     },
     process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
 
+  useEffect(() => {
+    if (props.defaultValue !== value && value === '' && !isTouched)
+      setValue(props.defaultValue ?? '')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.defaultValue])
+
   useEffect(
     () => () => {
       debounced.flush()
@@ -54,12 +61,14 @@ export const TextBox = ({
   const handleChange = (
     e: ChangeEvent<HTMLInputElement & HTMLTextAreaElement>
   ) => {
+    setIsTouched(true)
     setValue(e.target.value)
     debounced(e.target.value)
   }
 
   const handleVariableSelected = (variable?: Variable) => {
     if (!textBoxRef.current || !variable) return
+    setIsTouched(true)
     const cursorPosition = carretPosition
     const textBeforeCursorPosition = textBoxRef.current.value.substring(
       0,

apps/viewer/pages/api/integrations/email.ts

@@ -27,7 +27,7 @@ const defaultFrom = {
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   await cors(req, res)
   if (req.method === 'POST') {
-    const { credentialsId, recipients, body, subject, cc, bcc } = (
+    const { credentialsId, recipients, body, subject, cc, bcc, replyTo } = (
       typeof req.body === 'string' ? JSON.parse(req.body) : req.body
     ) as SendEmailOptions
 
@@ -50,6 +50,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       cc: cc?.join(''),
       bcc: bcc?.join(''),
       to: recipients.join(', '),
+      replyTo,
       subject,
       text: body,
     })

packages/bot-engine/src/services/integration.ts

@@ -241,6 +241,7 @@ const sendEmail = async (
     return step.outgoingEdgeId
   }
   const { options } = step
+  const replyTo = parseVariables(variables)(options.replyTo)
   const { error } = await sendRequest({
     url: `${apiHost}/api/integrations/email`,
     method: 'POST',
@@ -251,6 +252,7 @@ const sendEmail = async (
       body: parseVariables(variables)(options.body ?? ''),
       cc: (options.cc ?? []).map(parseVariables(variables)),
       bcc: (options.bcc ?? []).map(parseVariables(variables)),
+      replyTo: replyTo !== '' ? replyTo : undefined,
     },
   })
   onNewLog(

packages/models/src/typebot/steps/integration.ts

@@ -49,6 +49,7 @@ export type SendEmailStep = StepBase & {
 export type SendEmailOptions = {
   credentialsId: string | 'default'
   recipients: string[]
+  replyTo?: string
   cc?: string[]
   bcc?: string[]
   subject?: string