fix(viewer): 🐛 Better result initialization

apps/viewer/layouts/TypebotPage.tsx

@@ -35,30 +35,31 @@ export const TypebotPage = ({
       predefinedVariables[key] = value
     })
     setPredefinedVariables(predefinedVariables)
+    initializeResult().then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Workaround for react-frame-component bug (https://github.com/ryanseddon/react-frame-component/pull/207)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (showTypebot) return
-    setShowTypebot(true)
-  })
-
-  const initializeResult = async (variables: VariableWithValue[]) => {
+  const initializeResult = async () => {
     const resultIdFromSession = getExistingResultFromSession()
     if (resultIdFromSession) setResultId(resultIdFromSession)
     else {
-      const { error, data: result } = await createResult(
-        typebot.typebotId,
-        variables
-      )
+      const { error, data: result } = await createResult(typebot.typebotId)
       if (error) setError(error)
       if (result) {
         setResultId(result.id)
         if (typebot.settings.general.isNewResultOnRefreshEnabled !== true)
           setResultInSession(result.id)
       }
     }
+    setShowTypebot(true)
+  }
+
+  const handleVariablesPrefilled = async (
+    prefilledVariables: VariableWithValue[]
+  ) => {
+    if (!resultId) return setError(new Error('Result was not created'))
+    const { error } = await updateResult(resultId, { prefilledVariables })
+    if (error) setError(error)
   }
 
   const handleNewAnswer = async (answer: Answer) => {
@@ -97,7 +98,7 @@ export const TypebotPage = ({
           predefinedVariables={predefinedVariables}
           onNewAnswer={handleNewAnswer}
           onCompleted={handleCompleted}
-          onVariablesPrefilled={initializeResult}
+          onVariablesPrefilled={handleVariablesPrefilled}
           onNewLog={handleNewLog}
         />
       )}

apps/viewer/pages/api/typebots/[typebotId]/results.ts

@@ -1,5 +1,5 @@
 import prisma from 'libs/prisma'
-import { ResultWithAnswers, VariableWithValue } from 'models'
+import { ResultWithAnswers } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { authenticateUser } from 'services/api/utils'
 import { methodNotAllowed } from 'utils'
@@ -24,13 +24,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
   if (req.method === 'POST') {
     const typebotId = req.query.typebotId as string
-    const resultData = (
-      typeof req.body === 'string' ? JSON.parse(req.body) : req.body
-    ) as {
-      prefilledVariables: VariableWithValue[]
-    }
     const result = await prisma.result.create({
-      data: { ...resultData, typebotId, isCompleted: false },
+      data: { typebotId, isCompleted: false },
     })
     return res.send(result)
   }

apps/viewer/services/result.ts

@@ -1,15 +1,10 @@
 import { Log, Result } from 'db'
-import { VariableWithValue } from 'models'
 import { sendRequest } from 'utils'
 
-export const createResult = async (
-  typebotId: string,
-  prefilledVariables: VariableWithValue[]
-) => {
+export const createResult = async (typebotId: string) => {
   return sendRequest<Result>({
     url: `/api/typebots/${typebotId}/results`,
     method: 'POST',
-    body: { prefilledVariables },
   })
 }
 

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -52,26 +52,22 @@ export const ConversationContainer = ({
   }
 
   useEffect(() => {
-    if (predefinedVariables) {
-      const prefilledVariables = injectPredefinedVariables(predefinedVariables)
-      if (onVariablesPrefilled) {
-        onVariablesPrefilled(prefilledVariables)
-        setPrefilledVariables(prefilledVariables)
-      }
-    }
+    const prefilledVariables = injectPredefinedVariables(predefinedVariables)
+    if (onVariablesPrefilled) onVariablesPrefilled(prefilledVariables)
+    setPrefilledVariables(prefilledVariables)
     displayNextBlock(typebot.blocks[0].steps[0].outgoingEdgeId)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const injectPredefinedVariables = (predefinedVariables: {
+  const injectPredefinedVariables = (predefinedVariables?: {
     [key: string]: string | undefined
   }) => {
     const prefilledVariables: VariableWithValue[] = []
-    Object.keys(predefinedVariables).forEach((key) => {
+    Object.keys(predefinedVariables ?? {}).forEach((key) => {
       const matchingVariable = typebot.variables.find(
         (v) => v.name.toLowerCase() === key.toLowerCase()
       )
-      if (isNotDefined(matchingVariable)) return
+      if (!predefinedVariables || isNotDefined(matchingVariable)) return
       const value = predefinedVariables[key]
       if (!value) return
       updateVariableValue(matchingVariable?.id, value)