react-native-unit-components 1.6.1 → 1.7.0

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -1,13 +1,9 @@
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
-import { WebComponentType } from '../../webComponent/WebComponent';
-import type { NativeModules } from 'react-native';
-import { getMobileWalletPayload } from './networking/requests/UNWalletPayloadRequest';
-import { UNWallet, UNWalletCode, UNWalletName } from '../../../src/sharedTypes/wallet.types';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
-import type { UNCardMenuAction } from '../../sharedTypes';
+import type { UNCardMenuAction } from '../../types/shared';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   return `
@@ -38,46 +34,3 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
 };
-
-export const launchGetWallets = async (customerToken: string, cardId: string, pushProvisioningModule: typeof NativeModules) => {
-  try {
-    const env = UnitSDK.getEnv();
-    if (!env) return null;
-
-    const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
-    if (!encryptedPayload) return null;
-
-    const walletsResponse = await pushProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
-    const parsedWalletsResponse = JSON.parse(walletsResponse);
-    const wallets = parsedWalletsResponse.wallets;
-
-    if (!wallets) return null;
-    if (wallets[0].code === UNWalletCode.Apple) {
-      return ({ name: UNWalletName.Apple, code: UNWalletCode.Apple, status: wallets[0].status });
-    } else {
-      const googleWallet = wallets.filter((wallet: { name: UNWalletName }) => {
-        return wallet.name === UNWalletName.Google;
-      });
-      if (!googleWallet) return;
-      return ({ name: UNWalletName.Google, code: UNWalletCode.Google, status: googleWallet[0].status });
-    }
-  } catch (error) {
-    return Promise.reject(error);
-  }
-
-};
-
-export const launchStartCardProvisioning = async (pushProvisioningModule: typeof NativeModules, wallet: UNWallet | null) => {
-  try {
-    const response = await pushProvisioningModule.launchStartCardProvisioning(
-      JSON.stringify({
-        walletCode: wallet?.code,
-        walletName: wallet?.name
-      }));
-    return response;
-  }
-
-  catch (error) {
-    return Promise.reject(error);
-  }
-};

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { View, NativeModules, Platform } from 'react-native';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
-import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
+import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 
 const { Camera } = NativeModules;
 

package/src/flows/UNFlows.ts

@@ -0,0 +1,13 @@
+import { UNCardFlows } from './card/UNCardFlows';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+
+export class UNFlows {
+  constructor() {
+    console.log('new Flows instance created');
+  }
+
+  public async startPushProvisioning(cardId: string, customerToken: string) {
+    UnitSDK.setCustomerToken(customerToken);
+    UNCardFlows.startPushProvisioning(cardId, customerToken);
+  }
+}

package/src/flows/card/UNCardFlows.ts

@@ -0,0 +1,25 @@
+import EventBus from '../../helpers/EventBus';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { BottomSheetRenderingType, type WebComponentData, type WebComponentRendering } from '../../types/internal/bottomSheet.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+
+export class UNCardFlows {
+  public static startPushProvisioning = async (cardId: string, customerToken: string) => {
+    try {
+      const addToWalletComponentData: WebComponentData = {
+        type: WebComponentType.cardAction,
+        presentationMode: PresentationMode.CoverInjectedHeight,
+        params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
+      };
+
+      const event: WebComponentRendering = {
+        type: BottomSheetRenderingType.WebComponent,
+        data: addToWalletComponentData,
+      };
+
+      EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { UNWalletCode, type UNWallet, UNWalletName } from '../../../types/shared/wallet.types';
+import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
+import { getMobileWalletPayload } from '../../../networking/requests/UNWalletPayloadRequest';
+
+export type CardToEncryptedPayload = {
+  [cardId: string]: string;
+};
+
+export const useCardWallet = (cardId: string) => {
+  const [currentUNWallet, setCurrentUNWallet] = useState<UNWallet>();
+
+  useEffect(() => {
+    const getEncryptedPayload = async () => {
+      const env = UnitSDK.getEnv();
+      const customerToken = UnitSDK.getCustomerToken();
+      if (!env || !customerToken) return;
+
+      const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
+      return encryptedPayload;
+    };
+
+    const getCardWalletData = async ()  => {
+      const currentProvisioningModule = UnitSDK.getPushProvisionModule();
+      if (!currentProvisioningModule) return;
+      try {
+        const encryptedPayload = await getEncryptedPayload();
+        const walletsResponse = await currentProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
+
+        const unWallet: UNWallet | null = parseWalletsResponse(walletsResponse);
+        if (!unWallet) return;
+        setCurrentUNWallet(unWallet);
+        return;
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    };
+
+    getCardWalletData();
+
+  }, [cardId]);
+
+  return {
+    currentUNWallet
+  };
+
+};
+
+const parseWalletsResponse = (walletsResponse: string): UNWallet | null  => {
+  try {
+    const parsedWalletsResponse = JSON.parse(walletsResponse);
+    const wallets = parsedWalletsResponse.wallets;
+
+    if (!wallets) return null;
+    if (wallets[0].code === UNWalletCode.Apple) {
+      return ({ name: UNWalletName.Apple, code: UNWalletCode.Apple, status: wallets[0].status });
+    } else {
+      const googleWallet = wallets.filter((wallet: { name: UNWalletName }) => {
+        return wallet.name === UNWalletName.Google;
+      });
+      if (!googleWallet) return null;
+      return ({ name: UNWalletName.Google, code: UNWalletCode.Google, status: googleWallet[0].status });
+    }
+  } catch (error) {
+    throw new Error('Error parsing wallet response');
+  }
+};

package/src/helpers/pushProvisioningService/startProvisioning.ts

@@ -0,0 +1,20 @@
+import type { UNWallet } from '../../types/shared/wallet.types';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+
+export const launchStartCardProvisioning = async (wallet: UNWallet | null) => {
+  const pushProvisioningModule = UnitSDK.getPushProvisionModule();
+  if (!pushProvisioningModule) return;
+
+  try {
+    const response = await pushProvisioningModule.launchStartCardProvisioning(
+      JSON.stringify({
+        walletCode: wallet?.code,
+        walletName: wallet?.name
+      }));
+    return response;
+  }
+
+  catch (error) {
+    return Promise.reject(error);
+  }
+};

package/src/index.tsx

@@ -1,5 +1,5 @@
 export * from './components';
 
-export * from './sharedTypes';
+export * from './types/shared';
 
 export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/src/messages/nativeMessages/bottomSheetMessage.ts

@@ -0,0 +1,15 @@
+import type {NativeComponentRendering, WebComponentRendering, SlotRendering } from '../../types/internal/bottomSheet.types';
+
+export enum BottomSheetNativeMessage {
+  START_FLOW = 'startBottomSheetFlow',
+}
+
+export enum CardAddToWalletErrors {
+  closedNativeWalletScreen = 'VP_ERROR_302'
+}
+
+export type StartBottomSheetFlowMessage = SlotRendering | WebComponentRendering | NativeComponentRendering
+
+export type BottomSheetNativeEvent = |
+  StartBottomSheetFlowMessage
+  // BottomSheetChangeFlowMessage - probably, we want to add this message event in the future to alternate between flows

package/src/messages/nativeMessages/cardMessage.ts

@@ -1,27 +1,4 @@
-import type { UNCardAddToWalletStatus } from '../../sharedTypes/wallet.types';
-
-export enum CardNativeMessage {
-  CARD_GET_ADD_TO_WALLET_STATUS = 'cardGetAddToWalletStatus',
-  CARD_UPDATE_ADD_TO_WALLET_STATUS = 'cardUpdateAddToWalletStatus',
-  CARD_START_PUSH_PROVISIONING = 'cardStartPushProvisioning'
-}
-
+// Should we remove it ?
 export enum CardAddToWalletErrors {
   closedNativeWalletScreen = 'VP_ERROR_302'
 }
-export interface UNCardAddToWalletStatusEvent {
-  status: UNCardAddToWalletStatus
-}
-
-export interface CardGetAddToWalletStatusEvent {
-  cardId: string
-}
-
-export interface CardStartPushProvisioningEvent {
-  cardId: string
-}
-
-export type CardNativeEvent =
-  | UNCardAddToWalletStatusEvent
-  | CardGetAddToWalletStatusEvent
-  | CardStartPushProvisioningEvent

package/src/messages/nativeMessages/index.ts

@@ -1,13 +1,13 @@
-import type { CardNativeEvent, CardNativeMessage } from './cardMessage';
+import type { BottomSheetNativeEvent, BottomSheetNativeMessage } from './bottomSheetMessage';
 import type { SDKEvent, SDKMessage } from './sdkMessage';
 
 export type NativeMessageType =
   | SDKMessage
-  | CardNativeMessage
+  | BottomSheetNativeMessage
 
 export type NativeEvent =
-  | CardNativeEvent
   | SDKEvent
+  | BottomSheetNativeEvent
 
 export interface NativeMessage {
   type: NativeMessageType,

package/src/messages/webMessages/accountMessage.ts

@@ -1,4 +1,4 @@
-import type { UNAccountData } from '../../sharedTypes';
+import type { UNAccountData } from '../../types/shared';
 
 export enum AccountMessage {
   UNIT_ACCOUNT_CHANGED = 'unitAccountChanged'

package/src/messages/webMessages/achCreditMessage.ts

@@ -1,4 +1,4 @@
-import type { UNACHData } from '../../sharedTypes';
+import type { UNACHData } from '../../types/shared';
 
 export interface PaymentCreatedEvent {
   data: UNACHData

package/src/messages/webMessages/bookPaymentMessage.ts

@@ -1,4 +1,4 @@
-import type { UNBookPaymentData } from '../../sharedTypes';
+import type { UNBookPaymentData } from '../../types/shared';
 
 export interface PaymentCreatedEvent {
   data: UNBookPaymentData

package/src/messages/webMessages/cardMessage.ts

@@ -1,4 +1,4 @@
-import type { UNCardData } from '../../sharedTypes';
+import type { UNCardData } from '../../types/shared';
 
 export enum CardMessage {
   CARD_ACTIVATED = 'unitCardActivated',

package/src/messages/webMessages/checkMessage.ts

@@ -1,4 +1,4 @@
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
 
 export enum CheckMessage {
   // check deposit

package/src/messages/webMessages/onLoadMessage.ts

@@ -1,6 +1,6 @@
-import type {UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
-import type { UNAuthorizationData } from '../../sharedTypes/authorization.types';
-import type { UNTransactionData } from '../../sharedTypes/transactions.types';
+import type {UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../types/shared';
+import type { UNAuthorizationData } from '../../types/shared/authorization.types';
+import type { UNTransactionData } from '../../types/shared/transactions.types';
 
 export enum RESPONSE_KEYS {
   errors = 'errors',

package/src/messages/webMessages/unitMessages.ts

@@ -9,9 +9,10 @@ export enum UnitMessage {
   UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload',
   UNIT_PLAID_TOKEN_CREATED = 'unitPlaidLinkTokenCreated',
   UNIT_REQUEST_EXTERNAL_SDK = 'unitRequestExternalSdk',
-  UNIT_PLAID_RESPONSE = 'unitPlaidResponse'
-
+  UNIT_PLAID_RESPONSE = 'unitPlaidResponse',
+  PAGE_HEIGHT = 'PAGE_HEIGHT'
 }
+
 export interface RequestRenderingEvent {
   data: RequestRenderingEventData
 }

package/src/{components/UNCardComponent/networking → networking}/common/UNNetworkConstants.ts

@@ -1,4 +1,4 @@
-import { UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+import { UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
 
 export const APIHeaders = {
   AUTHORIZATION: 'Authorization',

package/src/{components/UNCardComponent/networking → networking}/requests/UNWalletPayloadRequest.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
-import { UnitSDK, UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+import { UnitSDK, UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
+
+// TODO: use apiClient class for handling requests.
 
 export const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {
   const headers = {

package/src/scripts/html/bodyHtml.ts

@@ -1,18 +1,6 @@
-export const webViewId = 'webViewContainer';
-
-export enum PresentationMode {
-  /*
-    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.
-
-    Inherit -  inherit the parent size by style of 100 view height
+import { PresentationMode } from '../../types/internal/webComponent.types';
 
-    Default - return the unit component script
-  */
-
-  CoverInjectedHeight = 'coverInjectedHeight',
-  Inherit = 'inherit',
-  Default = 'deafult'
-}
+export const webViewId = 'webViewContainer';
 
 export const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {
   const currentComponent = `<${unitComponent} ${unitComponentProps || ''} }> </${unitComponent}>`;

package/src/types/internal/bottomSheet.types.ts

@@ -0,0 +1,43 @@
+import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { PresentationMode, WebComponentType } from './webComponent.types';
+
+export enum BottomSheetRenderingType {
+  Slot,
+  WebComponent,
+  NativeComponent
+}
+
+export type BottomSheetSlotData = {
+  // The data that rendered by the web view
+  componentName?: WebComponentType,
+  componentResourceId?: string,
+  requestRenderingEvent: RequestRenderingEvent
+}
+
+export type WebComponentData = {
+  type: WebComponentType;
+  presentationMode?: PresentationMode,
+  params?: string;
+  theme?: string;
+  language?: string;
+  windowParams?: string;
+}
+
+export type NativeComponentData = {
+  component: React.ReactNode,
+}
+
+export interface SlotRendering {
+  type: BottomSheetRenderingType.Slot,
+  data: BottomSheetSlotData
+}
+
+export interface WebComponentRendering {
+  type: BottomSheetRenderingType.WebComponent,
+  data: WebComponentData
+}
+
+export interface NativeComponentRendering {
+  type: BottomSheetRenderingType.NativeComponent,
+  data: NativeComponentData
+}

package/src/types/internal/webComponent.types.ts

@@ -0,0 +1,26 @@
+export enum WebComponentType {
+  card = 'unit-elements-card',
+  bookPayment = 'unit-elements-book-payment',
+  activity = 'unit-elements-activity',
+  slot = 'unit-elements-sdk-slot',
+  account = 'unit-elements-account',
+  checkDeposit = 'unit-elements-check-deposit',
+  achDebitPayment = 'unit-elements-ach-debit-payment',
+  achCreditPayment = 'unit-elements-ach-credit-payment',
+
+  cardAction = 'unit-elements-card-action',
+}
+
+export enum PresentationMode {
+  /*
+    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.
+
+    Inherit -  inherit the parent size by style of 100 view height
+
+    Default - return the unit component script
+  */
+
+  CoverInjectedHeight = 'coverInjectedHeight',
+  Inherit = 'inherit',
+  Default = 'deafult'
+}

package/src/{sharedTypes → types/shared}/achCredit.types.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAccountData, UNCounterpartyAccountData } from './account.types';
 import type { UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
 import type { UNTags, UNRelationship } from './types';

package/src/{sharedTypes → types/shared}/activity.types.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAuthorizationData } from './authorization.types';
 import type { UNTransactionData } from './transactions.types';
 

package/src/unitSdkManager/UnitSdkManager.ts

@@ -1,27 +1,37 @@
+import type { NativeModules } from 'react-native';
 import EventBus from '../helpers/EventBus';
 import { SDKMessage } from '../messages/nativeMessages/sdkMessage';
 import { fetchUnitScript } from './UnitSdk.api';
+import { UnitUiManager } from './unitUiManager/unitUiManager';
 
 export enum UNEnvironment {
   sandbox = 'sandbox',
   production = 'production'
 }
 
+const UNIT_WEB_VERSION = '1';
+
 export const UNIT_SCRIPT_URL = {
-  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',
-  [UNEnvironment.production]: 'https://ui.unit.co/components.js'
+  [UNEnvironment.sandbox]: `https://ui.s.unit.sh/release/${UNIT_WEB_VERSION}/components.js`,
+  [UNEnvironment.production]: `https://ui.unit.co/release/${UNIT_WEB_VERSION}/components.js`
 };
 export class UnitSDK {
   protected static env?: UNEnvironment;
+  protected static customerToken?: string;
   protected static theme?: string;
   protected static language?: string;
+
   protected static signedNonce?: string;
+  protected static pushProvisionModule?: typeof NativeModules;
+
+  public static ui: UnitUiManager;
 
   public static init = async (env: UNEnvironment, theme?: string, language?: string) => {
     try {
       this.env = env;
       this.theme = theme;
       this.language = language;
+      this.ui = new UnitUiManager();
       await fetchUnitScript();
       EventBus.Instance.event(SDKMessage.IS_SDK_INITIALIZED, {});
     } catch (e) {
@@ -29,6 +39,14 @@ export class UnitSDK {
     }
   };
 
+  public static setPushProvisioningModule = (pushProvisionModule: typeof NativeModules) => {
+    this.pushProvisionModule = pushProvisionModule;
+  };
+
+  public static getPushProvisionModule = () => {
+    return this.pushProvisionModule;
+  };
+
   public static setSignedNonce = (signedNonce: string) => {
     this.signedNonce = signedNonce;
   };
@@ -48,4 +66,12 @@ export class UnitSDK {
   public static getSignedNonce = () => {
     return this.signedNonce;
   };
+
+  public static setCustomerToken = (customerToken: string) => {
+    this.customerToken = customerToken;
+  };
+
+  public static getCustomerToken = () => {
+    return this.customerToken;
+  };
 }

package/src/unitSdkManager/unitUiManager/unitUiManager.ts

@@ -0,0 +1,13 @@
+import { UNFlows } from '../../flows/UNFlows';
+
+export class UnitUiManager {
+  public flows: UNFlows = new UNFlows();
+
+  constructor() {
+    this.init();
+  }
+
+  private init = () => {
+    this.flows = new UNFlows();
+  };
+}

package/src/webComponent/WebComponent.tsx

@@ -6,12 +6,13 @@ import EventBus from '../helpers/EventBus';
 import html, { HTML_PLACEHOLDER } from './html';
 import { RequestRefreshEvent, UnitMessage, RequestDownloadEvent } from '../messages/webMessages/unitMessages';
 import { useListenerToBus } from '../hooks/listenerToBus';
-import { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';
+import { getHtmlBody } from '../scripts/html/bodyHtml';
 import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
 import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 import type { WebViewMessage } from '../messages/webMessages';
 import { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';
 import { handleRequestDownload } from './WebComponent.utils';
+import type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
 
 const { UNAppInfo } = NativeModules;
 
@@ -27,17 +28,7 @@ export interface WebComponentProps {
   nestedScrollEnabled?: boolean,
   handleScroll?: (event: any) => void,
   width?: number;
-}
-
-export enum WebComponentType {
-  card = 'unit-elements-card',
-  bookPayment = 'unit-elements-book-payment',
-  activity = 'unit-elements-activity',
-  slot = 'unit-elements-sdk-slot',
-  account = 'unit-elements-account',
-  checkDeposit = 'unit-elements-check-deposit',
-  achDebitPayment = 'unit-elements-ach-debit-payment',
-  achCreditPayment = 'unit-elements-ach-credit-payment'
+  windowParams?: string;
 }
 
 export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
@@ -92,8 +83,9 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     const componentParams = (props.params || '') + themeParam + languageParam;
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
+    newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');
     setSourceHtml(newHtml);
-  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, componentCurrentLanguage, props.script]);
+  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, componentCurrentLanguage, props.script, props.windowParams]);
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
@@ -105,7 +97,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       case UnitMessage.UNIT_REQUEST_DOWNLOAD:
         message.details &&
           handleRequestDownload(message.details as RequestDownloadEvent, () => {
-            EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW);
+            EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW, {});
           });
         break;
       default:
@@ -139,7 +131,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}
-      style={{ width: width, flex: 1, opacity: 0.99, backgroundColor: "transparent" }}
+      style={{ width: width, flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}
       source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
       onMessage={onMessage}
       androidHardwareAccelerationDisabled

package/src/webComponent/html.ts

@@ -4,7 +4,8 @@ import { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEI
 export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
   BODY: '<BODY_HTML_CODE>',
-  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>'
+  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',
+  WINDOW_PARAMS: '<WINDOW_PARAMS>'
 };
 
 const htmlText = `
@@ -19,6 +20,7 @@ const htmlText = `
       os: "${Platform.OS}",
       walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}",
     }
+    ${HTML_PLACEHOLDER.WINDOW_PARAMS}
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   </head>

package/lib/commonjs/components/UNCardComponent/networking/common/UNNetworkConstants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_UnitSdkManager","require","APIHeaders","AUTHORIZATION","CONTENT_TYPE","exports","UNIT_SECURE_URL","UNEnvironment","sandbox","production"],"sources":["UNNetworkConstants.ts"],"sourcesContent":["import { UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';\n\nexport const APIHeaders = {\n  AUTHORIZATION: 'Authorization',\n  CONTENT_TYPE: 'application/vnd.api+json',\n};\n\nexport const UNIT_SECURE_URL = {\n  [UNEnvironment.sandbox]: 'https://secure.api.s.unit.sh',\n  [UNEnvironment.production]: 'https://secure.api.unit.co'\n};\n"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAEO,MAAMC,UAAU,GAAG;EACxBC,aAAa,EAAE,eAAe;EAC9BC,YAAY,EAAE;AAChB,CAAC;AAACC,OAAA,CAAAH,UAAA,GAAAA,UAAA;AAEK,MAAMI,eAAe,GAAG;EAC7B,CAACC,6BAAa,CAACC,OAAO,GAAG,8BAA8B;EACvD,CAACD,6BAAa,CAACE,UAAU,GAAG;AAC9B,CAAC;AAACJ,OAAA,CAAAC,eAAA,GAAAA,eAAA"}

package/lib/commonjs/components/UNCardComponent/networking/requests/UNWalletPayloadRequest.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_axios","_interopRequireDefault","require","_UNNetworkConstants","_UnitSdkManager","obj","__esModule","default","getMobileWalletPayload","customerToken","cardId","env","headers","APIHeaders","CONTENT_TYPE","data","attributes","signedNonce","UnitSDK","getSignedNonce","baseURL","UNIT_SECURE_URL","response","axios","post","encryptedPayload","payload","error","Promise","reject","exports"],"sources":["UNWalletPayloadRequest.ts"],"sourcesContent":["import axios from 'axios';\nimport { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';\nimport { UnitSDK, UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';\n\nexport const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {\n  const headers = {\n    'Content-Type': APIHeaders.CONTENT_TYPE,\n    'Authorization': `Bearer ${customerToken}`,\n  };\n\n  const data = {\n    data: {\n      attributes: {\n        signedNonce: UnitSDK.getSignedNonce(),\n      },\n    },\n  };\n\n  const baseURL = `${UNIT_SECURE_URL[env as keyof typeof UNEnvironment]}/cards/${cardId}/mobile-wallet-payload`;\n  try {\n    const response = await axios.post(\n      baseURL,\n      data,\n      {\n        headers: headers,\n      });\n    const encryptedPayload = response.data.data.attributes.payload;\n    return encryptedPayload;\n  } catch (error) {\n    return Promise.reject(error);\n  }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAAmF,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE5E,MAAMG,sBAAsB,GAAG,MAAAA,CAAOC,aAAqB,EAAEC,MAAc,EAAEC,GAAkB,KAAK;EACzG,MAAMC,OAAO,GAAG;IACd,cAAc,EAAEC,8BAAU,CAACC,YAAY;IACvC,eAAe,EAAG,UAASL,aAAc;EAC3C,CAAC;EAED,MAAMM,IAAI,GAAG;IACXA,IAAI,EAAE;MACJC,UAAU,EAAE;QACVC,WAAW,EAAEC,uBAAO,CAACC,cAAc;MACrC;IACF;EACF,CAAC;EAED,MAAMC,OAAO,GAAI,GAAEC,mCAAe,CAACV,GAAG,CAAgC,UAASD,MAAO,wBAAuB;EAC7G,IAAI;IACF,MAAMY,QAAQ,GAAG,MAAMC,cAAK,CAACC,IAAI,CAC/BJ,OAAO,EACPL,IAAI,EACJ;MACEH,OAAO,EAAEA;IACX,CAAC,CAAC;IACJ,MAAMa,gBAAgB,GAAGH,QAAQ,CAACP,IAAI,CAACA,IAAI,CAACC,UAAU,CAACU,OAAO;IAC9D,OAAOD,gBAAgB;EACzB,CAAC,CAAC,OAAOE,KAAK,EAAE;IACd,OAAOC,OAAO,CAACC,MAAM,CAACF,KAAK,CAAC;EAC9B;AACF,CAAC;AAACG,OAAA,CAAAtB,sBAAA,GAAAA,sBAAA"}