npm - react-native-unit-components - Versions diffs - 0.1.0 → 1.0.1 - Mend

react-native-unit-components 0.1.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (406) hide show

package/lib/typescript/unitSdkManager/UnitSdk.api.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+/** globalUnitScript is exported ONLY to our project components **/
+export declare let globalUnitScript: string;
+export declare const fetchUnitScript: () => Promise<null>;

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export declare enum UNEnvironment {
+    sandbox = "sandbox",
+    production = "production"
+}
+export declare const UNIT_SCRIPT_URL: {
+    sandbox: string;
+    production: string;
+};
+export declare class UnitSDK {
+    protected static env?: UNEnvironment;
+    protected static theme?: string;
+    static init: (env: UNEnvironment, theme?: string) => Promise<void>;
+    static getEnv: () => UNEnvironment | undefined;
+    static getTheme: () => string | undefined;
+}

package/lib/typescript/webComponent/WebComponent.d.ts CHANGED Viewed

@@ -1,23 +1,21 @@
 import React from 'react';
 import { WebView } from 'react-native-webview';
-import type { CardEvent, CardMessage } from './webMessages/cardMessage';
-import type { PageEvent, PageMessage } from './webMessages/pageMessage';
-import { UnitEvent, UnitMessage } from './webMessages/unitMessages';
-export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage;
-declare type WebViewEvent = PageEvent | UnitEvent | CardEvent;
-export interface WebViewMessage {
-    type: WebViewMessageType;
-    details?: WebViewEvent;
-}
+import { PresentationMode } from '../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../messages/webMessages';
 export interface WebComponentProps {
     type: WebComponentType;
+    presentationMode?: PresentationMode;
     params?: string;
-    onMessage: (message: WebViewMessage) => void;
+    onMessage?: (message: WebViewMessage) => void;
     script?: string;
+    isScrollable?: boolean;
+    handleScroll?: (event: any) => void;
+    width?: number;
 }
 export declare enum WebComponentType {
     card = "unit-elements-card",
+    bookPayment = "unit-elements-book-payment",
+    activity = "unit-elements-activity",
     slot = "unit-elements-sdk-slot"
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;
-export {};

package/lib/typescript/webComponent/html.d.ts CHANGED Viewed

@@ -1,2 +1,7 @@
-declare const htmlText = "\n  <!DOCTYPE html>\n  <html lang=\"en\">\n\n  <head lang=\"en\">\n    <title>Unit Web SDK Demo</title>\n    <script>\n      window.UnitMobileSDK = true\n    </script>\n    <script src=\"https://unit-white-labeled-banking.netlify.app/client-events.js\"></script>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n  </html>\n\n  <body style=\"margin: 0\">\n    <COMPONENT>\n\n    <script>\n      const postMessageToSDK = (message) => {\n        if ('ReactNativeWebView' in window) {\n          const messageString = JSON.stringify(message)\n          window['ReactNativeWebView'].postMessage(messageString)\n        }\n      }\n\n      const postHeight = () => {\n        setTimeout(() => {\n          const height = window.document.documentElement.getBoundingClientRect().height + 36\n          postMessageToSDK({ type: \"pageHeight\", details: { height } })\n        })\n      }\n\n      window.addEventListener('DOMContentLoaded', e => {\n        postMessageToSDK({ type: \"pageLoaded\" })\n      });\n\n      window.addEventListener(\"unitRequestRendering\", (e) => {\n        postMessageToSDK({ type: \"unitRequestRendering\", details: { data: JSON.stringify(e.detail) }})\n      });\n\n      window.addEventListener(\"unitOnLoad\", (e) => {\n        postHeight()\n        postMessageToSDK({ type: \"unitOnLoad\" })\n      });\n\n      window.addEventListener(\"unitRequestCloseFlow\", (e) => {\n        postMessageToSDK({ type: \"unitRequestCloseFlow\" })\n      });\n\n      window.addEventListener(\"unitRequestOpenLink\", (e) => {\n        postMessageToSDK({ type: \"unitRequestOpenLink\", details: e.detail })\n      });\n\n      window.addEventListener(\"unitCardStatusChanged\", (e) => {\n        const response = e.detail\n        response.then((data) => {\n          postMessageToSDK({ type: \"cardStatusChanged\", details:  { card: JSON.stringify(data.data) }})\n        }).catch((e) => {\n          console.log(e)\n        })\n      });\n\n      const dispatchRenderingEvent = (details) => {\n        const event = new CustomEvent(\"unitRequestRendering\",{ detail: JSON.parse(details) })\n        window.dispatchEvent(event)\n      }\n\n      <SCRIPT_FROM_NATIVE>\n    </script>\n  </body>\n";
+export declare const HTML_PLACEHOLDER: {
+    SCRIPT_UNIT: string;
+    BODY: string;
+    SCRIPT_FROM_NATIVE: string;
+};
+declare const htmlText: string;
 export default htmlText;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -13,7 +13,7 @@
     "android",
     "ios",
     "cpp",
-    "unit-react-native-components.podspec",
+    "react-native-unit-components.podspec",
     "!lib/typescript/example",
     "!android/build",
     "!ios/build",
@@ -50,19 +50,23 @@
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.68.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "commitlint": "^17.0.2",
-    "eslint": "^8.4.1",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.31.11",
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-builder-bob": "^0.18.3",
+    "react-native-webview": "11.23.1",
     "release-it": "^15.0.0",
-    "typescript": "^4.5.2",
-    "react-native-webview": "11.23.1"
+    "typescript": "^4.5.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"

package/{unit-react-native-components.podspec → react-native-unit-components.podspec} RENAMED Viewed

@@ -4,7 +4,7 @@ package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 Pod::Spec.new do |s|
-  s.name         = "unit-react-native-components"
+  s.name         = "react-native-unit-components"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]

package/src/assets/images/close.png ADDED Viewed

Binary file

package/src/assets/images/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as CloseIcon } from './close.png';

package/src/components/UNActivityComponent/UNActivityComponent.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { getActivityParams } from './UNActivityComponent.utils';
+export interface UNActivityComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+}
+export const UNActivityComponent = (props: UNActivityComponentProps) => {
+  return (
+    <WebComponent
+      type={WebComponentType.activity}
+      presentationMode={PresentationMode.Inherit}
+      params={getActivityParams(props)}
+      isScrollable={false}
+    />
+  );
+};

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

@@ -0,0 +1,11 @@
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+import type { UNActivityComponentProps } from './UNActivityComponent';
+export const getActivityParams = (props: UNActivityComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+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';
+export interface UNBookPaymentComponentProps {
+  accountId: string;
+  customerToken: string;
+  isSameCustomer: boolean;
+  counterPartyAccountId: string;
+  counterPartyName: string;
+  theme?: string;
+  onPaymentCreated?: (data: UNBookPaymentData) => void;
+}
+export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
+      const response = message.details as BookPaymentEvent;
+      props.onPaymentCreated(response.data);
+    }
+  };
+  return (
+    <WebComponent
+      type={WebComponentType.bookPayment}
+      presentationMode={PresentationMode.Inherit}
+      params={getBookPaymentParams(props)}
+      script={getBookPaymentScript()}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      isScrollable={false}
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
+import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-same-customer="${props.isSameCustomer}"
+    counterparty-account-id="${props.counterPartyAccountId}"
+    counterparty-name="${props.counterPartyName}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};
+export const getBookPaymentScript = () => {
+  return `
+    window.addEventListener("${BookPaymentMessage.PAYMENT_CREATED}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${BookPaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+  `;
+};

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

	@@ -0,0 +1 @@
1	+ export const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.styles.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+export const getStylesObject = () => {
+  return StyleSheet.create({
+    container: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  });
+};

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx ADDED Viewed

@@ -0,0 +1,167 @@
+/* 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 { 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 { CardMessage, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
+import { useListenerToBus } from '../../hooks/listenerToBus';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { getBottomSheetScript, handleHtmlFullHeight, renderingBottomSheetRequest, resetHtml } from './UNBottomSheetComponent.utils';
+import { getStylesObject } from './UNBottomSheetComponent.styles';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { useAppStateListener } from '../../hooks/useAppStateListener';
+export enum ScrollState {
+  onTop = 'onTop',
+  onlyWebView = 'webViewScroll',
+  onlyBottomSheet = 'onlyBottomSheet',
+  unScrollable = 'unScrollable'
+}
+export const UNBottomSheetComponent = () => {
+  const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
+  const [height, setHeight] = useState(0);
+  const [renderingRequest, setRenderingRequest] = useState<string | null>(null);
+  const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.onTop);
+  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
+  const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);
+  const isAppActive = useAppStateListener();
+  const styles = getStylesObject();
+  const webRef = useRef<WebView>(null);
+  const listenerAction = (data: string) => {
+    setRenderingRequest(data);
+    setIsBottomSheetActive(true);
+  };
+  useEffect(() => {
+    if (!isAppActive) {
+      setIsBottomSheetActive(false);
+    }
+  }, [isAppActive]);
+  useEffect(() => {
+    if (!webRef.current) return;
+    if (renderingRequest) {
+      renderingBottomSheetRequest(webRef.current, renderingRequest);
+    }
+  }, [webRef.current, renderingRequest]);
+  useEffect(() => {
+    if (!isBottomSheetActive) {
+      webRef.current && resetHtml(webRef.current);
+      setHeight(0);
+      setRenderingRequest(null);
+      setScrollState(ScrollState.onTop);
+    }
+  }, [isBottomSheetActive]);
+  useEffect(() => {
+    if (!waitForLoadingNewComponent && newHeightMessage) {
+      setWaitForLoadingNewComponent(false);
+      setNewHeight(newHeightMessage);
+    }
+  }, [waitForLoadingNewComponent, newHeightMessage]);
+  useListenerToBus([{ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: listenerAction }]);
+  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);
+      }
+    }
+  };
+  const onWebMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case PageMessage.PAGE_HEIGHT:
+        renderingRequest && setNewHeightMessage(message);
+        break;
+      case UnitMessage.UNIT_REQUEST_RENDERING:
+        // eslint-disable-next-line no-case-declarations
+        const { data } = (message.details as RequestRenderingEvent);
+        if (data != renderingRequest) {
+          setHeight(0);
+          setRenderingRequest(data);
+          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);
+        break;
+      case UnitMessage.UNIT_REQUEST_OPEN_LINK:
+        // eslint-disable-next-line no-case-declarations
+        const { href } = (message.details as RequestOpenLinkEvent);
+        Linking.openURL(href);
+        break;
+    }
+  };
+  const onScrollWebView = (event: any) => {
+    if (scrollState === ScrollState.unScrollable) return;
+    const currY = event.nativeEvent.contentOffset.y;
+    if (ScrollState.onTop && currY < 5) {
+      setScrollState(ScrollState.onlyBottomSheet);
+    }
+    if ( scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
+      setScrollState(ScrollState.onlyWebView);
+    }
+  };
+  const handleWebViewScroll = () => {
+    if (scrollState === ScrollState.unScrollable) return;
+    setScrollState(ScrollState.onlyWebView);
+  };
+  return (
+    <>
+      <View
+        pointerEvents={isBottomSheetActive ? undefined : 'none'}
+        style={styles.container}
+      >
+        <BottomSheet
+          isOpen={isBottomSheetActive}
+          height={height}
+          onClose={() => setIsBottomSheetActive(false)}
+          onOpen={() => setIsBottomSheetActive(true)}
+          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>
+    </>
+  );
+};

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

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

package/src/components/UNCardComponent/UNCardComponent.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+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 { getCardParams, getCardScript, injectRefreshEventIfNeeded } from './UNCardComponent.utils';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { UNCardData } from '../../sharedTypes';
+import { CardMessage } from '../../messages/webMessages/cardMessage';
+export interface UNCardComponentProps {
+  cardId: string;
+  customerToken: string;
+  theme?: string;
+  onStatusChanged?: (card: UNCardData) => void;
+}
+export const UNCardComponent = (props: UNCardComponentProps) => {
+  const [height, setHeight] = useState(0);
+  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
+  const windowWidth = Dimensions.get('window').width;
+  const webRef = useRef<WebView>(null);
+  const cardStatusChanged = (card: UNCardData) => {
+    if (props.onStatusChanged) {
+      props.onStatusChanged(card);
+    }
+  };
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    setRequestRefreshEvent(data);
+  };
+  useListenerToBus([
+    { busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged },
+    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
+  ]);
+  useEffect(() => {
+    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent, props.cardId);
+  }, [requestRefreshEvent]);
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_RENDERING:
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, (message.details as RequestRenderingEvent).data);
+        break;
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+  return (
+    <View style={{ height }}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.card}
+        presentationMode={PresentationMode.Default}
+        params={getCardParams(props)}
+        script={getCardScript()}
+        onMessage={message => handleMessage(message)}
+        width={windowWidth}
+        isScrollable={false}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,28 @@
+import type WebView from 'react-native-webview';
+import type { UNCardComponentProps } from './UNCardComponent';
+import { WebComponentType } from '../../webComponent/WebComponent';
+import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+export const getCardParams = (props: UNCardComponentProps) => {
+  return `
+    card-id="${props.cardId}"
+    customer-token="${props.customerToken}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+  `;
+};
+export const getCardScript = () => {
+  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, cardId: string) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == cardId) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};

package/src/components/index.ts CHANGED Viewed

@@ -1,2 +1,4 @@
-export * from './Card/CardComponent'
-export * from './BottomSheet/BottomSheetComponent'
+export * from './UNCardComponent/UNCardComponent';
+export * from './UNBottomSheetComponent/UNBottomSheetComponent';
+export * from './UNBookPaymentComponent/UNBookPaymentComponent';
+export * from './UNActivityComponent/UNActivityComponent';

package/src/custom.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare module '*.png' {
+  import { ImageSourcePropType } from 'react-native';
+  const content: ImageSourcePropType;
+  export default content;
+}

package/src/helpers/BottomSheet/BottomSheet.styles.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import { Dimensions, StyleSheet } from 'react-native';
+import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { VARIABLES } from '../../styles/variables';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getStylesObject = (fadeAnim: any) => {
+  return StyleSheet.create({
+    outsideContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    },
+    animation: {
+      backgroundColor: 'black',
+      flex: 1,
+      opacity: fadeAnim,
+    },
+    container: {
+      position: 'relative',
+      flex: 1,
+      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE),
+      shadowColor: VARIABLES.COLORS.BLACK,
+      shadowOffset: {
+        width: 0,
+        height: 6,
+      },
+      shadowOpacity: 0.37,
+      shadowRadius: 7.49,
+      elevation: 12,
+      borderTopLeftRadius: 15,
+      borderTopRightRadius: 15,
+      backgroundColor: VARIABLES.COLORS.WHITE,
+      overflow: 'hidden'
+    },
+    lineContainer: {
+      borderTopLeftRadius: 30,
+      borderTopRightRadius: 30,
+      alignItems: 'center'
+    },
+    line: {
+      width: 35,
+      height: 4,
+      borderRadius: 2,
+      marginTop: 18,
+      backgroundColor: VARIABLES.COLORS.SILVER_FLAKE,
+    },
+    outerContent: {
+      flex: -1,
+    },
+    innerContent: {
+      flex: -1,
+    },
+    closeButton: {
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 36,
+      height: 36,
+      backgroundColor: VARIABLES.COLORS.WHITE,
+      borderRadius: 18,
+      padding: 7,
+      top: 12,
+      right: 12,
+      zIndex: 100
+    }
+  });
+};