fix(viewer): 🐛 Custom metadata in viewer
This commit is contained in:
Baptiste Arnaud
@@ -1,24 +1,26 @@
|
||||
import { Metadata } from 'models'
|
||||
import Head from 'next/head'
|
||||
import React from 'react'
|
||||
|
||||
type SEOProps = any
|
||||
type SEOProps = {
|
||||
url: string
|
||||
typebotName: string
|
||||
metadata: Metadata
|
||||
}
|
||||
|
||||
export const SEO = ({
|
||||
iconUrl,
|
||||
thumbnailUrl,
|
||||
title,
|
||||
description,
|
||||
url,
|
||||
chatbotName,
|
||||
typebotName,
|
||||
metadata: { title, description, favIconUrl, imageUrl },
|
||||
}: SEOProps) => (
|
||||
<Head>
|
||||
<title>{title ?? chatbotName}</title>
|
||||
<title>{title ?? typebotName}</title>
|
||||
<link
|
||||
rel="icon"
|
||||
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
|
||||
name="description"
|
||||
content={
|
||||
@@ -29,8 +31,8 @@ export const SEO = ({
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={url ?? 'https://bot.typebot.io'} />
|
||||
<meta property="og:title" content={title ?? chatbotName} />
|
||||
<meta property="og:site_name" content={title ?? chatbotName} />
|
||||
<meta property="og:title" content={title ?? typebotName} />
|
||||
<meta property="og:site_name" content={title ?? typebotName} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={
|
||||
@@ -41,12 +43,12 @@ export const SEO = ({
|
||||
<meta
|
||||
property="og: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:url" content={url ?? 'https://bot.typebot.io'} />
|
||||
<meta property="twitter:title" content={title ?? chatbotName} />
|
||||
<meta property="twitter:title" content={title ?? typebotName} />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content={
|
||||
@@ -56,7 +58,7 @@ export const SEO = ({
|
||||
/>
|
||||
<meta
|
||||
property="twitter:image"
|
||||
content={thumbnailUrl ?? 'https://bot.typebot.io/site-preview.png'}
|
||||
content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
|
||||
/>
|
||||
</Head>
|
||||
)
|
||||
|
||||
@@ -63,7 +63,11 @@ export const TypebotPage = ({
|
||||
}
|
||||
return (
|
||||
<div style={{ height: '100vh' }}>
|
||||
<SEO url={url} chatbotName={typebot.name} />
|
||||
<SEO
|
||||
url={url}
|
||||
typebotName={typebot.name}
|
||||
metadata={typebot.settings.metadata}
|
||||
/>
|
||||
{showTypebot && (
|
||||
<TypebotViewer
|
||||
typebot={typebot}
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
"dev": "next dev -p 3001",
|
||||
"build": "next build",
|
||||
"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": {
|
||||
"@sentry/nextjs": "^6.17.8",
|
||||
|
||||
33
apps/viewer/playwright.config.ts
Normal file
33
apps/viewer/playwright.config.ts
Normal 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
14
apps/viewer/playwright/global-setup.ts
Normal 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
186
apps/viewer/playwright/services/database.ts
Normal 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
4
apps/viewer/playwright/services/selectorUtils.ts
Normal 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
51
apps/viewer/playwright/tests/metadata.spec.ts
Normal 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)
|
||||
})
|
||||
Reference in New Issue
Block a user