blsmedia/bot
2
0
Fork 0
Code Activity

fix(viewer): 🐛 Custom metadata in viewer

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-20 10:45:55 +01:00
parent feb966d513
commit 6ec8d06b97
8 changed files with 312 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/viewer/components/Seo.tsx
View File

@ -1,24 +1,26 @@
import { Metadata } from 'models'
import Head from 'next/head' import Head from 'next/head'
import React from 'react' import React from 'react'
type SEOProps = any type SEOProps = {
url: string
typebotName: string
metadata: Metadata
}
export const SEO = ({ export const SEO = ({
iconUrl,
thumbnailUrl,
title,
description,
url, url,
chatbotName, typebotName,
metadata: { title, description, favIconUrl, imageUrl },
}: SEOProps) => ( }: SEOProps) => (
<Head> <Head>
<title>{title ?? chatbotName}</title> <title>{title ?? typebotName}</title>
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
href={iconUrl ?? 'https://bot.typebot.io/favicon.png'} href={favIconUrl ?? 'https://bot.typebot.io/favicon.png'}
/> />
<meta name="title" content={title ?? chatbotName} /> <meta name="title" content={title ?? typebotName} />
<meta <meta
name="description" name="description"
content={ content={
@ -29,8 +31,8 @@ export const SEO = ({
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content={url ?? 'https://bot.typebot.io'} /> <meta property="og:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="og:title" content={title ?? chatbotName} /> <meta property="og:title" content={title ?? typebotName} />
<meta property="og:site_name" content={title ?? chatbotName} /> <meta property="og:site_name" content={title ?? typebotName} />
<meta <meta
property="og:description" property="og:description"
content={ content={
@ -41,12 +43,12 @@ export const SEO = ({
<meta <meta
property="og:image" property="og:image"
itemProp="image" itemProp="image"
content={thumbnailUrl ?? 'https://bot.typebot.io/site-preview.png'} content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/> />
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} /> <meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="twitter:title" content={title ?? chatbotName} /> <meta property="twitter:title" content={title ?? typebotName} />
<meta <meta
property="twitter:description" property="twitter:description"
content={ content={
@ -56,7 +58,7 @@ export const SEO = ({
/> />
<meta <meta
property="twitter:image" property="twitter:image"
content={thumbnailUrl ?? 'https://bot.typebot.io/site-preview.png'} content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/> />
</Head> </Head>
) )

6
apps/viewer/layouts/TypebotPage.tsx
View File

@ -63,7 +63,11 @@ export const TypebotPage = ({
} }
return ( return (
<div style={{ height: '100vh' }}> <div style={{ height: '100vh' }}>
<SEO url={url} chatbotName={typebot.name} /> <SEO
url={url}
typebotName={typebot.name}
metadata={typebot.settings.metadata}
/>
{showTypebot && ( {showTypebot && (
<TypebotViewer <TypebotViewer
typebot={typebot} typebot={typebot}

4
apps/viewer/package.json
View File

@ -6,7 +6,9 @@
"dev": "next dev -p 3001", "dev": "next dev -p 3001",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint",
"test": "dotenv -e ./playwright/.env -e .env.local -- yarn playwright test",
"test:open": "dotenv -e ./playwright/.env -e .env.local -v PWDEBUG=1 -- yarn playwright test"
}, },
"dependencies": { "dependencies": {
"@sentry/nextjs": "^6.17.8", "@sentry/nextjs": "^6.17.8",

33
apps/viewer/playwright.config.ts Normal file
View File

@ -0,0 +1,33 @@
import { devices, PlaywrightTestConfig } from '@playwright/test'
import path from 'path'
const config: PlaywrightTestConfig = {
globalSetup: require.resolve(path.join(__dirname, 'playwright/global-setup')),
testDir: path.join(__dirname, 'playwright/tests'),
timeout: 10 * 2000,
expect: {
timeout: 5000,
},
retries: process.env.NO_RETRIES ? 0 : 2,
workers: process.env.CI ? 1 : 3,
reporter: 'html',
maxFailures: process.env.CI ? 10 : undefined,
use: {
actionTimeout: 0,
baseURL: process.env.NEXT_PUBLIC_VIEWER_HOST,
trace: 'on-first-retry',
video: 'retain-on-failure',
locale: 'en-US',
},
outputDir: path.join(__dirname, 'playwright/test-results/'),
projects: [
{
name: 'Chrome',
use: {
...devices['Desktop Chrome'],
viewport: { width: 1400, height: 1000 },
},
},
],
}
export default config

14
apps/viewer/playwright/global-setup.ts Normal file
View File

@ -0,0 +1,14 @@
import { FullConfig } from '@playwright/test'
import { setupDatabase, teardownDatabase } from './services/database'
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('dotenv').config({ path: '.env' })
async function globalSetup(config: FullConfig) {
const { baseURL } = config.projects[0].use
if (!baseURL) throw new Error('baseURL is missing')
await teardownDatabase()
await setupDatabase()
}
export default globalSetup

186
apps/viewer/playwright/services/database.ts Normal file
View File

@ -0,0 +1,186 @@
import {
Block,
CredentialsType,
defaultSettings,
defaultTheme,
PublicBlock,
PublicTypebot,
Step,
Typebot,
} from 'models'
import { PrismaClient, User } from 'db'
import { readFileSync } from 'fs'
import { encrypt } from 'utils'
const prisma = new PrismaClient()
export const teardownDatabase = async () => {
const ownerFilter = {
where: { ownerId: { in: ['freeUser', 'proUser'] } },
}
await prisma.user.deleteMany({
where: { id: { in: ['freeUser', 'proUser'] } },
})
await prisma.credentials.deleteMany(ownerFilter)
return prisma.typebot.deleteMany(ownerFilter)
}
export const setupDatabase = async () => {
await createUsers()
return createCredentials()
}
export const createUsers = () =>
prisma.user.createMany({
data: [
{ id: 'freeUser', email: 'free-user@email.com', name: 'Free user' },
{ id: 'proUser', email: 'pro-user@email.com', name: 'Pro user' },
],
})
export const getSignedInUser = (email: string) =>
prisma.user.findFirst({ where: { email } })
export const createTypebots = async (partialTypebots: Partial<Typebot>[]) => {
await prisma.typebot.createMany({
data: partialTypebots.map(parseTestTypebot) as any[],
})
return prisma.publicTypebot.createMany({
data: partialTypebots.map((t) =>
parseTypebotToPublicTypebot(t.id + '-published', parseTestTypebot(t))
) as any[],
})
}
const createCredentials = () => {
const { encryptedData, iv } = encrypt({
expiry_date: 1642441058842,
access_token:
'ya29.A0ARrdaM--PV_87ebjywDJpXKb77NBFJl16meVUapYdfNv6W6ZzqqC47fNaPaRjbDbOIIcp6f49cMaX5ndK9TAFnKwlVqz3nrK9nLKqgyDIhYsIq47smcAIZkK56SWPx3X3DwAFqRu2UPojpd2upWwo-3uJrod',
// This token is linked to a test Google account (typebot.test.user@gmail.com)
refresh_token:
'1//039xWRt8YaYa3CgYIARAAGAMSNwF-L9Iru9FyuTrDSa7lkSceggPho83kJt2J29G69iEhT1C6XV1vmo6bQS9puL_R2t8FIwR3gek',
})
return prisma.credentials.createMany({
data: [
{
name: 'test2@gmail.com',
ownerId: 'proUser',
type: CredentialsType.GOOGLE_SHEETS,
data: encryptedData,
iv,
},
],
})
}
export const updateUser = (data: Partial<User>) =>
prisma.user.update({
data,
where: {
id: 'proUser',
},
})
const parseTypebotToPublicTypebot = (
id: string,
typebot: Typebot
): PublicTypebot => ({
id,
name: typebot.name,
blocks: parseBlocksToPublicBlocks(typebot.blocks),
typebotId: typebot.id,
theme: typebot.theme,
settings: typebot.settings,
publicId: typebot.publicId,
variables: typebot.variables,
edges: typebot.edges,
customDomain: null,
})
const parseBlocksToPublicBlocks = (blocks: Block[]): PublicBlock[] =>
blocks.map((b) => ({
...b,
steps: b.steps.map((s) =>
'webhook' in s ? { ...s, webhook: s.webhook.id } : s
),
}))
const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
id: partialTypebot.id ?? 'typebot',
folderId: null,
name: 'My typebot',
ownerId: 'proUser',
theme: defaultTheme,
settings: defaultSettings,
createdAt: new Date(),
publicId: partialTypebot.id + '-public',
publishedTypebotId: null,
updatedAt: new Date(),
customDomain: null,
variables: [{ id: 'var1', name: 'var1' }],
...partialTypebot,
edges: [
{
id: 'edge1',
from: { blockId: 'block0', stepId: 'step0' },
to: { blockId: 'block1' },
},
],
blocks: [
{
id: 'block0',
title: 'Block #0',
steps: [
{
id: 'step0',
type: 'start',
blockId: 'block0',
label: 'Start',
outgoingEdgeId: 'edge1',
},
],
graphCoordinates: { x: 0, y: 0 },
},
...(partialTypebot.blocks ?? []),
],
})
export const parseDefaultBlockWithStep = (
step: Partial<Step>
): Pick<Typebot, 'blocks'> => ({
blocks: [
{
graphCoordinates: { x: 200, y: 200 },
id: 'block1',
steps: [
{
id: 'step1',
blockId: 'block1',
...step,
} as Step,
],
title: 'Block #1',
},
],
})
export const importTypebotInDatabase = async (
path: string,
updates?: Partial<Typebot>
) => {
const typebot: any = {
...JSON.parse(readFileSync(path).toString()),
...updates,
ownerId: 'proUser',
}
await prisma.typebot.create({
data: typebot,
})
return prisma.publicTypebot.create({
data: parseTypebotToPublicTypebot(
updates?.id ? `${updates?.id}-public` : 'publicBot',
typebot
),
})
}

4
apps/viewer/playwright/services/selectorUtils.ts Normal file
View File

@ -0,0 +1,4 @@
import { Page } from '@playwright/test'
export const typebotViewer = (page: Page) =>
page.frameLocator('#typebot-iframe')

51
apps/viewer/playwright/tests/metadata.spec.ts Normal file
View File

@ -0,0 +1,51 @@
import test, { expect } from '@playwright/test'
import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
import { generate } from 'short-uuid'
import {
defaultSettings,
defaultTextInputOptions,
InputStepType,
Metadata,
} from 'models'
test('Should correctly parse metadata', async ({ page }) => {
const typebotId = generate()
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',
}
await createTypebots([
{
id: typebotId,
settings: {
...defaultSettings,
metadata: customMetadata,
},
...parseDefaultBlockWithStep({
type: InputStepType.TEXT,
options: defaultTextInputOptions,
}),
},
])
await page.goto(`/${typebotId}-public`)
await expect(
await page.evaluate(`document.querySelector('title').textContent`)
).toBe(customMetadata.title)
await expect(
await page.evaluate(
() => (document.querySelector('meta[name="description"]') as any).content
)
).toBe(customMetadata.description)
await expect(
await page.evaluate(
() => (document.querySelector('meta[property="og:image"]') as any).content
)
).toBe(customMetadata.imageUrl)
await expect(
await page.evaluate(() =>
(document.querySelector('link[rel="icon"]') as any).getAttribute('href')
)
).toBe(customMetadata.favIconUrl)
})