SK-1395 : Update tokenize function to use DOM traversal

src/core/external/collect/collect-container.ts

@@ -270,6 +270,8 @@ class CollectContainer extends Container {
     try {
       validateInitConfig(this.#metaData.clientJSON.config);
       const collectElements = Object.values(this.#elements);
+      const elementIds = Object.keys(this.#elements)
+        .map((element) => ({ frameId: element, elementId: element }));
       collectElements.forEach((element) => {
         if (!element.isMounted()) {
           throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true);
@@ -292,6 +294,7 @@ class CollectContainer extends Container {
           {
             ...options,
             tokens: options?.tokens !== undefined ? options.tokens : true,
+            elementIds,
           },
           (data: any) => {
             if (!data || data?.error) {

src/core/external/collect/collect-element.ts

@@ -208,17 +208,23 @@ class CollectElement extends SkyflowElement {
 
     const isComposable = this.#elements.length > 1;
     if (isComposable) {
-      this.#iframe.mount(domElement);
+      this.#iframe.mount(domElement, {
+        record: JSON.stringify({ record: this.#group }),
+      });
       this.#bus.on(ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + this.containerId, sub);
     } else {
       if (this.#readyToMount) {
-        this.#iframe.mount(domElement);
+        this.#iframe.mount(domElement, {
+          record: JSON.stringify({ record: this.#group }),
+        });
         this.#bus.on(ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + this.containerId, sub);
         return;
       }
       this.#groupEmitter?.on(ELEMENT_EVENTS_TO_CONTAINER.COLLECT_CONTAINER_MOUNTED, (data) => {
         if (data?.containerId === this.containerId) {
-          this.#iframe.mount(domElement);
+          this.#iframe.mount(domElement, {
+            record: JSON.stringify({ record: this.#group }),
+          });
           this.#bus.on(ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + this.containerId, sub);
         }
       });

src/core/external/collect/compose-collect-container.ts

@@ -353,7 +353,7 @@ class ComposableContainer extends Container {
           throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true);
         }
       });
-
+      const elementIds:{ frameId:string, elementId:string }[] = [];
       const collectElements = Object.values(this.#elements);
       collectElements.forEach((element) => {
         element.isValidElement();
@@ -368,13 +368,20 @@ class ComposableContainer extends Container {
       if (options?.upsert) {
         validateUpsertOptions(options?.upsert);
       }
+      this.#elementsList.forEach((element) => {
+        elementIds.push({
+          frameId: this.#tempElements.elementName,
+          elementId: element.elementName,
+        });
+      });
       bus
       // .target(properties.IFRAME_SECURE_ORGIN)
         .emit(
           ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST + this.#containerId,
           {
             ...options,
             tokens: options?.tokens !== undefined ? options.tokens : true,
+            elementIds,
           },
           (data: any) => {
             if (!data || data?.error) {

src/core/external/common/iframe.ts

@@ -27,7 +27,7 @@ export default class IFrame {
     setAttributes(this.iframe, { src: responseValue });
   };
 
-  mount = (domElement) => {
+  mount = (domElement, data?:any) => {
     this.unmount();
     try {
       if (typeof domElement === 'string') {
@@ -46,7 +46,7 @@ export default class IFrame {
       // throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_ELEMENT_SELECTOR, [], true);
     }
 
-    setAttributes(this.iframe, { src: getIframeSrc() });
+    setAttributes(this.iframe, { src: `${getIframeSrc()}${data ? `?${btoa(data?.record)}` : ''}` });
 
     this.container?.appendChild(this.iframe);
   };

src/core/external/reveal/reveal-element.ts

@@ -127,15 +127,27 @@ class RevealElement extends SkyflowElement {
       };
 
       if (this.#readyToMount) {
-        this.#iframe.mount(domElementSelector);
+        this.#iframe.mount(domElementSelector, {
+          record: JSON.stringify({
+            ...this.#metaData,
+            record: this.#recordData,
+            context: this.#context,
+          }),
+        });
         bus
           .target(properties.IFRAME_SECURE_ORGIN)
           .on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY, sub);
         return;
       }
       this.#eventEmitter?.on(ELEMENT_EVENTS_TO_CONTAINER.REVEAL_CONTAINER_MOUNTED, (data) => {
         if (data?.containerId === this.#containerId) {
-          this.#iframe.mount(domElementSelector);
+          this.#iframe.mount(domElementSelector, {
+            record: JSON.stringify({
+              ...this.#metaData,
+              record: this.#recordData,
+              context: this.#context,
+            }),
+          });
           bus
             .target(properties.IFRAME_SECURE_ORGIN)
             .on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY, sub);

src/core/internal/frame-elements.ts

@@ -63,18 +63,22 @@ export default class FrameElements {
     bus.emit(
       ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + names[3],
       { name: window.name },
-      (group: any) => {
+      () => {
         printLog(parameterizedString(logs.infoLogs.COLLECT_FRAME_READY_CB,
           CLASS_NAME, getElementName(window.name)), MessageType.LOG,
         logLevel);
-        FrameElements.group = group;
-        if (FrameElements.frameElements) {
-          printLog(parameterizedString(logs.infoLogs.SETUP_IN_START, CLASS_NAME),
-            MessageType.LOG, logLevel);
-          FrameElements.frameElements.setup(); // start the process
-        }
       },
     );
+    const url = window.location?.href;
+    const configIndex = url.indexOf('?');
+    const encodedString = configIndex !== -1 ? decodeURIComponent(url.substring(configIndex + 1)) : '';
+    const parsedRecord = encodedString ? JSON.parse(atob(encodedString)) : {};
+    FrameElements.group = parsedRecord?.record;
+    if (FrameElements.frameElements) {
+      printLog(parameterizedString(logs.infoLogs.SETUP_IN_START, CLASS_NAME),
+        MessageType.LOG, logLevel);
+      FrameElements.frameElements.setup(); // start the process
+    }
   };
 
   // called by IFrameForm

src/core/internal/iframe-form/index.ts

@@ -945,25 +945,27 @@ export class IFrameForm {
     if (!this.client) throw new SkyflowError(SKYFLOW_ERROR_CODE.CLIENT_CONNECTION, [], true);
     const insertResponseObject: any = {};
     const updateResponseObject: any = {};
-    const formElements = Object.keys(this.iFrameFormElements);
     let errorMessage = '';
-    for (let i = 0; i < formElements.length; i += 1) {
-      if (
-        this.iFrameFormElements[formElements[i]].fieldType
-        !== ELEMENTS.FILE_INPUT.name
-      ) {
-        const {
-          state, doesClientHasError, clientErrorText, errorText, onFocusChange,
-        } = this.iFrameFormElements[formElements[i]];
-
-        if (state.isRequired || !state.isValid) {
-          onFocusChange(false);
-        }
-
-        if (!state.isValid || !state.isComplete) {
-          if (doesClientHasError) {
-            errorMessage += `${state.name}:${clientErrorText}`;
-          } else { errorMessage += `${state.name}:${errorText} `; }
+    for (let i = 0; i < options.elementIds.length; i += 1) {
+      const Frame = window.parent.frames[`${options.elementIds[i].frameId}:${this.controllerId}:${this.logLevel}`];
+      const inputElement = Frame.document
+        .getElementById(options.elementIds[i].elementId);
+      if (inputElement) {
+        if (
+          inputElement.iFrameFormElement.fieldType
+          !== ELEMENTS.FILE_INPUT.name
+        ) {
+          const {
+            state, doesClientHasError, clientErrorText, errorText, onFocusChange,
+          } = inputElement.iFrameFormElement;
+          if (state.isRequired || !state.isValid) {
+            onFocusChange(false);
+          }
+          if (!state.isValid || !state.isComplete) {
+            if (doesClientHasError) {
+              errorMessage += `${state.name}:${clientErrorText}`;
+            } else { errorMessage += `${state.name}:${errorText} `; }
+          }
         }
       }
     }
@@ -972,68 +974,73 @@ export class IFrameForm {
       return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.COMPLETE_AND_VALID_INPUTS, [`${errorMessage}`], true));
     }
 
-    for (let i = 0; i < formElements.length; i += 1) {
-      const {
-        state, tableName, validations, skyflowID,
-      } = this.iFrameFormElements[formElements[i]];
-      if (tableName) {
-        if (
-          this.iFrameFormElements[formElements[i]].fieldType
-        !== ELEMENTS.FILE_INPUT.name
-        ) {
+    for (let i = 0; i < options.elementIds.length; i += 1) {
+      const Frame = window.parent.frames[`${options.elementIds[i].frameId}:${this.controllerId}:${this.logLevel}`];
+      const inputElement = Frame.document
+        .getElementById(options.elementIds[i].elementId);
+      if (inputElement) {
+        const {
+          state, tableName, validations, skyflowID,
+        } = inputElement.iFrameFormElement;
+        if (tableName) {
           if (
-            this.iFrameFormElements[formElements[i]].fieldType
-          === ELEMENTS.checkbox.name
+            inputElement.iFrameFormElement.fieldType
+        !== ELEMENTS.FILE_INPUT.name
           ) {
-            if (insertResponseObject[state.name]) {
-              insertResponseObject[state.name] = `${insertResponseObject[state.name]},${state.value
-              }`;
-            } else {
-              insertResponseObject[state.name] = state.value;
-            }
-          } else if (insertResponseObject[tableName] && !(skyflowID === '') && skyflowID === undefined) {
-            if (get(insertResponseObject[tableName], state.name)
+            if (
+              inputElement.iFrameFormElement.fieldType
+          === ELEMENTS.checkbox.name
+            ) {
+              if (insertResponseObject[state.name]) {
+                insertResponseObject[state.name] = `${insertResponseObject[state.name]},${state.value
+                }`;
+              } else {
+                insertResponseObject[state.name] = state.value;
+              }
+            } else if (insertResponseObject[tableName] && !(skyflowID === '') && skyflowID === undefined) {
+              if (get(insertResponseObject[tableName], state.name)
             && !(validations && checkForElementMatchRule(validations))) {
-              return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.DUPLICATE_ELEMENT,
-                [state.name, tableName], true));
-            }
-            set(
-              insertResponseObject[tableName],
-              state.name,
-              this.iFrameFormElements[formElements[i]].getUnformattedValue(),
-            );
-          } else if (skyflowID || skyflowID === '') {
-            if (skyflowID === '' || skyflowID === null) {
-              return Promise.reject(new SkyflowError(
-                SKYFLOW_ERROR_CODE.EMPTY_SKYFLOW_ID_IN_ADDITIONAL_FIELDS,
-              ));
-            }
-            if (updateResponseObject[skyflowID]) {
+                return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.DUPLICATE_ELEMENT,
+                  [state.name, tableName], true));
+              }
               set(
-                updateResponseObject[skyflowID],
+                insertResponseObject[tableName],
                 state.name,
-                this.iFrameFormElements[formElements[i]].getUnformattedValue(),
+                inputElement.iFrameFormElement.getUnformattedValue(),
               );
+            } else if (skyflowID || skyflowID === '') {
+              if (skyflowID === '' || skyflowID === null) {
+                return Promise.reject(new SkyflowError(
+                  SKYFLOW_ERROR_CODE.EMPTY_SKYFLOW_ID_IN_ADDITIONAL_FIELDS,
+                ));
+              }
+              if (updateResponseObject[skyflowID]) {
+                set(
+                  updateResponseObject[skyflowID],
+                  state.name,
+                  inputElement.iFrameFormElement.getUnformattedValue(),
+                );
+              } else {
+                updateResponseObject[skyflowID] = {};
+                set(
+                  updateResponseObject[skyflowID],
+                  state.name,
+                  inputElement.iFrameFormElement.getUnformattedValue(),
+                );
+                set(
+                  updateResponseObject[skyflowID],
+                  'table',
+                  tableName,
+                );
+              }
             } else {
-              updateResponseObject[skyflowID] = {};
+              insertResponseObject[tableName] = {};
               set(
-                updateResponseObject[skyflowID],
+                insertResponseObject[tableName],
                 state.name,
-                this.iFrameFormElements[formElements[i]].getUnformattedValue(),
-              );
-              set(
-                updateResponseObject[skyflowID],
-                'table',
-                tableName,
+                inputElement.iFrameFormElement.getUnformattedValue(),
               );
             }
-          } else {
-            insertResponseObject[tableName] = {};
-            set(
-              insertResponseObject[tableName],
-              state.name,
-              this.iFrameFormElements[formElements[i]].getUnformattedValue(),
-            );
           }
         }
       }
@@ -1180,7 +1187,7 @@ export class IFrameForm {
 
       try {
         if (
-          frame.location.href === window.location.href
+          frame.location.href.split('?')[0] === window.location.href
           && frame.name === frameGlobalName
         ) {
           frameInstance = frame;

src/core/internal/index.ts

@@ -106,7 +106,8 @@ export class FrameElement {
 
   private domLabel?: HTMLLabelElement;
 
-  private domInput?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFormElement;
+  private domInput?: (HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFormElement)
+  & { iFrameFormElement? : IFrameFormElement };
 
   public domError?: HTMLSpanElement;
 
@@ -153,7 +154,7 @@ export class FrameElement {
 
     this.domError = document.createElement('span');
 
-    let type;
+    let type:'select' | 'textarea' | 'input' = 'input';
     if (this.iFrameFormElement?.fieldType === ELEMENTS.dropdown.name) {
       type = 'select';
     } else if (this.iFrameFormElement?.fieldType === ELEMENTS.textarea.name) {
@@ -167,6 +168,7 @@ export class FrameElement {
 
     const inputElement = document.createElement(type);
     this.domInput = inputElement;
+    this.domInput.iFrameFormElement = this.iFrameFormElement;
     inputElement.setAttribute(CUSTOM_ROW_ID_ATTRIBUTE, this.htmlDivElement?.id?.split(':')[0] || '');
     this.inputParent.append(inputElement);
 

src/core/internal/reveal/reveal-frame.ts

@@ -61,10 +61,13 @@ class RevealFrame {
       .emit(
         ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY,
         { name: window.name },
-        (data: any) => {
-          RevealFrame.revealFrame = new RevealFrame(data.record, data.context);
-        },
+        () => {},
       );
+    const url = window.location?.href;
+    const configIndex = url.indexOf('?');
+    const encodedString = configIndex !== -1 ? decodeURIComponent(url.substring(configIndex + 1)) : '';
+    const parsedRecord = encodedString ? JSON.parse(atob(encodedString)) : {};
+    RevealFrame.revealFrame = new RevealFrame(parsedRecord.record, parsedRecord.context);
   }
 
   constructor(record, context) {