🧰 Aggregate utils & set up results collection in viewer

apps/viewer/layouts/ErrorPage.tsx

@@ -1,15 +1,6 @@
 import React from 'react'
 
-export const ErrorPage = ({ error }: { error: 'offline' | '500' | 'IE' }) => {
-  let errorLabel =
-    'An error occured. Please try to refresh or contact the owner of this bot.'
-  if (error === 'offline') {
-    errorLabel =
-      'Looks like your device is offline. Please, try to refresh the page.'
-  }
-  if (error === 'IE') {
-    errorLabel = "This bot isn't compatible with Internet Explorer."
-  }
+export const ErrorPage = ({ error }: { error: Error }) => {
   return (
     <div
       style={{
@@ -20,10 +11,8 @@ export const ErrorPage = ({ error }: { error: 'offline' | '500' | 'IE' }) => {
         flexDirection: 'column',
       }}
     >
-      {error === '500' && (
-        <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>500</h1>
-      )}
-      <h2>{errorLabel}</h2>
+      <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>{error.name}</h1>
+      <h2>{error.message}</h2>
     </div>
   )
 }

apps/viewer/layouts/TypebotPage.tsx

@@ -1,6 +1,7 @@
-import { PublicTypebot, TypebotViewer } from 'bot-engine'
-import React from 'react'
+import { Answer, PublicTypebot, TypebotViewer } from 'bot-engine'
+import React, { useEffect, useState } from 'react'
 import { SEO } from '../components/Seo'
+import { createResult, updateResult } from '../services/result'
 import { ErrorPage } from './ErrorPage'
 import { NotFoundPage } from './NotFoundPage'
 
@@ -10,17 +11,61 @@ export type TypebotPageProps = {
   isIE: boolean
 }
 
+const sessionStorageKey = 'resultId'
+
 export const TypebotPage = ({ typebot, isIE, url }: TypebotPageProps) => {
+  const [error, setError] = useState<Error | undefined>(
+    isIE ? new Error('Internet explorer is not supported') : undefined
+  )
+  const [resultId, setResultId] = useState<string | undefined>()
+
+  useEffect(() => {
+    initializeResult()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const initializeResult = async () => {
+    if (!typebot) return
+    const resultIdFromSession = sessionStorage.getItem(sessionStorageKey)
+    if (resultIdFromSession) setResultId(resultIdFromSession)
+    else {
+      const { error, data: result } = await createResult(typebot.typebotId)
+      if (error) setError(error)
+      if (result) {
+        setResultId(result.id)
+        sessionStorage.setItem(sessionStorageKey, result.id)
+      }
+    }
+  }
+
+  const handleAnswersUpdate = async (answers: Answer[]) => {
+    if (!resultId) return setError(new Error('Result was not created'))
+    const { error } = await updateResult(resultId, { answers })
+    if (error) setError(error)
+  }
+
+  const handleCompleted = async () => {
+    if (!resultId) return setError(new Error('Result was not created'))
+    const { error } = await updateResult(resultId, { isCompleted: true })
+    if (error) setError(error)
+  }
+
   if (!typebot) {
     return <NotFoundPage />
   }
-  if (isIE) {
-    return <ErrorPage error={'IE'} />
+  if (error) {
+    return <ErrorPage error={error} />
   }
   return (
     <div style={{ height: '100vh' }}>
       <SEO url={url} chatbotName={typebot.name} />
-      <TypebotViewer typebot={typebot} />
+      {resultId && (
+        <TypebotViewer
+          typebot={typebot}
+          onAnswersUpdate={handleAnswersUpdate}
+          onCompleted={handleCompleted}
+        />
+      )}
     </div>
   )
 }