blsmedia/bot
2
0
Fork 0
Code Activity

feat: ✨ Add new onboarding flow

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-23 09:56:39 +01:00
parent f9aba27aae
commit f4e6f63b26
32 changed files with 1115 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,11 +21,22 @@ export const TypebotPage = ({
url,
}: TypebotPageProps & { typebot: PublicTypebot }) => {
const [showTypebot, setShowTypebot] = useState(false)
const [predefinedVariables, setPredefinedVariables] =
useState<{ [key: string]: string }>()
const [error, setError] = useState<Error | undefined>(
isIE ? new Error('Internet explorer is not supported') : undefined
)
const [resultId, setResultId] = useState<string | undefined>()
useEffect(() => {
const urlParams = new URLSearchParams(location.search)
const predefinedVariables: { [key: string]: string } = {}
urlParams.forEach((value, key) => {
predefinedVariables[key] = value
})
setPredefinedVariables(predefinedVariables)
}, [])
// Workaround for react-frame-component bug (https://github.com/ryanseddon/react-frame-component/pull/207)
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
@ -83,6 +94,7 @@ export const TypebotPage = ({
{showTypebot && (
<TypebotViewer
typebot={typebot}
predefinedVariables={predefinedVariables}
onNewAnswer={handleNewAnswer}
onCompleted={handleCompleted}
onVariablesPrefilled={initializeResult}

1
apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/executeWebhook.ts
View File

@ -46,7 +46,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
.status(404)
.send({ statusCode: 404, data: { message: `Couldn't find webhook` } })
const preparedWebhook = prepareWebhookAttributes(webhook, step.options)
console.log(preparedWebhook)
const result = await executeWebhook(typebot)(
preparedWebhook,
variables,

122
apps/viewer/playwright/fixtures/typebots/predefinedVariables.json Normal file
View File

@ -0,0 +1,122 @@
{
"id": "cl13bgvlm0050t71aq6a3w777",
"createdAt": "2022-03-23T08:41:30.106Z",
"updatedAt": "2022-03-23T08:41:30.106Z",
"name": "My typebot",
"ownerId": "cl139ni700000481a01gxhw4z",
"publishedTypebotId": null,
"folderId": null,
"blocks": [
{
"id": "cl13bgvlk0000t71a4wabccvw",
"steps": [
{
"id": "cl13bgvlk0001t71a3pilbj53",
"type": "start",
"label": "Start",
"blockId": "cl13bgvlk0000t71a4wabccvw",
"outgoingEdgeId": "cl13bgz4800062e6dv7ejcchb"
}
],
"title": "Start",
"graphCoordinates": { "x": 0, "y": 0 }
},
{
"id": "cl13bgy1s00042e6dao1wyobm",
"graphCoordinates": { "x": 329, "y": 65 },
"title": "Block #1",
"steps": [
{
"id": "cl13bgy1w00052e6d5x57wt7o",
"blockId": "cl13bgy1s00042e6dao1wyobm",
"type": "text",
"content": {
"html": "<div>Hey I know you!</div>",
"richText": [
{ "type": "p", "children": [{ "text": "Hey I know you!" }] }
],
"plainText": "Hey I know you!"
}
},
{
"id": "cl13bh6jd00072e6dftdirwy4",
"blockId": "cl13bgy1s00042e6dao1wyobm",
"type": "text",
"content": {
"html": "<div>Your name is {{Name}}</div>",
"richText": [
{ "type": "p", "children": [{ "text": "Your name is {{Name}}" }] }
],
"plainText": "Your name is {{Name}}"
}
},
{
"id": "cl13bhfxd00092e6dydvcqlhm",
"blockId": "cl13bgy1s00042e6dao1wyobm",
"type": "text",
"content": {
"html": "<div>What&#x27;s your email?</div>",
"richText": [
{ "type": "p", "children": [{ "text": "What's your email?" }] }
],
"plainText": "What's your email?"
}
},
{
"id": "cl13bhnay000a2e6dxa630dh3",
"blockId": "cl13bgy1s00042e6dao1wyobm",
"type": "email input",
"options": {
"labels": { "button": "Send", "placeholder": "Type your email..." },
"retryMessageContent": "This email doesn't seem to be valid. Can you type it again?",
"variableId": "cl13bhr3w000b2e6d3c9kid0p"
}
}
]
}
],
"variables": [
{ "id": "cl13bha3l00082e6duaz0xm6f", "name": "Name" },
{ "id": "cl13bhr3w000b2e6d3c9kid0p", "name": "Email" }
],
"edges": [
{
"from": {
"blockId": "cl13bgvlk0000t71a4wabccvw",
"stepId": "cl13bgvlk0001t71a3pilbj53"
},
"to": { "blockId": "cl13bgy1s00042e6dao1wyobm" },
"id": "cl13bgz4800062e6dv7ejcchb"
}
],
"theme": {
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostAvatar": {
"url": "https://avatars.githubusercontent.com/u/16015833?v=4",
"isEnabled": true
},
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": {
"isBrandingEnabled": true,
"isInputPrefillEnabled": true,
"isNewResultOnRefreshEnabled": false
},
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null,
"customDomain": null
}

22
apps/viewer/playwright/tests/predefinedVariables.spec.ts Normal file
View File

@ -0,0 +1,22 @@
import test, { expect } from '@playwright/test'
import { importTypebotInDatabase } from '../services/database'
import cuid from 'cuid'
import path from 'path'
import { typebotViewer } from '../services/selectorUtils'
test('should correctly be injected', async ({ page }) => {
const typebotId = cuid()
await importTypebotInDatabase(
path.join(__dirname, '../fixtures/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()
})