react-native-unit-components 1.9.1 → 1.11.0

package/src/components/UNBottomSheetComponent/components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent.tsx

@@ -0,0 +1,181 @@
+import { WebComponent } from '../../../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../../../types/internal/webComponent.types';
+import {
+  getBottomSheetScript,
+  injectHtmlFullScreenHeight,
+  renderingBottomSheetRequest,
+} from '../../UNBottomSheetComponent.utils';
+import React, { useEffect, useRef } from 'react';
+import WebView from 'react-native-webview';
+import { WebViewMessage } from '../../../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../../../messages/webMessages/pageMessage';
+import {
+  RequestRenderingEvent,
+  UnitMessage,
+} from '../../../../messages/webMessages/unitMessages';
+import {
+  BottomSheetNativePlaceType, BottomSheetRenderingType,
+  ScrollState, SlotRendering,
+} from '../../../../types/internal/bottomSheet.types';
+import { CardActivatedEvent, CardMessage, CardStatusChangedEvent } from '../../../../messages/webMessages/cardMessage';
+import { setEvent } from '../../../../slices/SharedEventsSlice';
+import { AccountChangedEvent, AccountMessage } from '../../../../messages/webMessages/accountMessage';
+import { ActivityFiltersChangedEvent, ActivityMessage } from '../../../../messages/webMessages/activityMessage';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../../../store';
+import {
+  setComponentHeight,
+  setIsComponentLoading,
+  setScrollState, setShouldEnableBottomSheetScroll,
+} from '../../../../slices/BottomSheetSlice';
+import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
+import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
+import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
+
+export interface UNBottomSheetSlotComponentProps {
+  requestRenderingEvent: RequestRenderingEvent;
+  componentName?: WebComponentType,
+  componentResourceId?: string,
+}
+
+const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
+  const dispatch = useDispatch();
+  const webRef = useRef<WebView>(null);
+  const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
+  const nativePlace = props.requestRenderingEvent?.data?.nativePlace;
+  const scrollStateForSlot = () => {
+    if (!props.requestRenderingEvent) return;
+    switch (props.componentName) {
+      case WebComponentType.account: {
+        const accountActionType = getAccountActionType(props.requestRenderingEvent);
+        dispatch(setScrollState(
+          accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
+        ));
+        dispatch(setShouldEnableBottomSheetScroll(true));
+        break;
+      }
+      case WebComponentType.card: {
+        dispatch(setScrollState(ScrollState.onTop));
+        dispatch(setShouldEnableBottomSheetScroll(true));
+        break;
+      }
+      default: {
+        // default web component case
+        const nativePlace = props.requestRenderingEvent.data.nativePlace;
+        switch (nativePlace) {
+          case BottomSheetNativePlaceType.overFullScreen:
+            dispatch(setScrollState(ScrollState.onTop));
+            dispatch(setShouldEnableBottomSheetScroll(true));
+            break;
+          case BottomSheetNativePlaceType.modal:
+            dispatch(setScrollState(ScrollState.onlyWebView));
+            dispatch(setShouldEnableBottomSheetScroll(false));
+            break;
+          default:
+            dispatch(setScrollState(ScrollState.onTop));
+            dispatch(setShouldEnableBottomSheetScroll(true));
+            break;
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    scrollStateForSlot();
+  }, [props.componentName, props.requestRenderingEvent.data.nativePlace, scrollStateForSlot]);
+
+  const _onWebMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case PageMessage.PAGE_LOADED:
+        if (webRef.current && props.requestRenderingEvent) {
+          renderingBottomSheetRequest(webRef.current, props.requestRenderingEvent);
+        }
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const height = (message.details as HeightEvent).height;
+        switch (nativePlace) {
+          case BottomSheetNativePlaceType.overFullScreen:
+            injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+            break;
+          case BottomSheetNativePlaceType.modal:
+            injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+            break;
+          default:
+            dispatch(setComponentHeight(height < overFullScreenHeight ? height : overFullScreenHeight));
+            break;
+        }
+        dispatch(setIsComponentLoading(false));
+        break;
+      }
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const requestRendering = message.details as RequestRenderingEvent;
+        const requestRenderingSlotData = {
+          type: BottomSheetRenderingType.Slot,
+          data: { requestRenderingEvent: requestRendering, componentResourceId: props.componentResourceId },
+        } as SlotRendering;
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data: requestRenderingSlotData }));
+        break;
+      }
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        dispatch(setEvent({ key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+        break;
+      case CardMessage.CARD_ACTIVATED:
+        dispatch(setEvent({
+          key: CardMessage.CARD_ACTIVATED,
+          data: (message.details as CardActivatedEvent).card,
+        }));
+        break;
+
+      case CardMessage.CARD_STATUS_CHANGED:
+        dispatch(setEvent({
+          key: CardMessage.CARD_STATUS_CHANGED,
+          data: (message.details as CardStatusChangedEvent).card,
+        }));
+        break;
+      case AccountMessage.UNIT_ACCOUNT_CHANGED:
+        dispatch(setEvent({
+          key: AccountMessage.UNIT_ACCOUNT_CHANGED,
+          data: (message.details as AccountChangedEvent).account,
+        }));
+        break;
+      case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
+        dispatch(setEvent({
+          key: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+          data: (message.details as ActivityFiltersChangedEvent),
+        }));
+        break;
+
+    }
+  };
+
+  const _onScrollWebView = (event: any) => {
+    if (scrollState === ScrollState.unScrollable) return;
+
+    const currY = event.nativeEvent.contentOffset.y;
+
+    if (ScrollState.onTop && currY < 5) {
+      dispatch(setScrollState(ScrollState.onlyBottomSheet));
+      dispatch(setShouldEnableBottomSheetScroll(true));
+    }
+
+    if (scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
+      dispatch(setScrollState(ScrollState.onlyWebView));
+      dispatch(setShouldEnableBottomSheetScroll(false));
+    }
+  };
+
+  return (
+    <WebComponent
+      ref={webRef}
+      type={WebComponentType.slot}
+      presentationMode={PresentationMode.CoverInjectedHeight}
+      script={getBottomSheetScript()}
+      onMessage={_onWebMessage}
+      isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+      handleScroll={_onScrollWebView}
+    />
+  );
+};
+
+export default UNBottomSheetSlotComponent;

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

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

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

@@ -1 +1,2 @@
-export * from './UNAddToWalletBottomSheetItem';
+export * from './UNBottomSheetSlotComponent';
+export * from './UNBottomSheetNativeComponent';

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -3,9 +3,7 @@ import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import EventBus from '../../helpers/EventBus';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
   getCardParams,
@@ -22,22 +20,25 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import {
   BottomSheetRenderingType,
   SlotRendering,
-  type BottomSheetSlotData,
 } 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 { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
 import { selectWallet } from '../../slices/pushProvisioningSlice';
-import { useSelector } from 'react-redux';
+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';
 
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
   customerToken: string;
   learnMoreUrl?: string;
+  menuItems?: UNCardMenuItem[];
 
   // ui
   theme?: string;
@@ -61,6 +62,8 @@ export interface CardRef {
 }
 
 const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
+  const dispatch = useDispatch();
+
   const [height, setHeight] = useState(0);
 
   const webRef = useRef<WebView>(null);
@@ -118,9 +121,9 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     return;
   };
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
-  useListenerToBus({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
@@ -133,12 +136,12 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
           requestRenderingEvent: message.details as RequestRenderingEvent,
         };
 
-        const event = {
+        const data = {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
 
-        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -178,7 +181,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View >
+    </View>
   );
 
 });

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

@@ -6,6 +6,7 @@ import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getCardParams = (props: UNCardComponentProps) => {
+  const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
@@ -14,6 +15,7 @@ export const getCardParams = (props: UNCardComponentProps) => {
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
     learn-more-url="${props.learnMoreUrl || ''}"
+    ${menuItemsParam}
   `;
 };
 

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -11,18 +11,23 @@ import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } f
 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';
 
 const { Camera } = NativeModules;
 
 export interface UNCheckDepositComponentProps {
   accountId: string;
-  fee: number;
+  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
+  onDepositCreated?: (checkData: UNCheckDepositData) => void;
+  onRestartRequest?: (checkData: UNCheckDepositData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
 }
 
 const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
@@ -68,6 +73,14 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     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 CheckMessage.CHECK_DEPOSIT_CREATED:
         props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDepositData);
         break;

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

@@ -1,11 +1,15 @@
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
 import type { UNCheckDepositComponentProps } from './UNCheckDepositComponent';
+import { LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     account-id="${props.accountId}"
-    fee="${props.fee}"
+    ${feeParam}
     customer-token="${props.customerToken}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -29,12 +33,14 @@ const CHECK_DEPOSIT_LISTENERS = {
           console.log(e)
         })
     });
-  `
+  `,
 };
 
 export const getCheckDepositScript = () => {
   return `
     ${CHECK_DEPOSIT_LISTENERS.paymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${CHECK_DEPOSIT_LISTENERS.restartRequest}
   `;
 };

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -0,0 +1,120 @@
+import React, { useRef, useState } from 'react';
+import { Dimensions, View } from 'react-native';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { WebComponent } from '../../webComponent/WebComponent';
+
+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 type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
+import type {
+  UNCardData,
+  UNError,
+  UNMultipleCardsComponentPaginationType,
+  UNMultipleCardsOnLoadData,
+  UNOnLoadResponse,
+  UNOnLoadResponseData,
+} from '../../types/shared';
+import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+
+export interface UNMultipleCardsComponentProps {
+  // inputs
+  customerToken: string;
+
+  // ui
+  paginationType?: UNMultipleCardsComponentPaginationType;
+  cardsPerPage?: number;
+  disableCardClick?: boolean;
+  theme?: string;
+  language?: string;
+  queryFilter?: string;
+  hideTitle?: boolean;
+  hideBackToTop?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
+  onCardClicked?: (card: UNCardData) => void;
+}
+
+const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
+  const webRef = useRef<WebView>(null);
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const cardClicked = (card: UNCardData) => {
+    if (props.onCardClicked) {
+      props.onCardClicked(card);
+    }
+  };
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.cards in response) {
+      // MultipleCardsOnLoadResponse;
+      props.onLoad(response[RESPONSE_KEYS.cards] as UNOnLoadResponseData<UNMultipleCardsOnLoadData>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
+      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED: {
+        cardClicked(message.details as MultipleCardsCardClickedEvent);
+      }
+    }
+  };
+
+  const renderMultipleCardsWebView = () => {
+    return (
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.multipleCards}
+        presentationMode={PresentationMode.Inherit}
+        params={getMultipleCardsParams(props)}
+        script={getMultipleCardsScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        nestedScrollEnabled={true}
+        theme={props.theme}
+        language={props.language}
+      />
+    );
+  };
+
+  if (!defaultHeight) {
+    return renderMultipleCardsWebView();
+  }
+
+  return (
+    <View style={{ height: defaultHeight }}>
+      {renderMultipleCardsWebView()}
+    </View>
+  );
+};
+
+export default withReduxStore<UNMultipleCardsComponentProps>(UNMultipleCardsComponent);

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

@@ -0,0 +1,37 @@
+import type { UNMultipleCardsComponentProps } from './UNMultipleCardsComponent';
+import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) => {
+  const paginationType = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+  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}"
+  ${queryFilter}
+  hide-title="${props.hideTitle || false}"
+  hide-back-to-top="${props.hideBackToTop || false}"
+  style="height: 100%"
+  `;
+};
+
+const MULTIPLE_CARDS_LISTENERS = {
+  cardClicked: `
+    window.addEventListener("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `,
+};
+
+export const getMultipleCardsScript = () => {
+  return `
+     ${MULTIPLE_CARDS_LISTENERS.cardClicked}
+  `;
+};

package/src/components/UNMultipleCardsComponent/index.ts

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

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';