🐛 (webhook) Parse test variables in webhook body sample

Closes #305

apps/viewer/src/features/blocks/integrations/webhook/api/utils/executeWebhookBlock.ts

@@ -178,6 +178,7 @@ export const executeWebhook =
       body: webhook.body,
       resultValues,
       groupId,
+      variables,
     })
     const { data: body, isJson } =
       bodyContent && webhook.method !== HttpMethod.GET
@@ -259,17 +260,22 @@ const getBodyContent =
     body,
     resultValues,
     groupId,
+    variables,
   }: {
     body?: string | null
     resultValues?: ResultValues
     groupId: string
+    variables: Variable[]
   }): Promise<string | undefined> => {
     if (!body) return
     return body === '{{state}}'
       ? JSON.stringify(
           resultValues
             ? parseAnswers(typebot, linkedTypebots)(resultValues)
-            : await parseSampleResult(typebot, linkedTypebots)(groupId)
+            : await parseSampleResult(typebot, linkedTypebots)(
+                groupId,
+                variables
+              )
         )
       : body
   }

apps/viewer/src/features/blocks/integrations/webhook/api/utils/parseSampleResult.ts

@@ -7,6 +7,7 @@ import {
   Block,
   Typebot,
   TypebotLinkBlock,
+  Variable,
 } from 'models'
 import { isInputBlock, byId, isNotDefined } from 'utils'
 import { parseResultHeader } from 'utils/results'
@@ -17,7 +18,8 @@ export const parseSampleResult =
     linkedTypebots: (Typebot | PublicTypebot)[]
   ) =>
   async (
-    currentGroupId: string
+    currentGroupId: string,
+    variables: Variable[]
   ): Promise<Record<string, string | boolean | undefined>> => {
     const header = parseResultHeader(typebot, linkedTypebots)
     const linkedInputBlocks = await extractLinkedInputBlocks(
@@ -28,7 +30,7 @@ export const parseSampleResult =
     return {
       message: 'This is a sample result, it has been generated ⬇️',
       'Submitted at': new Date().toISOString(),
-      ...parseResultSample(linkedInputBlocks, header),
+      ...parseResultSample(linkedInputBlocks, header, variables),
     }
   }
 
@@ -78,22 +80,32 @@ const extractLinkedInputBlocks =
 
 const parseResultSample = (
   inputBlocks: InputBlock[],
-  headerCells: ResultHeaderCell[]
+  headerCells: ResultHeaderCell[],
+  variables: Variable[]
 ) =>
   headerCells.reduce<Record<string, string | boolean | undefined>>(
     (resultSample, cell) => {
       const inputBlock = inputBlocks.find((inputBlock) =>
         cell.blocks?.some((block) => block.id === inputBlock.id)
       )
       if (isNotDefined(inputBlock)) {
-        if (cell.variableIds)
+        if (cell.variableIds) {
+          const variableValue = variables.find(
+            (variable) =>
+              cell.variableIds?.includes(variable.id) && variable.value
+          )?.value
           return {
             ...resultSample,
-            [cell.label]: 'content',
+            [cell.label]: variableValue ?? 'content',
           }
+        }
+
         return resultSample
       }
-      const value = getSampleValue(inputBlock)
+      const variableValue = variables.find(
+        (variable) => cell.variableIds?.includes(variable.id) && variable.value
+      )?.value
+      const value = variableValue ?? getSampleValue(inputBlock)
       return {
         ...resultSample,
         [cell.label]: value,

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/executeWebhook.ts

@@ -143,6 +143,7 @@ export const executeWebhook =
       body: webhook.body,
       resultValues,
       groupId,
+      variables,
     })
     const { data: body, isJson } =
       bodyContent && webhook.method !== HttpMethod.GET
@@ -227,17 +228,22 @@ const getBodyContent =
     body,
     resultValues,
     groupId,
+    variables,
   }: {
     body?: string | null
     resultValues?: ResultValues
     groupId: string
+    variables: Variable[]
   }): Promise<string | undefined> => {
     if (!body) return
     return body === '{{state}}'
       ? JSON.stringify(
           resultValues
             ? parseAnswers(typebot, linkedTypebots)(resultValues)
-            : await parseSampleResult(typebot, linkedTypebots)(groupId)
+            : await parseSampleResult(typebot, linkedTypebots)(
+                groupId,
+                variables
+              )
         )
       : body
   }

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/sampleResult.ts

@@ -29,7 +29,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       user,
     })([])
     return res.send(
-      await parseSampleResult(typebot, linkedTypebots)(block.groupId)
+      await parseSampleResult(typebot, linkedTypebots)(block.groupId, [])
     )
   }
   methodNotAllowed(res)

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/sampleResult.ts

@@ -24,7 +24,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       typebots: [typebot],
       user,
     })([])
-    return res.send(await parseSampleResult(typebot, linkedTypebots)(groupId))
+    return res.send(
+      await parseSampleResult(typebot, linkedTypebots)(groupId, [])
+    )
   }
   methodNotAllowed(res)
 }