react-native-unit-components 1.6.1 → 1.7.1

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent } from '../../webComponent/WebComponent';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNBookPaymentData, UNError, UNAccountData, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNOnLoadResponse, UNBookPaymentData, UNError, UNAccountData, UNOnLoadResponseData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 
 export interface UNBookPaymentComponentProps {
   //inputs

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useRef, useState } from 'react';
 import type WebView from 'react-native-webview';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { WebComponent } from '../../webComponent/WebComponent';
 import { Dimensions, Linking, View } from 'react-native';
 import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
 import EventBus from '../../helpers/EventBus';
@@ -11,13 +11,15 @@ import { CardMessage, CardActivatedEvent, CardStatusChangedEvent } from '../../m
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
+  extractCardIdFromComponentParams,
   getBottomSheetScript,
-  handleHtmlFullHeight,
+  injectHtmlFullScreenHeight,
+  isAddToWalletByComponentParams,
+  isAddToWalletFromRequestRendering,
   renderingBottomSheetRequest,
   resetHtml,
 } from './UNBottomSheetComponent.utils';
 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';
@@ -25,6 +27,10 @@ import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
 import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { ActivityFiltersChangedEvent, ActivityMessage } from '../../messages/webMessages/activityMessage';
+import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.constants';
+import { BottomSheetRenderingType, BottomSheetSlotData, NativeComponentData, WebComponentData } from '../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { BottomSheetNativeMessage, type StartBottomSheetFlowMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 
 export enum ScrollState {
   /*
@@ -49,40 +55,49 @@ export enum ScrollState {
   onlyBottomSheet = 'onlyBottomSheet',
 }
 
-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 fullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE;
+
+  const [renderingType, setRenderingType] = useState<BottomSheetRenderingType>(BottomSheetRenderingType.Slot);
   const [bottomSheetSlotData, setBottomSheetSlotData] = useState<BottomSheetSlotData>();
-  const [requestRenderingEvent, setRequestRenderingEvent] = useState<RequestRenderingEvent>();
+  const [webComponentData, setWebComponentData] = useState<WebComponentData>();
+  const [nativeComponentData, setNativeComponentData] = useState<NativeComponentData>();
+
+  const [isAddToWallet, setIsAddToWallet] = useState(false);
   const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.onTop);
 
-  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
+  const [shouldShowComponent, setShouldShowComponent] = 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 handleRequestRendering = (data: BottomSheetSlotData) => {
-    setBottomSheetSlotData(data);
+  const startFlow = (rendering: StartBottomSheetFlowMessage) => {
+    setRenderingType(rendering.type);
     setIsBottomSheetActive(true);
-    setRequestRenderingEvent(data.requestRenderingEvent);
+    setShouldShowComponent(true);
+    switch (rendering.type) {
+      case BottomSheetRenderingType.Slot:
+        setBottomSheetSlotData(rendering.data);
+        setIsAddToWallet(isAddToWalletFromRequestRendering(rendering.data));
+        setWebComponentData(undefined);
+        break;
+      case BottomSheetRenderingType.WebComponent:
+        setIsAddToWallet(isAddToWalletByComponentParams(rendering.data));
+        isAddToWallet && setHeight(fullScreenHeight);
+        setBottomSheetSlotData(undefined);
+        setWebComponentData(rendering.data);
+        break;
+      case BottomSheetRenderingType.NativeComponent:
+        setNativeComponentData(rendering.data);
+        break;
+    }
   };
 
   const handleCloseFlow = () => {
@@ -90,88 +105,137 @@ export const UNBottomSheetComponent = () => {
   };
 
   useEffect(() => {
-    setRequestRenderingEvent(bottomSheetSlotData?.requestRenderingEvent);
-  }, [bottomSheetSlotData]);
-
-  useEffect(() => {
-    if (!webRef.current) return;
-    if (requestRenderingEvent) {
-      renderingBottomSheetRequest(webRef.current, requestRenderingEvent);
+    switch (renderingType) {
+      case BottomSheetRenderingType.Slot:
+        if (webRef.current && bottomSheetSlotData?.requestRenderingEvent) {
+          renderingBottomSheetRequest(webRef.current, bottomSheetSlotData.requestRenderingEvent);
+        }
+        break;
+      case BottomSheetRenderingType.WebComponent:
+        if (isAddToWallet) {
+          webRef.current?.injectJavaScript('document.activeElement && document.activeElement.blur();');
+          setHeight(fullScreenHeight);
+        }
+        break;
+      case BottomSheetRenderingType.NativeComponent:
+        break;
     }
-  }, [webRef.current, requestRenderingEvent]);
+  }, [webRef, webComponentData, bottomSheetSlotData, nativeComponentData]);
 
   useEffect(() => {
     if (!isBottomSheetActive) {
       webRef.current && resetHtml(webRef.current);
       setHeight(0);
-      setRequestRenderingEvent(undefined);
+      setShouldShowComponent(false);
+      setWebComponentData(undefined);
+      setBottomSheetSlotData(undefined);
+      setRenderingType(BottomSheetRenderingType.Slot);
       setScrollState(ScrollState.onTop);
-      setCustomDialog(null);
+      setIsAddToWallet(false);
     }
   }, [isBottomSheetActive]);
 
   useEffect(() => {
-    if (!waitForLoadingNewComponent && newHeightMessage) {
-      setWaitForLoadingNewComponent(false);
+    if (shouldShowComponent) {
+      defineScrollState();
       setNewHeight(newHeightMessage);
     }
-  }, [waitForLoadingNewComponent, newHeightMessage]);
+  }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: handleRequestRendering });
+  useListenerToBus({ busEventKey: BottomSheetNativeMessage.START_FLOW,  action: startFlow });
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
-  const setNewHeight = (message: WebViewMessage) => {
-    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);
+  const defineScrollState = () => {
+    const scrollStateForSlot = () => {
+      if (!bottomSheetSlotData?.requestRenderingEvent) return;
+      switch (bottomSheetSlotData?.componentName) {
+        case WebComponentType.account: {
+          const accountActionType = getAccountActionType(bottomSheetSlotData.requestRenderingEvent);
+          setScrollState(
+            accountActionType === AccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
+          );
+          break;
         }
-        break;
-      }
-      default: {
-        const nativePlace = requestRenderingEvent?.data.nativePlace;
-        if (nativePlace == 'overFullScreen') {
-          setScrollState(ScrollState.onTop);
-        } else {
-          setScrollState(ScrollState.unScrollable);
+        case WebComponentType.card: {
+          if (isAddToWallet) {
+            setScrollState(ScrollState.unScrollable);
+          } else {
+            setScrollState(ScrollState.onTop);
+          }
+          break;
+        }
+        default: {
+          // default web component case
+          const nativePlace = bottomSheetSlotData.requestRenderingEvent.data.nativePlace;
+          if (nativePlace == 'overFullScreen') {
+            setScrollState(ScrollState.onTop);
+          } else {
+            setScrollState(ScrollState.unScrollable);
+          }
         }
       }
+    };
+
+    const scrollStateForWebComponent = () => {
+      if (isAddToWallet) {
+        setScrollState(ScrollState.unScrollable);
+      } else {
+        setScrollState(ScrollState.onTop);
+      }
+    };
+
+    switch (renderingType) {
+      case BottomSheetRenderingType.Slot:
+        scrollStateForSlot();
+        break;
+      case BottomSheetRenderingType.WebComponent:
+        scrollStateForWebComponent();
+        break;
+      default:
+        setScrollState(ScrollState.onTop);
     }
-    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 setNewHeight = (message: WebViewMessage | null) => {
+    if (isAddToWallet) {
+      setHeight(fullScreenHeight);
+    } else if (message) {
+      const nativePlace = bottomSheetSlotData?.requestRenderingEvent.data.nativePlace;
+      if (nativePlace == 'overFullScreen') {
+        injectHtmlFullScreenHeight(webRef.current, fullScreenHeight);
+        setHeight(fullScreenHeight);
+      } else {
+        setHeight((message.details as HeightEvent).height);
+      }
     }
   };
 
   const onWebMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case PageMessage.PAGE_HEIGHT:
-        requestRenderingEvent && setNewHeightMessage(message);
+        bottomSheetSlotData?.requestRenderingEvent && setNewHeightMessage(message);
         break;
       case UnitMessage.UNIT_REQUEST_RENDERING: {
+        setRenderingType(BottomSheetRenderingType.Slot);
         const requestRendering = (message.details as RequestRenderingEvent);
-        if (requestRendering.data.nativeComponent != requestRenderingEvent?.data?.nativeComponent) {
-          if (requestRendering.data.nativeComponent.includes('action=AddToWallet')) {
-            setCustomDialog(CustomDialog.addToWallet);
-          }
+        setWebComponentData(undefined);
+        if (requestRendering.data.nativeComponent != bottomSheetSlotData?.requestRenderingEvent?.data?.nativeComponent) {
+          setIsAddToWallet(requestRendering.data.nativeComponent.includes('action=AddToWallet'));
 
+          // Animation between bottom sheet screens
+          // Close the bottom sheet
           setHeight(0);
-          setRequestRenderingEvent(requestRendering);
-          setWaitForLoadingNewComponent(true);
-          setTimeout(() => setWaitForLoadingNewComponent(false), 400);
+          setShouldShowComponent(false);
+
+          // Update the bottom sheet data
+          setBottomSheetSlotData({
+            componentResourceId: bottomSheetSlotData?.componentResourceId,
+            componentName: bottomSheetSlotData?.componentName,
+            requestRenderingEvent: requestRendering
+          });
+
+          // Open the bottom sheet
+          setTimeout(() => setShouldShowComponent(true), 400);
         }
         break;
       }
@@ -218,10 +282,12 @@ export const UNBottomSheetComponent = () => {
   };
 
   const renderBottomSheetItem = () => {
-    switch (customDialog) {
-      case CustomDialog.addToWallet:
-        return <UNAddToWalletBottomSheetItem renderingRequest={requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} />;
-      default:
+    switch (renderingType) {
+      case BottomSheetRenderingType.Slot:
+        if (bottomSheetSlotData?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && bottomSheetSlotData?.componentResourceId) {
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType} renderingRequest={bottomSheetSlotData.requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} fullScreenHeight={fullScreenHeight}/>;
+        }
+
         return (
           <WebComponent
             ref={webRef}
@@ -233,6 +299,15 @@ export const UNBottomSheetComponent = () => {
             handleScroll={onScrollWebView}
           />
         );
+      case BottomSheetRenderingType.WebComponent:
+        if (webComponentData?.params?.includes('action=AddToWallet')) {
+          const cardId = extractCardIdFromComponentParams(webComponentData);
+          if (!cardId) return null;
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData} cardId={cardId} fullScreenHeight={fullScreenHeight}/>;
+        }
+        return null;
+      case BottomSheetRenderingType.NativeComponent:
+        return null;
     }
   };
 

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

@@ -1,7 +1,8 @@
 import { LISTENERS } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.constants';
 import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { BottomSheetSlotData, WebComponentData } from '../../types/internal/bottomSheet.types';
+import { webViewId } from '../../scripts/html/bodyHtml';
 
 export const getBottomSheetScript = () => {
   return LISTENERS.requestRefresh;
@@ -17,15 +18,32 @@ export const renderingBottomSheetRequest = (currentWebView: WebView, renderingRe
 export const resetHtml = (currentWebView: WebView) => {
   currentWebView?.injectJavaScript(`
     document.activeElement && document.activeElement.blur();
-    document.getElementById('webViewContainer').style.height = null;
+    document.getElementById('${webViewId}').style.height = null;
   `);
 };
 
-export const handleHtmlFullHeight = (currentWebView: WebView | null, windowHeight: number) => {
-  const bottomSheetHeight = windowHeight * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE;
+export const injectHtmlFullScreenHeight = (currentWebView: WebView | null, bottomSheetHeight: number) => {
   currentWebView && currentWebView?.injectJavaScript(`
-    document.getElementById('webViewContainer').style.height = '${bottomSheetHeight}px';
+    document.getElementById('${webViewId}').style.height = '${bottomSheetHeight}px';
   `);
+};
+
+export const isAddToWalletFromRequestRendering = (data: BottomSheetSlotData): boolean => {
+  return data.requestRenderingEvent?.data?.nativeComponent.includes('AddToWallet') ?? false;
+};
+
+export const isAddToWalletByComponentParams = (data: WebComponentData): boolean => {
+  return data.params?.includes('AddToWallet') ?? false;
+};
+
+export const extractCardIdFromComponentParams = (data: WebComponentData): string | null => {
+  const regex = /card-id=(\d+)/;
+  const match = data.params?.match(regex);
 
-  return bottomSheetHeight;
+  if (match && match[1]) {
+    const cardId = match[1];
+    return cardId;
+  } else {
+    return null;
+  }
 };

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

@@ -1,20 +1,25 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type WebView from 'react-native-webview';
-import { UNCardAddToWalletStatusEvent, 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 { WebComponent } from '../../../webComponent/WebComponent';
+import { injectHtmlFullScreenHeight, 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 { UnitMessage, type RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
 import UnitAddToWalletButtonView from '../../../nativeComponent/UnitAddToWalletButton';
-import { UNCardAddToWalletStatus } from '../../../sharedTypes/wallet.types';
+import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
+import { BottomSheetRenderingType, WebComponentData } from '../../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
+import { useCardWallet } from '../../../helpers/pushProvisioningService/hooks/useCardWallet';
+import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
+import type { WebViewMessage } from '../../../messages/webMessages';
+import EventBus from '../../../helpers/EventBus';
 
 export interface UNAddToWalletBottomSheetItemProps {
+  renderingType: BottomSheetRenderingType
   renderingRequest?: RequestRenderingEvent
-  cardId?: string
+  webComponentData?: WebComponentData
+  cardId: string,
+  fullScreenHeight: number
 }
 
 export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItemProps) => {
@@ -22,52 +27,78 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
 
   const webRef = useRef<WebView>(null);
 
-  const { renderingRequest, cardId } = props;
-
-  const [addToWalletStatus, setAddToWalletStatus] = useState<UNCardAddToWalletStatus>(UNCardAddToWalletStatus.pending);
-
-  useEffect(() => {
-    if (!cardId) return;
-    const event: CardGetAddToWalletStatusEvent = { cardId };
-    EventBus.Instance.event(CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, event);
-  }, [cardId]);
+  const { renderingType, renderingRequest, webComponentData, cardId } = props;
+  const { currentUNWallet } = useCardWallet(cardId);
 
   useEffect(() => {
     if (!webRef.current) return;
-    if (addToWalletStatus === UNCardAddToWalletStatus.pending) return;
-
-    const isCardInWallet = addToWalletStatus === UNCardAddToWalletStatus.addedToWallet;
-    webRef.current.injectJavaScript(`window.UnitMobileSDKConfig["isCardInWallet"] = ${isCardInWallet}`);
+    const currentWalletStatus = currentUNWallet?.status ?? UNCardAddToWalletStatus.pending;
+    if (currentWalletStatus === UNCardAddToWalletStatus.pending) return;
 
-    if (renderingRequest) {
+    if (renderingType === BottomSheetRenderingType.Slot && renderingRequest) {
+      const isCardInWallet = currentWalletStatus === UNCardAddToWalletStatus.addedToWallet;
+      webRef.current.injectJavaScript(`window.UnitMobileSDKConfig["isCardInWallet"] = ${isCardInWallet}`);
       renderingBottomSheetRequest(webRef.current, renderingRequest);
     }
-  }, [webRef.current, renderingRequest, addToWalletStatus]);
 
-  const gotCardWalletStatus = (data?: UNCardAddToWalletStatusEvent) => {
-    if (data != null) {
-      setAddToWalletStatus(data.status);
+  }, [webRef.current, renderingRequest, currentUNWallet]);
+
+  const handleAddToWalletClicked = () => {
+    if (!currentUNWallet) return;
+    launchStartCardProvisioning(currentUNWallet);
+  };
+
+  const handleWebComponentMessage  = (message: WebViewMessage) => {
+    if (!message || !message.type) return;
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        injectHtmlFullScreenHeight(webRef.current, props.fullScreenHeight);
+        break;
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW, {});
+        break;
+      default:
+        break;
     }
   };
 
-  useListenerToBus({ busEventKey: CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, action: gotCardWalletStatus });
+  const shouldShowWebComponent = () => {
+    // Show .Slot, since it need to be loaded when we inject the requestRendering
+    // Otherwise show web component only if the card is in wallet or ready to be provisioned.
 
-  const handleAddToWalletClicked = () => {
-    if (!cardId) return;
-    const startPushProvisioningEvent: CardStartPushProvisioningEvent = { cardId };
-    EventBus.Instance.event(CardNativeMessage.CARD_START_PUSH_PROVISIONING, startPushProvisioningEvent);
+    const isSlot = renderingType === BottomSheetRenderingType.Slot;
+
+    const gotWalletStatus = currentUNWallet &&
+      (currentUNWallet.status === UNCardAddToWalletStatus.readyToProvisioning ||
+        currentUNWallet.status === UNCardAddToWalletStatus.addedToWallet);
+
+    return isSlot || gotWalletStatus;
   };
 
   return (
     <>
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.slot}
-        presentationMode={PresentationMode.CoverInjectedHeight}
-        isScrollable={false}
-      />
-      {addToWalletStatus === UNCardAddToWalletStatus.pending && <ActivityIndicator style={styles.loader} />}
-      {addToWalletStatus === UNCardAddToWalletStatus.readyToProvisioning && <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />}
+      {
+        shouldShowWebComponent() &&
+        <WebComponent
+          ref={webRef}
+          type={renderingType === BottomSheetRenderingType.WebComponent ? WebComponentType.cardAction : WebComponentType.slot}
+          presentationMode={PresentationMode.CoverInjectedHeight}
+          params={webComponentData?.params}
+          isScrollable={false}
+          onMessage={handleWebComponentMessage}
+          windowParams={renderingType === BottomSheetRenderingType.WebComponent ? `window.UnitMobileSDKConfig["isCardInWallet"] = ${currentUNWallet?.status === UNCardAddToWalletStatus.addedToWallet}` : ''}
+        />
+      }
+
+      {
+        (currentUNWallet == undefined || currentUNWallet?.status === UNCardAddToWalletStatus.pending) &&
+        <ActivityIndicator style={styles.loader} />
+      }
+
+      {
+        currentUNWallet?.status === UNCardAddToWalletStatus.readyToProvisioning &&
+        <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />
+      }
     </>
   );
 };