react-native-unit-components 1.8.1 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -47,8 +47,8 @@
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.68.0",
+    "@types/react": "~18.0.0",
+    "@types/react-native": "0.72.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "commitlint": "^17.0.2",
@@ -67,7 +67,7 @@
     "typescript": "^4.5.2"
   },
   "resolutions": {
-    "@types/react": "17.0.21"
+    "@types/react": "18.0.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -76,9 +76,11 @@
     "react-native-webview": "*"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.3.3",
     "react-native-plaid-link-sdk": "^9.0.1",
-    "react-native-webview": "11.23.1"
+    "react-native-webview": "11.23.1",
+    "react-redux": "^8.1.2"
   },
   "jest": {
     "preset": "react-native",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -13,6 +13,7 @@ import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import { getAndroidPackageName } from '../utils/nativeModulesInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 export interface UNACHCreditComponentProps {
   accountId: string;
@@ -24,9 +25,10 @@ export interface UNACHCreditComponentProps {
   withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  sameDay?: boolean;
 }
 
-export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
+const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
   const [linkToken, setLinkToken] = useState<string>();
@@ -139,3 +141,5 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     </View>
   );
 };
+
+export default withReduxStore<UNACHCreditComponentProps>(UNACHCreditComponent);

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -11,6 +11,7 @@ export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
+    same-day="${props.sameDay ?? false}"
   `;
 };
 

package/src/components/UNACHCreditComponent/index.ts

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

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -14,6 +14,7 @@ import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { getAndroidPackageName } from '../utils/nativeModulesInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 export interface UNACHDebitComponentProps {
   accountId: string;
@@ -24,9 +25,10 @@ export interface UNACHDebitComponentProps {
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  sameDay?: boolean;
 }
 
-export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
+const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [appPackageName, setAppPackageName] = useState<string>('');
   const [linkToken, setLinkToken] = useState<string>('');
@@ -140,3 +142,5 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
 
   );
 };
+
+export default withReduxStore<UNACHDebitComponentProps>(UNACHDebitComponent);

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -11,6 +11,7 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
+    same-day="${props.sameDay ?? false}"
   `;
 };
 

package/src/components/UNACHDebitComponent/index.ts

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

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -16,6 +16,7 @@ import type { UNAccountMenuAction } from '../../types/shared';
 import { BottomSheetRenderingType, SlotRendering, type BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 
 export interface UNAccountComponentProps {
   // inputs
@@ -38,12 +39,12 @@ export interface UNAccountRef {
   openAction: (action: UNAccountMenuAction) => void;
 }
 
-export enum AccountAction {
+export enum UNAccountAction {
   List = 'account-list',
   Menu = 'account-menu'
 }
 
-export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
+const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
   const [height, setHeight] = useState(0);
 
   const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
@@ -136,3 +137,5 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
     </View>
   );
 });
+
+export default withReduxStoreAndRefForwarding<UNAccountComponentProps, UNAccountRef>(UNAccountComponent);

package/src/components/UNAccountComponent/UNAccountComponent.utils.ts

@@ -1,4 +1,4 @@
-import { AccountAction, UNAccountComponentProps } from './UNAccountComponent';
+import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from 'src/types/shared';
@@ -38,5 +38,5 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
 };
 
 export const getAccountActionType = (requestRendering: RequestRenderingEvent) => {
-  return requestRendering.data.nativeComponent.includes(AccountAction.List) ? AccountAction.List : AccountAction.Menu;
+  return requestRendering.data.nativeComponent.includes(UNAccountAction.List) ? UNAccountAction.List : UNAccountAction.Menu;
 };

package/src/components/UNAccountComponent/index.ts

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

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -15,6 +15,7 @@ import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { BottomSheetRenderingType, type BottomSheetSlotData, type SlotRendering } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
@@ -32,7 +33,7 @@ export interface UNActivityComponentProps {
   onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
-export const UNActivityComponent = (props: UNActivityComponentProps) => {
+const UNActivityComponent = (props: UNActivityComponentProps) => {
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -127,3 +128,5 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
     </View>
   );
 };
+
+export default withReduxStore<UNActivityComponentProps>(UNActivityComponent);

package/src/components/UNActivityComponent/index.ts

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

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -10,6 +10,7 @@ import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 export interface UNBookPaymentComponentProps {
   //inputs
@@ -29,7 +30,7 @@ export interface UNBookPaymentComponentProps {
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }
 
-export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
+const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -99,3 +100,5 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     </View>
   );
 };
+
+export default withReduxStore<UNBookPaymentComponentProps>(UNBookPaymentComponent);

package/src/components/UNBookPaymentComponent/index.ts

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

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -23,7 +23,7 @@ import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { UNAddToWalletBottomSheetItem } from './components/UNAddToWalletBottomSheetItem';
 import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.utils';
-import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
+import { UNAccountAction } from '../UNAccountComponent/UNAccountComponent';
 import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { ActivityFiltersChangedEvent, ActivityMessage } from '../../messages/webMessages/activityMessage';
@@ -31,6 +31,7 @@ import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.const
 import { BottomSheetRenderingType, BottomSheetSlotData, NativeComponentData, WebComponentData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage, type StartBottomSheetFlowMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 export enum ScrollState {
   /*
@@ -55,7 +56,7 @@ export enum ScrollState {
   onlyBottomSheet = 'onlyBottomSheet',
 }
 
-export const UNBottomSheetComponent = () => {
+const UNBottomSheetComponent = () => {
   const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
   const [height, setHeight] = useState(0);
 
@@ -142,7 +143,7 @@ export const UNBottomSheetComponent = () => {
     }
   }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
 
-  useListenerToBus({ busEventKey: BottomSheetNativeMessage.START_FLOW,  action: startFlow });
+  useListenerToBus({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const defineScrollState = () => {
@@ -152,7 +153,7 @@ export const UNBottomSheetComponent = () => {
         case WebComponentType.account: {
           const accountActionType = getAccountActionType(bottomSheetSlotData.requestRenderingEvent);
           setScrollState(
-            accountActionType === AccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
+            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
           );
           break;
         }
@@ -286,7 +287,7 @@ export const UNBottomSheetComponent = () => {
     switch (renderingType) {
       case BottomSheetRenderingType.Slot:
         if (bottomSheetSlotData?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && bottomSheetSlotData?.componentResourceId) {
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType} renderingRequest={bottomSheetSlotData.requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} fullScreenHeight={fullScreenHeight}/>;
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType} renderingRequest={bottomSheetSlotData.requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} fullScreenHeight={fullScreenHeight} />;
         }
 
         return (
@@ -304,7 +305,7 @@ export const UNBottomSheetComponent = () => {
         if (webComponentData?.params?.includes('action=AddToWallet')) {
           const cardId = extractCardIdFromComponentParams(webComponentData);
           if (!cardId) return null;
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData} cardId={cardId} fullScreenHeight={fullScreenHeight}/>;
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData} cardId={cardId} fullScreenHeight={fullScreenHeight} />;
         }
         return null;
       case BottomSheetRenderingType.NativeComponent:
@@ -313,22 +314,22 @@ export const UNBottomSheetComponent = () => {
   };
 
   return (
-    <>
-      <View
-        pointerEvents={isBottomSheetActive ? undefined : 'none'}
-        style={styles.container}
+    <View
+      pointerEvents={isBottomSheetActive ? undefined : 'none'}
+      style={styles.container}
+    >
+      <BottomSheet
+        isOpen={isBottomSheetActive}
+        height={height}
+        onClose={() => setIsBottomSheetActive(false)}
+        onOpen={() => setIsBottomSheetActive(true)}
+        handleWebViewScroll={() => handleWebViewScroll()}
+        shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
       >
-        <BottomSheet
-          isOpen={isBottomSheetActive}
-          height={height}
-          onClose={() => setIsBottomSheetActive(false)}
-          onOpen={() => setIsBottomSheetActive(true)}
-          handleWebViewScroll={() => handleWebViewScroll()}
-          shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
-        >
-          {isAppActive && renderBottomSheetItem()}
-        </BottomSheet >
-      </View >
-    </>
+        {isAppActive && renderBottomSheetItem()}
+      </BottomSheet >
+    </View >
   );
 };
+
+export default withReduxStore(UNBottomSheetComponent);

package/src/components/UNBottomSheetComponent/components/{UNAddToWalletBottomSheetItem.tsx → UNAddToWalletBottomSheetItem/UNAddToWalletBottomSheetItem.tsx}

@@ -1,18 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import type WebView from 'react-native-webview';
-import { WebComponent } from '../../../webComponent/WebComponent';
-import { injectHtmlFullScreenHeight, renderingBottomSheetRequest } from '../UNBottomSheetComponent.utils';
+import { WebComponent } from '../../../../webComponent/WebComponent';
+import { injectHtmlFullScreenHeight, renderingBottomSheetRequest } from '../../UNBottomSheetComponent.utils';
 import { getStylesObject } from './UNAddToWalletBottomSheetItem.styles';
 import { ActivityIndicator } from 'react-native';
-import { UnitMessage, type RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
-import UnitAddToWalletButtonView from '../../../nativeComponent/UnitAddToWalletButton';
-import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
-import { BottomSheetRenderingType, WebComponentData } from '../../../types/internal/bottomSheet.types';
-import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
-import { useCardWallet } from '../../../helpers/pushProvisioningService/hooks/useCardWallet';
-import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
-import type { WebViewMessage } from '../../../messages/webMessages';
-import EventBus from '../../../helpers/EventBus';
+import { UnitMessage, type RequestRenderingEvent } from '../../../../messages/webMessages/unitMessages';
+import UnitAddToWalletButtonView from '../../../../nativeComponent/UnitAddToWalletButton';
+import { UNCardAddToWalletStatus } from '../../../../types/shared/wallet.types';
+import { BottomSheetRenderingType, WebComponentData } from '../../../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../../../types/internal/webComponent.types';
+import { useCardWallet } from '../../../../helpers/pushProvisioningService/hooks/useCardWallet';
+import { launchStartCardProvisioning } from '../../../../helpers/pushProvisioningService/startProvisioning';
+import type { WebViewMessage } from '../../../../messages/webMessages';
+import EventBus from '../../../../helpers/EventBus';
 
 export interface UNAddToWalletBottomSheetItemProps {
   renderingType: BottomSheetRenderingType
@@ -48,7 +48,7 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
     launchStartCardProvisioning(currentUNWallet);
   };
 
-  const handleWebComponentMessage  = (message: WebViewMessage) => {
+  const handleWebComponentMessage = (message: WebViewMessage) => {
     if (!message || !message.type) return;
     switch (message.type) {
       case UnitMessage.UNIT_ON_LOAD:

package/src/components/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem/index.ts

@@ -0,0 +1 @@
+export * from './UNAddToWalletBottomSheetItem';

package/src/components/UNBottomSheetComponent/components/index.ts

@@ -0,0 +1 @@
+export * from './UNAddToWalletBottomSheetItem';

package/src/components/UNBottomSheetComponent/index.ts

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

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -7,15 +7,32 @@ 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 { useSelector } from 'react-redux';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
+
+
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
@@ -30,20 +47,25 @@ 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 [height, setHeight] = useState(0);
 
   const webRef = useRef<WebView>(null);
+  const { initializePushProvisioning } = useLaunchInitialize();
+  const { signedNonce } = useSelector(selectWallet);
 
   useImperativeHandle(cardRef, () => ({
     openActionsMenu() {
@@ -51,7 +73,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) => {
@@ -102,12 +130,12 @@ 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 = {
           type: BottomSheetRenderingType.Slot,
-          data: slotData
+          data: slotData,
         } as SlotRendering;
 
         EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
@@ -132,6 +160,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
@@ -145,6 +178,9 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </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/index.ts

@@ -1,8 +1,8 @@
-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 './UNBottomSheetComponent';
+export * from './UNBookPaymentComponent';
+export * from './UNActivityComponent';
+export * from './UNAccountComponent';
+export * from './UNCheckDepositComponent';
+export * from './UNACHDebitComponent';
+export * from './UNACHCreditComponent';

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

@@ -2,6 +2,9 @@ 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';
+import { useSelector } from 'react-redux';
+import { selectWallet } from '../../../slices/pushProvisioningSlice';
+import { useLaunchInitialize } from './useLaunchInitialize';
 
 export type CardToEncryptedPayload = {
   [cardId: string]: string;
@@ -9,6 +12,8 @@ export type CardToEncryptedPayload = {
 
 export const useCardWallet = (cardId: string) => {
   const [currentUNWallet, setCurrentUNWallet] = useState<UNWallet>();
+  const { signedNonce } = useSelector(selectWallet);
+  const { initializePushProvisioning } = useLaunchInitialize();
 
   useEffect(() => {
     const getEncryptedPayload = async () => {
@@ -16,7 +21,12 @@ export const useCardWallet = (cardId: string) => {
       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,6 +35,7 @@ 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);
@@ -37,8 +48,7 @@ export const useCardWallet = (cardId: string) => {
     };
 
     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
+  };
+
+};