react-native-unit-components 1.13.0 → 1.14.0

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,4 @@ export * from './UNProgramDetailsComponent';
 export * from './UNNextRepaymentComponent';
 export * from './UNWhiteLabelAppComponent';
 export * from './UNPayeeManagementComponent';
+export * from './UNWirePaymentComponent';

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/onLoadMessage.ts

@@ -38,7 +38,7 @@ export type AccountsOnLoadResponse = {
 }
 
 export type ACHOnLoadResponse = {
-  [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData>,
+  [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData> | UNOnLoadResponseData<[UNAccountData]>,
   [RESPONSE_KEYS.counterpartyAccount]: UNOnLoadResponseData<[UNCounterpartyAccountData]>
 }
 

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
 import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
 import { PageMessage } from '../../../messages/webMessages/pageMessage';
+import { UNBaseView } from '../../UNBaseView';
 
 export interface UNAddToWalletComponentProps {
   customerToken: string;
@@ -64,25 +65,25 @@ const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
       return <ActivityIndicator style={styles.loader} />;
     }
     return (
-      <>
+      <UNBaseView style={{flex: 1}}>
         {
           shouldRenderAddToWalletWebView() &&
-          <WebComponent
-            ref={webRef}
-            type={WebComponentType.cardAction}
-            presentationMode={PresentationMode.CoverInjectedHeight}
-            params={getAddToWalletParams(props)}
-            isScrollable={false}
-            onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-            windowParams={getAddToWalletWindowParams(currentUNWallet)}
-          />
+            <WebComponent
+              ref={webRef}
+              type={WebComponentType.cardAction}
+              presentationMode={PresentationMode.CoverInjectedHeight}
+              params={getAddToWalletParams(props)}
+              isScrollable={false}
+              onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+              windowParams={getAddToWalletWindowParams(currentUNWallet)}
+            />
         }
 
         {
           currentUNWallet?.status === UNCardAddToWalletStatus.readyToProvisioning &&
           <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />
         }
-      </>
+      </UNBaseView>
     );
   };
   return (

package/src/nativeComponents/UNBaseView/UNBaseView.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import {
+  Platform,
+  StyleProp,
+  View,
+  ViewStyle,
+  requireNativeComponent,
+} from 'react-native';
+import { UNError } from '../../types/shared';
+import { useIsJailbrokeDevice } from '../../hooks/useIsJailbrokeDevice';
+import { useSnapshotProtection } from '../../hooks/useSnapshotProtection';
+
+type UnitAndroidSecureViewProps = {
+  style?: StyleProp<ViewStyle>;
+  filterTouchesWhenObscured: boolean;
+  children: React.ReactNode;
+};
+
+type UnitSecureViewProps = {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+  onLoadError?: (error: UNError) => void;
+};
+
+const UnitAndroidSecureView = requireNativeComponent<UnitAndroidSecureViewProps>('UNSecureView');
+
+const UNBaseView = (props: UnitSecureViewProps) => {
+  useSnapshotProtection();
+
+  const isJailbroke = useIsJailbrokeDevice();
+  useEffect(() => {
+    if (isJailbroke) {
+      props.onLoadError && props.onLoadError({errors: [{title: 'Device is Jailbroke'}]});
+    }
+  }, [props, isJailbroke]);
+
+  if (isJailbroke) {
+    return null;
+  }
+
+  if (Platform.OS == 'android') {
+    return <UnitAndroidSecureView filterTouchesWhenObscured={true} {...props}/>;
+  } else {
+    return (
+      <View {...props} />
+    );
+  }
+};
+
+export default UNBaseView;

package/src/nativeComponents/UNBaseView/index.ts

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

package/src/nativeModulesHelpers/UNSanpshotProtectionHelper/UNSnapshotProtectionHelper.ts

@@ -0,0 +1,21 @@
+import { NativeModules } from 'react-native';
+
+const { UNSnapshotProtectionManager } = NativeModules;
+
+class UNSnapshotProtectionHelper {
+  static setAndroidSecurity() {
+    /**
+     * Set secure flag on the activity's window (if it doesn't exist)
+     */
+    UNSnapshotProtectionManager.setSecureFlags();
+  }
+
+  static setIosSecurity(shouldProtectFromSnapshot: boolean, style: string) {
+    /**
+     * Activate a Global native service for managing the snapshotProtection by the given arguments.
+     */
+    UNSnapshotProtectionManager.configureSnapshotProtectionStrategy(shouldProtectFromSnapshot, style);
+  }
+}
+
+export default UNSnapshotProtectionHelper;

package/src/nativeModulesHelpers/UNSecurityHelper.ts

@@ -0,0 +1,35 @@
+import { NativeModules } from 'react-native';
+
+const { UNSecurityHelper } = NativeModules;
+
+enum UNJailbrokeState {
+  Unknown,
+  Jailbroke,
+  NotJailbroke
+}
+
+class UNSecurityManagerHelper {
+  static deviceJailbrokeState: UNJailbrokeState = UNJailbrokeState.Unknown;
+
+  static async isDeviceJailbroke(): Promise<boolean> {
+    if (this.deviceJailbrokeState !== UNJailbrokeState.Unknown) {
+      return this.isCurrentStatusIsJailbroke();
+    }
+    const result: boolean = await UNSecurityHelper.isDeviceJailbroke();
+    UNSecurityManagerHelper.deviceJailbrokeState = result ? UNJailbrokeState.Jailbroke : UNJailbrokeState.NotJailbroke;
+    return result;
+  }
+
+  private static isCurrentStatusIsJailbroke = (): boolean => {
+    switch (this.deviceJailbrokeState) {
+      case UNJailbrokeState.Unknown:
+        return false;
+      case UNJailbrokeState.Jailbroke:
+        return true;
+      case UNJailbrokeState.NotJailbroke:
+        return false;
+    }
+  };
+}
+
+export default UNSecurityManagerHelper;

package/src/networking/common/UNNetworkConstants.ts

@@ -7,5 +7,6 @@ export const APIHeaders = {
 
 export const UNIT_SECURE_URL = {
   [UNEnvironment.sandbox]: 'https://secure.api.s.unit.sh',
-  [UNEnvironment.production]: 'https://secure.api.unit.co'
+  [UNEnvironment.production]: 'https://secure.api.unit.co',
+  [UNEnvironment.mock]: ''
 };

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

@@ -13,6 +13,7 @@ export enum WebComponentType {
   programDetails = 'unit-elements-program-details',
   nextRepayment = 'unit-elements-next-repayment',
   payeeManagement = 'unit-elements-payee-management',
+  wirePayment = 'unit-elements-wire-payment',
   whiteLabelApp = 'unit-elements-white-label-app',
 }
 

package/src/types/shared/achCredit.types.ts

@@ -4,7 +4,7 @@ import type { UNPaymentType, UNAchCounterparty, UNCounterpartyVerificationMethod
 import type { UNTags, UNRelationship } from './types';
 
 export type UNACHOnLoadData = {
-  [RESPONSE_KEYS.account]: UNAccountData,
+  [RESPONSE_KEYS.account]: [UNAccountData],
   [RESPONSE_KEYS.counterpartyAccount]: [UNCounterpartyAccountData]
 }
 

package/src/types/shared/env.types.ts

@@ -1,4 +1,5 @@
 export enum UNEnvironment {
   sandbox = 'sandbox',
-  production = 'production'
+  production = 'production',
+  mock = 'mock'
 }

package/src/types/shared/index.ts

@@ -13,3 +13,4 @@ export * from './multipleCards.types';
 export * from './fundAccountPayment.types';
 export * from './payeeManagement.types';
 export * from './env.types';
+export * from './securitySettings';

package/src/types/shared/payments.types.ts

@@ -2,6 +2,7 @@ export enum UNPaymentType {
 	AchPayment = 'achPayment',
 	BookPayment = 'bookPayment',
 	CardToCardPayment = 'cardToCardPayment',
+  WirePayment = 'wirePayment'
 }
 
 export type UNPaymentStatus = 'Sent' | 'Rejected' | 'Pending' | 'Clearing' | 'Canceled' | 'Returned' | 'PendingReview'

package/src/types/shared/securitySettings.ts

@@ -0,0 +1,8 @@
+export enum UNSnapshotProtectionStrategy {
+  FullProtection = 'fullProtection',
+  None = 'none'
+}
+
+export interface UNSecuritySettings {
+  snapshotProtectionStrategy: UNSnapshotProtectionStrategy
+}

package/src/types/shared/wirePayment.types.ts

@@ -0,0 +1,43 @@
+import { UNPaymentStatus, UNPaymentType } from './payments.types';
+import { UNRelationship, UNTags } from './types';
+
+export interface WirePaymentCreatedEvent {
+  data: UNWirePaymentData
+}
+
+export type UNWirePaymentData = {
+  type: UNPaymentType.WirePayment
+  id: string
+  attributes: {
+    createdAt: string | Date
+    amount: number
+    direction: 'Debit' | 'Credit'
+    description: string
+    status: UNPaymentStatus
+    reason?: string
+    tags?: UNTags
+    counterparty: UNWireCounterparty
+  }
+  relationships: {
+    account: UNRelationship
+    customer?: UNRelationship
+    customers?: UNRelationship
+    transaction?: UNRelationship
+    counterpartyAccount?: UNRelationship
+    org?: UNRelationship
+  }
+}
+
+type UNWireCounterparty = {
+  name: string
+  routingNumber: string
+  accountNumber: string
+  address: {
+    street: string
+    street2?: string
+    city: string
+    state?: string
+    postalCode: string
+    country?: string
+  }
+}

package/src/unitSdkManager/UnitSdk.constants.ts

@@ -1,4 +1,5 @@
 import { UNVersioningStrategyType, UNWebVersioningStrategy } from '../types/shared';
+import { UNSecuritySettings, UNSnapshotProtectionStrategy } from '../types/shared/securitySettings';
 
 const WEB_SDK_RECOMMENDED_STRATEGY: UNWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
@@ -6,6 +7,11 @@ const WEB_SDK_RECOMMENDED_STRATEGY: UNWebVersioningStrategy = {
   minor: 8,
 };
 
+const DEFAULT_SECURITY_SETTINGS: UNSecuritySettings = {
+  snapshotProtectionStrategy: UNSnapshotProtectionStrategy.FullProtection
+};
+
 export const UNSDKConstants = {
   webSDKRecommendedStrategy: WEB_SDK_RECOMMENDED_STRATEGY,
+  securitySettings: DEFAULT_SECURITY_SETTINGS
 };

package/src/unitSdkManager/UnitSdkManager.ts

@@ -11,34 +11,58 @@ import { UNEnvironment } from '../types/shared/env.types';
 import { UserDataKeys } from '../types/internal/unitStore.types';
 import UNStoreManagerHelper from '../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
 import { UnitHelpersManager } from './unitHelpersManager/UnitHelpersManager';
+import UNSecurityManagerHelper from '../nativeModulesHelpers/UNSecurityHelper';
+import { UNSecuritySettings, UNSnapshotProtectionStrategy } from '../types/shared/securitySettings';
+import UNSnapshotProtectionHelper from '../nativeModulesHelpers/UNSanpshotProtectionHelper/UNSnapshotProtectionHelper';
 
 export class UnitSDK {
   public static ui: UnitUiManager;
   public static helpers: UnitHelpersManager;
+
   protected static env?: UNEnvironment;
   protected static webVersioningStrategy: UNWebVersioningStrategy;
+  protected static securitySettings: UNSecuritySettings = UNSDKConstants.securitySettings;
   protected static customerToken?: string;
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '1.13.0';
+  protected static sdkVersion = '1.14.0';
 
-  public static init = async (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts, webVersioningStrategy: UNWebVersioningStrategy = UNSDKConstants.webSDKRecommendedStrategy) => {
+  public static init = async (
+    env: UNEnvironment,
+    theme?: string,
+    language?: string,
+    fonts?: UNFonts,
+    webVersioningStrategy: UNWebVersioningStrategy = UNSDKConstants.webSDKRecommendedStrategy,
+    securitySettings: UNSecuritySettings = UNSDKConstants.securitySettings
+  ) => {
     try {
-      this.env = env;
       this.webVersioningStrategy = webVersioningStrategy;
+      this.ui = new UnitUiManager();
+      this.helpers = new UnitHelpersManager();
+
+      const isJailbroke = await UNSecurityManagerHelper.isDeviceJailbroke();
+      if (isJailbroke) {
+        throw Error('Device is jailbroke');
+      }
+      this.env = env;
+      this.securitySettings = securitySettings;
       this.fonts = fonts;
       store.dispatch(setTheme(theme));
       store.dispatch(setLanguage(language));
-      this.ui = new UnitUiManager();
-      this.helpers = new UnitHelpersManager();
       warnClientIfNeeded(this.webVersioningStrategy);
+      const shouldProtectFromSnapshot = securitySettings.snapshotProtectionStrategy != UNSnapshotProtectionStrategy.None;
+      UNSnapshotProtectionHelper.setIosSecurity(shouldProtectFromSnapshot, 'light');
       await fetchUnitScript();
     } catch (e) {
       console.log(e);
     }
   };
 
+  public static isInitialized = () => {
+    return this.env != undefined;
+  };
+
   public static setPushProvisioningModule = (pushProvisionModule: typeof NativeModules) => {
     this.pushProvisionModule = pushProvisionModule;
   };
@@ -47,6 +71,10 @@ export class UnitSDK {
     return this.pushProvisionModule;
   };
 
+  public static getSecuritySettings = () => {
+    return this.securitySettings;
+  };
+
   /**
    * @deprecated - Unit SDK is managing the signedNonce, no need to provide it
    */

package/src/unitSdkManager/UnitSdkManager.utils.internal.ts

@@ -11,5 +11,8 @@ export const getUnitScriptUrl = (env: UNEnvironment, webVersioningStrategy: UNWe
 
     case UNEnvironment.production:
       return `https://ui.unit.co/release/${webSdkVersionString}/components.js`;
+
+    case UNEnvironment.mock:
+      return 'https://unit-white-label-ui.netlify.app/assets/components-mock.js';
   }
 };

package/src/utils/onLoadMessages.utils.ts

@@ -0,0 +1,3 @@
+export function ensureArray<T>(item: T | [T]): [T] {
+  return Array.isArray(item) ? item : [item];
+}