react-native-unit-components 1.15.0 → 2.0.1

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -12,7 +12,7 @@ import {
   injectRequestCardActionScript,
   injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript,
 } from './UNCardComponent.utils';
-import { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
+import { UNComponentsOnLoadResponse, UNCard, UNComponentsError, UNCardMenuAction, UNCardMenuItem } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -22,7 +22,7 @@ import {
 } from '../../types/internal/bottomSheet.types';
 import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
 import { selectWallet } from '../../slices/pushProvisioningSlice';
@@ -30,14 +30,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { setEvent } from '../../slices/SharedEventsSlice';
-import { UNCardMenuItem } from '../../types/shared';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
-  customerToken: string;
   learnMoreUrl?: string;
+  fee?: number;
   menuItems?: UNCardMenuItem[];
 
   // ui
@@ -48,9 +47,9 @@ export interface UNCardComponentProps {
   hideSensitiveDataButton?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<UNCardData>) => void;
-  onStatusChanged?: (card: UNCardData) => void;
-  onCardActivated?: (card: UNCardData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNCard>) => void;
+  onStatusChanged?: (card: UNCard) => void;
+  onCardActivated?: (card: UNCard) => void;
   onAction?: (action: UNCardMenuAction) => void;
   onActionsMenuClicked?: () => void;
   pushProvisioningModule?: typeof NativeModules;
@@ -87,13 +86,13 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     },
   }));
 
-  const cardStatusChanged = (card: UNCardData) => {
+  const cardStatusChanged = (card: UNCard) => {
     if (props.onStatusChanged) {
       props.onStatusChanged(card);
     }
   };
 
-  const cardActivated = (card: UNCardData) => {
+  const cardActivated = (card: UNCard) => {
     if (props.onCardActivated) {
       props.onCardActivated(card);
     }
@@ -109,13 +108,13 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.card in response) {
       // CardOnLoadResponse
-      props.onLoad(response[RESPONSE_KEYS.card] as UNOnLoadResponse<UNCardData>);
+      props.onLoad(response[RESPONSE_KEYS.card] as UNComponentsOnLoadResponse<UNCard>);
       return;
     }
 
@@ -123,7 +122,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     return;
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
   useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
@@ -131,7 +130,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     if (!message || !message.details) return;
 
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.card,
           componentResourceId: props.cardId,
@@ -151,7 +150,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
     }
@@ -177,23 +176,19 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     }
   };
 
-  useEffect(() => {
-    UnitSDK.setCustomerToken(props.customerToken);
-  }, [props.customerToken]);
-
   useEffect(() => {
     if (props.pushProvisioningModule) {
-      UnitSDK.setPushProvisioningModule(props.pushProvisioningModule);
+      UnitComponentsSDK.setPushProvisioningModule(props.pushProvisioningModule);
     }
   }, [props.pushProvisioningModule]);
 
   useEffect(() => {
-    if (signedNonce || !UnitSDK.getPushProvisionModule()) return;
+    if (signedNonce || !UnitComponentsSDK.getPushProvisionModule()) return;
     initializePushProvisioning();
   }, []);
 
   return (
-    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}

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

@@ -1,21 +1,22 @@
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
-import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import type { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     card-id="${props.cardId}"
-    customer-token="${props.customerToken}"
-    enable-mobile-wallet="${!!(props.pushProvisioningModule || UnitSDK.getPushProvisionModule())}"
+    enable-mobile-wallet="${!!(props.pushProvisioningModule || UnitComponentsSDK.getPushProvisionModule())}"
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
     learn-more-url="${props.learnMoreUrl || ''}"
+    ${feeParam}
     ${menuItemsParam}
   `;
 };

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,32 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { NativeModules, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
-import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
-import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import type { UNCheckDeposit, UNAccount, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } 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 { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
-
-const { Camera } = NativeModules;
+import UNPermissionsModule from '../../nativeModulesHelpers/UNPermissionsHelper/UNPermissionsHelper';
 
 export interface UNCheckDepositComponentProps {
   accountId: string;
   fee?: number;
-  customerToken: string;
   theme?: string;
   language?: string;
   initialStageBackButton?: boolean;
   finalStageDoneButton?: boolean;
-  onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
-  onDepositCreated?: (checkData: UNCheckDepositData) => void;
-  onRestartRequest?: (checkData: UNCheckDepositData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNAccount>) => void;
+  onDepositCreated?: (checkData: UNCheckDeposit) => void;
+  onRestartRequest?: (checkData: UNCheckDeposit) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
 }
@@ -38,7 +35,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   useEffect(() => {
     const requestCameraAccess = async () => {
       try {
-        await Camera.requestAccess();
+        await UNPermissionsModule.camera();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         console.error(error);
@@ -56,13 +53,13 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
       // AccountOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<UNAccountData>);
+      props.onLoad(response[RESPONSE_KEYS.account] as UNComponentsOnLoadResponseData<UNAccount>);
       return;
     }
 
@@ -83,12 +80,12 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
         break;
       }
       case CheckMessage.CHECK_DEPOSIT_CREATED:
-        props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDepositData);
+        props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDeposit);
         break;
       case CheckMessage.CHECK_DEPOSIT_RESTART_REQUEST:
-        props.onRestartRequest && props.onRestartRequest(message.details as UNCheckDepositData);
+        props.onRestartRequest && props.onRestartRequest(message.details as UNCheckDeposit);
         break;
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -105,7 +102,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.checkDeposit}
         presentationMode={presentationMode}

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.utils.ts

@@ -7,7 +7,6 @@ export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
   return `
     account-id="${props.accountId}"
     ${feeParam}
-    customer-token="${props.customerToken}"
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.tsx

@@ -6,22 +6,19 @@ 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 { MultiFactorAuthenticationFinishedEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { UNComponentsError, UNComponentsOnLoadResponse, UNCustomerTokenVerification, UNMultiFactorAuthenticationFinished } 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
+  onLoad?: (response: UNComponentsOnLoadResponse<undefined>) => void
   onVerificationTokenCreated?: (data: UNCustomerTokenVerification) => void
   onAuthenticationFinished?: (data: UNMultiFactorAuthenticationFinished) => void
 }
@@ -36,7 +33,7 @@ const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthentication
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
@@ -47,7 +44,7 @@ const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthentication
     if (!message || !message.details) return;
 
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -61,7 +58,7 @@ const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthentication
       case MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED:
         props.onVerificationTokenCreated && props.onVerificationTokenCreated(message.details as UNCustomerTokenVerification);
         break;
-      case UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED: {
+      case UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED: {
         const data = JSON.parse((message.details as MultiFactorAuthenticationFinishedEvent).unitVerifiedCustomerTokenString);
         props.onAuthenticationFinished && props.onAuthenticationFinished(data as UNMultiFactorAuthenticationFinished);
         break;
@@ -70,11 +67,11 @@ const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthentication
   };
 
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
-  return <UNBaseView style={style} onLoadError={handleUnitOnLoad}>
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad} fallback={<></>}>
     <WebComponent
       type={WebComponentType.multiFactorAuthentication}
       presentationMode={PresentationMode.Inherit}
-      params={getMultiFactorAuthenticationParams(props)}
+      params={getMultiFactorAuthenticationParams()}
       script={getMultiFactorAuthenticationScript()}
       onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
       theme={props.theme}

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

@@ -1,9 +1,7 @@
 import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
-import { UNMultiFactorAuthenticationComponentProps } from './UNMultiFactorAuthenticationComponent';
 
-export const getMultiFactorAuthenticationParams = (props: UNMultiFactorAuthenticationComponentProps) => {
+export const getMultiFactorAuthenticationParams = () => {
   return `
-    customer-token="${props.customerToken}"
   `;
 };
 

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -9,26 +9,25 @@ import type WebView from 'react-native-webview';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { getMultipleCardsParams, getMultipleCardsScript } from './UNMultipleCardsComponent.utils';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type {
-  UNCardData,
-  UNError,
+  UNCard,
+  UNComponentsError,
   UNMultipleCardsComponentPaginationType,
   UNMultipleCardsOnLoadData,
-  UNOnLoadResponse,
-  UNOnLoadResponseData,
+  UNComponentsOnLoadResponse,
+  UNComponentsOnLoadResponseData,
 } from '../../types/shared';
 import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { CardMessage } from '../../messages/webMessages/cardMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
 export interface UNMultipleCardsComponentProps {
-  // inputs
-  customerToken: string;
-
   // ui
   paginationType?: UNMultipleCardsComponentPaginationType;
   cardsPerPage?: number;
@@ -40,15 +39,25 @@ export interface UNMultipleCardsComponentProps {
   hideBackToTop?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
-  onCardClicked?: (card: UNCardData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
+  onCardClicked?: (card: UNCard) => void;
 }
 
 const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
-  const cardClicked = (card: UNCardData) => {
+  const injectRefreshEventIfNeeded = (card: UNCard | null) => {
+    webRef.current?.injectJavaScript(`dispatchCardStatueChanged('${JSON.stringify({data: card})}')`);
+  };
+
+  const requestRefresh = (card: UNCard) => {
+    injectRefreshEventIfNeeded(card);
+  };
+
+  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: requestRefresh });
+
+  const cardClicked = (card: UNCard) => {
     if (props.onCardClicked) {
       props.onCardClicked(card);
     }
@@ -60,13 +69,13 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.cards in response) {
       // MultipleCardsOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.cards] as UNOnLoadResponseData<UNMultipleCardsOnLoadData>);
+      props.onLoad(response[RESPONSE_KEYS.cards] as UNComponentsOnLoadResponseData<UNMultipleCardsOnLoadData>);
       return;
     }
 
@@ -77,7 +86,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -93,7 +102,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
 
   const style = defaultHeight ? { height: defaultHeight } : { flex: 1};
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.multipleCards}

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

@@ -6,7 +6,6 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   const cardsPerPage = props.cardsPerPage ? `cards-per-page="${props.cardsPerPage}"` : '';
   const queryFilter = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
   return `
-  customer-token="${props.customerToken}"
   ${paginationType}
   ${cardsPerPage}
   disable-card-click="${props.disableCardClick || false}"

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.tsx

@@ -1,21 +1,19 @@
 import React, { useState } from 'react';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 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 type { UNCreditAccountRepaymentInformation, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } 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';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNNextRepaymentComponentProps {
   // inputs
-  customerToken: string;
   accountId: string;
 
   // ui
@@ -24,7 +22,7 @@ export interface UNNextRepaymentComponentProps {
   hideTitle?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<[UNRepaymentData]>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNCreditAccountRepaymentInformation]>) => void;
 }
 
 const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
@@ -37,12 +35,12 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.repayment in response) {
-      props.onLoad(response[RESPONSE_KEYS.repayment] as UNOnLoadResponseData<[UNRepaymentData]>);
+      props.onLoad(response[RESPONSE_KEYS.repayment] as UNComponentsOnLoadResponseData<[UNCreditAccountRepaymentInformation]>);
       return;
     }
 
@@ -52,7 +50,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
 
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
 
@@ -63,7 +61,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
   };
 
   return (
-    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.nextRepayment}
         presentationMode={PresentationMode.Default}

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

@@ -3,7 +3,6 @@ import { UNNextRepaymentComponentProps } from './UNNextRepaymentComponent';
 export const getNextRepaymentParams = (props: UNNextRepaymentComponentProps) => {
 
   return `
-    customer-token="${props.customerToken}"
     account-id="${props.accountId}"
     hide-title="${props.hideTitle || false}"
   `;