fix(results): 🐛 Export header valid name

apps/builder/layouts/results/SubmissionContent.tsx

@@ -12,6 +12,7 @@ import {
 import { unparse } from 'papaparse'
 import { UnlockProPlanInfo } from 'components/shared/Info'
 import { LogsModal } from './LogsModal'
+import { useTypebot } from 'contexts/TypebotContext'
 
 type Props = {
   typebotId: string
@@ -25,6 +26,7 @@ export const SubmissionsContent = ({
   totalHiddenResults,
   onDeleteResults,
 }: Props) => {
+  const { publishedTypebot } = useTypebot()
   const [selectedIndices, setSelectedIndices] = useState<number[]>([])
   const [isDeleteLoading, setIsDeleteLoading] = useState(false)
   const [isExportLoading, setIsExportLoading] = useState(false)
@@ -100,13 +102,17 @@ export const SubmissionsContent = ({
   }
 
   const getAllTableData = async () => {
+    if (!publishedTypebot) return []
     const { data, error } = await getAllResults(typebotId)
     if (error) toast({ description: error.message, title: error.name })
-    return convertResultsToTableData(data?.results)
+    return convertResultsToTableData(publishedTypebot)(data?.results)
   }
 
   const tableData: { [key: string]: string }[] = useMemo(
-    () => convertResultsToTableData(results),
+    () =>
+      publishedTypebot
+        ? convertResultsToTableData(publishedTypebot)(results)
+        : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [results]
   )

apps/builder/services/publicTypebot.tsx

@@ -76,7 +76,7 @@ export const parseSubmissionsColumns = (
           <Text>Submitted at</Text>
         </HStack>
       ),
-      accessor: 'createdAt',
+      accessor: 'Submitted at',
     },
     ...parsedBlocks,
     ...parseVariablesHeaders(typebot, parsedBlocks),
@@ -91,7 +91,11 @@ const parseBlocksHeaders = (typebot: PublicTypebot) =>
       if (
         !inputStep ||
         !isInputStep(inputStep) ||
-        headers.find((h) => h.accessor === inputStep.options.variableId)
+        headers.find(
+          (h) =>
+            h.accessor ===
+            typebot.variables.find(byId(inputStep.options.variableId))?.name
+        )
       )
         return headers
       const matchedVariableName =
@@ -113,7 +117,7 @@ const parseBlocksHeaders = (typebot: PublicTypebot) =>
               <Text>{matchedVariableName ?? block.title}</Text>
             </HStack>
           ),
-          accessor: inputStep.options.variableId ?? block.id,
+          accessor: matchedVariableName ?? block.title,
         },
       ]
     }, [])
@@ -126,7 +130,7 @@ const parseVariablesHeaders = (
   }[]
 ) =>
   typebot.variables.reduce<HeaderCell[]>((headers, v) => {
-    if (parsedBlocks.find((b) => b.accessor === v.id)) return headers
+    if (parsedBlocks.find((b) => b.accessor === v.name)) return headers
     return [
       ...headers,
       {
@@ -136,7 +140,7 @@ const parseVariablesHeaders = (
             <Text>{v.name}</Text>
           </HStack>
         ),
-        accessor: v.id,
+        accessor: v.name,
       },
     ]
   }, [])

apps/builder/services/typebots/results.ts

@@ -1,8 +1,8 @@
-import { ResultWithAnswers, VariableWithValue } from 'models'
+import { PublicTypebot, ResultWithAnswers, VariableWithValue } from 'models'
 import useSWRInfinite from 'swr/infinite'
 import { stringify } from 'qs'
 import { Answer } from 'db'
-import { isDefined, sendRequest } from 'utils'
+import { byId, isDefined, sendRequest } from 'utils'
 import { fetcher } from 'services/utils'
 
 const paginationLimit = 50
@@ -95,21 +95,28 @@ export const parseDateToReadable = (dateStr: string): string => {
   )
 }
 
-export const convertResultsToTableData = (results?: ResultWithAnswers[]) =>
+export const convertResultsToTableData =
-  (results ?? []).map((result) => ({
+  ({ variables, blocks }: PublicTypebot) =>
-    createdAt: parseDateToReadable(result.createdAt),
+  (results: ResultWithAnswers[] | undefined) =>
-    ...[...result.answers, ...result.prefilledVariables].reduce<{
+    (results ?? []).map((result) => ({
-      [key: string]: string
+      'Submitted at': parseDateToReadable(result.createdAt),
-    }>((o, answerOrVariable) => {
+      ...[...result.answers, ...result.prefilledVariables].reduce<{
-      if ('blockId' in answerOrVariable) {
+        [key: string]: string
-        const answer = answerOrVariable as Answer
+      }>((o, answerOrVariable) => {
-        return {
+        if ('blockId' in answerOrVariable) {
-          ...o,
+          const answer = answerOrVariable as Answer
-          [answer.variableId ?? answer.blockId]: answer.content,
+          const key =
+            (answer.variableId
+              ? variables.find(byId(answer.variableId))?.name
+              : blocks.find(byId(answer.blockId))?.title) ?? ''
+          return {
+            ...o,
+            [key]: answer.content,
+          }
         }
-      }
+        const variable = answerOrVariable as VariableWithValue
-      const variable = answerOrVariable as VariableWithValue
+        if (isDefined(o[variable.id])) return o
-      if (isDefined(o[variable.id])) return o
+        const key = variables.find(byId(variable.id))?.name ?? ''
-      return { ...o, [variable.id]: variable.value }
+        return { ...o, [key]: variable.value }
-    }, {}),
+      }, {}),
-  }))
+    }))