react-native-unit-components 1.13.0 → 1.15.0

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getMultiFactorAuthenticationParams, getMultiFactorAuthenticationScript } from './UNMultiFactorAuthenticationComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { MultiFactorAuthenticationFinishedEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UNError, UNOnLoadResponse } from '../../types/shared';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+import { UNCustomerTokenVerification, UNMultiFactorAuthenticationFinished } from '../../types/shared/multiFactorAuthentication.types';
+
+export interface UNMultiFactorAuthenticationComponentProps {
+  // inputs
+  customerToken: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNOnLoadResponse<undefined>) => void
+  onVerificationTokenCreated?: (data: UNCustomerTokenVerification) => void
+  onAuthenticationFinished?: (data: UNMultiFactorAuthenticationFinished) => void
+}
+
+const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthenticationComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    props.onLoad({ data: undefined });
+  };
+
+  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;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+      case MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED:
+        props.onVerificationTokenCreated && props.onVerificationTokenCreated(message.details as UNCustomerTokenVerification);
+        break;
+      case UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED: {
+        const data = JSON.parse((message.details as MultiFactorAuthenticationFinishedEvent).unitVerifiedCustomerTokenString);
+        props.onAuthenticationFinished && props.onAuthenticationFinished(data as UNMultiFactorAuthenticationFinished);
+        break;
+      }
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad}>
+    <WebComponent
+      type={WebComponentType.multiFactorAuthentication}
+      presentationMode={PresentationMode.Inherit}
+      params={getMultiFactorAuthenticationParams(props)}
+      script={getMultiFactorAuthenticationScript()}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      theme={props.theme}
+      language={props.language}
+    />
+  </UNBaseView>;
+};
+
+export default withReduxStore<UNMultiFactorAuthenticationComponentProps>(UNMultiFactorAuthenticationComponent);

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.utils.ts

@@ -0,0 +1,27 @@
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+import { UNMultiFactorAuthenticationComponentProps } from './UNMultiFactorAuthenticationComponent';
+
+export const getMultiFactorAuthenticationParams = (props: UNMultiFactorAuthenticationComponentProps) => {
+  return `
+    customer-token="${props.customerToken}"
+  `;
+};
+
+const MULTI_FACTOR_AUTHENTICATION_LISTENERS = {
+  verificationTokenCreated: `
+    window.addEventListener("${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `
+};
+
+export const getMultiFactorAuthenticationScript = () => {
+  return `
+     ${MULTI_FACTOR_AUTHENTICATION_LISTENERS.verificationTokenCreated}
+  `;
+};

package/src/components/UNMultiFactorAuthenticationComponent/index.ts

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

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { Dimensions } from 'react-native';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { WebComponent } from '../../webComponent/WebComponent';
@@ -21,6 +21,7 @@ import type {
   UNOnLoadResponseData,
 } from '../../types/shared';
 import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
@@ -90,8 +91,9 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
   };
 
-  const renderMultipleCardsWebView = () => {
-    return (
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1};
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.multipleCards}
@@ -103,17 +105,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (!defaultHeight) {
-    return renderMultipleCardsWebView();
-  }
-
-  return (
-    <View style={{ height: defaultHeight }}>
-      {renderMultipleCardsWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
@@ -12,6 +11,7 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNRepaymentData } from '../../types/shared/repayment.types';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNNextRepaymentComponentProps {
   // inputs
@@ -63,7 +63,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.nextRepayment}
         presentationMode={PresentationMode.Default}
@@ -73,7 +73,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.utils.ts

@@ -5,6 +5,6 @@ export const getNextRepaymentParams = (props: UNNextRepaymentComponentProps) =>
   return `
     customer-token="${props.customerToken}"
     account-id="${props.accountId}"
-    hide-actions-menu-button="${props.hideTitle || false}"
+    hide-title="${props.hideTitle || false}"
   `;
 };

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -8,7 +8,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNPayeeConnectedAccount, UNPayeeCounterparty, UNPayeeManagementComponentPaginationType, UNPayeeManagementMenuItem, UNPlaidAccountFilter } from '../../types/shared';
+import { UNError, UNOnLoadResponse, UNPayeeConnectedAccount, UNPayeeCounterparty, UNPayeeManagementComponentPaginationType, UNPayeeManagementMenuItem, UNPlaidAccountFilter } from '../../types/shared';
 import { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
@@ -19,6 +19,8 @@ import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeConnectedAccountEvent, PayeeCounterpartyEvent, PayeeManagementMessage, PayeeMicroDepositeConnectionEvent } from '../../messages/webMessages/payeeManagementMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNPayeeManagementComponentProps {
   // inputs
@@ -44,6 +46,7 @@ export interface UNPayeeManagementComponentProps {
   plaidLinkCustomizationName?: string;
 
   // events
+  onLoad?: (response: UNOnLoadResponse<[UNPayeeCounterparty]>) => void;
   onCounterpartyCreated?: (counterparty: UNPayeeCounterparty) => void;
   onCounterpartyDeleted?: (counterparty: UNPayeeCounterparty) => void;
 
@@ -102,6 +105,25 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     }
   };
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      props.onLoad(response[RESPONSE_KEYS.counterpartiesResult] as UNOnLoadResponse<[UNPayeeCounterparty]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitMessage.UNIT_REQUEST_RENDERING: {
@@ -110,6 +132,7 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD: {
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       }
       case PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED: {
@@ -136,17 +159,19 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
   };
 
   return (
-    <WebComponent
-      ref={webRef}
-      type={WebComponentType.payeeManagement}
-      presentationMode={PresentationMode.Inherit}
-      params={getPayeeParams(props)}
-      script={getPayeeManagementScript()}
-      theme={props.theme}
-      nestedScrollEnabled={true}
-      language={props.language}
-      onMessage={message => handleMessage(message)}
-    />
+    <UNBaseView style={{ height: '100%' }}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.payeeManagement}
+        presentationMode={PresentationMode.Inherit}
+        params={getPayeeParams(props)}
+        script={getPayeeManagementScript()}
+        theme={props.theme}
+        nestedScrollEnabled={true}
+        language={props.language}
+        onMessage={message => handleMessage(message)}
+      />
+    </UNBaseView>
   );
 };
 

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
@@ -9,6 +8,7 @@ import { withReduxStore } from '../../helpers/store/helpers';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNProgramDetailsComponentProps {
   // inputs
@@ -61,7 +61,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.programDetails}
         presentationMode={PresentationMode.Default}
@@ -70,7 +70,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
         language={props.language}
         onMessage={handleMessage}
       />
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -24,6 +24,7 @@ import { PageMessage } from '../../messages/webMessages/pageMessage';
 import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNWhiteLabelAppComponentProps {
   // inputs
@@ -102,17 +103,19 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
 
   const renderWebView = () => {
     return (
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.whiteLabelApp}
-        presentationMode={PresentationMode.Inherit}
-        params={getWhiteLabelAppParams(props)}
-        onMessage={handleWebViewMessage}
-        isScrollable={true}
-        theme={props.theme}
-        language={props.language}
-        script={getWhiteLabelAppScript()}
-      />
+      <UNBaseView style={{ flex: 1 }}>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.whiteLabelApp}
+          presentationMode={PresentationMode.Inherit}
+          params={getWhiteLabelAppParams(props)}
+          onMessage={handleWebViewMessage}
+          isScrollable={true}
+          theme={props.theme}
+          language={props.language}
+          script={getWhiteLabelAppScript()}
+        />
+      </UNBaseView>
     );
   };
 

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.tsx

@@ -0,0 +1,109 @@
+import { WebComponent } from '../../webComponent/WebComponent';
+import React, { useState } from 'react';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import { WebViewMessage } from '../../messages/webMessages';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { getWirePaymentParams, getWirePaymentScript } from './UNWirePaymentComponent.utils';
+import { UNWirePaymentData, WirePaymentCreatedEvent } from '../../types/shared/wirePayment.types';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
+
+export interface UNWirePaymentComponentProps {
+  // inputs
+  customerToken: string;
+  accountId?: string;
+  fee?: number;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  isAutoFocus?: boolean;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
+
+  // events
+  onPaymentCreated?: (data: UNWirePaymentData) => void;
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
+}
+
+const UNWirePaymentComponent = (props: UNWirePaymentComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response) {
+      const account = response[RESPONSE_KEYS.account].data;
+      const paymentOnLoad: UNOnLoadResponseData<[UNAccountData]> = {
+        data: ensureArray(account),
+      };
+      props.onLoad(paymentOnLoad);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+    switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
+      case PaymentMessage.PAYMENT_CREATED:
+        props.onPaymentCreated && props.onPaymentCreated((message.details as WirePaymentCreatedEvent).data);
+        break;
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return (
+    <UNBaseView style={style}>
+      <WebComponent
+        type={WebComponentType.wirePayment}
+        presentationMode={presentationMode}
+        params={getWirePaymentParams(props)}
+        script={getWirePaymentScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={true}
+        theme={props.theme}
+        language={props.language}
+      />
+    </UNBaseView>
+  );
+};
+
+export default withReduxStore<UNWirePaymentComponentProps>(UNWirePaymentComponent);

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.utils.ts

@@ -0,0 +1,23 @@
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { UNWirePaymentComponentProps } from './UNWirePaymentComponent';
+
+export const getWirePaymentParams = (props: UNWirePaymentComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
+  return `
+    ${accountIdParam}
+    customer-token="${props.customerToken}"
+    ${feeParam}
+    is-auto-focus="${props.isAutoFocus || false}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
+  `;
+};
+
+export const getWirePaymentScript = () => {
+  return `
+    ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
+  `;
+};

package/src/components/UNWirePaymentComponent/index.ts

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

package/src/components/index.ts

@@ -12,3 +12,6 @@ export * from './UNProgramDetailsComponent';
 export * from './UNNextRepaymentComponent';
 export * from './UNWhiteLabelAppComponent';
 export * from './UNPayeeManagementComponent';
+export * from './UNWirePaymentComponent';
+export * from './UNMultiFactorAuthenticationComponent';
+export * from './UNCardActionComponent';

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -20,6 +20,7 @@ import {
 import { getStylesObject } from './BottomSheet.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface BottomSheetProps {
   isOpen: boolean,
@@ -223,11 +224,9 @@ const BottomSheet = (props: BottomSheetProps) => {
           <View
             onLayout={_setSize}
           >
-            <View
-              style={{ height: props.height }}
-            >
+            <UNBaseView style={{ height: props.height }}>
               {children}
-            </View>
+            </UNBaseView>
 
           </View>
         </View>

package/src/hooks/useIsJailbrokeDevice.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import UNSecurityManagerHelper from '../nativeModulesHelpers/UNSecurityHelper';
+
+export const useIsJailbrokeDevice = () => {
+  const [isJailbroke, setIsJailbroke] = useState(false);
+
+  useEffect(() => {
+    const isDeviceJailbroke = async () => {
+      const isDeviceJailbroke = await UNSecurityManagerHelper.isDeviceJailbroke();
+      setIsJailbroke(isDeviceJailbroke);
+    };
+
+    isDeviceJailbroke();
+  }, []);
+
+  return isJailbroke;
+};

package/src/hooks/useSnapshotProtection.ts

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+import UNSnapshotProtectionHelper from '../nativeModulesHelpers/UNSanpshotProtectionHelper/UNSnapshotProtectionHelper';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+import { UNSnapshotProtectionStrategy } from '../types/shared/securitySettings';
+import { useEffect } from 'react';
+
+export const useSnapshotProtection = () => {
+  /**
+   * This hook provides snapshot protection specifically for Android.
+   * For iOS, a native service is utilized instead.
+   */
+  useEffect(() => {
+    if (!UnitSDK.isInitialized()) {
+      return;
+    }
+
+    if (UnitSDK.getSecuritySettings().snapshotProtectionStrategy == UNSnapshotProtectionStrategy.None) {
+      return;
+    }
+
+    if (Platform.OS == 'android') {
+      UNSnapshotProtectionHelper.setAndroidSecurity();
+    }
+  }, []);
+};

package/src/messages/webMessages/index.ts

@@ -12,6 +12,7 @@ import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMe
 import { FundAccountPaymentEvent } from './fundAccountPaymentMessage';
 import { PlaidEvent, PlaidMessage } from './plaidMessages';
 import { PayeeManagementMessage, PayeeManagementEvent } from './payeeManagementMessage';
+import { MultiFactorAuthenticationMessage } from './multiFactorAuthenticationMessage';
 
 export type WebViewMessageType =
   | PageMessage
@@ -24,6 +25,7 @@ export type WebViewMessageType =
   | ActivityMessage
   | PlaidMessage
   | PayeeManagementMessage
+  | MultiFactorAuthenticationMessage
 
 type WebViewEvent =
   | PageEvent

package/src/messages/webMessages/multiFactorAuthenticationMessage.ts

@@ -0,0 +1,3 @@
+export enum MultiFactorAuthenticationMessage {
+  UNIT_MFA_VERIFICATION_TOKEN_CREATED = 'unitMultiFactorAuthVerificationTokenCreated'
+}

package/src/messages/webMessages/onLoadMessage.ts

@@ -4,6 +4,7 @@ import type {
   UNCardData,
   UNError,
   UNOnLoadResponseData,
+  UNPayeeCounterparty
 } from '../../types/shared';
 import type { UNAuthorizationData } from '../../types/shared/authorization.types';
 import type { UNTransactionData } from '../../types/shared/transactions.types';
@@ -19,7 +20,8 @@ export enum RESPONSE_KEYS {
   authorizations = 'authorizationsResult',
   repayment = 'repaymentResult',
   astraExternalCard = 'astraCardsResult',
-  accountCards = 'accountCardsResult'
+  accountCards = 'accountCardsResult',
+  counterpartiesResult = 'counterpartiesResult'
 }
 
 export type CardsOnLoadResponse = {
@@ -38,7 +40,7 @@ export type AccountsOnLoadResponse = {
 }
 
 export type ACHOnLoadResponse = {
-  [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData>,
+  [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData> | UNOnLoadResponseData<[UNAccountData]>,
   [RESPONSE_KEYS.counterpartyAccount]: UNOnLoadResponseData<[UNCounterpartyAccountData]>
 }
 
@@ -54,6 +56,10 @@ export type FundAccountPaymentOnLoadResponse = {
   [RESPONSE_KEYS.accountCards]?: UNOnLoadResponseData<[UNCardData]>
 }
 
+export type PayeeManagementOnLoadResponse = {
+  [RESPONSE_KEYS.counterpartiesResult]: UNOnLoadResponseData<[UNPayeeCounterparty]>
+}
+
 export type UnitOnLoadResponseSuccessData =
   | CardOnLoadResponse
   | CardsOnLoadResponse
@@ -62,6 +68,7 @@ export type UnitOnLoadResponseSuccessData =
   | AccountOnLoadResponse
   | ActivityOnLoadResponse
   | FundAccountPaymentOnLoadResponse
+  | PayeeManagementOnLoadResponse
 
 export type UnitOnLoadResponseEvent =
   | UNError