react-native-unit-components 1.8.1 → 1.10.0

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -3,19 +3,35 @@ import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import EventBus from '../../helpers/EventBus';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
-import { getCardParams, getCardScript, injectRefreshEventIfNeeded, injectOpenActionsMenuScript, injectRequestCardActionScript } from './UNCardComponent.utils';
+import {
+  getCardParams,
+  getCardScript,
+  injectRefreshEventIfNeeded,
+  injectOpenActionsMenuScript,
+  injectRequestCardActionScript,
+  injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript,
+} from './UNCardComponent.utils';
 import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import type { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import { BottomSheetRenderingType, SlotRendering, type BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+  SlotRendering,
+  type BottomSheetSlotData,
+} from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
+import { selectWallet } from '../../slices/pushProvisioningSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { setEvent } from '../../slices/SharedEventsSlice';
+
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
@@ -30,20 +46,27 @@ export interface UNCardComponentProps {
   hideSensitiveDataButton?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<UNCardData>) => void
+  onLoad?: (response: UNOnLoadResponse<UNCardData>) => void;
   onStatusChanged?: (card: UNCardData) => void;
   onCardActivated?: (card: UNCardData) => void;
   pushProvisioningModule?: typeof NativeModules;
 }
+
 export interface CardRef {
   openActionsMenu: () => void;
   openAction: (action: UNCardMenuAction) => void;
+  showSensitiveData: () => void;
+  hideSensitiveData: () => void;
 }
 
-export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
+const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
+  const dispatch = useDispatch();
+
   const [height, setHeight] = useState(0);
 
   const webRef = useRef<WebView>(null);
+  const { initializePushProvisioning } = useLaunchInitialize();
+  const { signedNonce } = useSelector(selectWallet);
 
   useImperativeHandle(cardRef, () => ({
     openActionsMenu() {
@@ -51,7 +74,13 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
     },
     openAction(action: UNCardMenuAction) {
       injectRequestCardActionScript(webRef.current, action);
-    }
+    },
+    showSensitiveData() {
+      injectRequestShowSensitiveDataScript(webRef.current);
+    },
+    hideSensitiveData() {
+      injectRequestHideSensitiveDataScript(webRef.current);
+    },
   }));
 
   const cardStatusChanged = (card: UNCardData) => {
@@ -90,9 +119,9 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
     return;
   };
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
-  useListenerToBus({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
@@ -102,15 +131,15 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.card,
           componentResourceId: props.cardId,
-          requestRenderingEvent: message.details as RequestRenderingEvent
+          requestRenderingEvent: message.details as RequestRenderingEvent,
         };
 
-        const event = {
+        const data = {
           type: BottomSheetRenderingType.Slot,
-          data: slotData
+          data: slotData,
         } as SlotRendering;
 
-        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -132,6 +161,11 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
     }
   }, [props.pushProvisioningModule]);
 
+  useEffect(() => {
+    if (signedNonce || !UnitSDK.getPushProvisionModule()) return;
+    initializePushProvisioning();
+  }, []);
+
   return (
     <View style={{ height, width: '100%', minWidth: 235 }}>
       <WebComponent
@@ -147,4 +181,7 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
       />
     </View>
   );
+
 });
+
+export default withReduxStoreAndRefForwarding<UNCardComponentProps, CardRef>(UNCardComponent);

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

@@ -29,6 +29,13 @@ export const injectRequestCardActionScript = (currentWeb: WebView | null, action
   currentWeb?.injectJavaScript(`dispatchRequestCardAction('${action}')`);
 };
 
+export const injectRequestHideSensitiveDataScript = (currentWeb: WebView | null) => {
+  currentWeb?.injectJavaScript(`dispatchRequestHideSensitiveData('${WebComponentType.card}')`);
+};
+
+export const injectRequestShowSensitiveDataScript = (currentWeb: WebView | null) => {
+  currentWeb?.injectJavaScript(`dispatchRequestShowSensitiveData('${WebComponentType.card}')`);
+};
 export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => {
   if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == cardId) {
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);

package/src/components/UNCardComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNCardComponent, UNCardComponentProps, CardRef } from './UNCardComponent';

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -10,6 +10,7 @@ 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';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 const { Camera } = NativeModules;
 
@@ -24,7 +25,7 @@ export interface UNCheckDepositComponentProps {
   onRestartRequest?: (checkData: UNCheckDepositData) => void
 }
 
-export const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
+const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -112,3 +113,5 @@ export const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) =>
     </View>
   );
 };
+
+export default withReduxStore<UNCheckDepositComponentProps>(UNCheckDepositComponent);

package/src/components/UNCheckDepositComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNCheckDepositComponent, UNCheckDepositComponentProps } from './UNCheckDepositComponent';

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -0,0 +1,119 @@
+import React, { useRef, useState } from 'react';
+import { Dimensions, View } from 'react-native';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { WebComponent } from '../../webComponent/WebComponent';
+
+import type WebView from 'react-native-webview';
+
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getMultipleCardsParams, getMultipleCardsScript } from './UNMultipleCardsComponent.utils';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
+import type {
+  UNCardData,
+  UNError,
+  UNMultipleCardsComponentPaginationType,
+  UNMultipleCardsOnLoadData,
+  UNOnLoadResponse,
+  UNOnLoadResponseData,
+} from '../../types/shared';
+import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+
+export interface UNMultipleCardsComponentProps {
+  // inputs
+  customerToken: string;
+
+  // ui
+  paginationType?: UNMultipleCardsComponentPaginationType;
+  cardsPerPage?: number;
+  disableCardClick?: boolean;
+  theme?: string;
+  language?: string;
+  queryFilter?: string;
+  hideTitle?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
+  onCardClicked?: (card: UNCardData) => void;
+}
+
+const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
+  const webRef = useRef<WebView>(null);
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const cardClicked = (card: UNCardData) => {
+    if (props.onCardClicked) {
+      props.onCardClicked(card);
+    }
+  };
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.cards in response) {
+      // MultipleCardsOnLoadResponse;
+      props.onLoad(response[RESPONSE_KEYS.cards] as UNOnLoadResponseData<UNMultipleCardsOnLoadData>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
+      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED: {
+        cardClicked(message.details as MultipleCardsCardClickedEvent);
+      }
+    }
+  };
+
+  const renderMultipleCardsWebView = () => {
+    return (
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.multipleCards}
+        presentationMode={PresentationMode.Inherit}
+        params={getMultipleCardsParams(props)}
+        script={getMultipleCardsScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        nestedScrollEnabled={true}
+        theme={props.theme}
+        language={props.language}
+      />
+    );
+  };
+
+  if (!defaultHeight) {
+    return renderMultipleCardsWebView();
+  }
+
+  return (
+    <View style={{ height: defaultHeight }}>
+      {renderMultipleCardsWebView()}
+    </View>
+  );
+};
+
+export default withReduxStore<UNMultipleCardsComponentProps>(UNMultipleCardsComponent);

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.utils.ts

@@ -0,0 +1,36 @@
+import type { UNMultipleCardsComponentProps } from './UNMultipleCardsComponent';
+import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) => {
+  const paginationType = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+  const cardsPerPage = props.cardsPerPage ? `cards-per-page="${props.cardsPerPage}"` : '';
+  const queryFilter = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+  return `
+  customer-token="${props.customerToken}"
+  ${paginationType}
+  ${cardsPerPage}
+  disable-card-click="${props.disableCardClick || false}"
+  ${queryFilter}
+  hide-title="${props.hideTitle || false}"
+  style="height: 100%"
+  `;
+};
+
+const MULTIPLE_CARDS_LISTENERS = {
+  cardClicked: `
+    window.addEventListener("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `,
+};
+
+export const getMultipleCardsScript = () => {
+  return `
+     ${MULTIPLE_CARDS_LISTENERS.cardClicked}
+  `;
+};

package/src/components/UNMultipleCardsComponent/index.ts

@@ -0,0 +1,3 @@
+export {
+  default as UNMultipleCardsComponent, UNMultipleCardsComponentProps,
+} from './UNMultipleCardsComponent';

package/src/components/index.ts

@@ -1,8 +1,9 @@
-export * from './UNCardComponent/UNCardComponent';
-export * from './UNBottomSheetComponent/UNBottomSheetComponent';
-export * from './UNBookPaymentComponent/UNBookPaymentComponent';
-export * from './UNActivityComponent/UNActivityComponent';
-export * from './UNAccountComponent/UNAccountComponent';
-export * from './UNCheckDepositComponent/UNCheckDepositComponent';
-export * from './UNACHDebitComponent/UNACHDebitComponent';
-export * from './UNACHCreditComponent/UNACHCreditComponent';
+export * from './UNCardComponent';
+export * from './UNMultipleCardsComponent';
+export * from './UNBottomSheetComponent';
+export * from './UNBookPaymentComponent';
+export * from './UNActivityComponent';
+export * from './UNAccountComponent';
+export * from './UNCheckDepositComponent';
+export * from './UNACHDebitComponent';
+export * from './UNACHCreditComponent';

package/src/flows/card/UNCardFlows.ts

@@ -1,10 +1,16 @@
-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 {
+  BottomSheetRenderingType,
+  type WebComponentData,
+  type WebComponentRendering,
+} from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
 
 export class UNCardFlows {
   public static startPushProvisioning = async (cardId: string, customerToken: string) => {
+    const dispatch = useDispatch(); //todo: can we use hook here?
     try {
       const addToWalletComponentData: WebComponentData = {
         type: WebComponentType.cardAction,
@@ -12,12 +18,12 @@ export class UNCardFlows {
         params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
       };
 
-      const event: WebComponentRendering = {
+      const data: WebComponentRendering = {
         type: BottomSheetRenderingType.WebComponent,
         data: addToWalletComponentData,
       };
 
-      EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+      dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
     } catch (error) {
       console.error(error);
     }

package/src/helpers/pushProvisioningService/helpers.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { UNNativePromiseReject, UNVPError, UNVPErrorType } from './types';
+
+export const isUNVPError = (error: any): error is UNVPError => {
+  return 'code' in error &&
+    'description' in error &&
+    'type' in error &&
+    isUNVPErrorType(error.type) &&
+    'correlationId' in error;
+};
+
+const isUNVPErrorType = (type: any): type is UNVPErrorType => {
+  return Object.values(UNVPErrorType).includes(type);
+};
+
+export const isUNNativePromiseReject = (error: any): error is UNNativePromiseReject => {
+  return 'code' in error && 'message' in error;
+};
+
+export const promiseRejectToUNVPErrorType = (error: any): UNVPErrorType | null => {
+  // validate the shape of a promise reject we get from iOS/Android native
+  if (!isUNNativePromiseReject(error)) {
+    return null;
+  }
+  const parsedError = JSON.parse(error.message);
+  // validate the shape of an error we get from VDE SDK
+  if (!isUNVPError(parsedError)) {
+    return null;
+  }
+  return parsedError.type;
+};

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

@@ -1,7 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { UNWalletCode, type UNWallet, UNWalletName } from '../../../types/shared/wallet.types';
 import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
 import { getMobileWalletPayload } from '../../../networking/requests/UNWalletPayloadRequest';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectWallet, setSignedNonce } from '../../../slices/pushProvisioningSlice';
+import { useLaunchInitialize } from './useLaunchInitialize';
+import { UNVPErrorType } from '../types';
+import { promiseRejectToUNVPErrorType } from '../helpers';
+import { UNErrorCodes, UNErrorData } from '../../../types/shared/error.types';
+import { isUNError } from '../../../types/internal/errorHelpers';
 
 export type CardToEncryptedPayload = {
   [cardId: string]: string;
@@ -9,14 +16,27 @@ export type CardToEncryptedPayload = {
 
 export const useCardWallet = (cardId: string) => {
   const [currentUNWallet, setCurrentUNWallet] = useState<UNWallet>();
+  const { signedNonce } = useSelector(selectWallet);
+  const { initializePushProvisioning } = useLaunchInitialize();
+  const dispatch = useDispatch();
+  const isRecoveringSignedNonceRef = useRef<boolean>(false);
+
+  const shouldRecoverVPSDKForError = (errorType: UNVPErrorType) => {
+    const recoveringTypes = [UNVPErrorType.PayloadDecryptionFailed, UNVPErrorType.SessionExpired, UNVPErrorType.InvalidNonce];
+    return recoveringTypes.includes(errorType);
+  };
 
   useEffect(() => {
     const getEncryptedPayload = async () => {
       const env = UnitSDK.getEnv();
       const customerToken = UnitSDK.getCustomerToken();
       if (!env || !customerToken) return;
-
-      const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
+      // In case we use flow
+      if (!signedNonce) {
+        await initializePushProvisioning();
+        return;
+      }
+      const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env, signedNonce);
       return encryptedPayload;
     };
 
@@ -25,20 +45,39 @@ export const useCardWallet = (cardId: string) => {
       if (!currentProvisioningModule) return;
       try {
         const encryptedPayload = await getEncryptedPayload();
+        if (!encryptedPayload) return;
         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);
+        console.error('Coudln\'t get card wallet data:', error);
+        if (isRecoveringSignedNonceRef.current) return;
+        isRecoveringSignedNonceRef.current = true;
+
+        // handle unit network api errors
+        if (isUNError(error)) {
+          const errors: UNErrorData[] = error.errors;
+          // errors will return in an array but hold only a single error element
+          if (errors[0]?.code === UNErrorCodes.INVALID_NONCE) {
+            dispatch(setSignedNonce(null));
+          }
+          return;
+        }
+
+        // handle VDE SDK errors
+        const errorType = promiseRejectToUNVPErrorType(error);
+        if (!errorType) return;
+        if (shouldRecoverVPSDKForError(errorType)) {
+          dispatch(setSignedNonce(null));
+          return;
+        }
       }
     };
 
     getCardWalletData();
-
-  }, [cardId]);
+  }, [signedNonce, cardId]);
 
   return {
     currentUNWallet

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

@@ -0,0 +1,29 @@
+import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
+import { useDispatch } from 'react-redux';
+import { setSignedNonce } from '../../../slices/pushProvisioningSlice';
+
+export const useLaunchInitialize = () => {
+  const dispatch = useDispatch();
+
+  const initializePushProvisioning = async () => {
+    const pushProvisioningModule = UnitSDK.getPushProvisionModule();
+    if (!pushProvisioningModule) {
+      console.error('Missing a PushProvisioningModule');
+      return;
+    }
+    try {
+      const response = await pushProvisioningModule.launchInitialize();
+      console.log(`PushProvisioningModule.launchInitialize: Success \n\n signedNonce : ${response}`);
+      const signedNonce = JSON.parse(response).signedNonce;
+      dispatch(setSignedNonce(signedNonce));
+    } catch (error) {
+      // TODO - handle errors
+      console.error(error);
+    }
+  };
+
+  return {
+    initializePushProvisioning
+  };
+
+};

package/src/helpers/pushProvisioningService/types.ts

@@ -0,0 +1,52 @@
+export enum UNVPErrorType {
+  EmptyAppId = 'EmptyAppId',
+  DeviceAuthenticationFailed = 'DeviceAuthenticationFailed',
+  DeviceRootDetection = 'DeviceRootDetection',
+  HookDetection = 'HookDetection',
+  PlayIntegrityCheckFailed = 'PlayIntegrityCheckFailed',
+  EmptyEncryptedPayload = 'EmptyEncryptedPayload',
+  NoWallets = 'NoWallets',
+  InvalidCardId = 'InvalidCardId',
+  ProvisioningNotAllowed = 'ProvisioningNotAllowed',
+  CancelledByUser = 'CancelledByUser',
+  GoogleWalletCreationFailed = 'GoogleWalletCreationFailed',
+  UnknownErrorOccurred = 'UnknownErrorOccurred',
+  WalletProvisioningInconclusive = 'WalletProvisioningInconclusive',
+  WalletProvisioningError = 'WalletProvisioningError',
+  NetworkFailure = 'NetworkFailure',
+  SessionExpired = 'SessionExpired',
+  InvalidInfo = 'InvalidInfo',
+  PayloadDecryptionFailed = 'PayloadDecryptionFailed',
+  ApiError = 'ApiError',
+  InvalidNonce = 'InvalidNonce',
+  SDKLockout = 'SDKLockout',
+  NoBrowserFound = 'NoBrowserFound',
+  TLCMFeatureNotSupported = 'TLCMFeatureNotSupported',
+  TLCMUnsupportedWallet = 'TLCMUnsupportedWallet',
+  TLCMDetailsNotFoundInPaySdk = 'TLCMDetailsNotFoundInPaySdk',
+  TLCMTokenStatusExists = 'TLCMTokenStatusExists',
+  TLCMInvalidOperationInput = 'TLCMInvalidOperationInput',
+  TLCMInvalidRequest = 'TLCMInvalidRequest',
+  TLCMUpdateStatusNotAllowed = 'TLCMUpdateStatusNotAllowed',
+  TLCMTokenNotFound = 'TLCMTokenNotFound',
+}
+
+export interface UNVPError {
+  code: string;
+  description: string;
+  type: UNVPErrorType;
+  correlationId: string;
+}
+
+export type UNNativePromiseReject = {
+  code: string;
+  message: string;
+}
+
+export interface UNMobileWalletPayload {
+  data: {
+    attributes: {
+      payload: string;
+    };
+  };
+}

package/src/helpers/store/helpers.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { store } from '../../store';
+
+export const withReduxStore = <Props, >(Component: React.ComponentType<any>) => {
+  const Wrapper = (props: Props) => {
+    return (
+      <Provider store={store} >
+        <Component {...props} />
+      </Provider>
+    );
+  };
+  return Wrapper;
+};
+
+export const withReduxStoreAndRefForwarding = <Props, Ref>(Component: React.ComponentType<any>) => React.forwardRef<Ref, Props>((props, ref) => {
+  return (
+    <Provider store={store}>
+      <Component ref={ref} {...props} />
+    </Provider>
+  );
+});

package/src/hooks/useListenerToEvent.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../store';
+import type { NativeMessageType } from '../messages/nativeMessages';
+import type { WebViewMessageType } from '../messages/webMessages';
+
+export type BusEventKey = NativeMessageType | WebViewMessageType
+
+type EventListener = {
+  busEventKey: BusEventKey,
+  action: (data: any) => void
+}
+
+export const useListenerToEvent = (listener: EventListener) => {
+  const isFirstRun = useRef(true);
+  const event = useSelector((state: RootState) => state.sharedEvents.event);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+
+    if (event == null || event == undefined || event?.key != listener.busEventKey) {
+      return;
+    }
+
+    listener.action(event.data);
+
+  }, [event]);
+};