♻️ (viewer) Change to features-centric folder structure

apps/viewer/src/features/answers/index.ts

@@ -0,0 +1 @@
+export { upsertAnswerQuery } from './queries/upsertAnswerQuery'

apps/viewer/src/features/answers/queries/upsertAnswerQuery.ts

@@ -0,0 +1,11 @@
+import { Answer } from 'models'
+import { sendRequest } from 'utils'
+
+export const upsertAnswerQuery = async (
+  answer: Answer & { resultId: string } & { uploadedFiles?: boolean }
+) =>
+  sendRequest<Answer>({
+    url: `/api/typebots/t/results/r/answers`,
+    method: 'PUT',
+    body: answer,
+  })

apps/viewer/src/features/auth/api/authenticateUser.ts

@@ -0,0 +1,19 @@
+import { User } from 'db'
+import { NextApiRequest } from 'next'
+import prisma from '@/lib/prisma'
+
+export const authenticateUser = async (
+  req: NextApiRequest
+): Promise<User | undefined> => authenticateByToken(extractBearerToken(req))
+
+const authenticateByToken = async (
+  apiToken?: string
+): Promise<User | undefined> => {
+  if (!apiToken) return
+  return (await prisma.user.findFirst({
+    where: { apiTokens: { some: { token: apiToken } } },
+  })) as User
+}
+
+const extractBearerToken = (req: NextApiRequest) =>
+  req.headers['authorization']?.slice(7)

apps/viewer/src/features/auth/api/index.ts

@@ -0,0 +1 @@
+export { authenticateUser } from './authenticateUser'

apps/viewer/src/features/chatwoot/chatwoot.spec.ts

@@ -0,0 +1,31 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { defaultChatwootOptions, IntegrationBlockType } from 'models'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+const typebotId = cuid()
+
+const chatwootTestWebsiteToken = 'tueXiiqEmrWUCZ4NUyoR7nhE'
+
+test('should work as expected', async ({ page }) => {
+  await createTypebots([
+    {
+      id: typebotId,
+      ...parseDefaultGroupWithBlock(
+        {
+          type: IntegrationBlockType.CHATWOOT,
+          options: {
+            ...defaultChatwootOptions,
+            websiteToken: chatwootTestWebsiteToken,
+          },
+        },
+        { withGoButton: true }
+      ),
+    },
+  ])
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page).getByRole('button', { name: 'Go' }).click()
+  await expect(page.locator('#chatwoot_live_chat_widget')).toBeVisible()
+})

apps/viewer/src/features/fileUpload/fileUpload.spec.ts

@@ -0,0 +1,119 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import { parse } from 'papaparse'
+import { readFileSync } from 'fs'
+import { isDefined } from 'utils'
+import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { getTestAsset } from '@/test/utils/playwright'
+
+// const THREE_GIGABYTES = 3 * 1024 * 1024 * 1024
+
+test('should work as expected', async ({ page, browser }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(getTestAsset('typebots/fileUpload.json'), {
+    id: typebotId,
+    publicId: `${typebotId}-public`,
+  })
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page)
+    .locator(`input[type="file"]`)
+    .setInputFiles([
+      getTestAsset('typebots/api.json'),
+      getTestAsset('typebots/fileUpload.json'),
+      getTestAsset('typebots/hugeGroup.json'),
+    ])
+  await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
+  await typebotViewer(page).locator('text="Upload 3 files"').click()
+  await expect(
+    typebotViewer(page).locator(`text="3 files uploaded"`)
+  ).toBeVisible()
+  await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
+  await expect(page.getByRole('link', { name: 'api.json' })).toHaveAttribute(
+    'href',
+    /.+\/api\.json/
+  )
+  await expect(
+    page.getByRole('link', { name: 'fileUpload.json' })
+  ).toHaveAttribute('href', /.+\/fileUpload\.json/)
+  await expect(
+    page.getByRole('link', { name: 'hugeGroup.json' })
+  ).toHaveAttribute('href', /.+\/hugeGroup\.json/)
+
+  await page.click('[data-testid="checkbox"] >> nth=0')
+  const [download] = await Promise.all([
+    page.waitForEvent('download'),
+    page.locator('text="Export"').click(),
+  ])
+  const downloadPath = await download.path()
+  expect(downloadPath).toBeDefined()
+  const file = readFileSync(downloadPath as string).toString()
+  const { data } = parse(file)
+  expect(data).toHaveLength(2)
+  expect((data[1] as unknown[])[1]).toContain(process.env.S3_ENDPOINT)
+
+  const urls = (
+    await Promise.all(
+      [
+        page.getByRole('link', { name: 'api.json' }),
+        page.getByRole('link', { name: 'fileUpload.json' }),
+        page.getByRole('link', { name: 'hugeGroup.json' }),
+      ].map((elem) => elem.getAttribute('href'))
+    )
+  ).filter(isDefined)
+
+  const page2 = await browser.newPage()
+  await page2.goto(urls[0])
+  await expect(page2.locator('pre')).toBeVisible()
+
+  await page.locator('button >> text="Delete"').click()
+  await page.locator('button >> text="Delete" >> nth=1').click()
+  await expect(page.locator('text="api.json"')).toBeHidden()
+  await page2.goto(urls[0])
+  await expect(page2.locator('pre')).toBeHidden()
+})
+
+// TODO: uncomment on 1st of November
+
+// test.describe('Storage limit is reached', () => {
+//   const typebotId = cuid()
+
+//   test.beforeAll(async () => {
+//     await importTypebotInDatabase(
+//       path.join(__dirname, '../fixtures/typebots/fileUpload.json'),
+//       {
+//         id: typebotId,
+//         publicId: `${typebotId}-public`,
+//       }
+//     )
+//     await createResults({
+//       typebotId,
+//       count: 20,
+//       fakeStorage: THREE_GIGABYTES,
+//     })
+//   })
+
+//   test("shouldn't upload anything if limit has been reached", async ({
+//     page,
+//   }) => {
+//     await page.goto(`/${typebotId}-public`)
+//     await typebotViewer(page)
+//       .locator(`input[type="file"]`)
+//       .setInputFiles([
+//         path.join(__dirname, '../fixtures/typebots/api.json'),
+//         path.join(__dirname, '../fixtures/typebots/fileUpload.json'),
+//         path.join(__dirname, '../fixtures/typebots/hugeGroup.json'),
+//       ])
+//     await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
+//     await typebotViewer(page).locator('text="Upload 3 files"').click()
+//     await expect(
+//       typebotViewer(page).locator(`text="3 files uploaded"`)
+//     ).toBeVisible()
+//     await page.evaluate(() =>
+//       window.localStorage.setItem('workspaceId', 'starterWorkspace')
+//     )
+//     await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
+//     await expect(page.locator('text="150%"')).toBeVisible()
+//     await expect(page.locator('text="api.json"')).toBeHidden()
+//   })
+// })

apps/viewer/src/features/logs/api/index.ts

@@ -0,0 +1,2 @@
+export * from './saveErrorLog'
+export * from './saveSuccessLog'

apps/viewer/src/features/logs/api/saveErrorLog.ts

@@ -0,0 +1,7 @@
+import { saveLog } from './utils'
+
+export const saveErrorLog = (
+  resultId: string | undefined,
+  message: string,
+  details?: unknown
+) => saveLog('error', resultId, message, details)

apps/viewer/src/features/logs/api/saveSuccessLog.ts

@@ -0,0 +1,7 @@
+import { saveLog } from './utils'
+
+export const saveSuccessLog = (
+  resultId: string | undefined,
+  message: string,
+  details?: unknown
+) => saveLog('success', resultId, message, details)

apps/viewer/src/features/logs/api/utils.ts

@@ -0,0 +1,26 @@
+import prisma from '@/lib/prisma'
+
+export const saveLog = (
+  status: 'error' | 'success',
+  resultId: string | undefined,
+  message: string,
+  details?: unknown
+) => {
+  if (!resultId || resultId === 'undefined') return
+  return prisma.log.create({
+    data: {
+      resultId,
+      status,
+      description: message,
+      details: formatDetails(details) as string,
+    },
+  })
+}
+
+const formatDetails = (details: unknown) => {
+  try {
+    return JSON.stringify(details, null, 2).substring(0, 1000)
+  } catch {
+    return details
+  }
+}

apps/viewer/src/features/results/index.ts

@@ -0,0 +1 @@
+export { createResultQuery, updateResultQuery } from './queries'

apps/viewer/src/features/results/queries/createResultQuery.ts

@@ -0,0 +1,9 @@
+import { Result } from 'models'
+import { sendRequest } from 'utils'
+
+export const createResultQuery = async (typebotId: string) => {
+  return sendRequest<{ result: Result; hasReachedLimit: boolean }>({
+    url: `/api/typebots/${typebotId}/results`,
+    method: 'POST',
+  })
+}

apps/viewer/src/features/results/queries/index.ts

@@ -0,0 +1,2 @@
+export * from './createResultQuery'
+export * from './updateResultQuery'

apps/viewer/src/features/results/queries/updateResultQuery.ts

@@ -0,0 +1,12 @@
+import { Result } from 'models'
+import { sendRequest } from 'utils'
+
+export const updateResultQuery = async (
+  resultId: string,
+  result: Partial<Result>
+) =>
+  sendRequest<Result>({
+    url: `/api/typebots/t/results/${resultId}`,
+    method: 'PATCH',
+    body: result,
+  })

apps/viewer/src/features/results/results.spec.ts

@@ -0,0 +1,51 @@
+import { getTestAsset } from '@/test/utils/playwright'
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import {
+  importTypebotInDatabase,
+  injectFakeResults,
+} from 'utils/playwright/databaseActions'
+import { apiToken } from 'utils/playwright/databaseSetup'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+test('Big groups should work as expected', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(getTestAsset('typebots/hugeGroup.json'), {
+    id: typebotId,
+    publicId: `${typebotId}-public`,
+  })
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page).locator('input').fill('Baptiste')
+  await typebotViewer(page).locator('input').press('Enter')
+  await typebotViewer(page).locator('input').fill('26')
+  await typebotViewer(page).locator('input').press('Enter')
+  await typebotViewer(page).locator('button >> text=Yes').click()
+  await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
+  await expect(page.locator('text="Baptiste"')).toBeVisible()
+  await expect(page.locator('text="26"')).toBeVisible()
+  await expect(page.locator('text="Yes"')).toBeVisible()
+  await page.hover('tbody > tr')
+  await page.click('button >> text="Open"')
+  await expect(page.locator('text="Baptiste" >> nth=1')).toBeVisible()
+  await expect(page.locator('text="26" >> nth=1')).toBeVisible()
+  await expect(page.locator('text="Yes" >> nth=1')).toBeVisible()
+})
+
+test('can list results with API', async ({ request }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(getTestAsset('typebots/api.json'), {
+    id: typebotId,
+  })
+  await injectFakeResults({ typebotId, count: 20 })
+  expect(
+    (await request.get(`/api/typebots/${typebotId}/results`)).status()
+  ).toBe(401)
+  const response = await request.get(
+    `/api/typebots/${typebotId}/results?limit=10`,
+    {
+      headers: { Authorization: `Bearer ${apiToken}` },
+    }
+  )
+  const { results } = await response.json()
+  expect(results).toHaveLength(10)
+})

apps/viewer/src/features/sendEmail/sendEmail.spec.ts

@@ -0,0 +1,56 @@
+import test, { expect } from '@playwright/test'
+import { createSmtpCredentials } from '../../test/utils/databaseActions'
+import cuid from 'cuid'
+import { SmtpCredentialsData } from 'models'
+import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { getTestAsset } from '@/test/utils/playwright'
+
+const mockSmtpCredentials: SmtpCredentialsData = {
+  from: {
+    email: 'marley.cummings@ethereal.email',
+    name: 'Marley Cummings',
+  },
+  host: 'smtp.ethereal.email',
+  port: 587,
+  username: 'marley.cummings@ethereal.email',
+  password: 'E5W1jHbAmv5cXXcut2',
+}
+
+test.beforeAll(async () => {
+  try {
+    const credentialsId = 'send-email-credentials'
+    await createSmtpCredentials(credentialsId, mockSmtpCredentials)
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+test('should send an email', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(getTestAsset('typebots/sendEmail.json'), {
+    id: typebotId,
+    publicId: `${typebotId}-public`,
+  })
+  await page.goto(`/${typebotId}-public`)
+  const [response] = await Promise.all([
+    page.waitForResponse((resp) =>
+      resp.request().url().includes(`integrations/email`)
+    ),
+    typebotViewer(page).locator('text=Send email').click(),
+  ])
+  const { previewUrl } = await response.json()
+  await page.goto(previewUrl)
+  await expect(page.locator('text="Hey!"')).toBeVisible()
+  await expect(
+    page.locator(`text="${mockSmtpCredentials.from.name}"`)
+  ).toBeVisible()
+  await expect(page.locator('text="<test1@gmail.com>" >> nth=0')).toBeVisible()
+  await expect(page.locator('text="<test2@gmail.com>" >> nth=0')).toBeVisible()
+  await expect(
+    page.locator('text="<baptiste.arnaud95@gmail.com>" >> nth=0')
+  ).toBeVisible()
+  await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
+  await page.click('text="See logs"')
+  await expect(page.locator('text="Email successfully sent"')).toBeVisible()
+})

apps/viewer/src/features/settings/settings.spec.ts

@@ -0,0 +1,177 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import {
+  defaultSettings,
+  defaultTextInputOptions,
+  InputBlockType,
+  Metadata,
+} from 'models'
+import { createTypebots, updateTypebot } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+test('Result should be in storage by default', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+    },
+  ])
+  await Promise.all([
+    page.goto(`/${typebotId}-public`),
+    page.waitForResponse(
+      (resp) =>
+        resp.request().url().includes(`/api/typebots/${typebotId}/results`) &&
+        resp.status() === 200 &&
+        resp.request().method() === 'POST'
+    ),
+  ])
+  await page.reload()
+  const resultId = await page.evaluate(() => sessionStorage.getItem('resultId'))
+  expect(resultId).toBeDefined()
+})
+
+test.describe('Create result on page refresh enabled', () => {
+  test('should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        settings: {
+          ...defaultSettings,
+          general: {
+            ...defaultSettings.general,
+            isNewResultOnRefreshEnabled: true,
+          },
+        },
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.TEXT,
+          options: defaultTextInputOptions,
+        }),
+      },
+    ])
+    await Promise.all([
+      page.goto(`/${typebotId}-public`),
+      page.waitForResponse(
+        (resp) =>
+          resp.request().url().includes(`/api/typebots/${typebotId}/results`) &&
+          resp.status() === 200 &&
+          resp.request().method() === 'POST'
+      ),
+    ])
+    await Promise.all([
+      page.reload(),
+      page.waitForResponse(
+        (resp) =>
+          resp.request().url().includes(`/api/typebots/${typebotId}/results`) &&
+          resp.status() === 200 &&
+          resp.request().method() === 'POST'
+      ),
+    ])
+    const resultId = await page.evaluate(() =>
+      sessionStorage.getItem('resultId')
+    )
+    expect(resultId).toBe(null)
+  })
+})
+
+test('Hide query params', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+    },
+  ])
+  await page.goto(`/${typebotId}-public?Name=John`)
+  await page.waitForTimeout(1000)
+  expect(page.url()).toEqual(`http://localhost:3001/${typebotId}-public`)
+  await updateTypebot({
+    id: typebotId,
+    settings: {
+      ...defaultSettings,
+      general: { ...defaultSettings.general, isHideQueryParamsEnabled: false },
+    },
+  })
+  await page.goto(`/${typebotId}-public?Name=John`)
+  await page.waitForTimeout(1000)
+  expect(page.url()).toEqual(
+    `http://localhost:3001/${typebotId}-public?Name=John`
+  )
+})
+
+test('Show close message', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+      isClosed: true,
+    },
+  ])
+  await page.goto(`/${typebotId}-public`)
+  await expect(page.locator('text=This bot is now closed')).toBeVisible()
+})
+
+test('Should correctly parse metadata', async ({ page }) => {
+  const typebotId = cuid()
+  const customMetadata: Metadata = {
+    description: 'My custom description',
+    title: 'Custom title',
+    favIconUrl: 'https://www.baptistearno.com/favicon.png',
+    imageUrl: 'https://www.baptistearno.com/images/site-preview.png',
+    customHeadCode: '<meta name="author" content="John Doe">',
+  }
+  await createTypebots([
+    {
+      id: typebotId,
+      settings: {
+        ...defaultSettings,
+        metadata: customMetadata,
+      },
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+    },
+  ])
+  await page.goto(`/${typebotId}-public`)
+  expect(
+    await page.evaluate(`document.querySelector('title').textContent`)
+  ).toBe(customMetadata.title)
+  expect(
+    await page.evaluate(
+      () => (document.querySelector('meta[name="description"]') as any).content
+    )
+  ).toBe(customMetadata.description)
+  expect(
+    await page.evaluate(
+      () => (document.querySelector('meta[property="og:image"]') as any).content
+    )
+  ).toBe(customMetadata.imageUrl)
+  expect(
+    await page.evaluate(() =>
+      (document.querySelector('link[rel="icon"]') as any).getAttribute('href')
+    )
+  ).toBe(customMetadata.favIconUrl)
+  expect(
+    await page.evaluate(
+      () => (document.querySelector('meta[name="author"]') as any).content
+    )
+  ).toBe('John Doe')
+  await expect(
+    typebotViewer(page).locator(
+      `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`
+    )
+  ).toBeVisible()
+})

apps/viewer/src/features/typebotLink/api/getLinkedTypebots.ts

@@ -0,0 +1,41 @@
+import prisma from '@/lib/prisma'
+import { canReadTypebots } from '@/utils/api/dbRules'
+import { User } from 'db'
+import {
+  LogicBlockType,
+  PublicTypebot,
+  Typebot,
+  TypebotLinkBlock,
+} from 'models'
+import { isDefined } from 'utils'
+
+export const getLinkedTypebots = async (
+  typebot: Typebot | PublicTypebot,
+  user?: User
+): Promise<(Typebot | PublicTypebot)[]> => {
+  const linkedTypebotIds = (
+    typebot.groups
+      .flatMap((g) => g.blocks)
+      .filter(
+        (s) =>
+          s.type === LogicBlockType.TYPEBOT_LINK &&
+          isDefined(s.options.typebotId)
+      ) as TypebotLinkBlock[]
+  ).map((s) => s.options.typebotId as string)
+  if (linkedTypebotIds.length === 0) return []
+  const typebots = (await ('typebotId' in typebot
+    ? prisma.publicTypebot.findMany({
+        where: { id: { in: linkedTypebotIds } },
+      })
+    : prisma.typebot.findMany({
+        where: user
+          ? {
+              AND: [
+                { id: { in: linkedTypebotIds } },
+                canReadTypebots(linkedTypebotIds, user as User),
+              ],
+            }
+          : { id: { in: linkedTypebotIds } },
+      }))) as unknown as (Typebot | PublicTypebot)[]
+  return typebots
+}

apps/viewer/src/features/typebotLink/api/index.ts

@@ -0,0 +1 @@
+export * from './getLinkedTypebots'

apps/viewer/src/features/typebotLink/typebotLink.spec.ts

@@ -0,0 +1,38 @@
+import { getTestAsset } from '@/test/utils/playwright'
+import test, { expect } from '@playwright/test'
+import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+const typebotId = 'cl0ibhi7s0018n21aarlmg0cm'
+const linkedTypebotId = 'cl0ibhv8d0130n21aw8doxhj5'
+
+test.beforeAll(async () => {
+  try {
+    await importTypebotInDatabase(
+      getTestAsset('typebots/linkTypebots/1.json'),
+      { id: typebotId, publicId: `${typebotId}-public` }
+    )
+    await importTypebotInDatabase(
+      getTestAsset('typebots/linkTypebots/2.json'),
+      { id: linkedTypebotId, publicId: `${linkedTypebotId}-public` }
+    )
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+test('should work as expected', async ({ page }) => {
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page).locator('input').fill('Hello there!')
+  await Promise.all([
+    page.waitForResponse(
+      (resp) =>
+        resp.request().url().includes(`/api/typebots/t/results`) &&
+        resp.status() === 200 &&
+        resp.request().method() === 'PUT'
+    ),
+    typebotViewer(page).locator('input').press('Enter'),
+  ])
+  await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
+  await expect(page.locator('text=Hello there!')).toBeVisible()
+})

apps/viewer/src/features/usage/usage.spec.ts

@@ -0,0 +1,19 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+
+// TODO: uncomment on 1st of November
+
+// test('should not start if chat limit is reached', async ({ page }) => {
+//   const typebotId = cuid()
+//   await importTypebotInDatabase(
+//     path.join(__dirname, '../fixtures/typebots/fileUpload.json'),
+//     {
+//       id: typebotId,
+//       publicId: `${typebotId}-public`,
+//       workspaceId: limitTestWorkspaceId,
+//     }
+//   )
+//   await createResults({ typebotId, count: 320 })
+//   await page.goto(`/${typebotId}-public`)
+//   await expect(page.locator('text="This bot is now closed."')).toBeVisible()
+// })

apps/viewer/src/features/variables/variables.spec.ts

@@ -0,0 +1,22 @@
+import { getTestAsset } from '@/test/utils/playwright'
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+test('should correctly be injected', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    getTestAsset('typebots/predefinedVariables.json'),
+    { id: typebotId, publicId: `${typebotId}-public` }
+  )
+  await page.goto(`/${typebotId}-public`)
+  await expect(typebotViewer(page).locator('text="Your name is"')).toBeVisible()
+  await page.goto(`/${typebotId}-public?Name=Baptiste&Email=email@test.com`)
+  await expect(
+    typebotViewer(page).locator('text="Your name is Baptiste"')
+  ).toBeVisible()
+  await expect(
+    typebotViewer(page).locator('input[value="email@test.com"]')
+  ).toBeVisible()
+})

apps/viewer/src/features/webhook/api/index.ts

@@ -0,0 +1 @@
+export * from './parseSampleResult'

apps/viewer/src/features/webhook/api/parseSampleResult.ts

@@ -0,0 +1,192 @@
+import {
+  InputBlock,
+  InputBlockType,
+  LogicBlockType,
+  PublicTypebot,
+  ResultHeaderCell,
+  Block,
+  Typebot,
+  TypebotLinkBlock,
+} from 'models'
+import { isInputBlock, byId, parseResultHeader, isNotDefined } from 'utils'
+
+export const parseSampleResult =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    linkedTypebots: (Typebot | PublicTypebot)[]
+  ) =>
+  async (
+    currentGroupId: string
+  ): Promise<Record<string, string | boolean | undefined>> => {
+    const header = parseResultHeader(typebot, linkedTypebots)
+    const linkedInputBlocks = await extractLinkedInputBlocks(
+      typebot,
+      linkedTypebots
+    )(currentGroupId)
+
+    return {
+      message: 'This is a sample result, it has been generated ⬇️',
+      'Submitted at': new Date().toISOString(),
+      ...parseResultSample(linkedInputBlocks, header),
+    }
+  }
+
+const extractLinkedInputBlocks =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    linkedTypebots: (Typebot | PublicTypebot)[]
+  ) =>
+  async (
+    currentGroupId?: string,
+    direction: 'backward' | 'forward' = 'backward'
+  ): Promise<InputBlock[]> => {
+    const previousLinkedTypebotBlocks = walkEdgesAndExtract(
+      'linkedBot',
+      direction,
+      typebot
+    )({
+      groupId: currentGroupId,
+    }) as TypebotLinkBlock[]
+
+    const linkedBotInputs =
+      previousLinkedTypebotBlocks.length > 0
+        ? await Promise.all(
+            previousLinkedTypebotBlocks.map((linkedBot) =>
+              extractLinkedInputBlocks(
+                linkedTypebots.find((t) =>
+                  'typebotId' in t
+                    ? t.typebotId === linkedBot.options.typebotId
+                    : t.id === linkedBot.options.typebotId
+                ) as Typebot | PublicTypebot,
+                linkedTypebots
+              )(linkedBot.options.groupId, 'forward')
+            )
+          )
+        : []
+
+    return (
+      walkEdgesAndExtract(
+        'input',
+        direction,
+        typebot
+      )({
+        groupId: currentGroupId,
+      }) as InputBlock[]
+    ).concat(linkedBotInputs.flatMap((l) => l))
+  }
+
+const parseResultSample = (
+  inputBlocks: InputBlock[],
+  headerCells: ResultHeaderCell[]
+) =>
+  headerCells.reduce<Record<string, string | boolean | undefined>>(
+    (resultSample, cell) => {
+      const inputBlock = inputBlocks.find((inputBlock) =>
+        cell.blocks?.some((block) => block.id === inputBlock.id)
+      )
+      if (isNotDefined(inputBlock)) {
+        if (cell.variableIds)
+          return {
+            ...resultSample,
+            [cell.label]: 'content',
+          }
+        return resultSample
+      }
+      const value = getSampleValue(inputBlock)
+      return {
+        ...resultSample,
+        [cell.label]: value,
+      }
+    },
+    {}
+  )
+
+const getSampleValue = (block: InputBlock) => {
+  switch (block.type) {
+    case InputBlockType.CHOICE:
+      return block.options.isMultipleChoice
+        ? block.items.map((i) => i.content).join(', ')
+        : block.items[0]?.content ?? 'Item'
+    case InputBlockType.DATE:
+      return new Date().toUTCString()
+    case InputBlockType.EMAIL:
+      return 'test@email.com'
+    case InputBlockType.NUMBER:
+      return '20'
+    case InputBlockType.PHONE:
+      return '+33665566773'
+    case InputBlockType.TEXT:
+      return 'answer value'
+    case InputBlockType.URL:
+      return 'https://test.com'
+  }
+}
+
+const walkEdgesAndExtract =
+  (
+    type: 'input' | 'linkedBot',
+    direction: 'backward' | 'forward',
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>
+  ) =>
+  ({ groupId }: { groupId?: string }): Block[] => {
+    const currentGroupId =
+      groupId ??
+      (typebot.groups.find((b) => b.blocks[0].type === 'start')?.id as string)
+    const blocksInGroup = extractBlocksInGroup(
+      type,
+      typebot
+    )({
+      groupId: currentGroupId,
+    })
+    const otherGroupIds = getGroupIds(typebot, direction)(currentGroupId)
+    return [
+      ...blocksInGroup,
+      ...otherGroupIds.flatMap((groupId) =>
+        extractBlocksInGroup(type, typebot)({ groupId })
+      ),
+    ]
+  }
+
+const getGroupIds =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    direction: 'backward' | 'forward',
+    existingGroupIds?: string[]
+  ) =>
+  (groupId: string): string[] => {
+    const groups = typebot.edges.reduce<string[]>((groupIds, edge) => {
+      if (direction === 'forward')
+        return (!existingGroupIds ||
+          !existingGroupIds?.includes(edge.to.groupId)) &&
+          edge.from.groupId === groupId
+          ? [...groupIds, edge.to.groupId]
+          : groupIds
+      return (!existingGroupIds ||
+        !existingGroupIds.includes(edge.from.groupId)) &&
+        edge.to.groupId === groupId
+        ? [...groupIds, edge.from.groupId]
+        : groupIds
+    }, [])
+    const newGroups = [...(existingGroupIds ?? []), ...groups]
+    return groups.concat(
+      groups.flatMap(getGroupIds(typebot, direction, newGroups))
+    )
+  }
+
+const extractBlocksInGroup =
+  (
+    type: 'input' | 'linkedBot',
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>
+  ) =>
+  ({ groupId, blockId }: { groupId: string; blockId?: string }) => {
+    const currentGroup = typebot.groups.find(byId(groupId))
+    if (!currentGroup) return []
+    const blocks: Block[] = []
+    for (const block of currentGroup.blocks) {
+      if (block.id === blockId) break
+      if (type === 'input' && isInputBlock(block)) blocks.push(block)
+      if (type === 'linkedBot' && block.type === LogicBlockType.TYPEBOT_LINK)
+        blocks.push(block)
+    }
+    return blocks
+  }

apps/viewer/src/features/webhook/webhook.spec.ts

@@ -0,0 +1,198 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import { HttpMethod } from 'models'
+import {
+  createWebhook,
+  deleteTypebots,
+  deleteWebhooks,
+  importTypebotInDatabase,
+} from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { apiToken } from 'utils/playwright/databaseSetup'
+import { getTestAsset } from '@/test/utils/playwright'
+
+test.describe('Bot', () => {
+  const typebotId = cuid()
+
+  test.beforeEach(async () => {
+    await importTypebotInDatabase(getTestAsset('typebots/webhook.json'), {
+      id: typebotId,
+      publicId: `${typebotId}-public`,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'failing-webhook',
+      url: 'http://localhost:3001/api/mock/fail',
+      method: HttpMethod.POST,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'partial-body-webhook',
+      url: 'http://localhost:3000/api/mock/webhook-easy-config',
+      method: HttpMethod.POST,
+      body: `{
+        "name": "{{Name}}",
+        "age": {{Age}},
+        "gender": "{{Gender}}"
+      }`,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'full-body-webhook',
+      url: 'http://localhost:3000/api/mock/webhook-easy-config',
+      method: HttpMethod.POST,
+      body: `{{Full body}}`,
+    })
+  })
+
+  test.afterEach(async () => {
+    await deleteTypebots([typebotId])
+    await deleteWebhooks([
+      'failing-webhook',
+      'partial-body-webhook',
+      'full-body-webhook',
+    ])
+  })
+
+  test('should execute webhooks properly', async ({ page }) => {
+    await page.goto(`/${typebotId}-public`)
+    await typebotViewer(page).locator('text=Send failing webhook').click()
+    await typebotViewer(page)
+      .locator('[placeholder="Type a name..."]')
+      .fill('John')
+    await typebotViewer(page).locator('text="Send"').click()
+    await typebotViewer(page)
+      .locator('[placeholder="Type an age..."]')
+      .fill('30')
+    await typebotViewer(page).locator('text="Send"').click()
+    await typebotViewer(page).locator('text="Male"').click()
+    await expect(
+      typebotViewer(page).getByText('{"name":"John","age":25,"gender":"male"}')
+    ).toBeVisible()
+    await expect(
+      typebotViewer(page).getByText('{"name":"John","age":30,"gender":"Male"}')
+    ).toBeVisible()
+    await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
+    await page.click('text="See logs"')
+    await expect(
+      page.locator('text="Webhook successfuly executed." >> nth=1')
+    ).toBeVisible()
+    await expect(page.locator('text="Webhook returned an error"')).toBeVisible()
+  })
+})
+
+test.describe('API', () => {
+  const typebotId = 'webhook-flow'
+
+  test.beforeAll(async () => {
+    try {
+      await importTypebotInDatabase(getTestAsset('typebots/api.json'), {
+        id: typebotId,
+      })
+      await createWebhook(typebotId)
+    } catch (err) {
+      console.log(err)
+    }
+  })
+
+  test('can list typebots', async ({ request }) => {
+    expect((await request.get(`/api/typebots`)).status()).toBe(401)
+    const response = await request.get(`/api/typebots`, {
+      headers: { Authorization: `Bearer ${apiToken}` },
+    })
+    const { typebots } = (await response.json()) as { typebots: unknown[] }
+    expect(typebots.length).toBeGreaterThanOrEqual(1)
+    expect(typebots[0]).toMatchObject({
+      id: typebotId,
+      publishedTypebotId: null,
+      name: 'My typebot',
+    })
+  })
+
+  test('can get webhook blocks', async ({ request }) => {
+    expect(
+      (await request.get(`/api/typebots/${typebotId}/webhookBlocks`)).status()
+    ).toBe(401)
+    const response = await request.get(
+      `/api/typebots/${typebotId}/webhookBlocks`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const { blocks } = await response.json()
+    expect(blocks).toHaveLength(1)
+    expect(blocks[0]).toEqual({
+      blockId: 'webhookBlock',
+      name: 'Webhook > webhookBlock',
+    })
+  })
+
+  test('can subscribe webhook', async ({ request }) => {
+    expect(
+      (
+        await request.post(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/subscribeWebhook`,
+          { data: { url: 'https://test.com' } }
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.post(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/subscribeWebhook`,
+      {
+        headers: {
+          Authorization: `Bearer ${apiToken}`,
+        },
+        data: { url: 'https://test.com' },
+      }
+    )
+    const body = await response.json()
+    expect(body).toEqual({
+      message: 'success',
+    })
+  })
+
+  test('can unsubscribe webhook', async ({ request }) => {
+    expect(
+      (
+        await request.post(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/unsubscribeWebhook`
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.post(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/unsubscribeWebhook`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const body = await response.json()
+    expect(body).toEqual({
+      message: 'success',
+    })
+  })
+
+  test('can get a sample result', async ({ request }) => {
+    expect(
+      (
+        await request.get(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/sampleResult`
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.get(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/sampleResult`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const data = await response.json()
+    expect(data).toMatchObject({
+      message: 'This is a sample result, it has been generated ⬇️',
+      Welcome: 'Hi!',
+      Email: 'test@email.com',
+      Name: 'answer value',
+      Services: 'Website dev, Content Marketing, Social Media, UI / UX Design',
+      'Additional information': 'answer value',
+    })
+  })
+})