diff --git a/apps/builder/components/editor/preview/PreviewDrawer.tsx b/apps/builder/components/editor/preview/PreviewDrawer.tsx index 50a3fab01..69769ec4f 100644 --- a/apps/builder/components/editor/preview/PreviewDrawer.tsx +++ b/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 ( { )} diff --git a/apps/builder/playwright/tests/integrations/sendEmail.spec.ts b/apps/builder/playwright/tests/integrations/sendEmail.spec.ts index 32ddbd83c..1751ba317 100644 --- a/apps/builder/playwright/tests/integrations/sendEmail.spec.ts +++ b/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( - (resp) => - resp.request().url().includes('/api/integrations/email') && - resp.status() === 200 && - resp.request().method() === 'POST' - ) + await expect( + page.locator('text=Emails are not sent in preview mode') + ).toBeVisible() }) }) diff --git a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx b/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx index 6742a8895..3024ed349 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx +++ b/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([]) const currentStepIndex = displayedSteps.length - 1 @@ -67,6 +68,7 @@ export const ChatBlock = ({ typebotId: typebot.id, indices: { blockIndex, stepIndex: currentStepIndex }, variables: typebot.variables, + isPreview, updateVariableValue, }, }) diff --git a/packages/bot-engine/src/components/TypebotViewer.tsx b/packages/bot-engine/src/components/TypebotViewer.tsx index 33ce6678c..c3f1dc4eb 100644 --- a/packages/bot-engine/src/components/TypebotViewer.tsx +++ b/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');`, }} /> - +
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(typebot) @@ -42,6 +45,7 @@ export const TypebotContext = ({ value={{ typebot: localTypebot, apiHost, + isPreview, updateVariableValue, createEdge, }} diff --git a/packages/bot-engine/src/services/integration.ts b/packages/bot-engine/src/services/integration.ts index ea6b25df7..fb7c35732 100644 --- a/packages/bot-engine/src/services/integration.ts +++ b/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`, diff --git a/packages/bot-engine/src/services/postMessage.ts b/packages/bot-engine/src/services/postMessage.ts new file mode 100644 index 000000000..94244da4c --- /dev/null +++ b/packages/bot-engine/src/services/postMessage.ts @@ -0,0 +1,3 @@ +export const sendInfoMessage = (typebotInfo: string) => { + parent.postMessage({ typebotInfo }) +}