From 24b4c1458b61ee0db028a724c32d1543b937e155 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 16:50:15 +0530 Subject: [PATCH 01/42] SK-2177 support composable container in shadow-dom and normal dom --- src/core-utils/collect.ts | 51 +++- src/core/constants.ts | 4 + src/core/external/collect/collect-element.ts | 11 +- .../collect/compose-collect-container.ts | 151 ++++++---- src/core/internal/frame-element-init.ts | 269 +++++++++++++++++- src/core/internal/index.ts | 5 + src/utils/logs.ts | 2 + 7 files changed, 434 insertions(+), 59 deletions(-) diff --git a/src/core-utils/collect.ts b/src/core-utils/collect.ts index e4672d8a..9ad20368 100644 --- a/src/core-utils/collect.ts +++ b/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,55 @@ export const updateRecordsBySkyflowID = async ( }); }); +export const insertDataInCollect = async ( + records, + client: Client, + options, + finalInsertRecords, +) => new Promise((resolve, reject) => { + let insertResponse: any; + let insertErrorResponse: any; + const clientId = client.toJSON()?.metaData?.uuid || ''; + getAccessToken(clientId).then((authToken) => { + 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); + }); + }).catch((err) => { + reject(err); + }); +}); + export const checkForElementMatchRule = (validations: IValidationRule[]) => { if (!validations) return false; for (let i = 0; i < validations.length; i += 1) { diff --git a/src/core/constants.ts b/src/core/constants.ts index 57196408..6e0cfdd2 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -104,7 +104,11 @@ 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_CONTAINER: 'COMPOSABLE_CONTAINER', REVEAL_CALL_REQUESTS: 'REVEAL_CALL_REQUESTS', FRAME_READY: 'FRAME_READY', READY_FOR_CLIENT: 'READY_FOR_CLIENT', diff --git a/src/core/external/collect/collect-element.ts b/src/core/external/collect/collect-element.ts index 298aa5d2..0e7fb995 100644 --- a/src/core/external/collect/collect-element.ts +++ b/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 @@ -525,18 +524,26 @@ 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) => { this.#iframe.setIframeHeight(payload.height); }); + this.#bus.on(ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + + this.#iframe.name, (payload:any) => { + this.#iframe.setIframeHeight(payload.height); + }); this.#updateState(); const emitData = { ...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 { diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 4a9f0480..364e5e78 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -71,7 +71,11 @@ class ComposableContainer extends Container { #clientDomain: string = ''; - #isSkyflowFrameReady: boolean = false; + #isComposableFrameReady: boolean = false; + + #shadowRoot: ShadowRoot | null = null; + + #iframeID: string = ''; constructor(options, metaData, skyflowElements, context) { super(); @@ -89,8 +93,6 @@ class ComposableContainer extends Container { }, }, }; - this.#isSkyflowFrameReady = metaData.skyflowContainer.isControllerFrameReady; - this.#skyflowElements = skyflowElements; this.#context = context; this.#options = options; @@ -110,6 +112,18 @@ class ComposableContainer extends Container { this.#context.logLevel); this.#containerMounted = true; this.#updateListeners(); + bus + .target(properties.IFRAME_SECURE_ORIGIN) + .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, (data, callback) => { + printLog(parameterizedString(logs.infoLogs.INITIALIZE_COMPOSABLE_CLIENT, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + callback({ + client: this.#metaData.clientJSON, + context, + }); + this.#isComposableFrameReady = true; + }); } create = (input: CollectElementInput, options: CollectElementOptions = { @@ -135,6 +149,7 @@ class ComposableContainer extends Container { elementName, }); const controllerIframeName = `${FRAME_ELEMENT}:group:${btoa(this.#tempElements)}:${this.#containerId}:${this.#context.logLevel}:${btoa(this.#clientDomain)}`; + this.#iframeID = controllerIframeName; return new ComposableElement(elementName, this.#eventEmitter, controllerIframeName); }; @@ -301,6 +316,20 @@ class ComposableContainer extends Container { this.#containerElement.mount(domElement); this.#isMounted = true; } + if (domElement instanceof HTMLElement + && (domElement as HTMLElement).getRootNode() instanceof ShadowRoot) { + this.#shadowRoot = domElement.getRootNode() as ShadowRoot; + } else if (typeof domElement === 'string') { + const element = document.getElementById(domElement); + if (element && element.getRootNode() instanceof ShadowRoot) { + this.#shadowRoot = element.getRootNode() as ShadowRoot; + } + } + if (this.#shadowRoot !== null) { + this.#eventEmitter.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT, (data) => { + this.#emitEvent(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + data.iframeName, {}); + }); + } }; unmount = () => { @@ -308,8 +337,7 @@ class ComposableContainer extends Container { }; collect = (options: ICollectOptions = { tokens: true }) :Promise => { - this.#isSkyflowFrameReady = this.#metaData.skyflowContainer.isControllerFrameReady; - if (this.#isSkyflowFrameReady) { + if (this.#isComposableFrameReady) { return new Promise((resolve, reject) => { try { validateInitConfig(this.#metaData.clientJSON.config); @@ -345,30 +373,25 @@ class ComposableContainer extends Container { elementId: element.elementName, }); }); - bus - // .target(properties.IFRAME_SECURE_ORIGIN) - .emit( - ELEMENT_EVENTS_TO_IFRAME.COLLECT_CALL_REQUESTS + this.#metaData.uuid, - { - type: COLLECT_TYPES.COLLECT, - ...options, - tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, - }, - (data: any) => { - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - - resolve(data); - } - }, - ); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + type: COLLECT_TYPES.COLLECT, + ...options, + tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }); + bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId, (data) => { + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + + resolve(data); + } + }); printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), MessageType.LOG, this.#context.logLevel); @@ -417,30 +440,32 @@ class ComposableContainer extends Container { }); bus .target(properties.IFRAME_SECURE_ORIGIN) - .on(ELEMENT_EVENTS_TO_IFRAME.SKYFLOW_FRAME_CONTROLLER_READY + this.#containerId, () => { - bus - // .target(properties.IFRAME_SECURE_ORIGIN) - .emit( - ELEMENT_EVENTS_TO_IFRAME.COLLECT_CALL_REQUESTS + this.#metaData.uuid, - { - type: COLLECT_TYPES.COLLECT, - ...options, - tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, - }, - (data: any) => { - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - resolve(data); - } - }, - ); + .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + + this.#containerId, (_, callback) => { + callback({ + client: this.#metaData.clientJSON, + context: this.#context, + }); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + type: COLLECT_TYPES.COLLECT, + ...options, + tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }); + bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + + this.#containerId, (data) => { + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + + resolve(data); + } + }); }); printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), @@ -452,6 +477,26 @@ class ComposableContainer extends Container { }); }; + #emitEvent = (eventName: string, options?: Record, callback?: any) => { + if (this.#shadowRoot) { + const iframe = this.#shadowRoot.getElementById(this.#iframeID) as HTMLIFrameElement; + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage({ + name: eventName, + ...options, + }, properties.IFRAME_SECURE_ORIGIN); + } + } else { + const iframe = document.getElementById(this.#iframeID) as HTMLIFrameElement; + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage({ + name: eventName, + ...options, + }, properties.IFRAME_SECURE_ORIGIN); + } + } + }; + #updateListeners = () => { this.#eventEmitter.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_UPDATE_OPTIONS, (data) => { let elementIndex; diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 069d60f9..a70fecae 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -1,17 +1,30 @@ import injectStylesheet from 'inject-stylesheet'; import bus from 'framebus'; +import get from 'lodash/get'; import { getValueAndItsUnit, validateAndSetupGroupOptions } from '../../libs/element-options'; import { getFlexGridStyles } from '../../libs/styles'; import { ContainerType } from '../../skyflow'; -import { Context, Env, LogLevel } from '../../utils/common'; +import { + Context, Env, LogLevel, +} from '../../utils/common'; import { getContainerType } from '../../utils/helpers'; import { ALLOWED_MULTIPLE_FIELDS_STYLES, - ELEMENT_EVENTS_TO_CLIENT, ELEMENT_EVENTS_TO_IFRAME, ERROR_TEXT_STYLES, STYLE_TYPE, + ELEMENT_EVENTS_TO_CLIENT, ELEMENT_EVENTS_TO_IFRAME, ELEMENTS, ERROR_TEXT_STYLES, STYLE_TYPE, } from '../constants'; import IFrameFormElement from './iframe-form'; import getCssClassesFromJss, { generateCssWithoutClass } from '../../libs/jss-styles'; import FrameElement from '.'; +import { + checkForElementMatchRule, checkForValueMatch, constructElementsInsertReq, + constructInsertRecordRequest, insertDataInCollect, updateRecordsBySkyflowID, +} from '../../core-utils/collect'; +import SkyflowError from '../../libs/skyflow-error'; +import SKYFLOW_ERROR_CODE from '../../utils/constants'; +import { getAccessToken } from '../../utils/bus-events'; +import Client from '../../client'; + +const set = require('set-value'); export default class FrameElementInit { iframeFormElement: IFrameFormElement | undefined; @@ -30,6 +43,14 @@ export default class FrameElementInit { group: any; + frameList: FrameElement[] = []; + + iframeFormList: IFrameFormElement[] = []; + + #client!: Client; + + #context!: Context; + constructor() { // this.createIframeElement(frameName, label, skyflowID, isRequired); this.context = { logLevel: LogLevel.INFO, env: Env.DEV }; // client level @@ -41,8 +62,238 @@ export default class FrameElementInit { }; this.updateGroupData(); this.createContainerDiv(this.group); + bus.emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { + this.#context = data.context; + data.client.config = { + ...data.client.config, + }; + this.#client = Client.fromJSON(data.client) as any; + }); + + window.addEventListener('message', this.handleCollectCall); } + private handleCollectCall = (event: MessageEvent) => { + if (event.origin === this.clientMetaData.clientDomain) { + if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + // eslint-disable-next-line no-empty + + this.containerId) { + this.tokenize(event.data) + .then((response: any) => { + const records = response.records; + bus + // .target(this.clientMetaData.clientDomain) + .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + { + records, + }); + }) + .catch((error) => { + bus + // .target(this.clientMetaData.clientDomain) + .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + { + error, + }); + }); + } + } + }; + + private tokenize = (options) => { + let errorMessage = ''; + const insertRequestObject: any = {}; + const updateRequestObject: any = {}; + + this.iframeFormList.forEach((inputElement) => { + if (inputElement) { + if (inputElement) { + if ( + inputElement.fieldType + !== ELEMENTS.FILE_INPUT.name + ) { + const { + // eslint-disable-next-line max-len + state, doesClientHasError, clientErrorText, errorText, onFocusChange, validations, + setValue, + } = inputElement; + if (state.isRequired || !state.isValid) { + onFocusChange(false); + } + if (validations + && checkForElementMatchRule(validations) + && checkForValueMatch(validations, inputElement)) { + setValue(state.value); + onFocusChange(false); + } + if (!state.isValid || !state.isComplete) { + if (doesClientHasError) { + errorMessage += `${state.name}:${clientErrorText}`; + } else { errorMessage += `${state.name}:${errorText} `; } + } + } + } + } + }); + + // return for error + if (errorMessage.length > 0) { + // eslint-disable-next-line max-len + return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.COMPLETE_AND_VALID_INPUTS, [`${errorMessage}`], true)); + } + // eslint-disable-next-line consistent-return + this.iframeFormList.forEach((inputElement) => { + if (inputElement) { + const { + state, tableName, validations, skyflowID, + } = inputElement; + if (tableName) { + if ( + inputElement.fieldType + !== ELEMENTS.FILE_INPUT.name + ) { + if ( + inputElement.fieldType + === ELEMENTS.checkbox.name + ) { + if (insertRequestObject[state.name]) { + insertRequestObject[state.name] = `${insertRequestObject[state.name]},${state.value + }`; + } else { + insertRequestObject[state.name] = state.value; + } + } else if (insertRequestObject[tableName] && !(skyflowID === '') && skyflowID === undefined) { + if (get(insertRequestObject[tableName], state.name) + && !(validations && checkForElementMatchRule(validations))) { + return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.DUPLICATE_ELEMENT, + [state.name, tableName], true)); + } + set( + insertRequestObject[tableName], + state.name, + inputElement.getUnformattedValue(), + ); + } else if (skyflowID || skyflowID === '') { + if (skyflowID === '' || skyflowID === null) { + return Promise.reject(new SkyflowError( + SKYFLOW_ERROR_CODE.EMPTY_SKYFLOW_ID_IN_ADDITIONAL_FIELDS, + )); + } + if (updateRequestObject[skyflowID]) { + set( + updateRequestObject[skyflowID], + state.name, + inputElement.getUnformattedValue(), + ); + } else { + updateRequestObject[skyflowID] = {}; + set( + updateRequestObject[skyflowID], + state.name, + inputElement.getUnformattedValue(), + ); + set( + updateRequestObject[skyflowID], + 'table', + tableName, + ); + } + } else { + insertRequestObject[tableName] = {}; + set( + insertRequestObject[tableName], + state.name, + inputElement.getUnformattedValue(), + ); + } + } + } + } + }); + let finalInsertRequest; + let finalInsertRecords; + let finalUpdateRecords; + try { + [finalInsertRecords, finalUpdateRecords] = constructElementsInsertReq( + insertRequestObject, updateRequestObject, options.options, + ); + finalInsertRequest = constructInsertRecordRequest(finalInsertRecords, options.options); + } catch (error:any) { + return Promise.reject({ + error: error?.message, + }); + } + + const client = this.#client; + const sendRequest = () => new Promise((rootResolve, rootReject) => { + const insertPromiseSet: Promise[] = []; + + const clientId = client.toJSON()?.metaData?.uuid || ''; + getAccessToken(clientId).then(() => { + if (finalInsertRequest.length !== 0) { + insertPromiseSet.push( + insertDataInCollect(finalInsertRequest, client, options, finalInsertRecords), + ); + } + if (finalUpdateRecords.updateRecords.length !== 0) { + insertPromiseSet.push( + updateRecordsBySkyflowID(finalUpdateRecords, client, options), + ); + } + }).catch((err) => { + rootReject({ + error: err, + }); + }); + if (insertPromiseSet.length !== 0) { + Promise.allSettled(insertPromiseSet).then((resultSet: any) => { + const recordsResponse: any[] = []; + const errorsResponse: any[] = []; + resultSet.forEach((result: + { status: string; value: any; reason?: any; }) => { + if (result.status === 'fulfilled') { + if (result.value.records !== undefined && Array.isArray(result.value.records)) { + result.value.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.value.errors !== undefined && Array.isArray(result.value.errors)) { + result.value.errors.forEach((error) => { + errorsResponse.push(error); + }); + } + } else { + if (result.reason?.records !== undefined && Array.isArray(result.reason?.records)) { + result.reason.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.reason?.errors !== undefined && Array.isArray(result.reason?.errors)) { + result.reason.errors.forEach((error) => { + errorsResponse.push(error); + }); + } + } + }); + if (errorsResponse.length === 0) { + rootResolve({ records: recordsResponse }); + } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse }); + else rootReject({ records: recordsResponse, errors: errorsResponse }); + }); + } + }); + + return new Promise((resolve, reject) => { + sendRequest() + .then((res) => { + resolve(res); + }) + .catch((err) => { + reject(err); + }); + }); + }; + updateGroupData = () => { const frameName = window.name; const url = window.location?.href; @@ -52,7 +303,6 @@ export default class FrameElementInit { this.clientMetaData = parsedRecord.metaData; this.group = parsedRecord.record; this.containerId = parsedRecord.containerId; - bus .target(this.clientMetaData.clientDomain) .on(ELEMENT_EVENTS_TO_IFRAME.SET_VALUE + frameName, (data) => { @@ -69,6 +319,7 @@ export default class FrameElementInit { ...this.clientMetaData, isRequired, }, this.context, skyflowID); + this.iframeFormList.push(this.iframeFormElement); return this.iframeFormElement; }; @@ -181,6 +432,8 @@ export default class FrameElementInit { element, elementDiv, ); + this.frameList.push(this.frameElement); + if (isComposableContainer && errorTextElement) { iFrameFormElement.on(ELEMENT_EVENTS_TO_CLIENT.BLUR, (state) => { errorTextMap[element.elementName] = state.error; @@ -204,6 +457,16 @@ export default class FrameElementInit { bus.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + window.name, (data, callback) => { callback({ height: rootDiv.scrollHeight, name: window.name }); }); + window.addEventListener('message', (event) => { + if (event.data.name === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + window.name) { + bus + // .target(event.origin) + .emit( + ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + window.name, + { height: rootDiv.scrollHeight, name: window.name }, + ); + } + }); }; #updateCombinedErrorText = (elementId, errorMessages) => { diff --git a/src/core/internal/index.ts b/src/core/internal/index.ts index 8648eb8c..5d71d94e 100644 --- a/src/core/internal/index.ts +++ b/src/core/internal/index.ts @@ -89,16 +89,21 @@ export default class FrameElement { private selectedData?: number = undefined; + frameElementName: string; + constructor( iFrameFormElement: IFrameFormElement, options: any, htmlDivElement: HTMLDivElement, + frameElementName: string = '', ) { this.iFrameFormElement = iFrameFormElement; this.options = options; this.htmlDivElement = htmlDivElement; this.hasError = false; this.mount(); + this.frameElementName = frameElementName; + this.iFrameFormElement.fieldName = options.column; this.iFrameFormElement.tableName = options.table; this.iFrameFormElement.state.name = options.column; diff --git a/src/utils/logs.ts b/src/utils/logs.ts index 367ae2a8..7b1fbb61 100644 --- a/src/utils/logs.ts +++ b/src/utils/logs.ts @@ -10,6 +10,8 @@ const logs = { CREATE_COLLECT_CONTAINER: '%s1 - Creating Collect container.', COLLECT_CONTAINER_CREATED: '%s1 - Created Collect container successfully.', + INITIALIZE_COMPOSABLE_CLIENT: '%s1 - Initializing Composable container.', + CREATE_REVEAL_CONTAINER: '%s1 - Creating Reveal container.', REVEAL_CONTAINER_CREATED: '%s1 - Created Reveal container successfully.', From 3d22e02b1a8c1bbd5f81c5333450a1f2c7f26455 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 17:01:05 +0530 Subject: [PATCH 02/42] SK-2177 internal release --- src/core/external/collect/compose-collect-container.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 364e5e78..3f53c064 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -467,6 +467,7 @@ class ComposableContainer extends Container { } }); }); + printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), MessageType.LOG, this.#context.logLevel); From dc20d2861eb7c1e632a9bbd5086e747437f35885 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 11:31:45 +0000 Subject: [PATCH 03/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.3d22e02 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 666c53cf..4ebc7198 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.4.1", + "version": "2.5.0-beta.5-dev.3d22e02", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From c97c0f58db388693f5fae7d62d9827f57cde3843 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 18:39:46 +0530 Subject: [PATCH 04/42] SK-2177 fix promises --- src/core-utils/collect.ts | 74 ++++++++++----------- src/core/internal/frame-element-init.ts | 86 ++++++++++++------------- 2 files changed, 77 insertions(+), 83 deletions(-) diff --git a/src/core-utils/collect.ts b/src/core-utils/collect.ts index 9ad20368..9dc4069b 100644 --- a/src/core-utils/collect.ts +++ b/src/core-utils/collect.ts @@ -282,48 +282,44 @@ export const insertDataInCollect = async ( client: Client, options, finalInsertRecords, -) => new Promise((resolve, reject) => { + authToken: string, +) => new Promise((resolve) => { let insertResponse: any; let insertErrorResponse: any; - const clientId = client.toJSON()?.metaData?.uuid || ''; - getAccessToken(clientId).then((authToken) => { - 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, - }, + 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); - }); - }).catch((err) => { - reject(err); - }); + }, + ], + }; + resolve(insertErrorResponse); + }); }); export const checkForElementMatchRule = (validations: IValidationRule[]) => { diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index a70fecae..2cf20d30 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -229,10 +229,11 @@ export default class FrameElementInit { const insertPromiseSet: Promise[] = []; const clientId = client.toJSON()?.metaData?.uuid || ''; - getAccessToken(clientId).then(() => { + getAccessToken(clientId).then((authToken) => { if (finalInsertRequest.length !== 0) { insertPromiseSet.push( - insertDataInCollect(finalInsertRequest, client, options, finalInsertRecords), + insertDataInCollect(finalInsertRequest, + client, options, finalInsertRecords, authToken as string), ); } if (finalUpdateRecords.updateRecords.length !== 0) { @@ -240,57 +241,54 @@ export default class FrameElementInit { updateRecordsBySkyflowID(finalUpdateRecords, client, options), ); } + if (insertPromiseSet.length !== 0) { + Promise.allSettled(insertPromiseSet).then((resultSet: any) => { + const recordsResponse: any[] = []; + const errorsResponse: any[] = []; + + resultSet.forEach((result: + { status: string; value: any; reason?: any; }) => { + if (result.status === 'fulfilled') { + if (result.value.records !== undefined && Array.isArray(result.value.records)) { + result.value.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.value.errors !== undefined && Array.isArray(result.value.errors)) { + result.value.errors.forEach((error) => { + errorsResponse.push(error); + }); + } + } else { + if (result.reason?.records !== undefined && Array.isArray(result.reason?.records)) { + result.reason.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.reason?.errors !== undefined && Array.isArray(result.reason?.errors)) { + result.reason.errors.forEach((error) => { + errorsResponse.push(error); + }); + } + } + }); + if (errorsResponse.length === 0) { + rootResolve({ records: recordsResponse }); + } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse }); + else rootReject({ records: recordsResponse, errors: errorsResponse }); + }); + } }).catch((err) => { rootReject({ error: err, }); }); - if (insertPromiseSet.length !== 0) { - Promise.allSettled(insertPromiseSet).then((resultSet: any) => { - const recordsResponse: any[] = []; - const errorsResponse: any[] = []; - resultSet.forEach((result: - { status: string; value: any; reason?: any; }) => { - if (result.status === 'fulfilled') { - if (result.value.records !== undefined && Array.isArray(result.value.records)) { - result.value.records.forEach((record) => { - recordsResponse.push(record); - }); - } - if (result.value.errors !== undefined && Array.isArray(result.value.errors)) { - result.value.errors.forEach((error) => { - errorsResponse.push(error); - }); - } - } else { - if (result.reason?.records !== undefined && Array.isArray(result.reason?.records)) { - result.reason.records.forEach((record) => { - recordsResponse.push(record); - }); - } - if (result.reason?.errors !== undefined && Array.isArray(result.reason?.errors)) { - result.reason.errors.forEach((error) => { - errorsResponse.push(error); - }); - } - } - }); - if (errorsResponse.length === 0) { - rootResolve({ records: recordsResponse }); - } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse }); - else rootReject({ records: recordsResponse, errors: errorsResponse }); - }); - } }); return new Promise((resolve, reject) => { sendRequest() - .then((res) => { - resolve(res); - }) - .catch((err) => { - reject(err); - }); + .then((res) => resolve(res)) + .catch((err) => reject(err)); }); }; From b5febcbadc7dec009cb25da78a7947c639da9cc9 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 13:10:31 +0000 Subject: [PATCH 05/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.c97c0f5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4ebc7198..6bfb1674 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.3d22e02", + "version": "2.5.0-beta.5-dev.c97c0f5", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 1a3ba577f2feb12208fa46e5cb0b6093cfcf292c Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:12:43 +0530 Subject: [PATCH 06/42] SK-2177 mounted --- src/core/external/collect/collect-element.ts | 1 + src/core/external/common/iframe.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/external/collect/collect-element.ts b/src/core/external/collect/collect-element.ts index 0e7fb995..fdeaf6a6 100644 --- a/src/core/external/collect/collect-element.ts +++ b/src/core/external/collect/collect-element.ts @@ -225,6 +225,7 @@ class CollectElement extends SkyflowElement { } const isComposable = this.#elements.length > 1; if (isComposable) { + this.#mounted = true; this.#iframe.mount(domElement, this.#elementId, { record: JSON.stringify({ record: this.#group, diff --git a/src/core/external/common/iframe.ts b/src/core/external/common/iframe.ts index b59e8bc6..8f7f8a17 100644 --- a/src/core/external/common/iframe.ts +++ b/src/core/external/common/iframe.ts @@ -30,7 +30,7 @@ export default class IFrame { } mount = (domElement, elementId?: string, data?: any) => { - this.unmount(); + // this.unmount(); try { if (typeof domElement === 'string') { this.container = document.querySelector(domElement) || undefined; From beb69f5ef1c7107019e50589af4e9c3dd56c25bc Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 13:44:02 +0000 Subject: [PATCH 07/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.1a3ba57 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6bfb1674..28d1d0db 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.c97c0f5", + "version": "2.5.0-beta.5-dev.1a3ba57", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 4f9c03bfa0cc610755fb0c806c887c174f31caab Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:17:02 +0530 Subject: [PATCH 08/42] SK-2177 mounted --- src/core/external/collect/collect-element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/external/collect/collect-element.ts b/src/core/external/collect/collect-element.ts index fdeaf6a6..4f376acd 100644 --- a/src/core/external/collect/collect-element.ts +++ b/src/core/external/collect/collect-element.ts @@ -198,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); } @@ -225,7 +226,6 @@ class CollectElement extends SkyflowElement { } const isComposable = this.#elements.length > 1; if (isComposable) { - this.#mounted = true; this.#iframe.mount(domElement, this.#elementId, { record: JSON.stringify({ record: this.#group, From 7f1c17f93c70a3a29ae7939b9911bbda168f25bb Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 13:47:34 +0000 Subject: [PATCH 09/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.4f9c03b --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 28d1d0db..e8fd9714 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.1a3ba57", + "version": "2.5.0-beta.5-dev.4f9c03b", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 410308ace8a2bbf2b92786c3dc9934f5dc6d31ca Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:20:41 +0530 Subject: [PATCH 10/42] SK-2177 mounted --- src/core/external/collect/compose-collect-container.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 3f53c064..b06c2eb9 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -348,11 +348,11 @@ class ComposableContainer extends Container { throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); } const containerElements = getElements(this.#tempElements); - containerElements.forEach((element:any) => { - if (!element?.isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true); - } - }); + // containerElements.forEach((element:any) => { + // if (!element?.isMounted) { + // 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) => { From b110becb79b65f0d66615218a1a77b1f8bdbabb3 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 13:51:17 +0000 Subject: [PATCH 11/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.410308a --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e8fd9714..873e3eb8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.4f9c03b", + "version": "2.5.0-beta.5-dev.410308a", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 06519d4b1337f155e808255ab6a72458efcf0b41 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:29:15 +0530 Subject: [PATCH 12/42] SK-2177 comment mount --- src/core/external/collect/compose-collect-container.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index b06c2eb9..4df68a02 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -412,11 +412,11 @@ class ComposableContainer extends Container { } const containerElements = getElements(this.#tempElements); - containerElements.forEach((element:any) => { - if (!element?.isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true); - } - }); + // containerElements.forEach((element:any) => { + // if (!element?.isMounted) { + // 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) => { From 96684f781eb47f33cbac10a75287a8f9e4e9e020 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 13:59:50 +0000 Subject: [PATCH 13/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.06519d4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 873e3eb8..c0190f54 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.410308a", + "version": "2.5.0-beta.5-dev.06519d4", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 9d975d32dffbc9ae71fa6a48cf171cfa63aaac4e Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:44:19 +0530 Subject: [PATCH 14/42] SK-2177 comment mounted --- .../collect/compose-collect-container.ts | 1 + src/core/internal/frame-element-init.ts | 44 +++++++++---------- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 4df68a02..d6338138 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -482,6 +482,7 @@ class ComposableContainer extends Container { if (this.#shadowRoot) { const iframe = this.#shadowRoot.getElementById(this.#iframeID) as HTMLIFrameElement; if (iframe?.contentWindow) { + console.log('Posting message to iframe:', eventName, options); iframe.contentWindow.postMessage({ name: eventName, ...options, diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 2cf20d30..0b9d0c39 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -74,30 +74,30 @@ export default class FrameElementInit { } private handleCollectCall = (event: MessageEvent) => { - if (event.origin === this.clientMetaData.clientDomain) { - if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS - // eslint-disable-next-line no-empty + // if (event.origin === this.clientMetaData.clientDomain) { + if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.containerId) { - this.tokenize(event.data) - .then((response: any) => { - const records = response.records; - bus - // .target(this.clientMetaData.clientDomain) - .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - { - records, - }); - }) - .catch((error) => { - bus - // .target(this.clientMetaData.clientDomain) - .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - { - error, - }); - }); - } + console.log('Received composable call request:', event.data); + this.tokenize(event.data) + .then((response: any) => { + const records = response.records; + bus + // .target(this.clientMetaData.clientDomain) + .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + { + records, + }); + }) + .catch((error) => { + bus + // .target(this.clientMetaData.clientDomain) + .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + { + error, + }); + }); } + // } }; private tokenize = (options) => { From 461f1dca9f6bb599d4f825fece043b1d4346aac4 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 14:15:01 +0000 Subject: [PATCH 15/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.9d975d3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c0190f54..36bdaadd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.06519d4", + "version": "2.5.0-beta.5-dev.9d975d3", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 1c981cec2ff437a9fc4edbdbabba134a7b5b19a7 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 19:58:27 +0530 Subject: [PATCH 16/42] SK-2177 client initialise --- src/core/external/collect/compose-collect-container.ts | 9 +++++++++ src/core/internal/frame-element-init.ts | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index d6338138..a0a8745f 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -337,6 +337,11 @@ class ComposableContainer extends Container { }; collect = (options: ICollectOptions = { tokens: true }) :Promise => { + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + client: this.#metaData.clientJSON, + context: this.#context, + }); + this.#isComposableFrameReady = true; if (this.#isComposableFrameReady) { return new Promise((resolve, reject) => { try { @@ -438,6 +443,10 @@ class ComposableContainer extends Container { elementId: element.elementName, }); }); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + client: this.#metaData.clientJSON, + context: this.#context, + }); bus .target(properties.IFRAME_SECURE_ORIGIN) .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 0b9d0c39..7002b4c9 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -97,6 +97,15 @@ export default class FrameElementInit { }); }); } + if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId) { + // console.log('Received composable container event:', event.data); + const data = event.data; + this.#context = data.context; + data.client.config = { + ...data.client.config, + }; + this.#client = Client.fromJSON(data.client) as any; + } // } }; From 48a9b7e07cf96396af10d5013277fff137fee821 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 14:29:11 +0000 Subject: [PATCH 17/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.1c981ce --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36bdaadd..fca7e5af 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.9d975d3", + "version": "2.5.0-beta.5-dev.1c981ce", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From deb34bf192770101318ddbde5bc37c7a485095ce Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 20:41:48 +0530 Subject: [PATCH 18/42] SK-2177 add target --- src/core/internal/frame-element-init.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 7002b4c9..3d3d049e 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -62,13 +62,14 @@ export default class FrameElementInit { }; this.updateGroupData(); this.createContainerDiv(this.group); - bus.emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { - this.#context = data.context; - data.client.config = { - ...data.client.config, - }; - this.#client = Client.fromJSON(data.client) as any; - }); + bus.target(this.clientMetaData.clientDomain) + .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { + this.#context = data.context; + data.client.config = { + ...data.client.config, + }; + this.#client = Client.fromJSON(data.client) as any; + }); window.addEventListener('message', this.handleCollectCall); } From 88a7e99dd851725c4d99a77b7817c97304d39356 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 15:12:35 +0000 Subject: [PATCH 19/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.deb34bf --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fca7e5af..2a39de5c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.1c981ce", + "version": "2.5.0-beta.5-dev.deb34bf", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 7dda8b11a22d7e1ab7c0ae1dc3aa54d7c1e0bada Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 20:51:14 +0530 Subject: [PATCH 20/42] SK-2177 add target --- .../collect/compose-collect-container.ts | 16 ++++++++-------- src/core/internal/frame-element-init.ts | 2 ++ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index a0a8745f..a5428575 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -337,10 +337,10 @@ class ComposableContainer extends Container { }; collect = (options: ICollectOptions = { tokens: true }) :Promise => { - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - client: this.#metaData.clientJSON, - context: this.#context, - }); + // this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + // client: this.#metaData.clientJSON, + // context: this.#context, + // }); this.#isComposableFrameReady = true; if (this.#isComposableFrameReady) { return new Promise((resolve, reject) => { @@ -443,10 +443,10 @@ class ComposableContainer extends Container { elementId: element.elementName, }); }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - client: this.#metaData.clientJSON, - context: this.#context, - }); + // this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + // client: this.#metaData.clientJSON, + // context: this.#context, + // }); bus .target(properties.IFRAME_SECURE_ORIGIN) .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 3d3d049e..676899d6 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -69,12 +69,14 @@ export default class FrameElementInit { ...data.client.config, }; this.#client = Client.fromJSON(data.client) as any; + console.log('client initailized'); }); window.addEventListener('message', this.handleCollectCall); } private handleCollectCall = (event: MessageEvent) => { + console.log('Received message:', event.data); // if (event.origin === this.clientMetaData.clientDomain) { if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.containerId) { From da2982da39067b728b77f431d43486bd7adab5c5 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 15:21:49 +0000 Subject: [PATCH 21/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.7dda8b1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2a39de5c..a4abcbad 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.deb34bf", + "version": "2.5.0-beta.5-dev.7dda8b1", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From a9e21434f5234b9ba4fbab8b1860a68d8629d94d Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 20:59:01 +0530 Subject: [PATCH 22/42] SK-2177 add target --- src/core/external/collect/compose-collect-container.ts | 2 +- src/core/internal/frame-element-init.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index a5428575..e0726124 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -113,7 +113,7 @@ class ComposableContainer extends Container { this.#containerMounted = true; this.#updateListeners(); bus - .target(properties.IFRAME_SECURE_ORIGIN) + // .target(properties.IFRAME_SECURE_ORIGIN) .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, (data, callback) => { printLog(parameterizedString(logs.infoLogs.INITIALIZE_COMPOSABLE_CLIENT, CLASS_NAME), MessageType.LOG, diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 676899d6..272b83a2 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -62,7 +62,8 @@ export default class FrameElementInit { }; this.updateGroupData(); this.createContainerDiv(this.group); - bus.target(this.clientMetaData.clientDomain) + bus + // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { this.#context = data.context; data.client.config = { From 7d38ef2f25aa04860a50d15104838028712ced4e Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 15:29:35 +0000 Subject: [PATCH 23/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.a9e2143 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a4abcbad..59548588 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.7dda8b1", + "version": "2.5.0-beta.5-dev.a9e2143", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From d5616a26494bffaa600609e1a773dc832028222f Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 21:08:11 +0530 Subject: [PATCH 24/42] SK-2177 client initialise --- src/core-utils/collect.ts | 57 ++++++++ .../collect/compose-collect-container.ts | 43 ++++-- src/core/internal/frame-element-init.ts | 124 +++++++++--------- 3 files changed, 153 insertions(+), 71 deletions(-) diff --git a/src/core-utils/collect.ts b/src/core-utils/collect.ts index 9dc4069b..959a405d 100644 --- a/src/core-utils/collect.ts +++ b/src/core-utils/collect.ts @@ -277,6 +277,63 @@ export const updateRecordsBySkyflowID = async ( }); }); +export const updateRecordsBySkyflowIDComposable = async ( + skyflowIdRecords, + client: Client, + options, + authToken: string, +) => new Promise((rootResolve, rootReject) => { + let updateResponseSet: Promise[]; + // 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, diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index e0726124..4fa80f1b 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -38,6 +38,8 @@ import { import Container from '../common/container'; import CollectElement from './collect-element'; import ComposableElement from './compose-collect-element'; +import Client from '../../../client'; +import { getAccessToken } from '../../../utils/bus-events'; const CLASS_NAME = 'CollectContainer'; class ComposableContainer extends Container { @@ -337,8 +339,12 @@ class ComposableContainer extends Container { }; collect = (options: ICollectOptions = { tokens: true }) :Promise => { + console.log('Collect called with options:'); // this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - // client: this.#metaData.clientJSON, + // client: { + // vaultURL: this.#metaData.clientJSON.config.vaultURL, + // vaultID: this.#metaData.clientJSON.config.vaultID, + // }, // context: this.#context, // }); this.#isComposableFrameReady = true; @@ -378,12 +384,27 @@ class ComposableContainer extends Container { elementId: element.elementName, }); }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { - type: COLLECT_TYPES.COLLECT, - ...options, - tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, + const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; + const clientId = client.toJSON()?.metaData?.uuid || ''; + getAccessToken(this.#metaData.uuid).then((authToken) => { + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + data: { + type: COLLECT_TYPES.COLLECT, + ...options, + tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, + }); + }).catch((err:any) => { + console.error('Error getting access token:', err); + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); }); bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId, (data) => { if (!data || data?.error) { @@ -443,10 +464,10 @@ class ComposableContainer extends Container { elementId: element.elementName, }); }); - // this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - // client: this.#metaData.clientJSON, - // context: this.#context, - // }); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + client: this.#metaData.clientJSON, + context: this.#context, + }); bus .target(properties.IFRAME_SECURE_ORIGIN) .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 272b83a2..64591235 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -17,11 +17,11 @@ import getCssClassesFromJss, { generateCssWithoutClass } from '../../libs/jss-st import FrameElement from '.'; import { checkForElementMatchRule, checkForValueMatch, constructElementsInsertReq, - constructInsertRecordRequest, insertDataInCollect, updateRecordsBySkyflowID, + constructInsertRecordRequest, insertDataInCollect, + updateRecordsBySkyflowIDComposable, } from '../../core-utils/collect'; import SkyflowError from '../../libs/skyflow-error'; import SKYFLOW_ERROR_CODE from '../../utils/constants'; -import { getAccessToken } from '../../utils/bus-events'; import Client from '../../client'; const set = require('set-value'); @@ -65,26 +65,26 @@ export default class FrameElementInit { bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { + console.log('Received composable container data:', data); this.#context = data.context; data.client.config = { ...data.client.config, }; this.#client = Client.fromJSON(data.client) as any; - console.log('client initailized'); }); window.addEventListener('message', this.handleCollectCall); } private handleCollectCall = (event: MessageEvent) => { - console.log('Received message:', event.data); // if (event.origin === this.clientMetaData.clientDomain) { if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.containerId) { console.log('Received composable call request:', event.data); - this.tokenize(event.data) + this.tokenize(event.data.data, event.data.clientConfig) .then((response: any) => { const records = response.records; + console.log('Tokenization response:', records); bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, @@ -93,6 +93,8 @@ export default class FrameElementInit { }); }) .catch((error) => { + console.log('Tokenization error:', error); + bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, @@ -113,7 +115,7 @@ export default class FrameElementInit { // } }; - private tokenize = (options) => { + private tokenize = (options, clientConfig: any) => { let errorMessage = ''; const insertRequestObject: any = {}; const updateRequestObject: any = {}; @@ -236,66 +238,68 @@ export default class FrameElementInit { error: error?.message, }); } - + this.#client = new Client(clientConfig, {}); const client = this.#client; const sendRequest = () => new Promise((rootResolve, rootReject) => { const insertPromiseSet: Promise[] = []; - const clientId = client.toJSON()?.metaData?.uuid || ''; - getAccessToken(clientId).then((authToken) => { - if (finalInsertRequest.length !== 0) { - insertPromiseSet.push( - insertDataInCollect(finalInsertRequest, - client, options, finalInsertRecords, authToken as string), - ); - } - if (finalUpdateRecords.updateRecords.length !== 0) { - insertPromiseSet.push( - updateRecordsBySkyflowID(finalUpdateRecords, client, options), - ); - } - if (insertPromiseSet.length !== 0) { - Promise.allSettled(insertPromiseSet).then((resultSet: any) => { - const recordsResponse: any[] = []; - const errorsResponse: any[] = []; - - resultSet.forEach((result: - { status: string; value: any; reason?: any; }) => { - if (result.status === 'fulfilled') { - if (result.value.records !== undefined && Array.isArray(result.value.records)) { - result.value.records.forEach((record) => { - recordsResponse.push(record); - }); - } - if (result.value.errors !== undefined && Array.isArray(result.value.errors)) { - result.value.errors.forEach((error) => { - errorsResponse.push(error); - }); - } - } else { - if (result.reason?.records !== undefined && Array.isArray(result.reason?.records)) { - result.reason.records.forEach((record) => { - recordsResponse.push(record); - }); - } - if (result.reason?.errors !== undefined && Array.isArray(result.reason?.errors)) { - result.reason.errors.forEach((error) => { - errorsResponse.push(error); - }); - } + // const clientId = client.toJSON()?.metaData?.uuid || ''; + // getAccessToken(clientId).then((authToken) => { + if (finalInsertRequest.length !== 0) { + insertPromiseSet.push( + insertDataInCollect(finalInsertRequest, + client, options, finalInsertRecords, clientConfig.authToken as string), + ); + } + if (finalUpdateRecords.updateRecords.length !== 0) { + insertPromiseSet.push( + updateRecordsBySkyflowIDComposable( + finalUpdateRecords, client, options, clientConfig.authToken as string, + ), + ); + } + if (insertPromiseSet.length !== 0) { + Promise.allSettled(insertPromiseSet).then((resultSet: any) => { + const recordsResponse: any[] = []; + const errorsResponse: any[] = []; + + resultSet.forEach((result: + { status: string; value: any; reason?: any; }) => { + if (result.status === 'fulfilled') { + if (result.value.records !== undefined && Array.isArray(result.value.records)) { + result.value.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.value.errors !== undefined && Array.isArray(result.value.errors)) { + result.value.errors.forEach((error) => { + errorsResponse.push(error); + }); + } + } else { + if (result.reason?.records !== undefined && Array.isArray(result.reason?.records)) { + result.reason.records.forEach((record) => { + recordsResponse.push(record); + }); + } + if (result.reason?.errors !== undefined && Array.isArray(result.reason?.errors)) { + result.reason.errors.forEach((error) => { + errorsResponse.push(error); + }); } - }); - if (errorsResponse.length === 0) { - rootResolve({ records: recordsResponse }); - } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse }); - else rootReject({ records: recordsResponse, errors: errorsResponse }); + } }); - } - }).catch((err) => { - rootReject({ - error: err, + if (errorsResponse.length === 0) { + rootResolve({ records: recordsResponse }); + } else if (recordsResponse.length === 0) rootReject({ errors: errorsResponse }); + else rootReject({ records: recordsResponse, errors: errorsResponse }); }); - }); + } + // }).catch((err) => { + // rootReject({ + // error: err, + // }); + // }); }); return new Promise((resolve, reject) => { @@ -471,7 +475,7 @@ export default class FrameElementInit { window.addEventListener('message', (event) => { if (event.data.name === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + window.name) { bus - // .target(event.origin) + .target(this.clientMetaData.clientDomain) .emit( ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + window.name, { height: rootDiv.scrollHeight, name: window.name }, From b2e8316836bf300d9bad6d5b329b5c8a1362d1d0 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 15:38:50 +0000 Subject: [PATCH 25/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.d5616a2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 59548588..50d9083a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.a9e2143", + "version": "2.5.0-beta.5-dev.d5616a2", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From a0c77c96ede167bd4390040a4426e39e5f7bb9b2 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 21:23:01 +0530 Subject: [PATCH 26/42] SK-2177 client initialise --- .../collect/compose-collect-container.ts | 8 +++- src/skyflow.ts | 39 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 4fa80f1b..03f06c54 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -79,6 +79,8 @@ class ComposableContainer extends Container { #iframeID: string = ''; + #getSkyflowBearerToken: () => Promise | undefined; + constructor(options, metaData, skyflowElements, context) { super(); this.#containerId = uuid(); @@ -95,6 +97,7 @@ class ComposableContainer extends Container { }, }, }; + this.#getSkyflowBearerToken = metaData.getSkyflowBearerToken; this.#skyflowElements = skyflowElements; this.#context = context; this.#options = options; @@ -386,7 +389,10 @@ class ComposableContainer extends Container { }); const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; const clientId = client.toJSON()?.metaData?.uuid || ''; - getAccessToken(this.#metaData.uuid).then((authToken) => { + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { data: { type: COLLECT_TYPES.COLLECT, diff --git a/src/skyflow.ts b/src/skyflow.ts index 50333549..b9632eeb 100644 --- a/src/skyflow.ts +++ b/src/skyflow.ts @@ -164,6 +164,44 @@ class Skyflow { return skyflow; } + #getSkyflowBearerToken = () => new Promise((resolve, reject) => { + if ( + this.#client.config.getBearerToken + && (!this.#bearerToken || !isTokenValid(this.#bearerToken)) + ) { + this.#client.config + .getBearerToken() + .then((bearerToken) => { + if (isTokenValid(bearerToken)) { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#logLevel); + this.#bearerToken = bearerToken; + resolve(this.#bearerToken); + } else { + printLog(parameterizedString( + logs.errorLogs.INVALID_BEARER_TOKEN, + ), MessageType.ERROR, this.#logLevel); + reject({ + error: parameterizedString( + logs.errorLogs.INVALID_BEARER_TOKEN, + ), + }); + } + }) + .catch((err) => { + printLog(parameterizedString(logs.errorLogs.BEARER_TOKEN_REJECTED), MessageType.ERROR, + this.#logLevel); + reject({ error: err }); + }); + } else { + printLog(parameterizedString(logs.infoLogs.REUSE_BEARER_TOKEN, CLASS_NAME), + MessageType.LOG, + this.#logLevel); + resolve(this.#bearerToken); + } + }); + container(type: ContainerType.COLLECT, options?: ContainerOptions): CollectContainer; container(type: ContainerType.COMPOSABLE, options?: ContainerOptions): ComposableContainer; container(type: ContainerType.REVEAL, options?: ContainerOptions): RevealContainer; @@ -204,6 +242,7 @@ class Skyflow { clientJSON: this.#client.toJSON(), containerType: type, skyflowContainer: this.#skyflowContainer, + getSkyflowBearerToken: this.#getSkyflowBearerToken, }, this.#skyflowElements, { logLevel: this.#logLevel, env: this.#env }); From 460396eb42d57d4673ea0d7661aaacace0f5495f Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 15:53:39 +0000 Subject: [PATCH 27/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.a0c77c9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 50d9083a..4a9f3d7c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.d5616a2", + "version": "2.5.0-beta.5-dev.a0c77c9", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 69a8f50a4110264b9a7efbdde334d9b79ee073f6 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 21:34:56 +0530 Subject: [PATCH 28/42] SK-2177 client initialise --- .../external/collect/compose-collect-container.ts | 15 +++++++++++++++ src/core/internal/frame-element-init.ts | 9 ++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 03f06c54..e8de3490 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -412,6 +412,21 @@ class ComposableContainer extends Container { printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); reject(err); }); + window.addEventListener('message', (event) => { + console.log('Message received in collect:', event.data); + if (event.data?.type + === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId) { + if (!event.data || event.data?.error) { + printLog(`${JSON.stringify(event.data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(event.data?.error); + } else { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + resolve(event.data); + } + } + }); bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId, (data) => { if (!data || data?.error) { printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 64591235..587e5363 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -91,10 +91,17 @@ export default class FrameElementInit { { records, }); + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + records, + }, '*'); }) .catch((error) => { console.log('Tokenization error:', error); - + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + error, + }, '*'); bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, From 735dd27dc8a7c6b750dbb4f3bc9ddd3d0be700ff Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 16:05:32 +0000 Subject: [PATCH 29/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.69a8f50 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a9f3d7c..4e15d157 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.a0c77c9", + "version": "2.5.0-beta.5-dev.69a8f50", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 9812099bb887878df02c57f2518847ed963c1a11 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 21:42:34 +0530 Subject: [PATCH 30/42] SK-2177 client fix --- .../collect/compose-collect-container.ts | 17 ++++++++++------- src/core/internal/frame-element-init.ts | 5 ----- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index e8de3490..b3e95c04 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -408,22 +408,25 @@ class ComposableContainer extends Container { }, }); }).catch((err:any) => { - console.error('Error getting access token:', err); printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); reject(err); }); window.addEventListener('message', (event) => { - console.log('Message received in collect:', event.data); + // console.log('Message received in collect:', event.data); if (event.data?.type === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId) { - if (!event.data || event.data?.error) { - printLog(`${JSON.stringify(event.data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(event.data?.error); - } else { + const data = event.data.data; + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else if (data?.records) { printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), MessageType.LOG, this.#context.logLevel); - resolve(event.data); + resolve(data); + } else { + printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); + reject(data); } } }); diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 587e5363..1f2c531c 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -65,7 +65,6 @@ export default class FrameElementInit { bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId, {}, (data: any) => { - console.log('Received composable container data:', data); this.#context = data.context; data.client.config = { ...data.client.config, @@ -80,11 +79,9 @@ export default class FrameElementInit { // if (event.origin === this.clientMetaData.clientDomain) { if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.containerId) { - console.log('Received composable call request:', event.data); this.tokenize(event.data.data, event.data.clientConfig) .then((response: any) => { const records = response.records; - console.log('Tokenization response:', records); bus // .target(this.clientMetaData.clientDomain) .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, @@ -97,7 +94,6 @@ export default class FrameElementInit { }, '*'); }) .catch((error) => { - console.log('Tokenization error:', error); window?.parent.postMessage({ type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, error, @@ -111,7 +107,6 @@ export default class FrameElementInit { }); } if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId) { - // console.log('Received composable container event:', event.data); const data = event.data; this.#context = data.context; data.client.config = { From 0ee2970414586b88e0cb4735420e32c7eb6989b9 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 16:13:09 +0000 Subject: [PATCH 31/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.9812099 --- package.json | 2 +- src/core/internal/frame-element-init.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 4e15d157..04b257e2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.69a8f50", + "version": "2.5.0-beta.5-dev.9812099", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 1f2c531c..2c7e6d6f 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -90,13 +90,13 @@ export default class FrameElementInit { }); window?.parent.postMessage({ type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - records, + data: records, }, '*'); }) .catch((error) => { window?.parent.postMessage({ type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - error, + data: error, }, '*'); bus // .target(this.clientMetaData.clientDomain) From ef404d46cc2387ed5838ba2c491d4283f0f6a835 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 16:21:17 +0000 Subject: [PATCH 32/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.0ee2970 --- package.json | 2 +- src/core/internal/frame-element-init.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 04b257e2..41dde188 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.9812099", + "version": "2.5.0-beta.5-dev.0ee2970", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 2c7e6d6f..fb964cf7 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -90,7 +90,7 @@ export default class FrameElementInit { }); window?.parent.postMessage({ type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - data: records, + data: response, }, '*'); }) .catch((error) => { From c8f89060fd2d83ccbf2fe1b66bfbc3c62be8bd2a Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 16:24:49 +0000 Subject: [PATCH 33/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.ef404d4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 41dde188..1022a12e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.0ee2970", + "version": "2.5.0-beta.5-dev.ef404d4", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 5f64ad2bd32e1e6eabf56034163d7de155c42093 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 23:51:38 +0530 Subject: [PATCH 34/42] SK-2177 target test --- src/core/constants.ts | 1 + .../collect/compose-collect-container.ts | 138 +++++++++++++- src/core/internal/frame-element-init.ts | 175 +++++++++++++++--- 3 files changed, 275 insertions(+), 39 deletions(-) diff --git a/src/core/constants.ts b/src/core/constants.ts index 6e0cfdd2..3e6c2be2 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -108,6 +108,7 @@ export const ELEMENT_EVENTS_TO_IFRAME = { 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', FRAME_READY: 'FRAME_READY', diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index b3e95c04..b1de7800 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -21,6 +21,7 @@ import { CollectElementOptions, ICollectOptions, CollectResponse, + UploadFilesResponse, } from '../../../utils/common'; import SKYFLOW_ERROR_CODE from '../../../utils/constants'; import logs from '../../../utils/logs'; @@ -342,14 +343,6 @@ class ComposableContainer extends Container { }; collect = (options: ICollectOptions = { tokens: true }) :Promise => { - console.log('Collect called with options:'); - // this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - // client: { - // vaultURL: this.#metaData.clientJSON.config.vaultURL, - // vaultID: this.#metaData.clientJSON.config.vaultID, - // }, - // context: this.#context, - // }); this.#isComposableFrameReady = true; if (this.#isComposableFrameReady) { return new Promise((resolve, reject) => { @@ -412,7 +405,6 @@ class ComposableContainer extends Container { reject(err); }); window.addEventListener('message', (event) => { - // console.log('Message received in collect:', event.data); if (event.data?.type === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId) { const data = event.data.data; @@ -536,7 +528,6 @@ class ComposableContainer extends Container { if (this.#shadowRoot) { const iframe = this.#shadowRoot.getElementById(this.#iframeID) as HTMLIFrameElement; if (iframe?.contentWindow) { - console.log('Posting message to iframe:', eventName, options); iframe.contentWindow.postMessage({ name: eventName, ...options, @@ -553,6 +544,133 @@ class ComposableContainer extends Container { } }; + uploadFiles = (options: ICollectOptions) :Promise => { + this.#isComposableFrameReady = true; + if (this.#isComposableFrameReady) { + return new Promise((resolve, reject) => { + try { + validateInitConfig(this.#metaData.clientJSON.config); + if (!this.#elementsList || this.#elementsList.length === 0) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); + } + if (!this.#isMounted) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); + } + const elementIds:{ frameId:string, elementId:string }[] = []; + this.#elementsList.forEach((element) => { + elementIds.push({ + frameId: this.#tempElements.elementName, + elementId: element.elementName, + }); + }); + const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; + const clientId = client.toJSON()?.metaData?.uuid || ''; + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + data: { + type: COLLECT_TYPES.FILE_UPLOAD, + ...options, + // tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, + }); + window.addEventListener('message', (event) => { + console.log('Message received in collect:', window.origin, event); + if (event.data?.type + === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.#containerId) { + const data = event.data.data; + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else if (data?.records) { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + resolve(data); + } else { + printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); + reject(data); + } + } + }); + }).catch((err:any) => { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + }); + } catch (err:any) { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + } + }); + } + return new Promise((resolve, reject) => { + try { + validateInitConfig(this.#metaData.clientJSON.config); + if (!this.#elementsList || this.#elementsList.length === 0) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); + } + if (!this.#isMounted) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); + } + const elementIds:{ frameId:string, elementId:string }[] = []; + this.#elementsList.forEach((element) => { + elementIds.push({ + frameId: this.#tempElements.elementName, + elementId: element.elementName, + }); + }); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { + client: this.#metaData.clientJSON, + context: this.#context, + }); + bus + .target(properties.IFRAME_SECURE_ORIGIN) + .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + + this.#containerId, (_, callback) => { + callback({ + client: this.#metaData.clientJSON, + context: this.#context, + }); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + type: COLLECT_TYPES.FILE_UPLOAD, + ...options, + elementIds, + containerId: this.#containerId, + }); + bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + + this.#containerId, (data) => { + // if (!data || data?.error) { + // eslint-disable-next-line max-len + // printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + // reject(data?.error); + // } else { + // printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + // MessageType.LOG, + // this.#context.logLevel); + // resolve(data); + // } + }); + }); + + printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, + CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), + MessageType.LOG, this.#context.logLevel); + } catch (err:any) { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + } + }); + }; + #updateListeners = () => { this.#eventEmitter.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_UPDATE_OPTIONS, (data) => { let elementIndex; diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index fb964cf7..83b8530e 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -7,9 +7,12 @@ import { ContainerType } from '../../skyflow'; import { Context, Env, LogLevel, } from '../../utils/common'; -import { getContainerType } from '../../utils/helpers'; +import { + fileValidation, generateUploadFileName, getContainerType, vaildateFileName, +} from '../../utils/helpers'; import { ALLOWED_MULTIPLE_FIELDS_STYLES, + COLLECT_TYPES, ELEMENT_EVENTS_TO_CLIENT, ELEMENT_EVENTS_TO_IFRAME, ELEMENTS, ERROR_TEXT_STYLES, STYLE_TYPE, } from '../constants'; import IFrameFormElement from './iframe-form'; @@ -17,7 +20,7 @@ import getCssClassesFromJss, { generateCssWithoutClass } from '../../libs/jss-st import FrameElement from '.'; import { checkForElementMatchRule, checkForValueMatch, constructElementsInsertReq, - constructInsertRecordRequest, insertDataInCollect, + constructInsertRecordRequest, constructUploadResponse, insertDataInCollect, updateRecordsBySkyflowIDComposable, } from '../../core-utils/collect'; import SkyflowError from '../../libs/skyflow-error'; @@ -77,34 +80,37 @@ export default class FrameElementInit { private handleCollectCall = (event: MessageEvent) => { // if (event.origin === this.clientMetaData.clientDomain) { - if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + if (event.data && event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.containerId) { - this.tokenize(event.data.data, event.data.clientConfig) - .then((response: any) => { - const records = response.records; - bus - // .target(this.clientMetaData.clientDomain) - .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - { - records, - }); - window?.parent.postMessage({ - type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - data: response, - }, '*'); - }) - .catch((error) => { - window?.parent.postMessage({ - type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - data: error, - }, '*'); - bus - // .target(this.clientMetaData.clientDomain) - .emit(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, - { - error, - }); - }); + if (event.data.data && event.data.data.type === COLLECT_TYPES.COLLECT) { + this.tokenize(event.data.data, event.data.clientConfig) + .then((response: any) => { + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + data: response, + }, this.clientMetaData.clientDomain); + }) + .catch((error) => { + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.containerId, + data: error, + }, this.clientMetaData.clientDomain); + }); + } else if (event.data.data && event.data.data.type === COLLECT_TYPES.FILE_UPLOAD) { + this.parallelUploadFiles(event.data.data, event.data.clientConfig.authToken) + .then((response: any) => { + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.containerId, + data: response, + }, this.clientMetaData.clientDomain); + }) + .catch((error) => { + window?.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.containerId, + data: error, + }, this.clientMetaData.clientDomain); + }); + } } if (event.data.name === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.containerId) { const data = event.data; @@ -117,6 +123,117 @@ export default class FrameElementInit { // } }; + private parallelUploadFiles = (options, bearerToken) => new Promise((rootResolve, rootReject) => { + const promises: Promise[] = []; + this.iframeFormList.forEach((inputElement) => { + let res: Promise; + if (inputElement) { + if ( + inputElement.fieldType + === ELEMENTS.FILE_INPUT.name + ) { + res = this.uploadFiles(inputElement, bearerToken); + promises.push(res); + } + } + }); + Promise.allSettled( + promises, + ).then((resultSet) => { + const fileUploadResponse: Record[] = []; + const errorResponse: Record[] = []; + resultSet.forEach((result) => { + if (result.status === 'fulfilled') { + if (result.value !== undefined && result.value !== null) { + if (Object.prototype.hasOwnProperty.call(result.value, 'error')) { + errorResponse.push(result.value); + } else { + fileUploadResponse.push(result.value); + } + } + } else if (result.status === 'rejected') { + errorResponse.push(result.reason); + } + }); + if (errorResponse.length === 0) { + rootResolve({ fileUploadResponse }); + } else if (fileUploadResponse.length === 0) rootReject({ errorResponse }); + else rootReject({ fileUploadResponse, errorResponse }); + }); + }); + + uploadFiles = (fileElement, bearerToken) => { + if (!this.#client) throw new SkyflowError(SKYFLOW_ERROR_CODE.CLIENT_CONNECTION, [], true); + const fileUploadObject: any = {}; + + const { + state, tableName, skyflowID, onFocusChange, preserveFileName, + } = fileElement; + + if (state.isRequired) { + onFocusChange(false); + } + try { + fileValidation(state.value, state.isRequired, fileElement); + } catch (err) { + return Promise.reject(err); + } + + const validatedFileState = fileValidation(state.value, state.isRequired, fileElement); + + if (!validatedFileState) { + return Promise.reject(new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_FILE_TYPE, [], true)); + } + fileUploadObject[state.name] = state.value; + + const formData = new FormData(); + + const column = Object.keys(fileUploadObject)[0]; + + const value: Blob = Object.values(fileUploadObject)[0] as Blob; + + if (preserveFileName) { + const isValidFileName = vaildateFileName(state.value.name); + if (!isValidFileName) { + return Promise.reject( + new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_FILE_NAME, [], true), + ); + } + formData.append(column, value); + } else { + const generatedFileName = generateUploadFileName(state.value.name); + formData.append(column, new File([value], generatedFileName, { type: state.value.type })); + } + + const client = this.#client; + const sendRequest = () => new Promise((rootResolve, rootReject) => { + client + .request({ + body: formData, + requestMethod: 'POST', + url: `${client.config.vaultURL}/v1/vaults/${client.config.vaultID}/${tableName}/${skyflowID}/files`, + headers: { + authorization: `Bearer ${bearerToken}`, + 'content-type': 'multipart/form-data', + }, + }) + .then((response: any) => { + rootResolve(constructUploadResponse(response)); + }) + .catch((error) => { + rootReject(error); + }); + }); + + return new Promise((resolve, reject) => { + sendRequest() + .then((res) => resolve(res)) + .catch((err) => { + reject(err); + }); + }); + }; + private tokenize = (options, clientConfig: any) => { let errorMessage = ''; const insertRequestObject: any = {}; From ab1ccfa14a94b9e87d1e3711c31985addc4591df Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 18:22:37 +0000 Subject: [PATCH 35/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.5f64ad2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1022a12e..569415b4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.ef404d4", + "version": "2.5.0-beta.5-dev.5f64ad2", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 25da8a53a5028513d63f81b9441cbfeffdd13466 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 15 Jul 2025 00:03:40 +0530 Subject: [PATCH 36/42] SK-2177 target tests --- src/core/external/collect/compose-collect-container.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index b1de7800..e9c6684c 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -591,7 +591,7 @@ class ComposableContainer extends Container { if (!data || data?.error) { printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); reject(data?.error); - } else if (data?.records) { + } else if (data?.fileUploadResponse) { printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), MessageType.LOG, this.#context.logLevel); From 7fa147ac18853e6883d084e1ab42c604ea202817 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 18:34:30 +0000 Subject: [PATCH 37/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.25da8a5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 569415b4..4e9ce623 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.5f64ad2", + "version": "2.5.0-beta.5-dev.25da8a5", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 78d37205070ac4dcab6679b9960614245f563b5e Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 15 Jul 2025 00:32:26 +0530 Subject: [PATCH 38/42] SK-2177 target tests --- src/core/internal/frame-element-init.ts | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 83b8530e..66d8c3b1 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -97,7 +97,7 @@ export default class FrameElementInit { }, this.clientMetaData.clientDomain); }); } else if (event.data.data && event.data.data.type === COLLECT_TYPES.FILE_UPLOAD) { - this.parallelUploadFiles(event.data.data, event.data.clientConfig.authToken) + this.parallelUploadFiles(event.data.data, event.data.clientConfig) .then((response: any) => { window?.parent.postMessage({ type: ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.containerId, @@ -123,7 +123,7 @@ export default class FrameElementInit { // } }; - private parallelUploadFiles = (options, bearerToken) => new Promise((rootResolve, rootReject) => { + private parallelUploadFiles = (options, config) => new Promise((rootResolve, rootReject) => { const promises: Promise[] = []; this.iframeFormList.forEach((inputElement) => { let res: Promise; @@ -132,7 +132,7 @@ export default class FrameElementInit { inputElement.fieldType === ELEMENTS.FILE_INPUT.name ) { - res = this.uploadFiles(inputElement, bearerToken); + res = this.uploadFiles(inputElement, config); promises.push(res); } } @@ -140,15 +140,18 @@ export default class FrameElementInit { Promise.allSettled( promises, ).then((resultSet) => { - const fileUploadResponse: Record[] = []; - const errorResponse: Record[] = []; + const fileUploadResponse: any[] = []; + const errorResponse: any[] = []; resultSet.forEach((result) => { if (result.status === 'fulfilled') { if (result.value !== undefined && result.value !== null) { if (Object.prototype.hasOwnProperty.call(result.value, 'error')) { errorResponse.push(result.value); } else { - fileUploadResponse.push(result.value); + const response = typeof result.value === 'string' + ? JSON.parse(result.value) + : result.value; + fileUploadResponse.push(response); } } } else if (result.status === 'rejected') { @@ -162,7 +165,8 @@ export default class FrameElementInit { }); }); - uploadFiles = (fileElement, bearerToken) => { + uploadFiles = (fileElement, clientConfig) => { + this.#client = new Client(clientConfig, {}); if (!this.#client) throw new SkyflowError(SKYFLOW_ERROR_CODE.CLIENT_CONNECTION, [], true); const fileUploadObject: any = {}; @@ -213,12 +217,12 @@ export default class FrameElementInit { requestMethod: 'POST', url: `${client.config.vaultURL}/v1/vaults/${client.config.vaultID}/${tableName}/${skyflowID}/files`, headers: { - authorization: `Bearer ${bearerToken}`, + authorization: `Bearer ${clientConfig.authToken}`, 'content-type': 'multipart/form-data', }, }) .then((response: any) => { - rootResolve(constructUploadResponse(response)); + rootResolve(response); }) .catch((error) => { rootReject(error); From 36a43c59449072cad3c52aa8ce82e42feb9d7e36 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 15 Jul 2025 01:32:49 +0530 Subject: [PATCH 39/42] SK-2177 fix height --- src/core/external/collect/collect-element.ts | 22 +- .../collect/compose-collect-container.ts | 438 ++++++------------ src/core/internal/frame-element-init.ts | 23 +- src/core/internal/index.ts | 14 +- 4 files changed, 176 insertions(+), 321 deletions(-) diff --git a/src/core/external/collect/collect-element.ts b/src/core/external/collect/collect-element.ts index 4f376acd..87653508 100644 --- a/src/core/external/collect/collect-element.ts +++ b/src/core/external/collect/collect-element.ts @@ -163,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); - }); } }); }); @@ -530,10 +530,6 @@ class CollectElement extends SkyflowElement { {}, (payload:any) => { this.#iframe.setIframeHeight(payload.height); }); - this.#bus.on(ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK - + this.#iframe.name, (payload:any) => { - this.#iframe.setIframeHeight(payload.height); - }); this.#updateState(); const emitData = { diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index e9c6684c..a0cb1abe 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -335,6 +335,7 @@ class ComposableContainer extends Container { this.#eventEmitter.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT, (data) => { this.#emitEvent(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + data.iframeName, {}); }); + this.#emitEvent(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#iframeID, {}); } }; @@ -342,187 +343,92 @@ class ComposableContainer extends Container { this.#containerElement.unmount(); }; - collect = (options: ICollectOptions = { tokens: true }) :Promise => { - this.#isComposableFrameReady = true; - if (this.#isComposableFrameReady) { - return new Promise((resolve, reject) => { - try { - validateInitConfig(this.#metaData.clientJSON.config); - if (!this.#elementsList || this.#elementsList.length === 0) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); - } - if (!this.#isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); - } - const containerElements = getElements(this.#tempElements); - // containerElements.forEach((element:any) => { - // if (!element?.isMounted) { - // 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(); - }); - if (options && options.tokens && typeof options.tokens !== 'boolean') { - throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_TOKENS_IN_COLLECT, [], true); - } - if (options?.additionalFields) { - validateAdditionalFieldsInCollect(options.additionalFields); - } - if (options?.upsert) { - validateUpsertOptions(options?.upsert); - } - this.#elementsList.forEach((element) => { - elementIds.push({ - frameId: this.#tempElements.elementName, - elementId: element.elementName, - }); - }); - const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; - const clientId = client.toJSON()?.metaData?.uuid || ''; - this.#getSkyflowBearerToken()?.then((authToken) => { - printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { - data: { - type: COLLECT_TYPES.COLLECT, - ...options, - tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, - }, - clientConfig: { - vaultURL: this.#metaData.clientJSON.config.vaultURL, - vaultID: this.#metaData.clientJSON.config.vaultID, - authToken, - }, - }); - }).catch((err:any) => { - printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); - reject(err); - }); - window.addEventListener('message', (event) => { - if (event.data?.type - === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId) { - const data = event.data.data; - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else if (data?.records) { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - resolve(data); - } else { - printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); - reject(data); - } - } - }); - bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId, (data) => { - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - - resolve(data); - } - }); - printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, - CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), - MessageType.LOG, this.#context.logLevel); - } catch (err:any) { - printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); - reject(err); + collect = (options: ICollectOptions = { tokens: true }) : + Promise => new Promise((resolve, reject) => { + try { + validateInitConfig(this.#metaData.clientJSON.config); + if (!this.#elementsList || this.#elementsList.length === 0) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); + } + if (!this.#isMounted) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); + } + const containerElements = getElements(this.#tempElements); + containerElements.forEach((element:any) => { + if (!element?.isMounted) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true); } }); - } - return new Promise((resolve, reject) => { - try { - validateInitConfig(this.#metaData.clientJSON.config); - if (!this.#elementsList || this.#elementsList.length === 0) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); - } - if (!this.#isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); - } - - const containerElements = getElements(this.#tempElements); - // containerElements.forEach((element:any) => { - // if (!element?.isMounted) { - // 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(); - }); - - if (options && options.tokens && typeof options.tokens !== 'boolean') { - throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_TOKENS_IN_COLLECT, [], true); - } - if (options?.additionalFields) { - validateAdditionalFieldsInCollect(options.additionalFields); - } - if (options?.upsert) { - validateUpsertOptions(options?.upsert); - } - this.#elementsList.forEach((element) => { - elementIds.push({ - frameId: this.#tempElements.elementName, - elementId: element.elementName, - }); + const elementIds:{ frameId:string, elementId:string }[] = []; + const collectElements = Object.values(this.#elements); + collectElements.forEach((element) => { + element.isValidElement(); + }); + if (options && options.tokens && typeof options.tokens !== 'boolean') { + throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_TOKENS_IN_COLLECT, [], true); + } + if (options?.additionalFields) { + validateAdditionalFieldsInCollect(options.additionalFields); + } + if (options?.upsert) { + validateUpsertOptions(options?.upsert); + } + this.#elementsList.forEach((element) => { + elementIds.push({ + frameId: this.#tempElements.elementName, + elementId: element.elementName, }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - client: this.#metaData.clientJSON, - context: this.#context, + }); + const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; + const clientId = client.toJSON()?.metaData?.uuid || ''; + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + data: { + type: COLLECT_TYPES.COLLECT, + ...options, + tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, }); - bus - .target(properties.IFRAME_SECURE_ORIGIN) - .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER - + this.#containerId, (_, callback) => { - callback({ - client: this.#metaData.clientJSON, - context: this.#context, - }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { - type: COLLECT_TYPES.COLLECT, - ...options, - tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, - }); - bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE - + this.#containerId, (data) => { - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - - resolve(data); - } - }); - }); - - printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, - CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), - MessageType.LOG, this.#context.logLevel); - } catch (err:any) { + }).catch((err:any) => { printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); reject(err); - } - }); - }; + }); + window.addEventListener('message', (event) => { + if (event.data?.type + === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE + this.#containerId) { + const data = event.data.data; + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else if (data?.records) { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + resolve(data); + } else { + printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); + reject(data); + } + } + }); + printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, + CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), + MessageType.LOG, this.#context.logLevel); + } catch (err:any) { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + } + }); #emitEvent = (eventName: string, options?: Record, callback?: any) => { if (this.#shadowRoot) { @@ -531,7 +437,7 @@ class ComposableContainer extends Container { iframe.contentWindow.postMessage({ name: eventName, ...options, - }, properties.IFRAME_SECURE_ORIGIN); + }, '*'); } } else { const iframe = document.getElementById(this.#iframeID) as HTMLIFrameElement; @@ -544,132 +450,70 @@ class ComposableContainer extends Container { } }; - uploadFiles = (options: ICollectOptions) :Promise => { - this.#isComposableFrameReady = true; - if (this.#isComposableFrameReady) { - return new Promise((resolve, reject) => { - try { - validateInitConfig(this.#metaData.clientJSON.config); - if (!this.#elementsList || this.#elementsList.length === 0) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); - } - if (!this.#isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); - } - const elementIds:{ frameId:string, elementId:string }[] = []; - this.#elementsList.forEach((element) => { - elementIds.push({ - frameId: this.#tempElements.elementName, - elementId: element.elementName, - }); - }); - const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; - const clientId = client.toJSON()?.metaData?.uuid || ''; - this.#getSkyflowBearerToken()?.then((authToken) => { - printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { - data: { - type: COLLECT_TYPES.FILE_UPLOAD, - ...options, - // tokens: options?.tokens !== undefined ? options.tokens : true, - elementIds, - containerId: this.#containerId, - }, - clientConfig: { - vaultURL: this.#metaData.clientJSON.config.vaultURL, - vaultID: this.#metaData.clientJSON.config.vaultID, - authToken, - }, - }); - window.addEventListener('message', (event) => { - console.log('Message received in collect:', window.origin, event); - if (event.data?.type - === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.#containerId) { - const data = event.data.data; - if (!data || data?.error) { - printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - reject(data?.error); - } else if (data?.fileUploadResponse) { - printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, - this.#context.logLevel); - resolve(data); - } else { - printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); - reject(data); - } - } - }); - }).catch((err:any) => { - printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); - reject(err); - }); - } catch (err:any) { - printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); - reject(err); - } + uploadFiles = (options: ICollectOptions): + Promise => new Promise((resolve, reject) => { + try { + validateInitConfig(this.#metaData.clientJSON.config); + if (!this.#elementsList || this.#elementsList.length === 0) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); + } + if (!this.#isMounted) { + throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); + } + const elementIds:{ frameId:string, elementId:string }[] = []; + this.#elementsList.forEach((element) => { + elementIds.push({ + frameId: this.#tempElements.elementName, + elementId: element.elementName, + }); }); - } - return new Promise((resolve, reject) => { - try { - validateInitConfig(this.#metaData.clientJSON.config); - if (!this.#elementsList || this.#elementsList.length === 0) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.NO_ELEMENTS_IN_COMPOSABLE, [], true); - } - if (!this.#isMounted) { - throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); - } - const elementIds:{ frameId:string, elementId:string }[] = []; - this.#elementsList.forEach((element) => { - elementIds.push({ - frameId: this.#tempElements.elementName, - elementId: element.elementName, - }); + const client = Client.fromJSON(this.#metaData.clientJSON.config) as any; + const clientId = client.toJSON()?.metaData?.uuid || ''; + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { + data: { + type: COLLECT_TYPES.FILE_UPLOAD, + ...options, + // tokens: options?.tokens !== undefined ? options.tokens : true, + elementIds, + containerId: this.#containerId, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER + this.#containerId, { - client: this.#metaData.clientJSON, - context: this.#context, + window.addEventListener('message', (event) => { + if (event.data?.type + === ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_FILE_CALL_RESPONSE + this.#containerId) { + const data = event.data.data; + if (!data || data?.error) { + printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); + reject(data?.error); + } else if (data?.fileUploadResponse) { + printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + resolve(data); + } else { + printLog(`${JSON.stringify(data)}`, MessageType.ERROR, this.#context.logLevel); + reject(data); + } + } }); - bus - .target(properties.IFRAME_SECURE_ORIGIN) - .on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CONTAINER - + this.#containerId, (_, callback) => { - callback({ - client: this.#metaData.clientJSON, - context: this.#context, - }); - this.#emitEvent(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_REQUESTS + this.#containerId, { - type: COLLECT_TYPES.FILE_UPLOAD, - ...options, - elementIds, - containerId: this.#containerId, - }); - bus.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_CALL_RESPONSE - + this.#containerId, (data) => { - // if (!data || data?.error) { - // eslint-disable-next-line max-len - // printLog(`${JSON.stringify(data?.error)}`, MessageType.ERROR, this.#context.logLevel); - // reject(data?.error); - // } else { - // printLog(parameterizedString(logs.infoLogs.COLLECT_SUBMIT_SUCCESS, CLASS_NAME), - // MessageType.LOG, - // this.#context.logLevel); - // resolve(data); - // } - }); - }); - - printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, - CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.TOKENIZATION_REQUEST), - MessageType.LOG, this.#context.logLevel); - } catch (err:any) { + }).catch((err:any) => { printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); reject(err); - } - }); - }; + }); + } catch (err:any) { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + } + }); #updateListeners = () => { this.#eventEmitter.on(ELEMENT_EVENTS_TO_IFRAME.COMPOSABLE_UPDATE_OPTIONS, (data) => { diff --git a/src/core/internal/frame-element-init.ts b/src/core/internal/frame-element-init.ts index 66d8c3b1..8e91075e 100644 --- a/src/core/internal/frame-element-init.ts +++ b/src/core/internal/frame-element-init.ts @@ -20,7 +20,7 @@ import getCssClassesFromJss, { generateCssWithoutClass } from '../../libs/jss-st import FrameElement from '.'; import { checkForElementMatchRule, checkForValueMatch, constructElementsInsertReq, - constructInsertRecordRequest, constructUploadResponse, insertDataInCollect, + constructInsertRecordRequest, insertDataInCollect, updateRecordsBySkyflowIDComposable, } from '../../core-utils/collect'; import SkyflowError from '../../libs/skyflow-error'; @@ -569,6 +569,7 @@ export default class FrameElementInit { iFrameFormElement, element, elementDiv, + this.clientMetaData.clientDomain, ); this.frameList.push(this.frameElement); @@ -595,14 +596,22 @@ export default class FrameElementInit { bus.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + window.name, (data, callback) => { callback({ height: rootDiv.scrollHeight, name: window.name }); }); + window.parent.postMessage( + { + type: ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + window.name, + data: { height: rootDiv.scrollHeight, name: window.name }, + }, + this.clientMetaData.clientDomain, + ); window.addEventListener('message', (event) => { if (event.data.name === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + window.name) { - bus - .target(this.clientMetaData.clientDomain) - .emit( - ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + window.name, - { height: rootDiv.scrollHeight, name: window.name }, - ); + window.parent.postMessage( + { + type: ELEMENT_EVENTS_TO_IFRAME.HEIGHT_CALLBACK + window.name, + data: { height: rootDiv.scrollHeight, name: window.name }, + }, + this.clientMetaData.clientDomain, + ); } }); }; diff --git a/src/core/internal/index.ts b/src/core/internal/index.ts index 5d71d94e..2f3a5af6 100644 --- a/src/core/internal/index.ts +++ b/src/core/internal/index.ts @@ -89,21 +89,21 @@ export default class FrameElement { private selectedData?: number = undefined; - frameElementName: string; + private clientDomain: string; constructor( iFrameFormElement: IFrameFormElement, options: any, htmlDivElement: HTMLDivElement, - frameElementName: string = '', + clientDomain: string = '', ) { + this.clientDomain = clientDomain; this.iFrameFormElement = iFrameFormElement; this.options = options; this.htmlDivElement = htmlDivElement; this.hasError = false; - this.mount(); - this.frameElementName = frameElementName; + this.mount(); this.iFrameFormElement.fieldName = options.column; this.iFrameFormElement.tableName = options.table; this.iFrameFormElement.state.name = options.column; @@ -459,6 +459,12 @@ export default class FrameElement { .emit(ELEMENT_EVENTS_TO_CLIENT.MOUNTED + this.iFrameFormElement.iFrameName, { name: this.iFrameFormElement.iFrameName, }); + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_CLIENT.MOUNTED + this.iFrameFormElement.iFrameName, + data: { + name: this.iFrameFormElement.iFrameName, + }, + }, this.clientDomain); this.updateStyleClasses(this.iFrameFormElement.getStatus()); }; From 4f2b00de30abe52bd35650f18e2b8659610b62a8 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 14 Jul 2025 20:03:30 +0000 Subject: [PATCH 40/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.36a43c5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e9ce623..0eefc635 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.25da8a5", + "version": "2.5.0-beta.5-dev.36a43c5", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From fc9360966fa82231ca045cb0f855cf70d0de13c3 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 15 Jul 2025 15:43:21 +0530 Subject: [PATCH 41/42] SK-2177 file render --- src/core-utils/reveal.ts | 24 +- src/core/constants.ts | 1 + src/core/external/reveal/reveal-element.ts | 215 ++++++++++++------ src/core/internal/reveal/reveal-frame.ts | 131 +++++++++-- .../skyflow-frame/skyflow-frame-controller.ts | 2 +- src/skyflow.ts | 1 + 6 files changed, 265 insertions(+), 109 deletions(-) diff --git a/src/core-utils/reveal.ts b/src/core-utils/reveal.ts index 7285716d..ec5ba22f 100644 --- a/src/core-utils/reveal.ts +++ b/src/core-utils/reveal.ts @@ -156,22 +156,18 @@ export const getFileURLForRender = ( export const getFileURLFromVaultBySkyflowID = ( skyflowIdRecord: IRevealRecord, client: Client, + authToken: string, ): Promise => 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); diff --git a/src/core/constants.ts b/src/core/constants.ts index 3e6c2be2..858e5245 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -111,6 +111,7 @@ export const ELEMENT_EVENTS_TO_IFRAME = { 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', diff --git a/src/core/external/reveal/reveal-element.ts b/src/core/external/reveal/reveal-element.ts index 259f1a90..b9e7c0d5 100644 --- a/src/core/external/reveal/reveal-element.ts +++ b/src/core/external/reveal/reveal-element.ts @@ -64,12 +64,17 @@ class RevealElement extends SkyflowElement { #isSkyflowFrameReady: boolean = false; + #shadowRoot: ShadowRoot | null = null; + + #getSkyflowBearerToken: () => Promise | undefined; + constructor(record: IRevealElementInput, options: IRevealElementOptions = {}, metaData: any, container: any, elementId: string, context: Context) { super(); this.#elementId = elementId; this.#metaData = metaData; + this.#getSkyflowBearerToken = this.#metaData.getSkyflowBearerToken; this.#clientId = this.#metaData.uuid; this.#recordData = { ...record, @@ -95,6 +100,11 @@ class RevealElement extends SkyflowElement { bus.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#iframe.name, (data) => { this.#iframe.setIframeHeight(data.height); }); + window.addEventListener('message', (event) => { + if (event.data && event.data.type === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#iframe.name) { + this.#iframe.setIframeHeight(event.data.data.height); + } + }); } getID() { @@ -123,6 +133,15 @@ class RevealElement extends SkyflowElement { containerId: this.#containerId, }), }); + window.addEventListener('message', (event) => { + if (event.data.type === ELEMENT_EVENTS_TO_CLIENT.MOUNTED + + this.#iframe.name) { + this.#isMounted = true; + } + if (event.data && event.data.type === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#iframe.name) { + this.#iframe.setIframeHeight(event.data.data.height); + } + }); bus .target(properties.IFRAME_SECURE_ORIGIN) .on(ELEMENT_EVENTS_TO_CLIENT.MOUNTED + this.#iframe.name, () => { @@ -152,27 +171,49 @@ class RevealElement extends SkyflowElement { updateMetricObjectValue(this.#elementId, METRIC_TYPES.MOUNT_END_TIME, Date.now()); updateMetricObjectValue(this.#elementId, METRIC_TYPES.EVENTS_KEY, EVENT_TYPES.MOUNTED); } - if (Object.prototype.hasOwnProperty.call(this.#recordData, 'skyflowID')) { - bus.emit(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#iframe.name, - {}, (payload:any) => { - this.#iframe.setIframeHeight(payload.height); - }); - } }); updateMetricObjectValue(this.#elementId, METRIC_TYPES.EVENTS_KEY, EVENT_TYPES.READY); updateMetricObjectValue(this.#elementId, METRIC_TYPES.MOUNT_START_TIME, Date.now()); } + if (domElementSelector instanceof HTMLElement + && (domElementSelector as HTMLElement).getRootNode() instanceof ShadowRoot) { + this.#shadowRoot = domElementSelector.getRootNode() as ShadowRoot; + } else if (typeof domElementSelector === 'string') { + const element = document.getElementById(domElementSelector); + if (element && element.getRootNode() instanceof ShadowRoot) { + this.#shadowRoot = element.getRootNode() as ShadowRoot; + } + } } + #emitEvent = (eventName: string, options?: Record, callback?: any) => { + if (this.#shadowRoot) { + const iframe = this.#shadowRoot.getElementById(this.#iframe.name) as HTMLIFrameElement; + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage({ + name: eventName, + ...options, + }, properties.IFRAME_SECURE_ORIGIN); + } + } else { + const iframe = document.getElementById(this.#iframe.name) as HTMLIFrameElement; + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage({ + name: eventName, + ...options, + }, properties.IFRAME_SECURE_ORIGIN); + } + } + }; + renderFile(): Promise { - this.#isSkyflowFrameReady = this.#metaData.skyflowContainer.isControllerFrameReady; let altText = ''; if (Object.prototype.hasOwnProperty.call(this.#recordData, 'altText')) { altText = this.#recordData.altText; } this.setAltText('loading...'); const loglevel = this.#context.logLevel; - if (this.#isSkyflowFrameReady) { + if (this.#isMounted) { return new Promise((resolve, reject) => { try { validateInitConfig(this.#metaData.clientJSON.config); @@ -180,37 +221,55 @@ class RevealElement extends SkyflowElement { MessageType.LOG, loglevel); validateRenderElementRecord(this.#recordData); - bus - // .target(properties.IFRAME_SECURE_ORIGIN) - .emit( - ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_REQUESTS + this.#metaData.uuid, + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + this.#emitEvent( + ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_REQUESTS + this.#iframe.name, { - type: REVEAL_TYPES.RENDER_FILE, - records: this.#recordData, - containerId: this.#containerId, - iframeName: this.#iframe.name, + data: { + type: REVEAL_TYPES.RENDER_FILE, + containerId: this.#containerId, + iframeName: this.#iframe.name, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, }, - (revealData: any) => { - if (revealData.errors) { - printLog(parameterizedString( - logs.errorLogs.FAILED_RENDER, - ), MessageType.ERROR, - this.#context.logLevel); - if (Object.prototype.hasOwnProperty.call(this.#recordData, 'altText')) { - this.setAltText(altText); - } - reject(formatForRenderClient(revealData, this.#recordData.column as string)); - } else { - printLog(parameterizedString(logs.infoLogs.RENDER_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, + ); + window.addEventListener('message', (event) => { + if (event.data && event.data.type === ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_RESPONSE + + this.#iframe.name) { + if (event.data.data.type === REVEAL_TYPES.RENDER_FILE) { + const revealData = event.data.data.result; + if (revealData.error) { + printLog(parameterizedString( + logs.errorLogs.FAILED_RENDER, + ), MessageType.ERROR, this.#context.logLevel); - printLog(parameterizedString(logs.infoLogs.FILE_RENDERED, - CLASS_NAME, this.#recordData.skyflowID), - MessageType.LOG, this.#context.logLevel); - resolve(formatForRenderClient(revealData, this.#recordData.column as string)); + if (Object.prototype.hasOwnProperty.call(this.#recordData, 'altText')) { + this.setAltText(altText); + } + reject(revealData); + } else { + printLog(parameterizedString(logs.infoLogs.RENDER_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + printLog(parameterizedString(logs.infoLogs.FILE_RENDERED, + CLASS_NAME, this.#recordData.skyflowID), + MessageType.LOG, this.#context.logLevel); + resolve(revealData); + } } - }, - ); + } + }); + }).catch((err:any) => { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + }); printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.RENDER_FILE_REQUEST), MessageType.LOG, loglevel); @@ -228,44 +287,62 @@ class RevealElement extends SkyflowElement { MessageType.LOG, loglevel); validateRenderElementRecord(this.#recordData); - bus - .target(properties.IFRAME_SECURE_ORIGIN) - .on(ELEMENT_EVENTS_TO_IFRAME.SKYFLOW_FRAME_CONTROLLER_READY + this.#metaData.uuid, () => { - bus - // .target(properties.IFRAME_SECURE_ORIGIN) - .emit( - ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_REQUESTS + this.#metaData.uuid, + window.addEventListener('message', (event) => { + if (event.data.type === ELEMENT_EVENTS_TO_CLIENT.MOUNTED + + this.#iframe.name) { + this.#isMounted = true; + this.#getSkyflowBearerToken()?.then((authToken) => { + printLog(parameterizedString(logs.infoLogs.BEARER_TOKEN_RESOLVED, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + this.#emitEvent( + ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_REQUESTS + this.#iframe.name, { - type: REVEAL_TYPES.RENDER_FILE, - records: this.#recordData, - containerId: this.#containerId, - iframeName: this.#iframe.name, + data: { + type: REVEAL_TYPES.RENDER_FILE, + containerId: this.#containerId, + iframeName: this.#iframe.name, + }, + clientConfig: { + vaultURL: this.#metaData.clientJSON.config.vaultURL, + vaultID: this.#metaData.clientJSON.config.vaultID, + authToken, + }, }, - (revealData: any) => { - if (revealData.errors) { - printLog(parameterizedString( - logs.errorLogs.FAILED_RENDER, - ), MessageType.ERROR, - this.#context.logLevel); - if (Object.prototype.hasOwnProperty.call(this.#recordData, 'altText')) { - this.setAltText(altText); - } - reject(formatForRenderClient(revealData, this.#recordData.column as string)); - } else { - printLog(parameterizedString(logs.infoLogs.RENDER_SUBMIT_SUCCESS, CLASS_NAME), - MessageType.LOG, + ); + window.addEventListener('message', (event1) => { + if (event1.data + && event1.data.type === ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_RESPONSE + + this.#iframe.name) { + if (event.data.data.type === REVEAL_TYPES.RENDER_FILE) { + const revealData = event.data.data.result; + if (revealData.error) { + printLog(parameterizedString( + logs.errorLogs.FAILED_RENDER, + ), MessageType.ERROR, this.#context.logLevel); - printLog(parameterizedString(logs.infoLogs.FILE_RENDERED, - CLASS_NAME, this.#recordData.skyflowID), - MessageType.LOG, this.#context.logLevel); - resolve(formatForRenderClient(revealData, this.#recordData.column as string)); + if (Object.prototype.hasOwnProperty.call(this.#recordData, 'altText')) { + this.setAltText(altText); + } + reject(revealData); + } else { + printLog(parameterizedString(logs.infoLogs.RENDER_SUBMIT_SUCCESS, CLASS_NAME), + MessageType.LOG, + this.#context.logLevel); + printLog(parameterizedString(logs.infoLogs.FILE_RENDERED, + CLASS_NAME, this.#recordData.skyflowID), + MessageType.LOG, this.#context.logLevel); + resolve(revealData); + } } - }, - ); - printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, - CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.RENDER_FILE_REQUEST), - MessageType.LOG, loglevel); - }); + } + }); + }).catch((err:any) => { + printLog(`${err.message}`, MessageType.ERROR, this.#context.logLevel); + reject(err); + }); + } + }); printLog(parameterizedString(logs.infoLogs.EMIT_EVENT, CLASS_NAME, ELEMENT_EVENTS_TO_IFRAME.RENDER_FILE_REQUEST), MessageType.LOG, loglevel); diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index 5611c51b..ac84f25e 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -15,17 +15,22 @@ import { RENDER_ELEMENT_IMAGE_STYLES, DEFAULT_FILE_RENDER_ERROR, ELEMENT_EVENTS_TO_CLIENT, + REVEAL_TYPES, } from '../../constants'; import getCssClassesFromJss, { generateCssWithoutClass } from '../../../libs/jss-styles'; import { printLog, parameterizedString, } from '../../../utils/logs-helper'; import logs from '../../../utils/logs'; -import { Context, MessageType } from '../../../utils/common'; +import { + Context, IRenderResponseType, IRevealRecord, MessageType, +} from '../../../utils/common'; import { constructMaskTranslation, getAtobValue, getMaskedOutput, getValueFromName, handleCopyIconClick, styleToString, } from '../../../utils/helpers'; +import { formatForRenderClient, getFileURLFromVaultBySkyflowID } from '../../../core-utils/reveal'; +import Client from '../../../client'; const { getType } = require('mime'); @@ -65,6 +70,8 @@ class RevealFrame { #skyflowContainerId: string = ''; + #client!: Client; + static init() { const url = window.location?.href; const configIndex = url.indexOf('?'); @@ -172,6 +179,18 @@ class RevealFrame { bus.emit(ELEMENT_EVENTS_TO_CLIENT.MOUNTED + this.#name, { name: this.#name }); + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_CLIENT.MOUNTED + this.#name, + data: { + name: this.#name, + }, + }, this.#clientDomain); + + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name, + data: { height: this.#elementContainer.scrollHeight, name: this.#name }, + }, this.#clientDomain); + bus.on(ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name, (_, callback) => { callback({ height: this.#elementContainer.scrollHeight, name: this.#name }); }); @@ -222,33 +241,95 @@ class RevealFrame { }); this.updateRevealElementOptions(); - const sub2 = (responseUrl) => { - if (responseUrl.iframeName === this.#name) { - if (Object.prototype.hasOwnProperty.call(responseUrl, 'error') && responseUrl.error === DEFAULT_FILE_RENDER_ERROR) { - this.setRevealError(DEFAULT_FILE_RENDER_ERROR); - if (Object.prototype.hasOwnProperty.call(this.#record, 'altText')) { - this.#dataElememt.innerText = this.#record.altText; - } - bus - .emit( - ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name, - { - height: this.#elementContainer.scrollHeight, - }, () => { - }, + window.addEventListener('message', (event) => { + if (event.data + && event.data.name === ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_REQUESTS + this.#name) { + if (event.data.data.iframeName === this.#name + && event.data.data.type === REVEAL_TYPES.RENDER_FILE) { + this.renderFile(this.#record, event.data.clientConfig).then((resolvedResult) => { + const result = formatForRenderClient( + resolvedResult as IRenderResponseType, this.#record.column, ); - } else { - const ext = this.getExtension(responseUrl.url); - this.addFileRender(responseUrl.url, ext); + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_RESPONSE + this.#name, + data: { + type: REVEAL_TYPES.RENDER_FILE, + result, + }, + }, this.#clientDomain); + }).catch((error) => { + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_IFRAME.REVEAL_CALL_RESPONSE + this.#name, + data: { + type: REVEAL_TYPES.RENDER_FILE, + result: { + errors: error, + }, + }, + }, this.#clientDomain); + }); } } - }; - bus - .target(window.location.origin) - .on( - ELEMENT_EVENTS_TO_IFRAME.RENDER_FILE_RESPONSE_READY + this.#name, - sub2, - ); + if (event.data && event.data.type === ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name) { + if (event.data.data && event.data.data.height) { + window.parent.postMessage({ + type: ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name, + data: { height: this.#elementContainer.scrollHeight, name: this.#name }, + }, this.#clientDomain); + } + } + }); + } + + private sub2 = (responseUrl) => { + if (responseUrl.iframeName === this.#name) { + if (Object.prototype.hasOwnProperty.call(responseUrl, 'error') && responseUrl.error === DEFAULT_FILE_RENDER_ERROR) { + this.setRevealError(DEFAULT_FILE_RENDER_ERROR); + if (Object.prototype.hasOwnProperty.call(this.#record, 'altText')) { + this.#dataElememt.innerText = this.#record.altText; + } + bus + .emit( + ELEMENT_EVENTS_TO_CLIENT.HEIGHT + this.#name, + { + height: this.#elementContainer.scrollHeight, + }, () => { + }, + ); + } else { + const ext = this.getExtension(responseUrl.url); + this.addFileRender(responseUrl.url, ext); + } + } + }; + + private renderFile(data: IRevealRecord, clientConfig) { + this.#client = new Client(clientConfig, {}); + return new Promise((resolve, reject) => { + try { + getFileURLFromVaultBySkyflowID(data, this.#client, clientConfig.authToken) + .then((resolvedResult) => { + let url = ''; + if (resolvedResult.fields && data.column) { + url = resolvedResult.fields[data.column]; + } + this.sub2({ + url, + iframeName: this.#name, + }); + resolve(resolvedResult); + }, + (rejectedResult) => { + this.sub2({ + error: DEFAULT_FILE_RENDER_ERROR, + iframeName: this.#name, + }); + reject(rejectedResult); + }); + } catch (err) { + reject(err); + } + }); } // eslint-disable-next-line class-methods-use-this diff --git a/src/core/internal/skyflow-frame/skyflow-frame-controller.ts b/src/core/internal/skyflow-frame/skyflow-frame-controller.ts index c06964de..ab311c31 100644 --- a/src/core/internal/skyflow-frame/skyflow-frame-controller.ts +++ b/src/core/internal/skyflow-frame/skyflow-frame-controller.ts @@ -434,7 +434,7 @@ class SkyflowFrameController { renderFile(data, iframeName) { return new Promise((resolve, reject) => { try { - getFileURLFromVaultBySkyflowID(data, this.#client) + getFileURLFromVaultBySkyflowID(data, this.#client, '') .then((resolvedResult) => { let url = ''; if (resolvedResult.fields && data.column) { diff --git a/src/skyflow.ts b/src/skyflow.ts index b9632eeb..0645d5e2 100644 --- a/src/skyflow.ts +++ b/src/skyflow.ts @@ -227,6 +227,7 @@ class Skyflow { clientJSON: this.#client.toJSON(), containerType: type, skyflowContainer: this.#skyflowContainer, + getSkyflowBearerToken: this.#getSkyflowBearerToken, }, this.#skyflowElements, { logLevel: this.#logLevel }, options); From 99eb2897f0255d2ac23e0362a9bc5b95dd27fcb4 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 15 Jul 2025 10:14:07 +0000 Subject: [PATCH 42/42] [AUTOMATED] Release - 2.5.0-beta.5-dev.fc93609 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0eefc635..407a89a9 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.5.0-beta.5-dev.36a43c5", + "version": "2.5.0-beta.5-dev.fc93609", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js",