From 5fb51766415bc69792a711848105b8f2c40df912 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 24 Mar 2023 07:42:17 +0100
Subject: [PATCH] :bug: Fix parseVariables when preceding with a dollar sign

---
 .../components/inputs/VariableSearchInput.tsx |  1 +
 .../src/features/variables/parseVariables.ts  | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
index d76213213..14cd5fe72 100644
--- a/apps/builder/src/components/inputs/VariableSearchInput.tsx
+++ b/apps/builder/src/components/inputs/VariableSearchInput.tsx
@@ -179,6 +179,7 @@ export const VariableSearchInput = ({
             onFocus={onOpen}
             onKeyDown={handleKeyUp}
             placeholder={inputProps.placeholder ?? 'Select a variable'}
+            autoComplete="off"
             {...inputProps}
           />
         </PopoverAnchor>
diff --git a/apps/viewer/src/features/variables/parseVariables.ts b/apps/viewer/src/features/variables/parseVariables.ts
index 650fca4fe..2c0711bef 100644
--- a/apps/viewer/src/features/variables/parseVariables.ts
+++ b/apps/viewer/src/features/variables/parseVariables.ts
@@ -22,10 +22,11 @@ export const parseVariables =
   (text: string | undefined): string => {
     if (!text || text === '') return ''
     // Capture {{variable}} and ${{{variable}}} (variables in template litterals)
-    const pattern = /\{\{([^{}]+)\}\}|\$\{\{([^{}]+)\}\}/g
+    const pattern = /\{\{([^{}]+)\}\}|(\$)\{\{([^{}]+)\}\}/g
     return text.replace(
       pattern,
-      (_, nameInCurlyBraces, nameInTemplateLitteral) => {
+      (_full, nameInCurlyBraces, _dollarSign, nameInTemplateLitteral) => {
+        const dollarSign = _dollarSign ?? ''
         const matchedVarName = nameInCurlyBraces ?? nameInTemplateLitteral
         const variable = variables.find((variable) => {
           return (
@@ -33,19 +34,22 @@ export const parseVariables =
             (options.fieldToParse === 'id' || isDefined(variable.value))
           )
         }) as VariableWithValue | undefined
-        if (!variable) return ''
-        if (options.fieldToParse === 'id') return variable.id
+        if (!variable) return dollarSign + ''
+        if (options.fieldToParse === 'id') return dollarSign + variable.id
         const { value } = variable
         if (options.escapeForJson)
-          return jsonParse(
-            typeof value !== 'string' ? JSON.stringify(value) : value
+          return (
+            dollarSign +
+            jsonParse(typeof value !== 'string' ? JSON.stringify(value) : value)
           )
-        const parsedValue = safeStringify(
-          options.takeLatestIfList && Array.isArray(value)
-            ? value[value.length - 1]
-            : value
-        )
-        if (!parsedValue) return ''
+        const parsedValue =
+          dollarSign +
+          safeStringify(
+            options.takeLatestIfList && Array.isArray(value)
+              ? value[value.length - 1]
+              : value
+          )
+        if (!parsedValue) return dollarSign + ''
         return parsedValue
       }
     )