SK-2177 support composable container in shadow-dom and normal dom

package.json

@@ -2,7 +2,7 @@
   "name": "skyflow-js",
   "preferGlobal": true,
   "analyze": false,
-  "version": "2.4.1",
+  "version": "2.5.0-beta.5-dev.fc93609",
   "author": "Skyflow",
   "description": "Skyflow JavaScript SDK",
   "homepage": "https://github.com/skyflowapi/skyflow-js",

src/core-utils/collect.ts

@@ -268,7 +268,7 @@ export const updateRecordsBySkyflowID = async (
       });
 
       if (errorsResponse.length === 0) {
-        rootResolve(recordsResponse);
+        rootResolve({ records: recordsResponse });
       } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse });
       else rootReject({ records: recordsResponse, errors: errorsResponse });
     });
@@ -277,6 +277,108 @@ export const updateRecordsBySkyflowID = async (
   });
 });
 
+export const updateRecordsBySkyflowIDComposable = async (
+  skyflowIdRecords,
+  client: Client,
+  options,
+  authToken: string,
+) => new Promise((rootResolve, rootReject) => {
+  let updateResponseSet: Promise<any>[];
+  // const clientId = client.toJSON()?.metaData?.uuid || '';
+  // getAccessToken(clientId).then((authToken) => {
+  // eslint-disable-next-line prefer-const
+  updateResponseSet = skyflowIdRecords.updateRecords.map(
+    (skyflowIdRecord: IInsertRecord) => new Promise((resolve, reject) => {
+      updateRecordsInVault(skyflowIdRecord, client, authToken as string, options)
+        .then((resolvedResult: any) => {
+          const resp = constructFinalUpdateRecordResponse(
+            resolvedResult, options?.tokens, skyflowIdRecord,
+          );
+          resolve(resp);
+        },
+        (rejectedResult) => {
+          let errorResponse = rejectedResult;
+          if (rejectedResult && rejectedResult.error) {
+            errorResponse = {
+              error: {
+                code: rejectedResult?.error?.code,
+                description: rejectedResult?.error?.description,
+              },
+            };
+          }
+          printLog(rejectedResult.error?.description || '', MessageType.ERROR, LogLevel.ERROR);
+          reject(errorResponse);
+        }).catch((error) => {
+          reject(error);
+        });
+    }),
+  );
+  Promise.allSettled(updateResponseSet).then((resultSet: any) => {
+    const recordsResponse: any[] = [];
+    const errorsResponse: any[] = [];
+    resultSet.forEach((result: { status: string; value: any; reason?: any; }) => {
+      if (result.status === 'fulfilled') {
+        recordsResponse.push(result.value);
+      } else {
+        errorsResponse.push(result.reason);
+      }
+    });
+
+    if (errorsResponse.length === 0) {
+      rootResolve({ records: recordsResponse });
+    } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse });
+    else rootReject({ records: recordsResponse, errors: errorsResponse });
+  });
+  // }).catch((err) => {
+  //   rootReject(err);
+  // });
+});
+
+export const insertDataInCollect = async (
+  records,
+  client: Client,
+  options,
+  finalInsertRecords,
+  authToken: string,
+) => new Promise((resolve) => {
+  let insertResponse: any;
+  let insertErrorResponse: any;
+  client
+    .request({
+      body: {
+        records,
+      },
+      requestMethod: 'POST',
+      url: `${client.config.vaultURL}/v1/vaults/${client.config.vaultID}`,
+      headers: {
+        authorization: `Bearer ${authToken}`,
+        'content-type': 'application/json',
+      },
+    })
+    .then((response: any) => {
+      insertResponse = constructInsertRecordResponse(
+        response,
+        options.tokens,
+        finalInsertRecords.records,
+      );
+      resolve(insertResponse);
+    })
+    .catch((error) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      insertErrorResponse = {
+        errors: [
+          {
+            error: {
+              code: error?.error?.code,
+              description: error?.error?.description,
+            },
+          },
+        ],
+      };
+      resolve(insertErrorResponse);
+    });
+});
+
 export const checkForElementMatchRule = (validations: IValidationRule[]) => {
   if (!validations) return false;
   for (let i = 0; i < validations.length; i += 1) {

src/core-utils/reveal.ts

@@ -156,22 +156,18 @@ export const getFileURLForRender = (
 export const getFileURLFromVaultBySkyflowID = (
   skyflowIdRecord: IRevealRecord,
   client: Client,
+  authToken: string,
 ): Promise<IRenderResponseType> => new Promise((rootResolve, rootReject) => {
   try {
-    const clientId = client.toJSON().metaData.uuid || '';
-    getAccessToken(clientId).then((authToken) => {
-      getFileURLForRender(
-        skyflowIdRecord, client, authToken as string,
-      ).then((resolvedResult: IRenderResponseType) => {
-        rootResolve(resolvedResult);
-      }).catch((err: any) => {
-        const errorData = formatForRenderFileFailure(err, skyflowIdRecord.skyflowID as string,
-          skyflowIdRecord.column as string);
-        printLog(errorData.error?.description || '', MessageType.ERROR, LogLevel.ERROR);
-        rootReject(errorData);
-      });
-    }).catch((err) => {
-      rootReject(err);
+    getFileURLForRender(
+      skyflowIdRecord, client, authToken as string,
+    ).then((resolvedResult: IRenderResponseType) => {
+      rootResolve(resolvedResult);
+    }).catch((err: any) => {
+      const errorData = formatForRenderFileFailure(err, skyflowIdRecord.skyflowID as string,
+        skyflowIdRecord.column as string);
+      printLog(errorData.error?.description || '', MessageType.ERROR, LogLevel.ERROR);
+      rootReject(errorData);
     });
   } catch (err) {
     rootReject(err);

src/core/constants.ts

@@ -104,8 +104,14 @@ export const ELEMENT_EVENTS_TO_CLIENT = {
 };
 
 export const ELEMENT_EVENTS_TO_IFRAME = {
+  HEIGHT_CALLBACK: 'HEIGHT_CALLBACK',
   COLLECT_CALL_REQUESTS: 'COLLECT_CALL_REQUESTS',
+  COMPOSABLE_CALL_REQUESTS: 'COMPOSABLE_CALL_REQUESTS',
+  COMPOSABLE_CALL_RESPONSE: 'COMPOSABLE_CALL_RESPONSE',
+  COMPOSABLE_FILE_CALL_RESPONSE: 'COMPOSABLE_FILE_CALL_RESPONSE',
+  COMPOSABLE_CONTAINER: 'COMPOSABLE_CONTAINER',
   REVEAL_CALL_REQUESTS: 'REVEAL_CALL_REQUESTS',
+  REVEAL_CALL_RESPONSE: 'REVEAL_CALL_RESPONSE',
   FRAME_READY: 'FRAME_READY',
   READY_FOR_CLIENT: 'READY_FOR_CLIENT',
   TOKENIZATION_REQUEST: 'TOKENIZATION_REQUEST',

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

@@ -119,7 +119,6 @@ class CollectElement extends SkyflowElement {
     // if (this.#isSingleElementAPI && this.#elements.length > 1) {
     //   throw new SkyflowError(SKYFLOW_ERROR_CODE.UNKNOWN_ERROR, [], true);
     // }
-
     this.#doesReturnValue = EnvOptions[this.#context.env].doesReturnValue;
     this.elementType = this.#isSingleElementAPI
       ? this.#elements[0].elementType
@@ -164,18 +163,18 @@ class CollectElement extends SkyflowElement {
     this.#readyToMount = container.isMounted;
 
     if (container.type === ContainerType.COMPOSABLE) {
+      window.addEventListener('message', (event) => {
+        if (event.data.type === ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK
+                    + this.#iframe.name) {
+          this.#iframe.setIframeHeight(event.data.data.height);
+        }
+      });
       this.#elements.forEach((element) => {
-        this.#bus.on(ELEMENT_EVENTS_TO_CLIENT.MOUNTED
-          + formatFrameNameToId(element.elementName), (data) => {
-          if (data.name === element.elementName) {
-            updateMetricObjectValue(this.#elementId, METRIC_TYPES.EVENTS_KEY, `${element.elementType}_${METRIC_TYPES.EVENTS.MOUNTED}`);
+        window.addEventListener('message', (event) => {
+          if (event.data.type === ELEMENT_EVENTS_TO_CLIENT.MOUNTED
+            + formatFrameNameToId(element.elementName)) {
             element.isMounted = true;
             this.#mounted = true;
-            this.#bus.emit(ELEMENT_EVENTS_TO_CLIENT.HEIGHT
-              + this.#iframe.name,
-            {}, (payload:any) => {
-              this.#iframe.setIframeHeight(payload.height);
-            });
           }
         });
       });
@@ -199,6 +198,7 @@ class CollectElement extends SkyflowElement {
   getID = () => this.#elementId;
 
   mount = (domElement: HTMLElement | string) => {
+    this.#mounted = true;
     if (!domElement) {
       throw new SkyflowError(SKYFLOW_ERROR_CODE.EMPTY_ELEMENT_IN_MOUNT, ['CollectElement'], true);
     }
@@ -525,7 +525,6 @@ class CollectElement extends SkyflowElement {
               else this.#states[index].value = undefined;
 
               emitEvent = isComposable ? `${emitEvent}:${data.name}` : emitEvent;
-
               this.#bus.emit(ELEMENT_EVENTS_TO_CLIENT.HEIGHT
                 + this.#iframe.name,
               {}, (payload:any) => {
@@ -537,6 +536,11 @@ class CollectElement extends SkyflowElement {
                 ...this.#states[index],
                 elementType: element.elementType,
               };
+              if (isComposable) {
+                this.#groupEmitter?._emit(ELEMENT_EVENTS_TO_CLIENT.HEIGHT, {
+                  iframeName: this.#iframe.name,
+                });
+              }
               if (isComposable && this.#groupEmitter) {
                 this.#groupEmitter._emit(emitEvent, emitData);
               } else {