fix: retain text outside of variables intact

Author: Kneesal

libs/journeys/ui/src/components/Button/Button.spec.tsx

@@ -1067,7 +1067,7 @@ describe('Button', () => {
       expect(screen.getByRole('button')).toHaveTextContent('{{ name }}')
     })
 
-    it('returns original label when not a strict match', () => {
+    it('replaces custom fields within mixed strings and leaves other text intact', () => {
       const journeyWithFields = {
         journeyCustomizationFields: [
           {
@@ -1093,7 +1093,7 @@ describe('Button', () => {
         </MockedProvider>
       )
 
-      expect(screen.getByRole('button')).toHaveTextContent('Hello {{ name }}!')
+      expect(screen.getByRole('button')).toHaveTextContent('Hello Alice!')
     })
 
     it('uses defaultValue when value is null', () => {

libs/journeys/ui/src/components/TextResponse/utils/getTextResponseValues/getTextResponseValues.spec.ts

@@ -66,25 +66,25 @@ describe('getTextResponseValues', () => {
   it('resolves values for embed variant', () => {
     const input: TextResponseStrings = {
       label: '  {{ name }}  ',
-      placeholder: '  {{ title: CTO }}  ',
+      placeholder: '{{ title: CTO }}',
       hint: '{{ some: value }}'
     }
     const result = getTextResponseValues(input, fields, 'embed')
-    expect(result.label).toBe('Alice')
+    expect(result.label).toBe('  Alice  ')
     expect(result.placeholder).toBe('Child of God')
     expect(result.hint).toBe('Some Value')
   })
 
-  it('returns original strings when not a strict pattern match', () => {
+  it('replaces custom fields within mixed strings and leaves non-custom-field text intact', () => {
     const input: TextResponseStrings = {
       label: 'Hello {{ name }}!',
       placeholder: 'name',
       hint: '{{name}} extra'
     }
     const result = getTextResponseValues(input, fields, 'default')
-    expect(result.label).toBe('Hello {{ name }}!')
+    expect(result.label).toBe('Hello Alice!')
     expect(result.placeholder).toBe('name')
-    expect(result.hint).toBe('{{name}} extra')
+    expect(result.hint).toBe('Alice extra')
   })
 
   it('handles null placeholder and hint', () => {

libs/journeys/ui/src/components/Typography/Typography.spec.tsx

@@ -134,7 +134,7 @@ describe('Typography', () => {
     ).toBeInTheDocument()
   })
 
-  it('returns original string when not a strict match', () => {
+  it('replaces custom fields within mixed strings and leaves other text intact', () => {
     const journey = {
       journeyCustomizationFields: [
         {
@@ -157,7 +157,7 @@ describe('Typography', () => {
     )
 
     expect(
-      screen.getByRole('heading', { name: 'Hello {{ name }}!', level: 3 })
+      screen.getByRole('heading', { name: 'Hello Alice!', level: 3 })
     ).toBeInTheDocument()
   })
 

libs/journeys/ui/src/libs/resolveJourneyCustomizationString/resolveJourneyCustomizationString.spec.ts

@@ -14,13 +14,13 @@ describe('resolveJourneyCustomizationString', () => {
     expect(resolveJourneyCustomizationString(null, fields)).toBeNull()
   })
 
-  it('returns the original string when it does not strictly match the pattern', () => {
+  it('replaces custom fields within mixed strings and leaves non-token text intact', () => {
     expect(resolveJourneyCustomizationString('Hello {{ name }}!', fields)).toBe(
-      'Hello {{ name }}!'
+      'Hello Alice!'
     )
     expect(resolveJourneyCustomizationString('name', fields)).toBe('name')
     expect(resolveJourneyCustomizationString('{{name}} extra', fields)).toBe(
-      '{{name}} extra'
+      'Alice extra'
     )
   })
 
@@ -60,13 +60,13 @@ describe('resolveJourneyCustomizationString', () => {
     )
   })
 
-  it('matches with leading/trailing whitespace around the entire string', () => {
+  it('replaces custom fields regardless of surrounding whitespace', () => {
     expect(resolveJourneyCustomizationString('  {{ name }}  ', fields)).toBe(
-      'Alice'
+      '  Alice  '
     )
     expect(
       resolveJourneyCustomizationString('  {{ title:  Some Title  }}', fields)
-    ).toBe('Child of God')
+    ).toBe('  Child of God')
   })
 
   it('trims spaces around the key before lookup', () => {

libs/journeys/ui/src/libs/resolveJourneyCustomizationString/resolveJourneyCustomizationString.ts

@@ -13,18 +13,15 @@ export function resolveJourneyCustomizationString(
 ): string | null {
   if (input == null) return null
 
-  const trimmed = input.trim()
+  const customFieldsPattern =
+    /\{\{\s*([^:}]+)(?:\s*:\s*(?:(['"])([^'"]*)\2|([^}]*?)))?\s*\}\}/g
 
-  const pattern =
-    /^\{\{\s*([^:}]+)(?:\s*:\s*(?:(['"])([^'"]*)\2|([^}]*?)))?\s*\}\}$/
+  const replaced = input.replace(customFieldsPattern, (fullMatch, key) => {
+    const trimmedKey = String(key).trim()
+    const field = journeyCustomizationFields.find((f) => f.key === trimmedKey)
+    const resolved = field?.value ?? field?.defaultValue
+    return resolved ?? fullMatch
+  })
 
-  const match = trimmed.match(pattern)
-  if (match == null) return input
-
-  const key = match[1].trim()
-  const field = journeyCustomizationFields.find((f) => f.key === key)
-  if (field == null) return input
-
-  const resolved = field.value ?? field.defaultValue
-  return resolved ?? input
+  return replaced
 }

libs/journeys/ui/src/libs/useGetValueFromJourneyCustomizationString/useGetValueFromJourneyCustomizationString.spec.tsx

@@ -83,7 +83,7 @@ describe('useGetValueFromJourneyCustomizationString', () => {
     expect(result.current).toBe('{{ unknown }}')
   })
 
-  it('trims and strictly matches the pattern', () => {
+  it('replaces custom fields within mixed strings and leaves non-custom-field text intact', () => {
     const journey = {
       journeyCustomizationFields: [
         {
@@ -97,11 +97,49 @@ describe('useGetValueFromJourneyCustomizationString', () => {
       ]
     } as unknown as Journey
 
+    const { result } = renderHook(
+      ({ label }: { label: string }) =>
+        useGetValueFromJourneyCustomizationString(label),
+      {
+        initialProps: { label: 'Hello {{ name }}!' },
+        wrapper: ({ children }) => (
+          <JourneyProvider value={{ journey, variant: 'default' }}>
+            {children}
+          </JourneyProvider>
+        )
+      }
+    )
+
+    expect(result.current).toBe('Hello Alice!')
+  })
+
+  it('supports multiple custom fields in one string and repeated keys', () => {
+    const journey = {
+      journeyCustomizationFields: [
+        {
+          __typename: 'JourneyCustomizationField',
+          id: '1',
+          journeyId: 'journeyId',
+          key: 'first',
+          value: 'John',
+          defaultValue: 'J'
+        },
+        {
+          __typename: 'JourneyCustomizationField',
+          id: '2',
+          journeyId: 'journeyId',
+          key: 'last',
+          value: 'Doe',
+          defaultValue: 'D'
+        }
+      ]
+    } as unknown as Journey
+
     const { result, rerender } = renderHook(
       ({ label }: { label: string }) =>
         useGetValueFromJourneyCustomizationString(label),
       {
-        initialProps: { label: '  {{ name }}  ' },
+        initialProps: { label: 'Hello {{ first }} {{ last }}!' },
         wrapper: ({ children }) => (
           <JourneyProvider value={{ journey, variant: 'default' }}>
             {children}
@@ -110,9 +148,9 @@ describe('useGetValueFromJourneyCustomizationString', () => {
       }
     )
 
-    expect(result.current).toBe('Alice')
+    expect(result.current).toBe('Hello John Doe!')
 
-    rerender({ label: 'Hello {{ name }}!' })
-    expect(result.current).toBe('Hello {{ name }}!')
+    rerender({ label: '{{ first }} & {{ first }}' })
+    expect(result.current).toBe('John & John')
   })
 })