@airwallex/components-sdk - npm Package Compare versions

Comparing version 1.2.25 to 1.3.0

lib/index.d.ts

@@ -0,1 +1,3 @@
+import { EventManager } from 'micro-event-manager';
+
 declare enum ENV {
@@ -22,3 +24,3 @@ dev = "dev",
  */
-type ElementEvent$2 = {
+type ElementEvent$1 = {
 	ready: {
@@ -37,3 +39,3 @@ type: "kyc";
 };
-type EVENT_CODE$3 = keyof ElementEvent$2;
+type EVENT_CODE$3 = keyof ElementEvent$1;
 /**
@@ -51,3 +53,3 @@ * The definition mapping of supported integration element type with it's props options used to customize the element,
  */
-interface Element$3 {
+interface Element$2 {
 	/**
@@ -74,8 +76,7 @@ * Element integration `step #3`
 	 */
-	on<T extends EVENT_CODE$3>(eventCode: T, handler: (eventData: ElementEvent$2[T]) => void): void;
+	on<T extends EVENT_CODE$3>(eventCode: T, handler: (eventData: ElementEvent$1[T]) => void): void;
 }
 
-// Generated by dts-bundle-generator v8.0.1
+type LangKey = 'en' | 'zh';
 
-type LangKey = "en" | "zh";
 /**
@@ -94,32 +95,106 @@ * TODO: update ElementEvent ts definition
  */
-type ElementEvent$1 = {
-	ready: {
-		type: "paymentsKyb";
-		kybStatus: string;
-		kycStatus: string;
+type ElementEvent = {
+    ready: {
+        type: 'paymentsKyb';
+        kybStatus: string;
+        kycStatus: string;
+    };
+    success: undefined;
+    cancel: undefined;
+    error: {
+        code: 'API_ERROR' | 'SUBMIT_FAILED';
+        message?: string;
+    };
+    caseStatusChanged: {
+        kybStatus: string;
+        kycStatus: string;
+    };
+    reserveOptionsOffered: UserReserveSelection[];
+    selectReserve: {
+        selected: UserReserveSelection;
+    };
+};
+declare enum UserReserveSelection {
+    Delay = "DELAY",
+    FixedAmount = "FIXED_AMOUNT",
+    Mixed = "MIXED",
+    NotAccepted = "NOT_ACCEPTED",
+    Rolling = "ROLLING",
+    Rolling_2 = "ROLLING_2"
+}
+type EVENT_CODE$2 = keyof ElementEvent;
+/**
+ * The definition mapping of supported integration element type with it's props options used to customize the element,
+ * merchant can check on each element options type for details
+ */
+interface ElementOptions$1 {
+    theme?: Record<string, any>;
+    hideHeader?: boolean;
+    hideNav?: boolean;
+    contactUrl?: Record<LangKey, string>;
+    brandName?: Record<LangKey, string>;
+}
+/**
+ * Functions and external fields can be used in your integration flow with airwallex element
+ */
+interface Element$1 {
+    /**
+     * Element integration `step #3`
+     * Mount element to your HTML DOM element
+     */
+    mount(domElement: string | HTMLElement): void;
+    /**
+     * Using this function to unmount the element, opposite to mount function
+     * The element instance is still kept
+     */
+    unmount(): void;
+    /**
+     * Using this function to destory the element instance
+     *
+     * ***IMPORTANT***
+     *
+     * Once element destroy by call function destroyElement, the element reference should not be used anymore
+     */
+    destroy(): void;
+    /**
+     * Listen to event
+     */
+    on<T extends EVENT_CODE$2>(eventCode: T, handler: (eventData: ElementEvent[T]) => void): void;
+}
+
+// Generated by dts-bundle-generator v8.0.1
+
+/**
+ * The event object your page can listen to by below implementation:
+ *
+ * `ready`: The event fires when a given element resource has loaded.
+ *
+ * `success`: The event fires when a intent is confirm with Airwallex
+ *
+ * `error`: Error events are fired at various targets for different kinds of errors with shopper interaction,
+ * refer to `ERROR_CODE` enum.
+ *
+ * `cancel`: The event fires when shopper click cancel button when interact with the form.
+ */
+type BaseElementEvent = {
+	success: {
+		rfiId: string;
 	};
-	success: undefined;
 	cancel: undefined;
 	error: {
-		code: "API_ERROR" | "SUBMIT_FAILED";
+		code: "API_ERROR" | "SUBMIT_FAILED" | "INVALID_KYC_STATUS" | "INVALID_RFI_STATUS";
 		message?: string;
 	};
-	caseStatusChanged: {
-		kybStatus: string;
-		kycStatus: string;
+};
+type KycRfiElementEvent = BaseElementEvent & {
+	ready: {
+		type: "kycRfi";
 	};
-	reserveOptionsOffered: UserReserveSelection[];
-	selectReserve: {
-		selected: UserReserveSelection;
+};
+type TransactionRfiElementEvent = BaseElementEvent & {
+	ready: {
+		type: "transactionRfi";
 	};
 };
-declare enum UserReserveSelection {
-	Delay = "DELAY",
-	FixedAmount = "FIXED_AMOUNT",
-	Mixed = "MIXED",
-	NotAccepted = "NOT_ACCEPTED",
-	Rolling = "ROLLING",
-	Rolling_2 = "ROLLING_2"
-}
-type EVENT_CODE$2 = keyof ElementEvent$1;
+type EVENT_CODE$1 = keyof (KycRfiElementEvent | TransactionRfiElementEvent);
 /**
@@ -129,8 +204,6 @@ * The definition mapping of supported integration element type with it's props options used to customize the element,
  */
-interface ElementOptions$1 {
+interface ElementOptions {
 	theme?: Record<string, any>;
 	hideHeader?: boolean;
 	hideNav?: boolean;
-	contactUrl?: Record<LangKey, string>;
-	brandName?: Record<LangKey, string>;
 }
@@ -140,3 +213,3 @@ /**
  */
-interface Element$2 {
+interface BaseElement$1 {
 	/**
@@ -153,3 +226,3 @@ * Element integration `step #3`
 	/**
-	 * Using this function to destory the element instance
+	 * Using this function to destroy the element instance
 	 *
@@ -161,72 +234,228 @@ * ***IMPORTANT***
 	destroy(): void;
+}
+interface KycRfiElement extends BaseElement$1 {
 	/**
 	 * Listen to event
 	 */
-	on<T extends EVENT_CODE$2>(eventCode: T, handler: (eventData: ElementEvent$1[T]) => void): void;
+	on<T extends EVENT_CODE$1>(eventCode: T, handler: (eventData: KycRfiElementEvent[T]) => void): void;
 }
+interface TransactionRfiElement extends BaseElement$1 {
+	/**
+	 * Listen to event
+	 */
+	on<T extends EVENT_CODE$1>(eventCode: T, handler: (eventData: TransactionRfiElementEvent[T]) => void): void;
+}
 
-/**
- * The event object your page can listen to by below implementation:
- *
- * `ready`: The event fires when a given element resource has loaded.
- *
- * `success`: The event fires when a intent is confirm with Airwallex
- *
- * `error`: Error events are fired at various targets for different kinds of errors with shopper interaction,
- * refer to `ERROR_CODE` enum.
- *
- * `cancel`: The event fires when shopper click cancel button when interact with the form.
- */
-type ElementEvent = {
-    ready: {
-        type: 'kycRfi';
-    } | {
-        type: 'consent';
-    };
-    success: undefined;
-    cancel: undefined;
-    error: {
-        code: 'API_ERROR' | 'SUBMIT_FAILED' | 'INVALID_KYC_STATUS' | 'INVALID_RFI_STATUS';
-        message?: string;
-    };
-};
-type EVENT_CODE$1 = keyof ElementEvent;
-/**
- * The definition mapping of supported integration element type with it's props options used to customize the element,
- * merchant can check on each element options type for details
- */
-interface ElementOptions {
-    theme?: Record<string, any>;
-    hideHeader?: boolean;
-    hideNav?: boolean;
+// Generated by dts-bundle-generator v8.1.2
+
+
+interface MessageData<Data> {
+	/**
+	 * same as element id
+	 * @deprecated
+	 */
+	id: string;
+	action: string;
+	data: Data;
+	elementName: string;
+	elementId: string;
 }
-/**
- * Functions and external fields can be used in your integration flow with airwallex element
- */
-interface Element$1 {
-    /**
-     * Element integration `step #3`
-     * Mount element to your HTML DOM element
-     */
-    mount(domElement: string | HTMLElement): void;
-    /**
-     * Using this function to unmount the element, opposite to mount function
-     * The element instance is still kept
-     */
-    unmount(): void;
-    /**
-     * Using this function to destroy the element instance
-     *
-     * ***IMPORTANT***
-     *
-     * Once element destroy by call function destroyElement, the element reference should not be used anymore
-     */
-    destroy(): void;
-    /**
-     * Listen to event
-     */
-    on<T extends EVENT_CODE$1>(eventCode: T, handler: (eventData: ElementEvent[T]) => void): void;
+type TransferMethod = "SWIFT" | "LOCAL";
+type EntityType = "COMPANY" | "PERSONAL";
+type DeepPartial<T> = T extends object ? {
+	[P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+interface BaseOptions {
+	targetOrigin: string;
 }
+declare class BaseElement<Options extends BaseOptions = BaseOptions> {
+	id: string;
+	type: string;
+	options: Options;
+	protected eventManager: EventManager | null;
+	private container?;
+	private iframe;
+	private mounted;
+	constructor(type: string, options: Options);
+	/**
+	 * mount the element on DOM
+	 * @param ele CSS selector or html element instance
+	 */
+	mount(ele: string | HTMLElement): void;
+	/**
+	 * unmount the component from DOM tree
+	 */
+	unmount(): void;
+	/**
+	 * destroy the component instance
+	 */
+	destroy(): void;
+	/**
+	 * listen to events triggered by elements
+	 * @param action
+	 * @param callback callback function
+	 * @returns unique event id
+	 */
+	on(action: string, callback: (data: any) => void): number | undefined;
+	/**
+	 * trigger event
+	 * @param action
+	 * @param data
+	 */
+	emit(action: string, data: any): void;
+	/**
+	 * post message to element iframe
+	 * @param message
+	 */
+	postMessage<Data>(message: MessageData<Data>): void;
+}
+declare class Form<Options extends BaseOptions> extends BaseElement<Options> {
+	submit(): Promise<unknown>;
+}
+interface LayoutSection {
+	title?: string;
+	name?: "conditions" | "bankDetails" | "entityInfo" | "address";
+	hidden?: boolean;
+}
+interface BeneficiaryFormOptions {
+	defaultValues?: DeepPartial<{
+		beneficiary: {
+			additional_info: {
+				business_phone_number: string;
+				business_registration_number: string;
+				legal_rep_first_name_in_chinese: string;
+				legal_rep_id_number: string;
+				legal_rep_last_name_in_chinese: string;
+				personal_email: string;
+				personal_first_name_in_chinese: string;
+				personal_id_number: string;
+				personal_id_type: string;
+				personal_last_name_in_chinese: string;
+				personal_mobile_number: string;
+				personal_nationality: string;
+			};
+			address: {
+				city: string;
+				country_code: string;
+				postcode: string;
+				state: string;
+				street_address: string;
+			};
+			bank_details: {
+				account_currency: string;
+				account_name: string;
+				account_number: string;
+				account_routing_type1: string;
+				account_routing_type2: string;
+				account_routing_value1: string;
+				account_routing_value2: string;
+				bank_account_category: string;
+				bank_branch: string;
+				bank_country_code: string;
+				bank_name: string;
+				bank_state: string;
+				iban: string;
+				local_clearing_system: string;
+				swift_code: string;
+			};
+			company_name: string;
+			date_of_birth: string;
+			entity_type: EntityType;
+			first_name: string;
+			last_name: string;
+		};
+		nickname: string;
+		payer_entity_type: EntityType;
+		payment_methods: TransferMethod[];
+		payment_method: TransferMethod;
+	}>;
+	customizations?: {
+		layout?: LayoutSection[];
+		ui?: {
+			hideFeeConfig?: boolean;
+			hideFlightTime?: boolean;
+		};
+		fields?: Record<string, {
+			disabled?: boolean;
+			hidden?: boolean;
+		}>;
+	};
+	theme?: Record<string, unknown>;
+}
+declare class BeneficiaryFormElement extends Form<BeneficiaryFormOptions & {
+	targetOrigin: string;
+}> {
+}
+interface PayoutFormOptions {
+	defaultValues?: DeepPartial<{
+		beneficiary_id: string;
+		source_currency: string;
+		source_amount: number;
+		payment_currency: string;
+		payment_amount: number;
+		fee_paid_by: "PAYER" | "BENEFICIARY";
+		payment_date: string;
+		beneficiary: {
+			bank_details: {
+				bank_country_code: string;
+				local_clearing_system: string;
+			};
+			entity_type: EntityType;
+		};
+		swift_charge_option: "SHARED" | "PAYER";
+		payment_method: TransferMethod;
+	}>;
+	customizations?: {
+		ui?: {
+			hideTransferFee?: boolean;
+			hideFeeConfig?: boolean;
+			hideFlightTime?: boolean;
+		};
+		fields?: {
+			source_currency?: {
+				disabled: boolean;
+			};
+			source_amount?: {
+				disabled: boolean;
+			};
+			payment_currency?: {
+				disabled: boolean;
+			};
+			payment_amount?: {
+				disabled: boolean;
+			};
+			payment_date?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+			"beneficiary.bank_details.bank_country_code"?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+			"beneficiary.bank_details.local_clearing_system"?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+			"beneficiary.entity_type"?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+			swift_charge_option?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+			payment_method?: {
+				disabled: boolean;
+				hidden: boolean;
+			};
+		};
+	};
+	theme?: Record<string, unknown>;
+}
+declare class PayoutFormElement extends Form<PayoutFormOptions & {
+	targetOrigin: string;
+}> {
+}
 
-type ElementName = string;
+type ElementName = keyof ElementTypes;
 type Env = keyof typeof ENV;
@@ -237,7 +466,13 @@ type ElementOptionsTypes = {
     kycRfi: ElementOptions;
+    transactionRfi: ElementOptions;
+    payoutForm: PayoutFormOptions;
+    beneficiaryForm: BeneficiaryFormOptions;
 };
 type ElementTypes = {
-    kyc: Element$3;
-    paymentsKyb: Element$2;
-    kycRfi: Element$1;
+    kyc: Element$2;
+    paymentsKyb: Element$1;
+    kycRfi: KycRfiElement;
+    transactionRfi: TransactionRfiElement;
+    payoutForm: PayoutFormElement;
+    beneficiaryForm: BeneficiaryFormElement;
 };
@@ -287,3 +522,3 @@ /**
  */
-type CreateElement = <T extends keyof ElementOptionsTypes, K extends ElementOptionsTypes[T]>(type: T, options: K) => Promise<ElementTypes[T]>;
+type CreateElement = <T extends keyof ElementOptionsTypes, K extends ElementOptionsTypes[T]>(type: T, options?: K) => Promise<ElementTypes[T]>;
 /**
@@ -310,2 +545,3 @@ * Event code supported value by element when user interact with the element
  * Functions and external fields can be used in your integration flow with airwallex element
+ * General Element type, for specific Element please use ElementTypes['element']
  */
@@ -347,3 +583,3 @@ interface Element {
         };
-        AirwallexElements: {
+        _AirwallexSDKs: {
             [key: string]: any;
@@ -350,0 +586,0 @@ };

lib/index.js

@@ -58,17 +58,24 @@ 'use strict';
 var SDK_CONTROLLER = "sdkController";
-var ELEMENT_URL_MAPPING = {
-  "kyc": "/widgets/kyc/sdk/v1/index.js",
-  "kycRfi": "/widgets/kycRfi/sdk/v1/index.js",
-  "paymentsKyb": "/widgets/paymentsKyb/sdk/v1/index.js",
-  "sdkController": "/widgets/sdk-controller/sdk/v1/index.js"
+var SDK_URL_MAPPING = {
+  kyc: "/widgets/kyc/sdk/v1/index.js",
+  rfi: "/widgets/kycRfi/sdk/v1/index.js",
+  paymentsKyb: "/widgets/paymentsKyb/sdk/v1/index.js",
+  sdkController: "/widgets/sdk-controller/sdk/v1/index.js",
+  payouts: "/widgets/payouts/sdk/v1/index.js"
 };
+var ELEMENT_TO_SDK = {
+  // rfi elements
+  kycRfi: "rfi",
+  transactionRfi: "rfi",
+  // payouts elements
+  payoutForm: "payouts",
+  beneficiaryForm: "payouts"
+};
 
 // src/utils.ts
 var sleep = (delay = 500) => new Promise((resolve) => window.setTimeout(resolve, delay));
-var getElementURL = ({
-  name,
-  env = "prod" /* prod */
-}) => {
+var getInternalSDKByElementName = (elementName) => ELEMENT_TO_SDK[elementName];
+var getElementURL = ({ name, env = "prod" /* prod */ }) => {
   const staticHost = STATIC_HOST[env] || STATIC_HOST.prod;
-  const elementUri = ELEMENT_URL_MAPPING[name];
+  const elementUri = SDK_URL_MAPPING[name];
   if (!elementUri) {
@@ -79,2 +86,16 @@ throw new Error(`Element ${name} static resource URL is invalid.`);
 };
+var groupElements = (elements) => elements.reduce(
+  ([elementArr, elementsBySDK], elementName) => {
+    const internalSDK = getInternalSDKByElementName(elementName);
+    if (!internalSDK) {
+      elementArr.push(elementName);
+    } else if (typeof elementsBySDK[internalSDK] === "undefined") {
+      elementsBySDK[internalSDK] = [elementName];
+    } else {
+      elementsBySDK[internalSDK].push(elementName);
+    }
+    return [elementArr, elementsBySDK];
+  },
+  [[], {}]
+);
 
@@ -122,2 +143,16 @@ // src/load-script.ts
 var initPromise;
+var getLoadScriptPromise = ({
+  env,
+  internalSDKName,
+  instanceCache
+}) => {
+  let loadScriptPromise = Promise.resolve();
+  const url = getElementURL({ name: internalSDKName, env });
+  if (!instanceCache) {
+    loadScriptPromise = loadScript(url);
+  } else {
+    console.log(`%c The SDK - ${internalSDKName} has already been initialized`, "color: blue");
+  }
+  return loadScriptPromise;
+};
 var init = (options) => __async(void 0, null, function* () {
@@ -133,26 +168,36 @@ if (typeof window === "undefined") {
     window.AirwallexComponentsSDK.__env__ = newOptions.env;
-    let controllerPromise = Promise.resolve();
-    if (!window.AirwallexElements.__controller__) {
-      controllerPromise = loadScript(getElementURL({ name: SDK_CONTROLLER, env: newOptions.env }));
-    } else {
-      console.log("%c The SDK controller has already been initialized", "color: blue");
-    }
-    controllerPromise = controllerPromise.then(() => {
-      return window.AirwallexElements.__controller__.init(newOptions);
+    let controllerPromise = getLoadScriptPromise({
+      internalSDKName: SDK_CONTROLLER,
+      env: newOptions.env,
+      instanceCache: window._AirwallexSDKs.__controller__
     });
-    const elementsPromise = [];
-    newOptions.elements.forEach((elementName) => {
-      var _a, _b, _c;
-      let elePromise = Promise.resolve();
-      if (!((_c = (_b = (_a = window.AirwallexElements) == null ? void 0 : _a.__controller__) == null ? void 0 : _b.elements) == null ? void 0 : _c[elementName])) {
-        elePromise = loadScript(getElementURL({ name: elementName, env: newOptions.env }));
-      } else {
-        console.log(`%c The SDK element - ${elementName} has already been initialized`, "color: blue");
+    controllerPromise = controllerPromise.then(() => window._AirwallexSDKs.__controller__.init(newOptions));
+    const [elements, elementsBySDK] = groupElements(newOptions.elements);
+    const elementsPromise = elements.map(
+      (elementName) => {
+        var _a, _b, _c;
+        return getLoadScriptPromise({
+          internalSDKName: elementName,
+          env: newOptions.env,
+          instanceCache: (_c = (_b = (_a = window._AirwallexSDKs) == null ? void 0 : _a.__controller__) == null ? void 0 : _b.elements) == null ? void 0 : _c[elementName]
+        }).then(() => controllerPromise).then(() => window._AirwallexSDKs.__controller__.register(elementName, window._AirwallexSDKs[elementName]));
       }
-      elePromise = elePromise.then(() => controllerPromise).then(() => {
-        return window.AirwallexElements.__controller__.register(elementName, window.AirwallexElements[elementName]);
-      });
-      elementsPromise.push(elePromise);
-    });
-    Promise.all([controllerPromise, ...elementsPromise]).then(() => {
+    );
+    const elementsBySDKPromise = Object.entries(elementsBySDK).map(
+      ([sdkName, elements2]) => {
+        var _a, _b, _c;
+        return getLoadScriptPromise({
+          internalSDKName: sdkName,
+          env: newOptions.env,
+          instanceCache: (_c = (_b = (_a = window._AirwallexSDKs) == null ? void 0 : _a.__controller__) == null ? void 0 : _b.internalSDKs) == null ? void 0 : _c[sdkName]
+        }).then(() => controllerPromise).then(
+          () => window._AirwallexSDKs.__controller__.registerInternalSDK({
+            elements: elements2,
+            sdkName,
+            instance: window._AirwallexSDKs[sdkName]
+          })
+        );
+      }
+    );
+    Promise.all([controllerPromise, ...elementsPromise, ...elementsBySDKPromise]).then(() => {
       resolve({
@@ -170,3 +215,3 @@ success: true
   yield initPromise;
-  return window.AirwallexElements.__controller__.createElement(type, options);
+  return window._AirwallexSDKs.__controller__.createElement(type, options);
 });
@@ -181,3 +226,3 @@
     },
-    AirwallexElements: {
+    _AirwallexSDKs: {
       value: {},
@@ -184,0 +229,0 @@ writable: false

package.json

 {
   "name": "@airwallex/components-sdk",
-  "version": "1.2.25",
+  "version": "1.3.0",
   "main": "./lib/index.js",
@@ -10,6 +10,2 @@ "module": "./lib/index.mjs",
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.awx.im/airwallex-dev-scale/components-sdk.git"
-  },
   "license": "MIT",
@@ -20,2 +16,3 @@ "scripts": {
     "prebuild-npm": "node ./load-types.js",
+    "prebuild": "node ./load-types.js",
     "clean": "rm -rf dist",
@@ -55,2 +52,2 @@ "clean-npm": "rm -rf lib",
   }
-}
+}

README.md

@@ -27,3 +27,3 @@ # Airwallex Components SDK
       - [`error`](#error-1)
-  - [KYC RFI Element Events](#kyc-rfi-element-events)
+  - [RFI Elements Events](#rfi-elements-events)
       - [`ready`](#ready-2)
@@ -58,3 +58,3 @@ - [`success`](#success-2)
 const options = {
-  elements: ['kyc', 'paymentsKyb', 'kycRfi'],
+  elements: ['kyc', 'paymentsKyb', 'kycRfi',  'transactionRfi', 'payoutForm', 'beneficiaryForm'],
   langKey: 'en',
@@ -73,3 +73,3 @@ env: 'prod',
 | :------------- | :-------------- | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `elements`     | `Array<string>` | **YES**   | -             | The Airwallex elements. Supported values are `kyc`, `paymentsKyb` and `kycRfi`. |
+| `elements`     | `Array<string>` | **YES**   | -             | The Airwallex elements. Supported values are `kyc`, `paymentsKyb`, `kycRfi` and `transactionRfi`. |
 | `env`          | `string`        | **NO**    | `prod`        | The Airwallex environment. Options include: `staging`, `demo` and `prod`. |
@@ -89,3 +89,3 @@ | `langKey`      | `string`        | **NO**    | `en`          | Language. Options include: `en` and `zh`. |
 | :-------- | :------------------------ | :-------- | :-------------------------------------------------------------------------------------------- |
-| `type`    | `string`                  | **YES**   | The elements name of element. Supported values are `kyc`, `paymentsKyb` and `kycRfi`. |
+| `type`    | `string`                  | **YES**   | The elements name of element. Supported values are `kyc`, `paymentsKyb`, `kycRfi` and `transactionRfi`. |
 | `options` | `Record<string, unknown>` | **NO**    | Options for creating an Element, which differ for each element type. |
@@ -97,3 +97,3 @@
 | :----------- | :----------- | :-------- | :------------ | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `kyc`, `kycRfi`       | `hideHeader` | **NO**    | `false`       | `boolean` | Used to hide the page's header. |
+| `kyc`, `kycRfi`, `transactionRfi`       | `hideHeader` | **NO**    | `false`       | `boolean` | Used to hide the page's header. |
 |              | `hideNav`    | **NO**    | `false`       | `boolean` | Used to hide the page's navigation, which is heavily tied to the progression of the onboarding exercise. It is important to note that the user can review completed items, and edit if they need to adjust content. In addition, the user has another option to edit the form on the final review page. |
@@ -339,3 +339,3 @@ |              | `theme`    | **NO**    | -       | Theme Object | Contact your Account Manager for details. |
 
-## KYC RFI Element Events
+## RFI Elements Events
 
@@ -345,5 +345,4 @@ #### `ready`
 This event will be fired when:
-- Kyc RFI page is ready. The event data will have two formats:
-  -  `{type: 'kycRfi', kycStatus: 'INIT'}`, which represents the account's onboarding status is invalid for RFI, e.g. 'INIT' or 'FAILURE'. Use `kycStatus` to render your own status pages and handle re-entry scenarios.
-  -  `{type: 'kycRfi', rfiStatus: 'OPEN'}`, which represents the account's kyc rfi status, e.g. 'OPEN' or 'CLOSED'. You can render your own status page if rfiStatus is 'CLOSED'.
+- RFI page is ready. The event data will be:
+  -  `{type: 'kycRfi' | 'transactionRfi'}`
 
@@ -353,7 +352,7 @@ Type
 ```ts
-type kycRfiEventData = {
-  type: 'kycRfi',
+type RfiEventData = {
+  type: 'kycRfi' | 'transactionRfi',
 };
 
-element.on('ready', (data: kycRfiEventData) => void);
+element.on('ready', (data: RfiEventData) => void);
 ```
@@ -364,3 +363,3 @@
 ```ts
-element.on('ready', (data: kycRfiEventData) => {
+element.on('ready', (data: RfiEventData) => {
   // Handle ready event
@@ -372,3 +371,3 @@ });
 
-This event fires when the kyc rfi flow is completed successfully.
+This event fires when the rfi flow is completed successfully.
 
@@ -378,3 +377,7 @@ Type
 ```ts
-element.on('success', () => void);
+type RfiSuccessEventData = {
+  rfiId: string;
+};
+
+element.on('success', (data: RfiSuccessEventData) => void);
 ```
@@ -385,3 +388,3 @@
 ```ts
-element.on('success', () => {
+element.on('success', (data: RfiSuccessEventData) => {
   // Handle success event
@@ -388,0 +391,0 @@ });

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70646

28.3%

Number of package files

8

14.29%

Lines of code

1011

46.52%

Number of lines in readme file

424

0.71%

Worsened metrics

Number of low supply chain risk alerts

1

Infinity%

No dependency changes