fix: nested params form not working in screen

packages/sdks/web-component/src/lib/helpers/flowInputs.ts

@@ -6,7 +6,7 @@ const flattenFormObject = (obj: any, prefix = '') =>
     const v = typeof obj[el] === 'object' ? obj[el] : { value: obj[el] };
     const fl = { ...res, [prefix + el]: v, [`form.${prefix}${el}`]: v };
     if (el === 'displayName') {
-      return { ...fl, [`${prefix  }fullName`]: v, [`form.${prefix}fullName`]: v };
+      return { ...fl, [`${prefix}fullName`]: v, [`form.${prefix}fullName`]: v };
     }
     return fl;
   }, []);

packages/sdks/web-component/src/lib/helpers/templates.ts

@@ -47,11 +47,24 @@ const replaceElementInputs = (
 /**
  * Get object nested path.
  * Examples:
- *  - getByPath({ { a { b: 'rob' } }, 'a.b') => 'hey rob'
+ *  - getByPath({ { a { b: 'rob' } }, 'a.b') => 'rob'
+ *  - getByPath({ { a { 'b.c': 'rob' } }, 'a.b.c') => 'rob'
  *  - getByPath({}, 'a.b') => ''
  */
 const getByPath = (obj: Record<string, any>, path: string) =>
-  path.split('.').reduce((prev, next) => prev?.[next] || '', obj);
+  {
+    if (!path) {
+      return '';
+    }
+    if (obj?.[path]) {
+      return obj[path];
+    }
+    const [first, rest] = path.split(/\.(.*)/s);
+    if (first && obj?.[first] && !(typeof obj[first] == "object")) {
+      return obj[first];
+    }
+    return getByPath(obj[first], rest || '');
+  };
 
 /**
  * Apply template language on text, based on screen state.
@@ -114,9 +127,9 @@ const replaceHrefByDataType = (
 
 const setFormConfigValues = (
   baseEle: DocumentFragment,
-  formData: Record<string, string>,
+  formData?: Record<string, string>,
 ) => {
-  Object.entries(formData).forEach(([name, config]) => {
+  Object.entries(formData || {}).forEach(([name, config]) => {
     const eles = baseEle.querySelectorAll(`[name="${name}"]`);
 
     eles.forEach((ele) => {

packages/sdks/web-component/test/helpers/templates.test.ts

@@ -3,6 +3,7 @@ import { screen } from 'shadow-dom-testing-library';
 import {
   setNOTPVariable,
   updateScreenFromScreenState,
+  updateTemplateFromScreenState,
 } from '../../src/lib/helpers/templates';
 
 describe('templates', () => {
@@ -34,6 +35,17 @@ describe('templates', () => {
     await waitFor(() => screen.getByShadowDisplayValue('email2'));
   });
 
+  it('should handle nested descope form', async () => {
+    document.body.innerHTML = `<div>
+			<descope-text class="descope-text">{{form.test.another}}</descope-text>
+		</div>`;
+
+    updateTemplateFromScreenState(document, {
+      form: { test: { another: "value" } } as any,
+    });
+    await waitFor(() => screen.getByShadowText('value'));
+  });
+
   it('should set NOTP variable', async () => {
     document.body.innerHTML = `<div> </div>`;
     const image = 'image';