SK-2177 reveal composable element changes

package.json

@@ -2,7 +2,7 @@
   "name": "skyflow-js",
   "preferGlobal": true,
   "analyze": false,
-  "version": "2.4.3",
+  "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

@@ -203,7 +203,7 @@ const updateRecordsInVault = (
   options,
 ) => {
   const table = skyflowIdRecord.fields.table;
-  const skyflowID = skyflowIdRecord.skyflowID;
+  const skyflowID = skyflowIdRecord?.skyflowID;
   skyflowIdRecord.fields = omit(skyflowIdRecord.fields, 'table');
   skyflowIdRecord.fields = omit(skyflowIdRecord.fields, 'skyflowID');
   return client.request({
@@ -277,6 +277,103 @@ export const updateRecordsBySkyflowID = async (
   });
 });
 
+export const updateRecordsBySkyflowIDComposable = async (
+  skyflowIdRecords,
+  client: Client,
+  options,
+  authToken: string,
+) => new Promise((rootResolve, rootReject) => {
+  let updateResponseSet: Promise<any>[];
+  // 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 });
+  });
+});
+
+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

@@ -11,6 +11,7 @@ import {
   IRenderResponseType,
   IGetOptions,
   RenderFileResponse,
+  IRevealRecordComposable,
 } from '../utils/common';
 import { printLog } from '../utils/logs-helper';
 import { FILE_DOWNLOAD_URL_PARAM } from '../core/constants';
@@ -177,6 +178,27 @@ export const getFileURLFromVaultBySkyflowID = (
     rootReject(err);
   }
 });
+
+export const getFileURLFromVaultBySkyflowIDComposable = (
+  skyflowIdRecord: IRevealRecord,
+  client: Client,
+  authToken: string,
+): Promise<IRenderResponseType> => new Promise((rootResolve, rootReject) => {
+  try {
+    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);
+  }
+});
 export const fetchRecordsByTokenId = (
   tokenIdRecords: IRevealRecord[],
   client: Client,
@@ -230,6 +252,63 @@ export const fetchRecordsByTokenId = (
     rootReject(err);
   });
 });
+
+export const fetchRecordsByTokenIdComposable = (
+  tokenIdRecords: IRevealRecordComposable[],
+  client: Client,
+  authToken: string,
+): Promise<IRevealResponseType> => new Promise((rootResolve, rootReject) => {
+  const vaultResponseSet: Promise<any>[] = tokenIdRecords.map(
+    (tokenRecord) => new Promise((resolve) => {
+      const apiResponse: any = [];
+      const redaction: RedactionType = tokenRecord?.redaction ? tokenRecord?.redaction
+        : RedactionType.PLAIN_TEXT;
+        // eslint-disable-next-line max-len
+      getTokenRecordsFromVault(tokenRecord?.token as string, redaction, client, authToken as string)
+        .then(
+          (response: IApiSuccessResponse) => {
+            const fieldsData = formatForPureJsSuccess(response);
+            apiResponse.push({
+              ...fieldsData,
+              frameId: tokenRecord?.iframeName, // Add iframeName to the response
+            });
+          },
+          (cause: any) => {
+            const errorData = formatForPureJsFailure(cause, tokenRecord?.token as string);
+            printLog(errorData.error?.description || '', MessageType.ERROR, LogLevel.ERROR);
+            apiResponse.push({
+              ...errorData,
+              frameId: tokenRecord?.iframeName, // Add iframeName to the error response
+            });
+          },
+        )
+        .finally(() => {
+          resolve(apiResponse);
+        });
+    }),
+  );
+
+  Promise.allSettled(vaultResponseSet).then((resultSet) => {
+    const recordsResponse: Record<string, any>[] = [];
+    const errorResponse: Record<string, any>[] = [];
+    resultSet.forEach((result) => {
+      if (result.status === 'fulfilled') {
+        result.value.forEach((res: Record<string, any>) => {
+          if (Object.prototype.hasOwnProperty.call(res, 'error')) {
+            errorResponse.push(res);
+          } else {
+            recordsResponse.push(res);
+          }
+        });
+      }
+    });
+    if (errorResponse.length === 0) {
+      rootResolve({ records: recordsResponse });
+    } else if (recordsResponse.length === 0) rootReject({ errors: errorResponse });
+    else rootReject({ records: recordsResponse, errors: errorResponse });
+  });
+});
+
 export const formatRecordsForIframe = (response: IRevealResponseType) => {
   const result: Record<string, string> = {};
   if (response.records) {
@@ -283,6 +362,29 @@ export const formatRecordsForClient = (response: IRevealResponseType) => {
   return { errors: response.errors };
 };
 
+export const formatRecordsForClientComposable = (response) => {
+  let successRecords = [];
+  let errorRecords = [];
+  if (response.errors && response.errors.length > 0) {
+    errorRecords = response.errors.map((errors) => ({
+      error: errors?.error,
+    }));
+  }
+  if (response.records && response.records.length > 0) {
+    successRecords = response.records.map((record) => ({
+      token: record[0]?.token,
+      valueType: record[0]?.valueType,
+    }));
+  }
+  if (successRecords.length > 0 && errorRecords.length > 0) {
+    return { success: successRecords, errors: errorRecords };
+  }
+  if (successRecords.length > 0) {
+    return { success: successRecords };
+  }
+  return { errors: errorRecords };
+};
+
 export const fetchRecordsGET = async (
   skyflowIdRecords: IGetRecord[],
   client: Client,

src/core/constants.ts

@@ -30,11 +30,13 @@ export const SDK_IFRAME_EVENT = 'SDK IFRAME EVENT';
 export const DOMAIN = 'US2';
 export const CORALOGIX_DOMAIN = 'https://cdn.rum-ingress-coralogix.com/coralogix/browser/latest/coralogix-browser-sdk.js';
 export const FRAME_ELEMENT = 'element';
+export const COMPOSABLE_REVEAL = 'reveal-composable';
 
 export const ELEMENT_TYPES = {
   COLLECT: 'COLLECT',
   REVEAL: 'REVEAL',
   COMPOSE: 'COMPOSABLE',
+  REVEAL_COMPOSE: 'REVEAL_COMPOSE',
 };
 
 export const EVENT_TYPES = {
@@ -104,8 +106,17 @@ export const ELEMENT_EVENTS_TO_CLIENT = {
 };
 
 export const ELEMENT_EVENTS_TO_IFRAME = {
+  RENDER_MOUNTED: 'RENDER_MOUNTED',
+  HEIGHT_CALLBACK: 'HEIGHT_CALLBACK',
+  HEIGHT_CALLBACK_COMPOSABLE: 'HEIGHT_CALLBACK_COMPOSABLE',
+  COMPOSABLE_REVEAL: 'COMPOSABLE_REVEAL',
   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 {