react-native-unit-components 1.5.0 → 1.7.0

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -4,17 +4,18 @@ 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 { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { getAccountParams, getAccountScript, injectOpenActionsMenuScript, injectRefreshEventIfNeeded, injectRequestAccountActionScript } from './UNAccountComponent.utils';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
-import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { useListenerToBus } from '../../hooks/listenerToBus';
-import type { UNAccountData } from '../../sharedTypes/account.types';
+import type { UNAccountData } from '../../types/shared/account.types';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import type { UNAccountMenuAction } from '../../sharedTypes';
+import type { UNAccountMenuAction } from '../../types/shared';
+import { BottomSheetRenderingType, SlotRendering, type BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 
 export interface UNAccountComponentProps {
   // inputs
@@ -100,12 +101,18 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case UnitMessage.UNIT_REQUEST_RENDERING: {
-        const event: BottomSheetSlotData = {
+        const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.account,
           componentResourceId: props.accountId,
           requestRenderingEvent: message.details as RequestRenderingEvent
         };
-        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
+
+        const event = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData
+        } as SlotRendering;
+
+        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
         break;
       }
       case PageMessage.PAGE_HEIGHT:

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

@@ -1,13 +1,14 @@
 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';
-import type { UNAccountMenuAction } from 'src/sharedTypes';
+import type { UNAccountMenuAction } from 'src/types/shared';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
   `;

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -4,22 +4,23 @@ import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../m
 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 { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import { WebComponent } from '../../webComponent/WebComponent';
 import { getActivityParams, getActivityScript, injectFiltersChanged, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
-import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
 import EventBus from '../../helpers/EventBus';
-import type { UNActivityOnLoadData } from '../../sharedTypes/activity.types';
+import type { UNActivityOnLoadData } from '../../types/shared/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
+import { BottomSheetRenderingType, type BottomSheetSlotData, type SlotRendering } from '../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   // inputs
-  accountId: string;
   customerToken: string;
+  accountId?: string;
   queryFilter?: string
 
   // ui
@@ -75,12 +76,18 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitMessage.UNIT_REQUEST_RENDERING: {
-        const event: BottomSheetSlotData = {
+        const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.activity,
           componentResourceId: props.accountId,
           requestRenderingEvent: message.details as RequestRenderingEvent
         };
-        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
+
+        const event = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData
+        } as SlotRendering;
+
+        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:

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

@@ -1,14 +1,16 @@
-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';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getActivityParams = (props: UNActivityComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     ${queryFilterParam}
     style="height: 100%"

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -1,24 +1,30 @@
 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
   accountId: string;
   customerToken: string;
   isSameCustomer: boolean;
   counterPartyAccountId: string;
   counterPartyName: string;
+
+  // ui
   theme?: string;
   language?: string;
+  isAutoFocus?: boolean;
+
+  // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }

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

@@ -10,6 +10,7 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
     is-same-customer="${props.isSameCustomer}"
     counterparty-account-id="${props.counterPartyAccountId}"
     counterparty-name="${props.counterPartyName}"
+    is-auto-focus="${props.isAutoFocus || false}"
     style="height: 100%"
   `;
 };

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;
+  }
 };