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,7 +36,8 @@ 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)
@@ -44,6 +45,12 @@ export const TextBox = ({
     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,