🐛 (googleAnalytics) Fix output validation when using variable as event value

apps/builder/src/components/inputs/NumberInput.tsx

@@ -57,22 +57,24 @@ export const NumberInput = <HasVariable extends boolean>({
     [onValueChangeDebounced]
   )
 
-  const handleValueChange = (value: string) => {
-    setValue(value)
-    if (value.endsWith('.') || value.endsWith(',')) return
-    if (value === '') return onValueChangeDebounced(undefined)
+  const handleValueChange = (newValue: string) => {
+    if (value.startsWith('{{') && value.endsWith('}}') && newValue !== '')
+      return
+    setValue(newValue)
+    if (newValue.endsWith('.') || newValue.endsWith(',')) return
+    if (newValue === '') return onValueChangeDebounced(undefined)
     if (
-      value.startsWith('{{') &&
-      value.endsWith('}}') &&
-      value.length > 4 &&
+      newValue.startsWith('{{') &&
+      newValue.endsWith('}}') &&
+      newValue.length > 4 &&
       (withVariableButton ?? true)
     ) {
-      onValueChangeDebounced(value as Value<HasVariable>)
+      onValueChangeDebounced(newValue as Value<HasVariable>)
       return
     }
-    const newValue = parseFloat(value)
-    if (isNaN(newValue)) return
-    onValueChangeDebounced(newValue)
+    const numberedValue = parseFloat(newValue)
+    if (isNaN(numberedValue)) return
+    onValueChangeDebounced(numberedValue)
   }
 
   const handleVariableSelected = (variable?: Variable) => {

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -158,15 +158,7 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
       )
     }
     case IntegrationBlockType.GOOGLE_ANALYTICS: {
-      return (
-        <GoogleAnalyticsNodeBody
-          action={
-            block.options?.action
-              ? `Track "${block.options?.action}" `
-              : undefined
-          }
-        />
-      )
+      return <GoogleAnalyticsNodeBody action={block.options?.action} />
     }
     case IntegrationBlockType.WEBHOOK: {
       return <WebhookContent block={block} />

apps/viewer/src/features/blocks/integrations/googleAnalytics/executeGoogleAnalyticsBlock.ts

@@ -10,7 +10,9 @@ export const executeGoogleAnalyticsBlock = (
   outgoingEdgeId: block.outgoingEdgeId,
   clientSideActions: [
     {
-      googleAnalytics: deepParseVariables(variables)(block.options),
+      googleAnalytics: deepParseVariables(variables, {
+        guessCorrectType: true,
+      })(block.options),
       lastBubbleBlockId,
     },
   ],

apps/viewer/src/features/variables/deepParseVariable.ts

@@ -4,21 +4,28 @@ import {
   parseVariables,
   ParseVariablesOptions,
 } from './parseVariables'
+import { parseGuessedValueType } from './parseGuessedValueType'
 
 export const deepParseVariables =
   (
     variables: Variable[],
-    options: ParseVariablesOptions = defaultParseVariablesOptions
+    options: ParseVariablesOptions & {
+      guessCorrectType?: boolean
+    } = defaultParseVariablesOptions
   ) =>
   <T extends Record<string, unknown>>(object: T): T =>
     Object.keys(object).reduce<T>((newObj, key) => {
       const currentValue = object[key]
 
-      if (typeof currentValue === 'string')
+      if (typeof currentValue === 'string') {
+        const parsedVariable = parseVariables(variables, options)(currentValue)
         return {
           ...newObj,
-          [key]: parseVariables(variables, options)(currentValue),
+          [key]: options.guessCorrectType
+            ? parseGuessedValueType(parsedVariable)
+            : parsedVariable,
         }
+      }
 
       if (currentValue instanceof Object && currentValue.constructor === Object)
         return {