feat(editor): ✨ Add send email integration

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/ImageBubble.tsx

@@ -22,8 +22,7 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
   const [isTyping, setIsTyping] = useState(true)
 
   const url = useMemo(
-    () =>
-      parseVariables({ text: step.content?.url, variables: typebot.variables }),
+    () => parseVariables(typebot.variables)(step.content?.url),
     [step.content?.url, typebot.variables]
   )
 

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx

@@ -26,8 +26,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const [isTyping, setIsTyping] = useState(true)
 
   const content = useMemo(
-    () =>
-      parseVariables({ text: step.content.html, variables: typebot.variables }),
+    () => parseVariables(typebot.variables)(step.content.html),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [typebot.variables]
   )

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/VideoBubble.tsx

@@ -85,7 +85,7 @@ const VideoContent = ({
   variables: Variable[]
 }) => {
   const url = useMemo(
-    () => parseVariables({ text: content?.url, variables: variables }),
+    () => parseVariables(variables)(content?.url),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [variables]
   )

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

@@ -10,6 +10,7 @@ import {
   GoogleSheetsGetOptions,
   GoogleAnalyticsStep,
   WebhookStep,
+  SendEmailStep,
 } from 'models'
 import { stringify } from 'qs'
 import { sendRequest } from 'utils'
@@ -25,7 +26,7 @@ export const executeIntegration = (
   variables: Variable[],
   indices: Indices,
   updateVariableValue: (variableId: string, value: string) => void
-) => {
+): Promise<string | undefined> => {
   switch (step.type) {
     case IntegrationStepType.GOOGLE_SHEETS:
       return executeGoogleSheetIntegration(step, variables, updateVariableValue)
@@ -39,6 +40,8 @@ export const executeIntegration = (
         indices,
         updateVariableValue
       )
+    case IntegrationStepType.EMAIL:
+      return sendEmail(step, variables)
   }
 }
 
@@ -46,10 +49,11 @@ export const executeGoogleAnalyticsIntegration = async (
   step: GoogleAnalyticsStep,
   variables: Variable[]
 ) => {
-  if (!step.options?.trackingId) return
+  if (!step.options?.trackingId) return step.outgoingEdgeId
   const { default: initGoogleAnalytics } = await import('../../lib/gtag')
   await initGoogleAnalytics(step.options.trackingId)
   sendGaEvent(parseVariablesInObject(step.options, variables))
+  return step.outgoingEdgeId
 }
 
 const executeGoogleSheetIntegration = async (
@@ -100,10 +104,7 @@ const updateRowInGoogleSheets = async (
       values: parseCellValues(options.cellsToUpsert, variables),
       referenceCell: {
         column: options.referenceCell.column,
-        value: parseVariables({
-          text: options.referenceCell.value ?? '',
-          variables,
-        }),
+        value: parseVariables(variables)(options.referenceCell.value ?? ''),
       },
     },
   })
@@ -120,10 +121,7 @@ const getRowFromGoogleSheets = async (
       credentialsId: options.credentialsId,
       referenceCell: {
         column: options.referenceCell.column,
-        value: parseVariables({
-          text: options.referenceCell.value ?? '',
-          variables,
-        }),
+        value: parseVariables(variables)(options.referenceCell.value ?? ''),
       },
       columns: options.cellsToExtract.map((cell) => cell.column),
     },
@@ -147,7 +145,7 @@ const parseCellValues = (
       ? row
       : {
           ...row,
-          [cell.column]: parseVariables({ text: cell.value, variables }),
+          [cell.column]: parseVariables(variables)(cell.value),
         }
   }, {})
 
@@ -174,3 +172,19 @@ const executeWebhook = async (
     updateVariableValue(varMapping.variableId, value)
   })
 }
+
+const sendEmail = async (step: SendEmailStep, variables: Variable[]) => {
+  const { options } = step
+  const { error } = await sendRequest({
+    url: `http://localhost:3001/api/integrations/email`,
+    method: 'POST',
+    body: {
+      credentialsId: options.credentialsId,
+      recipients: options.recipients.map(parseVariables(variables)),
+      subject: parseVariables(variables)(options.subject ?? ''),
+      body: parseVariables(variables)(options.body ?? ''),
+    },
+  })
+  console.error(error)
+  return step.outgoingEdgeId
+}

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

@@ -39,7 +39,7 @@ const executeSetVariable = (
     return step.outgoingEdgeId
   const expression = step.options.expressionToEvaluate
   const evaluatedExpression = isMathFormula(expression)
-    ? evaluateExpression(parseVariables({ text: expression, variables }))
+    ? evaluateExpression(parseVariables(variables)(expression))
     : expression
   updateVariableValue(step.options.variableId, evaluatedExpression)
   return step.outgoingEdgeId
@@ -92,7 +92,7 @@ const executeRedirect = (
 ): EdgeId | undefined => {
   if (!step.options?.url) return step.outgoingEdgeId
   window.open(
-    sanitizeUrl(parseVariables({ text: step.options?.url, variables })),
+    sanitizeUrl(parseVariables(variables)(step.options?.url)),
     step.options.isNewTab ? '_blank' : '_self'
   )
   return step.outgoingEdgeId

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

@@ -6,23 +6,19 @@ const safeEval = eval
 export const stringContainsVariable = (str: string): boolean =>
   /\{\{(.*?)\}\}/g.test(str)
 
-export const parseVariables = ({
-  text,
-  variables,
-}: {
-  text?: string
-  variables: Variable[]
-}): string => {
-  if (!text || text === '') return ''
-  return text.replace(/\{\{(.*?)\}\}/g, (_, fullVariableString) => {
-    const matchedVarName = fullVariableString.replace(/{{|}}/g, '')
-    return (
-      variables.find((v) => {
-        return matchedVarName === v.name && isDefined(v.value)
-      })?.value ?? ''
-    )
-  })
-}
+export const parseVariables =
+  (variables: Variable[]) =>
+  (text?: string): string => {
+    if (!text || text === '') return ''
+    return text.replace(/\{\{(.*?)\}\}/g, (_, fullVariableString) => {
+      const matchedVarName = fullVariableString.replace(/{{|}}/g, '')
+      return (
+        variables.find((v) => {
+          return matchedVarName === v.name && isDefined(v.value)
+        })?.value ?? ''
+      )
+    })
+  }
 
 export const isMathFormula = (str?: string) =>
   ['*', '/', '+', '-'].some((val) => str && str.includes(val))
@@ -58,7 +54,7 @@ export const parseVariablesInObject = (
       ...newObj,
       [key]:
         typeof currentValue === 'string'
-          ? parseVariables({ text: currentValue, variables })
+          ? parseVariables(variables)(currentValue)
           : currentValue,
     }
   }, {})