react-native-unit-components 1.0.2 → 1.0.4

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Dimensions, 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, WebComponentType } from '../../webComponent/WebComponent';
+import { useListenerToBus } from '../../hooks/listenerToBus';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { getAccountParams, getAccountScript, injectRefreshEventIfNeeded } from './UNAccountComponent.utils';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
+import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
+
+export interface UNAccountComponentProps {
+  accountId?: string;
+  customerToken: string;
+  theme?: string;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+}
+
+export enum AccountAction {
+  List = 'account-list',
+  Menu = 'account-menu'
+}
+
+export const UNAccountComponent = (props: UNAccountComponentProps) => {
+  const [height, setHeight] = useState(0);
+  const windowWidth = Dimensions.get('window').width;
+
+  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
+
+  const webRef = useRef<WebView>(null);
+
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    setRequestRefreshEvent(data);
+  };
+
+  useListenerToBus([
+    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
+  ]);
+
+  useEffect(() => {
+    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
+  }, [requestRefreshEvent]);
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const event: BottomSheetSlotData = {
+          componentName: WebComponentType.account,
+          componentResourceId: props.accountId,
+          requestRenderingEvent: message.details as RequestRenderingEvent
+        };
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
+        break;
+      }
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+
+  return (
+    <View style={{ height }}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.account}
+        presentationMode={PresentationMode.Default}
+        params={getAccountParams(props)}
+        script={getAccountScript()}
+        theme={props.theme}
+        onMessage={message => handleMessage(message)}
+        width={windowWidth}
+        isScrollable={false}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { AccountAction, UNAccountComponentProps } from './UNAccountComponent';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import type WebView from 'react-native-webview';
+import { WebComponentType } from '../../webComponent/WebComponent';
+
+export const getAccountParams = (props: UNAccountComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+  `;
+};
+
+export const getAccountScript = () => {
+  return `
+    const dispatchRefreshEvent = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+    }
+  `;
+};
+
+export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.account.valueOf())) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};
+
+export const getAccountActionType = (requestRendering: RequestRenderingEvent) => {
+  return requestRendering.data.nativeComponent.includes(AccountAction.List) ? AccountAction.List : AccountAction.Menu;
+};

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,36 +1,59 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
+import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { getActivityParams } from './UNActivityComponent.utils';
+import { getActivityParams, getActivityScript, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
+import type WebView from 'react-native-webview';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   accountId: string;
   customerToken: string;
   theme?: string;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void
 }
 
 export const UNActivityComponent = (props: UNActivityComponentProps) => {
+  const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    injectRefreshEventIfNeeded(webRef.current, data);
+  };
+
+  useListenerToBus([
+    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
+  ]);
+
   const handleWebViewMessage = (message: WebViewMessage) => {
-    if (message.type === PageMessage.PAGE_HEIGHT) {
-      const currentHeight = (message.details as HeightEvent).height;
-      currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
     }
   };
 
   const renderActivityWebView = () => {
     return (
       <WebComponent
+        ref={webRef}
         type={WebComponentType.activity}
         presentationMode={PresentationMode.Inherit}
         params={getActivityParams(props)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         nestedScrollEnabled={true}
         theme={props.theme}
+        script={getActivityScript()}
       />
     );
   };

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -1,3 +1,7 @@
+import { WebComponentType } from './../../webComponent/WebComponent';
+import type { RequestRefreshEvent } from './../../messages/webMessages/unitMessages';
+import type { WebView } from 'react-native-webview';
+import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type { UNActivityComponentProps } from './UNActivityComponent';
 
 export const getActivityParams = (props: UNActivityComponentProps) => {
@@ -7,3 +11,13 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
     style="height: 100%"
   `;
 };
+
+export const getActivityScript = () => {
+  return DISPATCH_REQUEST_REFRESH;
+};
+
+export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.activity.valueOf())) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -4,9 +4,10 @@ import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { BookPaymentEvent, BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
-import type { UNBookPaymentData } from '../../sharedTypes';
+import type { ResponseUnitOnLoadEvent, UNBookPaymentData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
 
 export interface UNBookPaymentComponentProps {
   accountId: string;
@@ -16,6 +17,7 @@ export interface UNBookPaymentComponentProps {
   counterPartyName: string;
   theme?: string;
   onPaymentCreated?: (data: UNBookPaymentData) => void;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
 }
 
 export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
@@ -23,16 +25,22 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
   const handleWebViewMessage = (message: WebViewMessage) => {
-    if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
-      const response = message.details as BookPaymentEvent;
-      props.onPaymentCreated(response.data);
-    }
+    if (!message || !message.details) return;
 
-    if (message.type === PageMessage.PAGE_HEIGHT) {
-      const currentHeight = (message.details as HeightEvent).height;
-      setHeight(currentHeight);
-      if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
-        setPresentationMode(PresentationMode.Default);
+    switch (message.type) {
+      case BookPaymentMessage.PAYMENT_CREATED:
+        props.onPaymentCreated && props.onPaymentCreated((message.details as BookPaymentEvent).data);
+        break;
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
       }
     }
   };

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -1,3 +1,4 @@
+import { LISTENERS } from './../../scripts/html/bodyScript';
 import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
 
 import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
@@ -23,5 +24,7 @@ export const getBookPaymentScript = () => {
           console.log(e)
         })
     });
+
+    ${LISTENERS.requestRefresh}
   `;
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -1 +1 @@
-export const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;
+export const BOTTOM_SHEET_MAX_PERCENTAGE_SIZE = 0.9;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -6,7 +6,7 @@ import { Dimensions, Linking, View } from 'react-native';
 import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
 import EventBus from '../../helpers/EventBus';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { RequestOpenLinkEvent, RequestRenderingData, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestOpenLinkEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import { CardMessage, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
@@ -14,54 +14,91 @@ import { getBottomSheetScript, handleHtmlFullHeight, renderingBottomSheetRequest
 import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
+import { UNAddToWalletBottomSheetItem } from './components/UNAddToWalletBottomSheetItem';
+import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.utils';
+import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
 
 export enum ScrollState {
+  /*
+    Web View ScrollState -
+      - Initialization:
+      'onTop': for a scrollable webView.
+        (onTop means that the webview is onTop of the BottomSheet and we need to recognize the scroll direction).
+        Then, it recognize the scroll direction and update the scroll state as needed.
+
+      -'unScrollable': for an unscrollable webView
+  */
   onTop = 'onTop',
+  unScrollable = 'unScrollable',
+
+  /*
+    These are only for maintain the bottom sheet scrollState (not an initialize scroll state).
+    It relates to the current scroll state.
+    onlyWebView means that now the scroll is on webview (only).
+    onlyBottomSheet means that now the scroll is on bottomSheet (only).
+   */
   onlyWebView = 'webViewScroll',
   onlyBottomSheet = 'onlyBottomSheet',
-  unScrollable = 'unScrollable'
+}
+
+export type BottomSheetSlotData = {
+  // The data that rendered by the web view
+  componentName?: WebComponentType,
+  componentResourceId?: string,
+  requestRenderingEvent: RequestRenderingEvent
+}
+
+enum CustomDialog {
+  addToWallet
 }
 
 export const UNBottomSheetComponent = () => {
   const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
   const [height, setHeight] = useState(0);
 
-  const [renderingRequest, setRenderingRequest] = useState<string | null>(null);
+  const [bottomSheetSlotData, setBottomSheetSlotData] = useState<BottomSheetSlotData>();
+  const [requestRenderingEvent, setRequestRenderingEvent] = useState<RequestRenderingEvent>();
   const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.onTop);
 
   const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
   const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);
 
+  const [customDialog, setCustomDialog] = useState<CustomDialog | null>(null);
+
   const isAppActive = useAppStateListener();
 
   const styles = getStylesObject();
 
   const webRef = useRef<WebView>(null);
 
-  const listenerAction = (data: string) => {
-    setRenderingRequest(data);
+  const handleRequestRendering = (data: BottomSheetSlotData) => {
+    setBottomSheetSlotData(data);
     setIsBottomSheetActive(true);
+    setRequestRenderingEvent(data.requestRenderingEvent);
+  };
+
+  const handleCloseFlow = () => {
+    setIsBottomSheetActive(false);
   };
 
   useEffect(() => {
-    if (!isAppActive) {
-      setIsBottomSheetActive(false);
-    }
-  }, [isAppActive]);
+    setRequestRenderingEvent(bottomSheetSlotData?.requestRenderingEvent);
+  }, [bottomSheetSlotData]);
 
   useEffect(() => {
     if (!webRef.current) return;
-    if (renderingRequest) {
-      renderingBottomSheetRequest(webRef.current, renderingRequest);
+    if (requestRenderingEvent) {
+      renderingBottomSheetRequest(webRef.current, requestRenderingEvent);
     }
-  }, [webRef.current, renderingRequest]);
+  }, [webRef.current, requestRenderingEvent]);
 
   useEffect(() => {
     if (!isBottomSheetActive) {
       webRef.current && resetHtml(webRef.current);
       setHeight(0);
-      setRenderingRequest(null);
+      setRequestRenderingEvent(undefined);
       setScrollState(ScrollState.onTop);
+      setCustomDialog(null);
     }
   }, [isBottomSheetActive]);
 
@@ -72,42 +109,71 @@ export const UNBottomSheetComponent = () => {
     }
   }, [waitForLoadingNewComponent, newHeightMessage]);
 
-  useListenerToBus([{ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: listenerAction }]);
+  useListenerToBus([
+    { busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: handleRequestRendering },
+    { busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow }
+  ]);
 
   const setNewHeight = (message: WebViewMessage) => {
-    if (renderingRequest) {
-      const nativePlace = (JSON.parse(renderingRequest) as RequestRenderingData).nativePlace;
-      if (nativePlace == 'overFullScreen') {
-        const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);
-        setHeight(bottomSheetNewHeight);
-        setScrollState(ScrollState.onTop);
-      } else {
-        setHeight((message.details as HeightEvent).height);
-        setScrollState(ScrollState.unScrollable);
+    if (!requestRenderingEvent) return;
+    switch (bottomSheetSlotData?.componentName) {
+      case WebComponentType.account: {
+        const accountActionType = getAccountActionType(requestRenderingEvent);
+        setScrollState(
+          accountActionType === AccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
+        );
+        break;
+      }
+      case WebComponentType.card: {
+        if (customDialog === CustomDialog.addToWallet) {
+          setScrollState(ScrollState.unScrollable);
+        } else {
+          setScrollState(ScrollState.onTop);
+        }
+        break;
+      }
+      default: {
+        const nativePlace = requestRenderingEvent?.data.nativePlace;
+        if (nativePlace == 'overFullScreen') {
+          setScrollState(ScrollState.onTop);
+        } else {
+          setScrollState(ScrollState.unScrollable);
+        }
       }
     }
+    const nativePlace = requestRenderingEvent?.data.nativePlace;
+    if (nativePlace == 'overFullScreen') {
+      const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);
+      setHeight(bottomSheetNewHeight);
+    } else {
+      setHeight((message.details as HeightEvent).height);
+    }
   };
 
   const onWebMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case PageMessage.PAGE_HEIGHT:
-        renderingRequest && setNewHeightMessage(message);
+        requestRenderingEvent && setNewHeightMessage(message);
         break;
-      case UnitMessage.UNIT_REQUEST_RENDERING:
-        // eslint-disable-next-line no-case-declarations
-        const { data } = (message.details as RequestRenderingEvent);
-        if (data != renderingRequest) {
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const requestRendering = (message.details as RequestRenderingEvent);
+        if (requestRendering.data.nativeComponent != requestRenderingEvent?.data?.nativeComponent) {
+          if (requestRendering.data.nativeComponent.includes('action=AddToWallet')) {
+            setCustomDialog(CustomDialog.addToWallet);
+          }
+
           setHeight(0);
-          setRenderingRequest(data);
+          setRequestRenderingEvent(requestRendering);
           setWaitForLoadingNewComponent(true);
           setTimeout(() => setWaitForLoadingNewComponent(false), 400);
         }
         break;
+      }
       case CardMessage.CARD_STATUS_CHANGED:
         EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);
         break;
       case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
-        setIsBottomSheetActive(false);
+        handleCloseFlow();
         break;
       case UnitMessage.UNIT_REQUEST_OPEN_LINK:
         // eslint-disable-next-line no-case-declarations
@@ -126,7 +192,7 @@ export const UNBottomSheetComponent = () => {
       setScrollState(ScrollState.onlyBottomSheet);
     }
 
-    if ( scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
+    if (scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
       setScrollState(ScrollState.onlyWebView);
     }
   };
@@ -136,6 +202,25 @@ export const UNBottomSheetComponent = () => {
     setScrollState(ScrollState.onlyWebView);
   };
 
+  const renderBottomSheetItem = () => {
+    switch (customDialog) {
+      case CustomDialog.addToWallet:
+        return <UNAddToWalletBottomSheetItem renderingRequest={requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} />;
+      default:
+        return (
+          <WebComponent
+            ref={webRef}
+            type={WebComponentType.slot}
+            presentationMode={PresentationMode.CoverInjectedHeight}
+            script={getBottomSheetScript()}
+            onMessage={onWebMessage}
+            isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+            handleScroll={onScrollWebView}
+          />
+        );
+    }
+  };
+
   return (
     <>
       <View
@@ -147,21 +232,12 @@ export const UNBottomSheetComponent = () => {
           height={height}
           onClose={() => setIsBottomSheetActive(false)}
           onOpen={() => setIsBottomSheetActive(true)}
-          handleWebViewScroll={() =>  handleWebViewScroll()}
+          handleWebViewScroll={() => handleWebViewScroll()}
           shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
         >
-          { isAppActive && (
-            <WebComponent
-              ref={webRef}
-              type={WebComponentType.slot}
-              presentationMode={PresentationMode.CoverInjectedHeight}
-              script={getBottomSheetScript()}
-              onMessage={onWebMessage}
-              isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-              handleScroll={onScrollWebView}
-            />)}
-        </BottomSheet>
-      </View>
+          {isAppActive && renderBottomSheetItem()}
+        </BottomSheet >
+      </View >
     </>
   );
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -1,19 +1,16 @@
+import { LISTENERS } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
-import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from './UNBottomSheetComponent.constants';
+import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.constants';
+import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
 
 export const getBottomSheetScript = () => {
-  return `
-    window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
-      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
-    });
-  `;
+  return LISTENERS.requestRefresh;
 };
 
-export const renderingBottomSheetRequest = (currentWebView: WebView, renderingRequest: string) => {
+export const renderingBottomSheetRequest = (currentWebView: WebView, renderingRequest: RequestRenderingEvent) => {
   currentWebView?.injectJavaScript(`
     document.activeElement && document.activeElement.blur();
-    dispatchRenderingEvent('${renderingRequest}');
+    dispatchRenderingEvent('${JSON.stringify(renderingRequest.data)}');
   `);
 };
 
@@ -25,7 +22,7 @@ export const resetHtml = (currentWebView: WebView) => {
 };
 
 export const handleHtmlFullHeight = (currentWebView: WebView | null, windowHeight: number) => {
-  const bottomSheetHeight = windowHeight * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE;
+  const bottomSheetHeight = windowHeight * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE;
   currentWebView && currentWebView?.injectJavaScript(`
     document.getElementById('webViewContainer').style.height = '${bottomSheetHeight}px';
   `);

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

@@ -0,0 +1,21 @@
+import { StyleSheet, Platform } from 'react-native';
+
+export const getStylesObject = () => {
+  return StyleSheet.create({
+    addToWalletButton: {
+      position: 'absolute',
+      height: Platform.OS === 'ios' ? 48 : 55,
+      bottom: 32,
+      left: 0,
+      right: 0,
+      marginHorizontal: 24
+    },
+    loader: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    }
+  });
+};

package/src/components/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type WebView from 'react-native-webview';
+import { CardAddToWalletStatus, CardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../../messages/nativeMessages/cardMessage';
+import EventBus from '../../../helpers/EventBus';
+import { PresentationMode } from '../../../scripts/html/bodyHtml';
+import { WebComponent, WebComponentType } from '../../../webComponent/WebComponent';
+import { renderingBottomSheetRequest } from '../UNBottomSheetComponent.utils';
+import { getStylesObject } from './UNAddToWalletBottomSheetItem.styles';
+import { ActivityIndicator } from 'react-native';
+import { useListenerToBus } from '../../../hooks/listenerToBus';
+import type { RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
+import UnitAddToWalletButtonView from '../../../nativeComponent/UnitAddToWalletButton';
+
+export interface UNAddToWalletBottomSheetItemProps {
+  renderingRequest?: RequestRenderingEvent
+  cardId?: string
+}
+
+export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItemProps) => {
+  const styles = getStylesObject();
+
+  const webRef = useRef<WebView>(null);
+
+  const { renderingRequest, cardId } = props;
+
+  const [addToWalletStatus, setAddToWalletStatus] = useState<CardAddToWalletStatus>(CardAddToWalletStatus.pending);
+
+  useEffect(() => {
+    if (!cardId) return;
+    const event: CardGetAddToWalletStatusEvent = { cardId };
+    EventBus.Instance.event(CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, event);
+  }, [cardId]);
+
+  useEffect(() => {
+    if (!webRef.current) return;
+    if (addToWalletStatus === CardAddToWalletStatus.pending) return;
+
+    const isCardInWallet = addToWalletStatus === CardAddToWalletStatus.addedToWallet;
+    webRef.current.injectJavaScript(`window.UnitMobileSDKConfig["isCardInWallet"] = ${isCardInWallet}`);
+
+    if (renderingRequest) {
+      renderingBottomSheetRequest(webRef.current, renderingRequest);
+    }
+  }, [webRef.current, renderingRequest, addToWalletStatus]);
+
+  const gotCardWalletStatus = (data?: CardAddToWalletStatusEvent) => {
+    if (data != null) {
+      setAddToWalletStatus(data.status);
+    }
+  };
+
+  useListenerToBus([
+    { busEventKey: CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, action: gotCardWalletStatus },
+  ]);
+
+  const handleAddToWalletClicked = () => {
+    if (!cardId) return;
+    const startPushProvisioningEvent: CardStartPushProvisioningEvent = { cardId };
+    EventBus.Instance.event(CardNativeMessage.CARD_START_PUSH_PROVISIONING, startPushProvisioningEvent);
+  };
+
+  return (
+    <>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.slot}
+        presentationMode={PresentationMode.CoverInjectedHeight}
+        isScrollable={false}
+      />
+      {addToWalletStatus === CardAddToWalletStatus.pending && <ActivityIndicator style={styles.loader} />}
+      {addToWalletStatus === CardAddToWalletStatus.readyToProvisioning && <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />}
+    </>
+  );
+};