react-native-unit-components 1.0.1 → 1.0.3

package/src/webComponent/WebComponent.tsx

@@ -3,20 +3,24 @@ import React, { useEffect, useState } from 'react';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import EventBus from '../helpers/EventBus';
 import html, { HTML_PLACEHOLDER } from './html';
-import { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, UnitMessage, RequestDownloadEvent } from '../messages/webMessages/unitMessages';
 import { useListenerToBus } from '../hooks/listenerToBus';
 import { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';
 import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
-import { NativeMessage } from '../messages/nativeMessages';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 import type { WebViewMessage } from '../messages/webMessages';
+import { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';
+import { handleRequestDownload } from './WebComponent.utils';
 
 export interface WebComponentProps {
   type: WebComponentType;
   presentationMode?: PresentationMode,
   params?: string;
+  theme?: string;
   onMessage?: (message: WebViewMessage) => void;
   script?: string;
   isScrollable?: boolean,
+  nestedScrollEnabled?: boolean,
   handleScroll?: (event: any) => void,
   width?: number;
 }
@@ -25,19 +29,28 @@ export enum WebComponentType {
   card = 'unit-elements-card',
   bookPayment = 'unit-elements-book-payment',
   activity = 'unit-elements-activity',
-  slot = 'unit-elements-sdk-slot'
+  slot = 'unit-elements-sdk-slot',
+  account = 'unit-elements-account',
 }
 
 export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
   const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState<string | null>(null);
+  const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());
   const width = props.width ?? '100%';
 
-  const listenerAction = (data: { unitScript?: string }) => {
+  const updateUnitScript = (data: SdkScriptFetched) => {
     setUnitScript(data.unitScript);
   };
 
-  useListenerToBus([{ busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: listenerAction }]);
+  const updateInitializedParams = () => {
+    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());
+  };
+
+  useListenerToBus([
+    { busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript },
+    { busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams },
+  ]);
 
   useEffect(() => {
     if (!unitScript) {
@@ -45,18 +58,27 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       return;
     }
 
-    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));
+    const componentParams = (props.params || '') + (componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '');
+    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     setSourceHtml(newHtml);
-
-  }, [props.params, unitScript]);
+  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme]);
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
-    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
-      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);
-    } else {
-      props.onMessage && props.onMessage(message);
+    switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_REFRESH:
+        message.details &&
+          EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);
+        break;
+      case UnitMessage.UNIT_REQUEST_DOWNLOAD:
+        message.details &&
+          handleRequestDownload(message.details as RequestDownloadEvent, () => {
+            EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW);
+          });
+        break;
+      default:
+        props.onMessage && props.onMessage(message);
     }
   };
 
@@ -75,6 +97,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       ref={webRef}
       cacheEnabled={false}
       scrollEnabled={props.isScrollable}
+      nestedScrollEnabled={props.nestedScrollEnabled}
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}

package/src/webComponent/WebComponent.utils.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { Share, NativeModules, Platform } from 'react-native';
+import type { RequestDownloadEvent } from '../messages/webMessages/unitMessages';
+const { RNShareFile } = NativeModules;
+
+export const handleRequestDownload = async (details: RequestDownloadEvent, onReadyToShare: () => void) => {
+  if (details.fileType === 'application/pdf') {
+    const res = await axios.get(details.url, {
+      headers: {
+        'Authorization': `Bearer ${details.accessToken}`
+      },
+      responseEncoding: 'base64',
+      responseType: 'arraybuffer'
+    });
+
+    const base64Data = res.request._response;
+
+    onReadyToShare();
+
+    if (Platform.OS === 'ios') {
+      Share.share({ url: `data:application/pdf;base64,${base64Data}` });
+    } else {
+      RNShareFile.share(base64Data, details.fileName);
+    }
+  }
+};

package/src/webComponent/html.ts

@@ -1,4 +1,5 @@
-import { DISPTACH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT } from '../scripts/html/bodyScript';
+import { Platform } from 'react-native';
+import { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
@@ -14,6 +15,10 @@ const htmlText = `
     <title>Unit Web SDK Demo</title>
     <script>
       window.UnitMobileSDK = true
+      window.UnitMobileSDKConfig = {
+        os: "${Platform.OS}",
+        walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}"
+      }
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   </html>
@@ -30,6 +35,8 @@ const htmlText = `
 
       ${LISTENERS.onLoad}
 
+      ${LISTENERS.unitRequestDownload}
+
       ${LISTENERS.requestRendering}
 
       ${LISTENERS.requestOpenLink}
@@ -38,7 +45,7 @@ const htmlText = `
 
       ${LISTENERS.cardStatusChange}
 
-      ${DISPTACH_RENDERING_EVENT}
+      ${DISPATCH_RENDERING_EVENT}
 
       ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}
     </script>

package/lib/commonjs/nativeComponent/UNNativeAddToWalletButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["UnitAddToWalletButtonView","requireNativeComponent"],"sources":["UNNativeAddToWalletButton.tsx"],"sourcesContent":["import {\n  requireNativeComponent,\n} from 'react-native';\n\ntype UnitAddToWalletButtonViewProps = {\n  style: object;\n  onAddToWalletClicked: () => void;\n};\n\nconst UnitAddToWalletButtonView = requireNativeComponent<UnitAddToWalletButtonViewProps>('UnitAddToWalletButtonView');\n\nexport default UnitAddToWalletButtonView;\n"],"mappings":";;;;;;;AAAA;;AASA,MAAMA,yBAAyB,GAAG,IAAAC,mCAAA,EAAuD,2BAAvD,CAAlC;eAEeD,yB"}

package/lib/module/nativeComponent/UNNativeAddToWalletButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["requireNativeComponent","UnitAddToWalletButtonView"],"sources":["UNNativeAddToWalletButton.tsx"],"sourcesContent":["import {\n  requireNativeComponent,\n} from 'react-native';\n\ntype UnitAddToWalletButtonViewProps = {\n  style: object;\n  onAddToWalletClicked: () => void;\n};\n\nconst UnitAddToWalletButtonView = requireNativeComponent<UnitAddToWalletButtonViewProps>('UnitAddToWalletButtonView');\n\nexport default UnitAddToWalletButtonView;\n"],"mappings":"AAAA,SACEA,sBADF,QAEO,cAFP;AASA,MAAMC,yBAAyB,GAAGD,sBAAsB,CAAiC,2BAAjC,CAAxD;AAEA,eAAeC,yBAAf"}