chore(editor): 👔 Send email disabled in preview

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -6,6 +6,7 @@ import {
   Flex,
   FlexProps,
   useEventListener,
+  useToast,
   VStack,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
@@ -13,7 +14,7 @@ import { headerHeight } from 'components/shared/TypebotHeader'
 import { useEditor } from 'contexts/EditorContext'
 import { useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 
 export const PreviewDrawer = () => {
@@ -30,6 +31,10 @@ export const PreviewDrawer = () => {
     [typebot]
   )
 
+  const toast = useToast({
+    position: 'top-right',
+  })
+
   const handleMouseDown = () => {
     setIsResizing(true)
   }
@@ -52,6 +57,19 @@ export const PreviewDrawer = () => {
     setRightPanel(undefined)
   }
 
+  useEffect(() => {
+    const onMessageFromBot = (event: MessageEvent) => {
+      console.log(event)
+      if (event.data.typebotInfo) {
+        toast({ description: event.data.typebotInfo })
+      }
+    }
+    window.addEventListener('message', onMessageFromBot)
+    return () => {
+      window.removeEventListener('message', onMessageFromBot)
+    }
+  })
+
   return (
     <Flex
       pos="absolute"
@@ -93,6 +111,7 @@ export const PreviewDrawer = () => {
             <TypebotViewer
               typebot={publicTypebot}
               onNewBlockVisible={setPreviewingEdge}
+              isPreview
             />
           </Flex>
         )}

apps/builder/playwright/tests/integrations/sendEmail.spec.ts

@@ -70,11 +70,8 @@ test.describe('Send email step', () => {
 
     await page.click('text=Preview')
     await typebotViewer(page).locator('text=Go').click()
-    await page.waitForResponse(
+    await expect(
-      (resp) =>
+      page.locator('text=Emails are not sent in preview mode')
-        resp.request().url().includes('/api/integrations/email') &&
+    ).toBeVisible()
-        resp.status() === 200 &&
-        resp.request().method() === 'POST'
-    )
   })
 })

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -31,7 +31,8 @@ export const ChatBlock = ({
   onScroll,
   onBlockEnd,
 }: ChatBlockProps) => {
-  const { typebot, updateVariableValue, createEdge, apiHost } = useTypebot()
+  const { typebot, updateVariableValue, createEdge, apiHost, isPreview } =
+    useTypebot()
   const [displayedSteps, setDisplayedSteps] = useState<PublicStep[]>([])
 
   const currentStepIndex = displayedSteps.length - 1
@@ -67,6 +68,7 @@ export const ChatBlock = ({
           typebotId: typebot.id,
           indices: { blockIndex, stepIndex: currentStepIndex },
           variables: typebot.variables,
+          isPreview,
           updateVariableValue,
         },
       })

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -14,6 +14,7 @@ import { Answer, BackgroundType, Edge, PublicTypebot } from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
+  isPreview?: boolean
   apiHost?: string
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => void
@@ -22,6 +23,7 @@ export type TypebotViewerProps = {
 export const TypebotViewer = ({
   typebot,
   apiHost = process.env.NEXT_PUBLIC_VIEWER_HOST,
+  isPreview = false,
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
@@ -66,7 +68,7 @@ export const TypebotViewer = ({
           }:wght@300;400;600&display=swap');`,
         }}
       />
-      <TypebotContext typebot={typebot} apiHost={apiHost}>
+      <TypebotContext typebot={typebot} apiHost={apiHost} isPreview={isPreview}>
         <AnswersContext>
           <div
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"

packages/bot-engine/src/contexts/TypebotContext.tsx

@@ -4,6 +4,7 @@ import React, { createContext, ReactNode, useContext, useState } from 'react'
 const typebotContext = createContext<{
   typebot: PublicTypebot
   apiHost: string
+  isPreview: boolean
   updateVariableValue: (variableId: string, value: string) => void
   createEdge: (edge: Edge) => void
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14,10 +15,12 @@ export const TypebotContext = ({
   children,
   typebot,
   apiHost,
+  isPreview,
 }: {
   children: ReactNode
   typebot: PublicTypebot
   apiHost: string
+  isPreview: boolean
 }) => {
   const [localTypebot, setLocalTypebot] = useState<PublicTypebot>(typebot)
 
@@ -42,6 +45,7 @@ export const TypebotContext = ({
       value={{
         typebot: localTypebot,
         apiHost,
+        isPreview,
         updateVariableValue,
         createEdge,
       }}

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

@@ -15,6 +15,7 @@ import {
 import { stringify } from 'qs'
 import { sendRequest } from 'utils'
 import { sendGaEvent } from '../../lib/gtag'
+import { sendInfoMessage } from './postMessage'
 import { parseVariables, parseVariablesInObject } from './variable'
 
 const safeEval = eval
@@ -24,6 +25,7 @@ type IntegrationContext = {
   apiHost: string
   typebotId: string
   indices: Indices
+  isPreview: boolean
   variables: Variable[]
   updateVariableValue: (variableId: string, value: string) => void
 }
@@ -177,8 +179,10 @@ const executeWebhook = async (
 
 const sendEmail = async (
   step: SendEmailStep,
-  { variables, apiHost }: IntegrationContext
+  { variables, apiHost, isPreview }: IntegrationContext
 ) => {
+  if (isPreview) sendInfoMessage('Emails are not sent in preview mode')
+  if (isPreview) return step.outgoingEdgeId
   const { options } = step
   const { error } = await sendRequest({
     url: `${apiHost}/api/integrations/email`,

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

@@ -0,0 +1,3 @@
+export const sendInfoMessage = (typebotInfo: string) => {
+  parent.postMessage({ typebotInfo })
+}