react-native-unit-components 1.10.0 → 1.12.0

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.tsx

@@ -0,0 +1,80 @@
+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';
+import type { WebViewMessage } from '../../messages/webMessages';
+import {
+  getNextRepaymentParams,
+} from './UNNextRepaymentComponent.utils';
+import type { 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';
+import { UNRepaymentData } from '../../types/shared/repayment.types';
+
+export interface UNNextRepaymentComponentProps {
+  // inputs
+  customerToken: string;
+  accountId: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+  hideTitle?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<[UNRepaymentData]>) => void;
+}
+
+const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
+
+  const [height, setHeight] = useState(0);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.repayment in response) {
+      props.onLoad(response[RESPONSE_KEYS.repayment] as UNOnLoadResponseData<[UNRepaymentData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+
+  return (
+    <View style={{ height, width: '100%' }}>
+      <WebComponent
+        type={WebComponentType.nextRepayment}
+        presentationMode={PresentationMode.Default}
+        params={getNextRepaymentParams(props)}
+        theme={props.theme}
+        language={props.language}
+        onMessage={message => handleMessage(message)}
+        isScrollable={false}
+      />
+    </View>
+  );
+};
+
+export default withReduxStore<UNNextRepaymentComponentProps>(UNNextRepaymentComponent);

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

@@ -0,0 +1,10 @@
+import { UNNextRepaymentComponentProps } from './UNNextRepaymentComponent';
+
+export const getNextRepaymentParams = (props: UNNextRepaymentComponentProps) => {
+
+  return `
+    customer-token="${props.customerToken}"
+    account-id="${props.accountId}"
+    hide-actions-menu-button="${props.hideTitle || false}"
+  `;
+};

package/src/components/UNNextRepaymentComponent/index.ts

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

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -0,0 +1,153 @@
+import React, { useRef } from 'react';
+import type WebView from 'react-native-webview';
+import {
+  RequestRefreshEvent,
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
+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 { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
+import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
+import { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+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';
+
+export interface UNPayeeManagementComponentProps {
+  // inputs
+  customerToken: string;
+  menuItems?: UNPayeeManagementMenuItem[];
+  queryFilter?: string;
+  paginationType?: UNPayeeManagementComponentPaginationType;
+  counterPartiesPerPage?: number;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  hideTitle?: boolean;
+  hideCounterpartyActionsButton?: boolean;
+
+  menuPlaceholder?: string;
+  flowPlaceholder?: string;
+  payeeCreationPlaceholder?: string;
+  microDepositConnectionPlaceholder?: string;
+
+  plaidAccountFilters?: UNPlaidAccountFilter[];
+  plaidLinkCustomizationName?: string;
+
+  // events
+  onCounterpartyCreated?: (counterparty: UNPayeeCounterparty) => void;
+  onCounterpartyDeleted?: (counterparty: UNPayeeCounterparty) => void;
+
+  onConnectedAccountCreated?: (connectedAccount: UNPayeeConnectedAccount) => void;
+  onMicroDepositConnectionCreated?: (onnectedAccount: UNPayeeCounterparty) => void;
+  onMicroDepositConnectionRejected?: (connectedAccount: UNPayeeConnectedAccount) => void;
+}
+
+const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
+  const dispatch = useDispatch();
+  const webRef = useRef<WebView>(null);
+
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    injectRefreshEventIfNeeded(webRef.current, data);
+  };
+
+  const openPlaid = (openPlaidData: OpenPlaidEvent) => {
+    injectUnitOpenPlaid(webRef.current, openPlaidData);
+
+    const linkToken = openPlaidData.plaidLinkToken.attributes.linkToken;
+
+    linkToken && openLink({
+      tokenConfig: { noLoadingState: false, token: linkToken },
+      onSuccess: (success: LinkSuccess) => {
+        injectUnitPlaidResponse(webRef.current, success);
+      },
+      onExit: exit => {
+        injectUnitPlaidExit(webRef.current, exit.error);
+      },
+    }).catch(e => {
+      console.error(e);
+    });
+  };
+
+  const reportCounterpartyDeleted = (counterparty: UNPayeeCounterparty) => {
+    props.onCounterpartyDeleted && props.onCounterpartyDeleted(counterparty);
+  };
+
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: PlaidMessage.UNIT_OPEN_PLAID, action: openPlaid });
+  useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: reportCounterpartyDeleted });
+
+  const handleRequestRendering = (requestRenderingEvent : RequestRenderingEvent) => {
+    switch (requestRenderingEvent.data.nativeComponentName) {
+      default: {
+        const slotData: BottomSheetSlotData = {
+          componentName: requestRenderingEvent.data.nativeComponentName,
+          requestRenderingEvent: requestRenderingEvent,
+        };
+        const data = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData,
+        } as SlotRendering;
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+      }
+    }
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const requestRenderingEvent = message.details as RequestRenderingEvent;
+        handleRequestRendering(requestRenderingEvent);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD: {
+        break;
+      }
+      case PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED: {
+        const account: UNPayeeConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
+        props.onConnectedAccountCreated && props.onConnectedAccountCreated(account);
+        break;
+      }
+      case PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED: {
+        const counterparty: UNPayeeCounterparty = (message.details as PayeeCounterpartyEvent).counterparty;
+        props.onCounterpartyCreated &&  props.onCounterpartyCreated(counterparty);
+        break;
+      }
+      case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED: {
+        const counterparty: UNPayeeCounterparty = (message.details as PayeeMicroDepositeConnectionEvent).account;
+        props.onMicroDepositConnectionCreated && props.onMicroDepositConnectionCreated(counterparty);
+        break;
+      }
+      case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED: {
+        const account: UNPayeeConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
+        props.onMicroDepositConnectionRejected && props.onMicroDepositConnectionRejected(account);
+        break;
+      }
+    }
+  };
+
+  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)}
+    />
+  );
+};
+
+export default withReduxStore<UNPayeeManagementComponentProps>(UNPayeeManagementComponent);

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.utils.ts

@@ -0,0 +1,87 @@
+import { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import type WebView from 'react-native-webview';
+import type { UNAccountMenuAction } from '../../types/shared';
+import { WebComponentType } from '../../types/internal/webComponent.types';
+import { UNPayeeManagementComponentProps } from './UNPayeeManagementComponent';
+import { DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
+import { LinkError, LinkSuccess } from 'react-native-plaid-link-sdk';
+import { OpenPlaidEvent } from '../../messages/webMessages/plaidMessages';
+
+export const getPayeeParams = (props: UNPayeeManagementComponentProps) => {
+  const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
+  const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+  const paginationTypeParam = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+
+  const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
+  const plaidLinkCustomizationNameParam = props.plaidLinkCustomizationName ? `plaid-link-customization-name="${props.plaidLinkCustomizationName}"` : '';
+
+  const counterPartiesPerPageParam = props.counterPartiesPerPage ? `counterparties-per-page="${props.counterPartiesPerPage}"` : '';
+
+  const menuPlaceholderParam = props.menuPlaceholder ? `menu-placeholder="${props.menuPlaceholder}"` : '';
+  const flowPlaceholderParam = props.flowPlaceholder ? `flow-placeholder="${props.flowPlaceholder}"` : '';
+  const payeeCreationPlaceholderParam = props.payeeCreationPlaceholder ? `payee-creation-placeholder="${props.payeeCreationPlaceholder}"` : '';
+  const microDepositConnectionPlaceholderParam = props.microDepositConnectionPlaceholder ? `micro-deposit-connection-placeholder="${props.microDepositConnectionPlaceholder}"` : '';
+  return `
+    customer-token="${props.customerToken}"
+    ${menuItemsParam}
+    ${queryFilterParam}
+    ${paginationTypeParam}
+    ${counterPartiesPerPageParam}
+    hide-title="${props.hideTitle || false}"
+    hide-counterparty-actions-button="${props.hideCounterpartyActionsButton || false}"
+    ${menuPlaceholderParam}
+    ${flowPlaceholderParam}
+    ${payeeCreationPlaceholderParam}
+    ${microDepositConnectionPlaceholderParam}
+    ${plaidAccountFiltersParam}
+    ${plaidLinkCustomizationNameParam}
+    style="height: 100%"
+  `;
+};
+
+export const getPayeeManagementScript = () => {
+  return `
+    ${LISTENERS.unitCounterpartyCreated}
+    ${LISTENERS.unitConnectedAccountCreated}
+    ${LISTENERS.unitMicroDepositConnectionCreated}
+    ${LISTENERS.unitMicroDepositConnectionRejected}
+    ${LISTENERS.requestRefresh}
+    ${DISPATCH_PLAID_RESPONSE}
+    ${DISPATCH_PLAID_EXIT}
+    ${DISPATCH_OPEN_PLAID}
+    ${DISPATCH_REQUEST_REFRESH}
+  `;
+};
+
+export const injectOpenActionsMenuScript = (currentWeb: WebView | null) => {
+  currentWeb?.injectJavaScript(`dispatchOpenActionsMenu('${WebComponentType.account}')`);
+};
+
+export const injectRequestAccountActionScript = (currentWeb: WebView | null, action: UNAccountMenuAction) => {
+  currentWeb?.injectJavaScript(`dispatchRequestAccountAction('${action}')`);
+};
+
+export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.payeeManagement.valueOf())) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};
+
+export const injectUnitOpenPlaid = (currentWeb: WebView | null, openPlaidData: OpenPlaidEvent) => {
+  currentWeb?.injectJavaScript(`dispatchOpenPlaidEvent(${JSON.stringify({ data: openPlaidData })})`);
+};
+
+export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
+  const successObj = { data: { publicToken: success.publicToken, metadata: JSON.parse(success.metadata.metadataJson ?? '{}') } };
+  currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
+};
+
+export const injectUnitPlaidExit = (currentWeb: WebView | null, plaidLinkError: LinkError | null | undefined) => {
+  // Android & iOS are not consist - we will extract the needed fields from the LinkError/errorJson
+  const errorJson = JSON.parse(plaidLinkError?.errorJson ?? '{}');
+  const type = plaidLinkError?.errorType ?? errorJson['error_type'] ?? '';
+  const code = plaidLinkError?.errorCode ?? errorJson['error_code'] ?? '';
+  const message = plaidLinkError?.errorMessage ?? errorJson['error_message'] ?? '';
+  const error = { error_type: type, error_code: code, error_message: message };
+  currentWeb?.injectJavaScript(`dispatchPlaidExit(${JSON.stringify(error)})`);
+};

package/src/components/UNPayeeManagementComponent/index.ts

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

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.tsx

@@ -0,0 +1,77 @@
+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';
+import { WebViewMessage } from '../../messages/webMessages';
+import { getProgramDetailsParams } from './UNProgramDetailsComponent.utils';
+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';
+
+export interface UNProgramDetailsComponentProps {
+  // inputs
+  customerToken: string;
+  accountId: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+  hideTitle?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
+}
+
+const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
+  const [height, setHeight] = useState(0);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    console.log('handleUnitOnLoad', response);
+
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response) {
+      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+
+  return (
+    <View style={{ height, width: '100%' }}>
+      <WebComponent
+        type={WebComponentType.programDetails}
+        presentationMode={PresentationMode.Default}
+        params={getProgramDetailsParams(props)}
+        theme={props.theme}
+        language={props.language}
+        onMessage={handleMessage}
+      />
+    </View>
+  );
+};
+
+export default withReduxStore<UNProgramDetailsComponentProps>(UNProgramDetailsComponent);

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.utils.ts

@@ -0,0 +1,9 @@
+import { UNProgramDetailsComponentProps } from './UNProgramDetailsComponent';
+
+export const getProgramDetailsParams = (props: UNProgramDetailsComponentProps) => {
+  return `
+    customer-token="${props.customerToken}"
+    account-id="${props.accountId}"
+    hide-title="${props.hideTitle || false}"
+    `;
+};

package/src/components/UNProgramDetailsComponent/index.ts

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

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -0,0 +1,124 @@
+import React, { useRef } from 'react';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage, UnitWhiteLabelAppEvent } from '../../messages/webMessages/unitMessages';
+import type { WebViewMessage } from '../../messages/webMessages';
+import {
+  BottomSheetRenderingType,
+  SlotRendering,
+} from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { useDispatch } from 'react-redux';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import WebView from 'react-native-webview';
+import {
+  getWhiteLabelAppParams,
+  getWhiteLabelAppScript,
+  injectRefreshEventIfNeeded,
+} from './UNWhiteLabelAppComponent.utils';
+import { UserDataKeys } from '../../types/internal/unitStore.types';
+import { PageMessage } from '../../messages/webMessages/pageMessage';
+import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
+import { ActivityMessage } from '../../messages/webMessages/activityMessage';
+import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
+
+export interface UNWhiteLabelAppComponentProps {
+  // inputs
+  customerToken?: string;
+  jwtToken?: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+}
+
+const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
+  const webRef = useRef<WebView>(null);
+
+  const dispatch = useDispatch();
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+
+        const slotData: BottomSheetSlotData = {
+          componentName: WebComponentType.whiteLabelApp,
+          requestRenderingEvent: message.details as RequestRenderingEvent,
+        };
+
+        const data = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData,
+        } as SlotRendering;
+
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        break;
+      }
+      case UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD: {
+        const data = message.details as UnitWhiteLabelAppEvent;
+        if (data.attributes.customerToken) {
+          UNStoreManagerHelper.saveValue(UserDataKeys.unitCustomerToken, data.attributes.customerToken);
+          // Upon receiving a new token, the web interface updates the window. Therefore, we (only) store it for subsequent windows.
+          // updateWindowUnitStore();
+        }
+        break;
+      }
+
+      case PageMessage.PAGE_LOADED:
+        updateWindowUnitStore();
+    }
+  };
+
+  const updateWindowUnitStore = async () => {
+    /**
+     * The 2FA-token (verifiedToken) is managed for all the components in UNWebComponent.
+     */
+    try {
+      const token = await UNStoreManagerHelper.getValue(UserDataKeys.unitCustomerToken);
+      if (token) {
+        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token + ' s');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    injectRefreshEventIfNeeded(webRef.current, data);
+  };
+
+  const dispatchActivityFiltersChanged = (query: string) => {
+    webRef.current?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
+  };
+
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({
+    busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+    action: dispatchActivityFiltersChanged,
+  });
+
+  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()}
+      />
+    );
+  };
+
+  return (
+    renderWebView()
+  );
+};
+
+export default withReduxStore<UNWhiteLabelAppComponentProps>(UNWhiteLabelAppComponent);

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.utils.ts

@@ -0,0 +1,35 @@
+import WebView from 'react-native-webview';
+import { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import { UNWhiteLabelAppComponentProps } from './UNWhiteLabelAppComponent';
+import { DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
+
+export const getWhiteLabelAppParams = (props: UNWhiteLabelAppComponentProps) => {
+  // customer token is the preferred way to authenticate
+  if (props.customerToken) {
+    return `
+      customer-token="${props.customerToken}"
+    `;
+  }
+
+  if (props.jwtToken) {
+    return `
+      jwt-token="${props.jwtToken}"
+    `;
+  }
+
+  return '';
+};
+
+export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {
+  if (requestRefreshEvent) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};
+
+export const getWhiteLabelAppScript = () => {
+  return `
+    ${DISPATCH_REQUEST_REFRESH}
+
+    ${LISTENERS.unitWhiteLabelAppOnLoad}
+  `;
+};

package/src/components/UNWhiteLabelAppComponent/index.ts

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

package/src/components/index.ts

@@ -7,3 +7,7 @@ export * from './UNAccountComponent';
 export * from './UNCheckDepositComponent';
 export * from './UNACHDebitComponent';
 export * from './UNACHCreditComponent';
+export * from './UNProgramDetailsComponent';
+export * from './UNNextRepaymentComponent';
+export * from './UNWhiteLabelAppComponent';
+export * from './UNPayeeManagementComponent';

package/src/flows/UNFlows.ts

@@ -8,6 +8,6 @@ export class UNFlows {
 
   public async startPushProvisioning(cardId: string, customerToken: string) {
     UnitSDK.setCustomerToken(customerToken);
-    UNCardFlows.startPushProvisioning(cardId, customerToken);
+    await UNCardFlows.startPushProvisioning(cardId, customerToken);
   }
 }

package/src/flows/card/UNCardFlows.ts

@@ -1,29 +1,28 @@
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import {
-  BottomSheetRenderingType,
-  type WebComponentData,
-  type WebComponentRendering,
+  BottomSheetNativeComponentType, BottomSheetNativePlaceType,
+  BottomSheetRenderingType, NativeComponentRendering,
 } from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
+import { store } from '../../store/store';
+import {
+  UNAddToWalletComponentProps,
+} from '../../nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent';
 
 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,
-        presentationMode: PresentationMode.CoverInjectedHeight,
-        params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
-      };
-
-      const data: WebComponentRendering = {
-        type: BottomSheetRenderingType.WebComponent,
-        data: addToWalletComponentData,
+      const data: NativeComponentRendering = {
+        type: BottomSheetRenderingType.NativeComponent,
+        data: {
+          nativePlace: BottomSheetNativePlaceType.overFullScreen,
+          component: {
+            type: BottomSheetNativeComponentType.AddToWalletComponent,
+            props: { cardId: cardId, customerToken: customerToken } as UNAddToWalletComponentProps,
+          },
+        },
       };
-
-      dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
+      store.dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
     } catch (error) {
       console.error(error);
     }