react-native-unit-components 1.7.1 → 1.8.1

package/lib/module/webComponent/WebComponent.js

@@ -11,6 +11,7 @@ import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api
 import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 import { SDKMessage } from '../messages/nativeMessages/sdkMessage';
 import { handleRequestDownload } from './WebComponent.utils';
+import { getFontFacesString } from '../scripts/html/fontFaces';
 const {
   UNAppInfo
 } = NativeModules;
@@ -61,7 +62,9 @@ export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(
     const themeParam = componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '';
     const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
     const componentParams = (props.params || '') + themeParam + languageParam;
+    const fontFaces = getFontFacesString(UnitSDK.getFonts());
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
+    newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');
     setSourceHtml(newHtml);
@@ -110,7 +113,7 @@ export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(
     },
     source: {
       html: sourceHtml,
-      baseUrl: `https://${baseName}`
+      baseUrl: Platform.OS === 'android' ? `https://${baseName}` : ''
     },
     onMessage: onMessage,
     androidHardwareAccelerationDisabled: true

package/lib/module/webComponent/WebComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","NativeModules","Platform","WebView","EventBus","html","HTML_PLACEHOLDER","UnitMessage","useListenerToBus","getHtmlBody","fetchUnitScript","globalUnitScript","UnitSDK","SDKMessage","handleRequestDownload","UNAppInfo","WebComponent","forwardRef","props","webRef","unitScript","setUnitScript","sourceHtml","setSourceHtml","componentCurrentTheme","setComponentCurrentTheme","theme","getTheme","componentCurrentLanguage","setComponentCurrentLanguage","language","getLanguage","baseName","setBaseName","updateUnitScript","data","updateInitializedParams","busEventKey","IS_SCRIPT_FETCHED","action","IS_SDK_INITIALIZED","getAppName","OS","name","getBundleName","replace","error","console","themeParam","languageParam","componentParams","params","newHtml","BODY","type","valueOf","presentationMode","SCRIPT_FROM_NATIVE","script","WINDOW_PARAMS","windowParams","onMessage","e","message","JSON","parse","nativeEvent","UNIT_REQUEST_REFRESH","details","Instance","event","UNIT_REQUEST_DOWNLOAD","UNIT_REQUEST_CLOSE_FLOW","_onScroll","handleScroll","createElement","ref","originWhitelist","mediaPlaybackRequiresUserAction","allowsInlineMediaPlayback","cacheEnabled","scrollEnabled","isScrollable","nestedScrollEnabled","onScroll","overScrollMode","injectedJavaScript","style","width","flex","opacity","backgroundColor","source","baseUrl","androidHardwareAccelerationDisabled"],"sources":["WebComponent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useState } from 'react';\nimport { NativeModules, Platform } from 'react-native';\nimport { WebView, WebViewMessageEvent } from 'react-native-webview';\nimport EventBus from '../helpers/EventBus';\nimport html, { HTML_PLACEHOLDER } from './html';\nimport { RequestRefreshEvent, UnitMessage, RequestDownloadEvent } from '../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../hooks/listenerToBus';\nimport { getHtmlBody } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { UnitSDK } from '../unitSdkManager/UnitSdkManager';\nimport type { WebViewMessage } from '../messages/webMessages';\nimport { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';\nimport { handleRequestDownload } from './WebComponent.utils';\nimport type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';\n\nconst { UNAppInfo } = NativeModules;\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  theme?: string;\n  language?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  isScrollable?: boolean,\n  nestedScrollEnabled?: boolean,\n  handleScroll?: (event: any) => void,\n  windowParams?: string;\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {\n  const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null);\n  const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());\n  const [componentCurrentLanguage, setComponentCurrentLanguage] = useState<string | undefined>(props.language ?? UnitSDK.getLanguage());\n  const [baseName, setBaseName] = useState<string>();\n\n  const updateUnitScript = (data: SdkScriptFetched) => {\n    setUnitScript(data.unitScript);\n  };\n\n  const updateInitializedParams = () => {\n    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());\n    setComponentCurrentLanguage(props.language ?? UnitSDK.getLanguage());\n  };\n\n  useListenerToBus({ busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript });\n  useListenerToBus({ busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams });\n\n  useEffect(() => {\n\n    const getAppName = async () => {\n      // For iOS, we extend the app name from the HTML to display a prettier access request message.\n      // On Android, there is no request message sent from HTML.\n      try {\n        if (Platform.OS == 'ios') {\n          const name = await UNAppInfo.getBundleName();\n          setBaseName(name.replace(/ /g, '-'));\n        } else { // android\n          setBaseName('unit');\n        }\n      } catch (error: any) {\n        console.error(error);\n      }\n    };\n\n    getAppName();\n  }, []);\n\n  useEffect(() => {\n    if (!unitScript) {\n      fetchUnitScript();\n      return;\n    }\n\n    const themeParam = componentCurrentTheme ? ` theme=\"${componentCurrentTheme}\"` : '';\n    const languageParam = componentCurrentLanguage ? ` language=\"${componentCurrentLanguage}\"` : '';\n\n    const componentParams = (props.params || '') + themeParam + languageParam;\n    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');\n    setSourceHtml(newHtml);\n  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, componentCurrentLanguage, props.script, props.windowParams]);\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;\n    switch (message.type) {\n      case UnitMessage.UNIT_REQUEST_REFRESH:\n        message.details &&\n          EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);\n        break;\n      case UnitMessage.UNIT_REQUEST_DOWNLOAD:\n        message.details &&\n          handleRequestDownload(message.details as RequestDownloadEvent, () => {\n            EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW, {});\n          });\n        break;\n      default:\n        props.onMessage && props.onMessage(message);\n    }\n  };\n\n  if (!sourceHtml) return null;\n\n  const _onScroll = (event: any) => {\n    if (props.handleScroll) {\n      props.handleScroll(event);\n    }\n\n    return null;\n  };\n\n  if (!baseName) {\n    return null;\n  }\n\n  return (\n    <WebView\n      ref={webRef}\n      originWhitelist={['*']}\n      mediaPlaybackRequiresUserAction={false}\n      allowsInlineMediaPlayback={true}\n      cacheEnabled={false}\n      scrollEnabled={props.isScrollable}\n      nestedScrollEnabled={props.nestedScrollEnabled}\n      onScroll={_onScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: '100%', flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}\n      source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}\n      onMessage={onMessage}\n      androidHardwareAccelerationDisabled\n    />\n  );\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","NativeModules","Platform","WebView","EventBus","html","HTML_PLACEHOLDER","UnitMessage","useListenerToBus","getHtmlBody","fetchUnitScript","globalUnitScript","UnitSDK","SDKMessage","handleRequestDownload","getFontFacesString","UNAppInfo","WebComponent","forwardRef","props","webRef","unitScript","setUnitScript","sourceHtml","setSourceHtml","componentCurrentTheme","setComponentCurrentTheme","theme","getTheme","componentCurrentLanguage","setComponentCurrentLanguage","language","getLanguage","baseName","setBaseName","updateUnitScript","data","updateInitializedParams","busEventKey","IS_SCRIPT_FETCHED","action","IS_SDK_INITIALIZED","getAppName","OS","name","getBundleName","replace","error","console","themeParam","languageParam","componentParams","params","fontFaces","getFonts","newHtml","BODY","type","valueOf","presentationMode","FONT_FACES","SCRIPT_FROM_NATIVE","script","WINDOW_PARAMS","windowParams","onMessage","e","message","JSON","parse","nativeEvent","UNIT_REQUEST_REFRESH","details","Instance","event","UNIT_REQUEST_DOWNLOAD","UNIT_REQUEST_CLOSE_FLOW","_onScroll","handleScroll","createElement","ref","originWhitelist","mediaPlaybackRequiresUserAction","allowsInlineMediaPlayback","cacheEnabled","scrollEnabled","isScrollable","nestedScrollEnabled","onScroll","overScrollMode","injectedJavaScript","style","width","flex","opacity","backgroundColor","source","baseUrl","androidHardwareAccelerationDisabled"],"sources":["WebComponent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useState } from 'react';\nimport { NativeModules, Platform } from 'react-native';\nimport { WebView, WebViewMessageEvent } from 'react-native-webview';\nimport EventBus from '../helpers/EventBus';\nimport html, { HTML_PLACEHOLDER } from './html';\nimport { RequestRefreshEvent, UnitMessage, RequestDownloadEvent } from '../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../hooks/listenerToBus';\nimport { getHtmlBody } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { UnitSDK } from '../unitSdkManager/UnitSdkManager';\nimport type { WebViewMessage } from '../messages/webMessages';\nimport { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';\nimport { handleRequestDownload } from './WebComponent.utils';\nimport type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';\nimport { getFontFacesString } from '../scripts/html/fontFaces';\n\nconst { UNAppInfo } = NativeModules;\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  theme?: string;\n  language?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  isScrollable?: boolean,\n  nestedScrollEnabled?: boolean,\n  handleScroll?: (event: any) => void,\n  windowParams?: string;\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {\n  const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null);\n  const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());\n  const [componentCurrentLanguage, setComponentCurrentLanguage] = useState<string | undefined>(props.language ?? UnitSDK.getLanguage());\n  const [baseName, setBaseName] = useState<string>();\n\n  const updateUnitScript = (data: SdkScriptFetched) => {\n    setUnitScript(data.unitScript);\n  };\n\n  const updateInitializedParams = () => {\n    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());\n    setComponentCurrentLanguage(props.language ?? UnitSDK.getLanguage());\n  };\n\n  useListenerToBus({ busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript });\n  useListenerToBus({ busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams });\n\n  useEffect(() => {\n\n    const getAppName = async () => {\n      // For iOS, we extend the app name from the HTML to display a prettier access request message.\n      // On Android, there is no request message sent from HTML.\n      try {\n        if (Platform.OS == 'ios') {\n          const name = await UNAppInfo.getBundleName();\n          setBaseName(name.replace(/ /g, '-'));\n        } else { // android\n          setBaseName('unit');\n        }\n      } catch (error: any) {\n        console.error(error);\n      }\n    };\n\n    getAppName();\n  }, []);\n\n  useEffect(() => {\n    if (!unitScript) {\n      fetchUnitScript();\n      return;\n    }\n\n    const themeParam = componentCurrentTheme ? ` theme=\"${componentCurrentTheme}\"` : '';\n    const languageParam = componentCurrentLanguage ? ` language=\"${componentCurrentLanguage}\"` : '';\n\n    const componentParams = (props.params || '') + themeParam + languageParam;\n\n    const fontFaces = getFontFacesString(UnitSDK.getFonts());\n\n    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');\n    setSourceHtml(newHtml);\n  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, componentCurrentLanguage, props.script, props.windowParams]);\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;\n    switch (message.type) {\n      case UnitMessage.UNIT_REQUEST_REFRESH:\n        message.details &&\n          EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);\n        break;\n      case UnitMessage.UNIT_REQUEST_DOWNLOAD:\n        message.details &&\n          handleRequestDownload(message.details as RequestDownloadEvent, () => {\n            EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW, {});\n          });\n        break;\n      default:\n        props.onMessage && props.onMessage(message);\n    }\n  };\n\n  if (!sourceHtml) return null;\n\n  const _onScroll = (event: any) => {\n    if (props.handleScroll) {\n      props.handleScroll(event);\n    }\n\n    return null;\n  };\n\n  if (!baseName) {\n    return null;\n  }\n\n  return (\n    <WebView\n      ref={webRef}\n      originWhitelist={['*']}\n      mediaPlaybackRequiresUserAction={false}\n      allowsInlineMediaPlayback={true}\n      cacheEnabled={false}\n      scrollEnabled={props.isScrollable}\n      nestedScrollEnabled={props.nestedScrollEnabled}\n      onScroll={_onScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: '100%', flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}\n      source={{ html: sourceHtml, baseUrl: Platform.OS === 'android' ?  `https://${baseName}` : ''}}\n      onMessage={onMessage}\n      androidHardwareAccelerationDisabled\n    />\n  );\n});\n"],"mappings":"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"}

package/lib/module/webComponent/html.js

@@ -4,7 +4,8 @@ export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
   BODY: '<BODY_HTML_CODE>',
   SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',
-  WINDOW_PARAMS: '<WINDOW_PARAMS>'
+  WINDOW_PARAMS: '<WINDOW_PARAMS>',
+  FONT_FACES: '<FONT_FACES>'
 };
 const htmlText = `
   <!DOCTYPE html>
@@ -21,9 +22,17 @@ const htmlText = `
     ${HTML_PLACEHOLDER.WINDOW_PARAMS}
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+
+    <style type="text/css">
+      ${HTML_PLACEHOLDER.FONT_FACES}
+
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
 
-  <body style="margin: 0;">
+  <body>
     ${HTML_PLACEHOLDER.BODY}
 
     <script>

package/lib/module/webComponent/html.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","DISPATCH_RENDERING_EVENT","LISTENERS","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","DISPATCH_REQUEST_CARD_ACTION","DISPATCH_OPEN_ACTIONS_MENU","DISPATCH_REQUEST_ACCOUNT_ACTION","DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT","HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","WINDOW_PARAMS","htmlText","OS","isPageLoaded","onLoad","unitRequestDownload","requestRendering","requestOpenLink","requestCloseFlow","cardActivated","cardStatusChange","unitRequestExternalSdk","unitAccountChanged","unitActivityFiltersChanged"],"sources":["html.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT, DISPATCH_REQUEST_CARD_ACTION, DISPATCH_OPEN_ACTIONS_MENU, DISPATCH_REQUEST_ACCOUNT_ACTION, DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT } from '../scripts/html/bodyScript';\n\nexport const HTML_PLACEHOLDER = {\n  SCRIPT_UNIT: '<SCRIPT_UNIT>',\n  BODY: '<BODY_HTML_CODE>',\n  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',\n  WINDOW_PARAMS: '<WINDOW_PARAMS>'\n};\n\nconst 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    window.UnitMobileSDKConfig = {\n      os: \"${Platform.OS}\",\n      walletName: \"${Platform.OS === 'ios' ? 'Apple' : 'Google'}\",\n    }\n    ${HTML_PLACEHOLDER.WINDOW_PARAMS}\n    </script>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n  </head>\n\n  <body style=\"margin: 0;\">\n    ${HTML_PLACEHOLDER.BODY}\n\n    <script>\n      ${POST_MESSAGE_TO_SDK}\n\n      ${POST_PAGE_HEIGHT}\n\n      ${LISTENERS.isPageLoaded}\n\n      ${LISTENERS.onLoad}\n\n      ${LISTENERS.unitRequestDownload}\n\n      ${LISTENERS.requestRendering}\n\n      ${LISTENERS.requestOpenLink}\n\n      ${LISTENERS.requestCloseFlow}\n\n      ${LISTENERS.cardActivated}\n\n      ${LISTENERS.cardStatusChange}\n\n      ${LISTENERS.unitRequestExternalSdk}\n\n      ${LISTENERS.unitAccountChanged}\n\n      ${LISTENERS.unitActivityFiltersChanged}\n\n      ${DISPATCH_RENDERING_EVENT}\n\n      ${DISPATCH_OPEN_ACTIONS_MENU}\n\n      ${DISPATCH_REQUEST_CARD_ACTION}\n\n      ${DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT}\n\n      ${DISPATCH_REQUEST_ACCOUNT_ACTION}\n\n      ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}\n    </script>\n  </body>\n  </html>\n`;\n\nexport default htmlText;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,wBAAwB,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,4BAA4B,EAAEC,0BAA0B,EAAEC,+BAA+B,EAAEC,sCAAsC,QAAQ,4BAA4B;AAE1P,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,WAAW,EAAE,eAAe;EAC5BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE,sBAAsB;EAC1CC,aAAa,EAAE;AACjB,CAAC;AAED,MAAMC,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAad,QAAQ,CAACe,EAAG;AACzB,qBAAqBf,QAAQ,CAACe,EAAE,KAAK,KAAK,GAAG,OAAO,GAAG,QAAS;AAChE;AACA,MAAMN,gBAAgB,CAACI,aAAc;AACrC;AACA;AACA;AACA;AACA;AACA,MAAMJ,gBAAgB,CAACE,IAAK;AAC5B;AACA;AACA,QAAQR,mBAAoB;AAC5B;AACA,QAAQC,gBAAiB;AACzB;AACA,QAAQF,SAAS,CAACc,YAAa;AAC/B;AACA,QAAQd,SAAS,CAACe,MAAO;AACzB;AACA,QAAQf,SAAS,CAACgB,mBAAoB;AACtC;AACA,QAAQhB,SAAS,CAACiB,gBAAiB;AACnC;AACA,QAAQjB,SAAS,CAACkB,eAAgB;AAClC;AACA,QAAQlB,SAAS,CAACmB,gBAAiB;AACnC;AACA,QAAQnB,SAAS,CAACoB,aAAc;AAChC;AACA,QAAQpB,SAAS,CAACqB,gBAAiB;AACnC;AACA,QAAQrB,SAAS,CAACsB,sBAAuB;AACzC;AACA,QAAQtB,SAAS,CAACuB,kBAAmB;AACrC;AACA,QAAQvB,SAAS,CAACwB,0BAA2B;AAC7C;AACA,QAAQzB,wBAAyB;AACjC;AACA,QAAQK,0BAA2B;AACnC;AACA,QAAQD,4BAA6B;AACrC;AACA,QAAQG,sCAAuC;AAC/C;AACA,QAAQD,+BAAgC;AACxC;AACA,QAAQE,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA;AACA,CAAC;AAED,eAAeE,QAAQ"}
+{"version":3,"names":["Platform","DISPATCH_RENDERING_EVENT","LISTENERS","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","DISPATCH_REQUEST_CARD_ACTION","DISPATCH_OPEN_ACTIONS_MENU","DISPATCH_REQUEST_ACCOUNT_ACTION","DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT","HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","WINDOW_PARAMS","FONT_FACES","htmlText","OS","isPageLoaded","onLoad","unitRequestDownload","requestRendering","requestOpenLink","requestCloseFlow","cardActivated","cardStatusChange","unitRequestExternalSdk","unitAccountChanged","unitActivityFiltersChanged"],"sources":["html.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT, DISPATCH_REQUEST_CARD_ACTION, DISPATCH_OPEN_ACTIONS_MENU, DISPATCH_REQUEST_ACCOUNT_ACTION, DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT } from '../scripts/html/bodyScript';\n\nexport const HTML_PLACEHOLDER = {\n  SCRIPT_UNIT: '<SCRIPT_UNIT>',\n  BODY: '<BODY_HTML_CODE>',\n  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',\n  WINDOW_PARAMS: '<WINDOW_PARAMS>',\n  FONT_FACES: '<FONT_FACES>'\n};\n\nconst 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    window.UnitMobileSDKConfig = {\n      os: \"${Platform.OS}\",\n      walletName: \"${Platform.OS === 'ios' ? 'Apple' : 'Google'}\",\n    }\n    ${HTML_PLACEHOLDER.WINDOW_PARAMS}\n    </script>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n\n    <style type=\"text/css\">\n      ${HTML_PLACEHOLDER.FONT_FACES}\n\n      body {\n        margin: 0;\n      }\n    </style>\n  </head>\n\n  <body>\n    ${HTML_PLACEHOLDER.BODY}\n\n    <script>\n      ${POST_MESSAGE_TO_SDK}\n\n      ${POST_PAGE_HEIGHT}\n\n      ${LISTENERS.isPageLoaded}\n\n      ${LISTENERS.onLoad}\n\n      ${LISTENERS.unitRequestDownload}\n\n      ${LISTENERS.requestRendering}\n\n      ${LISTENERS.requestOpenLink}\n\n      ${LISTENERS.requestCloseFlow}\n\n      ${LISTENERS.cardActivated}\n\n      ${LISTENERS.cardStatusChange}\n\n      ${LISTENERS.unitRequestExternalSdk}\n\n      ${LISTENERS.unitAccountChanged}\n\n      ${LISTENERS.unitActivityFiltersChanged}\n\n      ${DISPATCH_RENDERING_EVENT}\n\n      ${DISPATCH_OPEN_ACTIONS_MENU}\n\n      ${DISPATCH_REQUEST_CARD_ACTION}\n\n      ${DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT}\n\n      ${DISPATCH_REQUEST_ACCOUNT_ACTION}\n\n      ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}\n    </script>\n  </body>\n  </html>\n`;\n\nexport default htmlText;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,wBAAwB,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,4BAA4B,EAAEC,0BAA0B,EAAEC,+BAA+B,EAAEC,sCAAsC,QAAQ,4BAA4B;AAE1P,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,WAAW,EAAE,eAAe;EAC5BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE,sBAAsB;EAC1CC,aAAa,EAAE,iBAAiB;EAChCC,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaf,QAAQ,CAACgB,EAAG;AACzB,qBAAqBhB,QAAQ,CAACgB,EAAE,KAAK,KAAK,GAAG,OAAO,GAAG,QAAS;AAChE;AACA,MAAMP,gBAAgB,CAACI,aAAc;AACrC;AACA;AACA;AACA;AACA,QAAQJ,gBAAgB,CAACK,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,gBAAgB,CAACE,IAAK;AAC5B;AACA;AACA,QAAQR,mBAAoB;AAC5B;AACA,QAAQC,gBAAiB;AACzB;AACA,QAAQF,SAAS,CAACe,YAAa;AAC/B;AACA,QAAQf,SAAS,CAACgB,MAAO;AACzB;AACA,QAAQhB,SAAS,CAACiB,mBAAoB;AACtC;AACA,QAAQjB,SAAS,CAACkB,gBAAiB;AACnC;AACA,QAAQlB,SAAS,CAACmB,eAAgB;AAClC;AACA,QAAQnB,SAAS,CAACoB,gBAAiB;AACnC;AACA,QAAQpB,SAAS,CAACqB,aAAc;AAChC;AACA,QAAQrB,SAAS,CAACsB,gBAAiB;AACnC;AACA,QAAQtB,SAAS,CAACuB,sBAAuB;AACzC;AACA,QAAQvB,SAAS,CAACwB,kBAAmB;AACrC;AACA,QAAQxB,SAAS,CAACyB,0BAA2B;AAC7C;AACA,QAAQ1B,wBAAyB;AACjC;AACA,QAAQK,0BAA2B;AACnC;AACA,QAAQD,4BAA6B;AACrC;AACA,QAAQG,sCAAuC;AAC/C;AACA,QAAQD,+BAAgC;AACxC;AACA,QAAQE,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA;AACA,CAAC;AAED,eAAeG,QAAQ"}

package/lib/typescript/scripts/html/fontFaces.d.ts

@@ -0,0 +1,2 @@
+import type { UNFonts } from '../../types/shared/fonts.types';
+export declare const getFontFacesString: (fonts?: UNFonts) => string;

package/lib/typescript/styles/fonts.d.ts

@@ -0,0 +1 @@
+export declare const getFontName: (fontFamily: string, fontWeight: number | string) => string;

package/lib/typescript/types/shared/fonts.types.d.ts

@@ -0,0 +1,23 @@
+export type UNFonts = {
+    [fontFamily: string]: UNFontData[];
+};
+export type UNFontData = {
+    fontWeight: FontWeight;
+    sources: UNFontSource[];
+};
+export type UNFontSource = {
+    fileName: string;
+    assetDirRelativePath: string;
+    format?: string;
+};
+export declare enum FontWeight {
+    Thin = 100,
+    ExtraLight = 200,
+    Light = 300,
+    Regular = 400,
+    Medium = 500,
+    SemiBold = 600,
+    Bold = 700,
+    ExtraBold = 800,
+    Black = 900
+}

package/lib/typescript/types/shared/index.d.ts

@@ -5,3 +5,5 @@ export * from './achCredit.types';
 export * from './payments.types';
 export * from './account.types';
 export * from './checkDeposit.types';
+export * from './activity.types';
+export * from './fonts.types';

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

@@ -1,5 +1,6 @@
 import type { NativeModules } from 'react-native';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
+import type { UNFonts } from '../types/shared/fonts.types';
 export declare enum UNEnvironment {
     sandbox = "sandbox",
     production = "production"
@@ -13,16 +14,18 @@ export declare class UnitSDK {
     protected static customerToken?: string;
     protected static theme?: string;
     protected static language?: string;
+    protected static fonts?: UNFonts;
     protected static signedNonce?: string;
     protected static pushProvisionModule?: typeof NativeModules;
     static ui: UnitUiManager;
-    static init: (env: UNEnvironment, theme?: string, language?: string) => Promise<void>;
+    static init: (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts) => Promise<void>;
     static setPushProvisioningModule: (pushProvisionModule: typeof NativeModules) => void;
     static getPushProvisionModule: () => import("react-native").NativeModulesStatic | undefined;
     static setSignedNonce: (signedNonce: string) => void;
     static getEnv: () => UNEnvironment | undefined;
     static getTheme: () => string | undefined;
     static getLanguage: () => string | undefined;
+    static getFonts: () => UNFonts | undefined;
     static getSignedNonce: () => string | undefined;
     static setCustomerToken: (customerToken: string) => void;
     static getCustomerToken: () => string | undefined;

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

@@ -3,6 +3,7 @@ export declare const HTML_PLACEHOLDER: {
     BODY: string;
     SCRIPT_FROM_NATIVE: string;
     WINDOW_PARAMS: string;
+    FONT_FACES: string;
 };
 declare const htmlText: string;
 export default htmlText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,7 +26,6 @@
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
-    "release": "release-it",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods"
   },
@@ -65,7 +64,6 @@
     "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"
   },
   "resolutions": {
@@ -94,23 +92,6 @@
       "@commitlint/config-conventional"
     ]
   },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
-    }
-  },
   "eslintConfig": {
     "root": true,
     "parser": "@babel/eslint-parser",

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -205,7 +205,8 @@ export const UNBottomSheetComponent = () => {
         injectHtmlFullScreenHeight(webRef.current, fullScreenHeight);
         setHeight(fullScreenHeight);
       } else {
-        setHeight((message.details as HeightEvent).height);
+        const height = (message.details as HeightEvent).height;
+        setHeight(height < fullScreenHeight ? height : fullScreenHeight);
       }
     }
   };

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -133,7 +133,7 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
   }, [props.pushProvisioningModule]);
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <View style={{ height, width: '100%', minWidth: 235 }}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -20,7 +20,7 @@ export const useCardWallet = (cardId: string) => {
       return encryptedPayload;
     };
 
-    const getCardWalletData = async ()  => {
+    const getCardWalletData = async () => {
       const currentProvisioningModule = UnitSDK.getPushProvisionModule();
       if (!currentProvisioningModule) return;
       try {
@@ -46,7 +46,7 @@ export const useCardWallet = (cardId: string) => {
 
 };
 
-const parseWalletsResponse = (walletsResponse: string): UNWallet | null  => {
+const parseWalletsResponse = (walletsResponse: string): UNWallet | null => {
   try {
     const parsedWalletsResponse = JSON.parse(walletsResponse);
     const wallets = parsedWalletsResponse.wallets;

package/src/scripts/html/fontFaces.ts

@@ -0,0 +1,56 @@
+import { Platform } from 'react-native';
+import type { FontWeight, UNFonts, UNFontSource, UNFontData } from '../../types/shared/fonts.types';
+
+const getUrl = (source: UNFontSource): string => {
+  if (Platform.OS == 'ios') {
+    return `url('${source.fileName}')`;
+  }
+
+  // Handle '/' of dir Relative path
+  let relativeDirPath = source.assetDirRelativePath;
+  if (source.assetDirRelativePath[-1] !== '/') {
+    relativeDirPath = `${source.assetDirRelativePath}/`;
+  }
+  if (source.assetDirRelativePath[0] !== '/') {
+    relativeDirPath = `/${source.assetDirRelativePath}`;
+  }
+
+  return `url('file:///android_asset${relativeDirPath}${source.fileName}')`;
+};
+const getFontFace = (fontFamily: string, fontWeight: FontWeight, sources: UNFontSource[]): string => {
+  const numOfSources = sources.length;
+
+  const sourcesString = sources
+    .map((source, index) => {
+      const suffix = index === numOfSources - 1 ? ';' : ',';
+      const url = getUrl(source);
+      const format = source?.format ? `format('${source.format}')` : '';
+      return `${url} ${format}${suffix}`;
+    })
+    .join('\n');
+
+  return `
+    @font-face {
+      font-family: '${fontFamily}';
+      src: ${sourcesString}
+      font-weight: ${fontWeight.valueOf()};
+    }
+  `;
+};
+
+export const getFontFacesString = (fonts?: UNFonts): string => {
+  if (!fonts) return '';
+
+  const fontFaces: string[] = [];
+
+  // Iterate over all the fonts and their variants
+  // create font-face for each variant
+  Object.entries(fonts).forEach(([familyName, familyFonts]) => {
+    familyFonts.forEach((fontData: UNFontData) => {
+      fontFaces.push(getFontFace(familyName, fontData.fontWeight, fontData.sources));
+    });
+  });
+
+  // Combine all the font faces into a single string
+  return fontFaces.join('\n');
+};

package/src/styles/fonts.ts

@@ -0,0 +1,70 @@
+import { FontWeight, UNFontData } from '../types/shared';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+
+const getFontWeightName = (familyFonts: UNFontData[], fontWeight?: number | string) => {
+  /**
+   * Given family variants and the required weight
+   * Return the closet font that defined by the client.
+   */
+  if (!fontWeight || fontWeight === 'normal') return 'Regular';
+
+  if (fontWeight === 'bold') return 'Bold';
+
+  const fontWeightNumber = Number(fontWeight);
+
+  // Select the closet variant
+  let selectedFontWeight = FontWeight.Regular.valueOf();
+  let minDistance = 1000;
+
+  familyFonts.forEach((fontData: UNFontData) => {
+    const currDistance = Math.abs(fontData.fontWeight - fontWeightNumber);
+    if (currDistance < minDistance) {
+      minDistance = currDistance;
+      selectedFontWeight = fontData.fontWeight.valueOf();
+    }
+  });
+
+  // FontWeight to String
+  switch (selectedFontWeight) {
+    case FontWeight.Thin:
+      return 'Thin';
+    case  FontWeight.ExtraLight:
+      return 'ExtraLight';
+    case FontWeight.Light:
+      return 'Light';
+    case FontWeight.Regular:
+      return 'Regular';
+    case FontWeight.Medium:
+      return 'Medium';
+    case FontWeight.SemiBold:
+      return 'SemiBold';
+    case FontWeight.Bold:
+      return 'Bold';
+    case FontWeight.ExtraBold:
+      return 'ExtraBold';
+    case FontWeight.Black:
+      return 'Black';
+    default:
+      return 'Regular';
+  }
+};
+
+export const getFontName = (fontFamily: string, fontWeight: number | string): string => {
+  /*
+   * Get the font family name and the font weight name from the THEME object.
+   * Then, return a possible font.
+  */
+
+  const fontsInApp = UnitSDK.getFonts();
+  if (!fontsInApp) {
+    throw new Error('Fonts are not found in the app');
+  }
+
+  const familyFonts = fontsInApp[fontFamily];
+  if (!familyFonts) {
+    throw new Error(`Font family ${fontFamily} not found in the app's fonts`);
+  }
+
+  const fontWeightName = getFontWeightName(familyFonts, fontWeight);
+  return `${fontFamily}-${fontWeightName}`;
+};

package/src/types/shared/fonts.types.ts

@@ -0,0 +1,28 @@
+export type UNFonts = {
+  [fontFamily: string]: UNFontData[];
+}
+
+export type UNFontData = {
+  // Using 'field' instead of 'key' to account for potential variants unrelated to font weight.
+  fontWeight: FontWeight;
+  sources: UNFontSource[];
+}
+
+export type UNFontSource = {
+  // using the fileName for iOS and relative path for Android
+  fileName: string;
+  assetDirRelativePath: string;
+  format?: string;
+}
+
+export enum FontWeight {
+  Thin = 100,
+  ExtraLight = 200,
+  Light = 300,
+  Regular = 400,
+  Medium = 500,
+  SemiBold = 600,
+  Bold = 700,
+  ExtraBold = 800,
+  Black = 900
+}

package/src/types/shared/index.ts

@@ -5,3 +5,5 @@ export * from './achCredit.types';
 export * from './payments.types';
 export * from './account.types';
 export * from './checkDeposit.types';
+export * from './activity.types';
+export * from './fonts.types';

package/src/unitSdkManager/UnitSdkManager.ts

@@ -3,6 +3,7 @@ import EventBus from '../helpers/EventBus';
 import { SDKMessage } from '../messages/nativeMessages/sdkMessage';
 import { fetchUnitScript } from './UnitSdk.api';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
+import type { UNFonts } from '../types/shared/fonts.types';
 
 export enum UNEnvironment {
   sandbox = 'sandbox',
@@ -20,17 +21,20 @@ export class UnitSDK {
   protected static customerToken?: string;
   protected static theme?: string;
   protected static language?: string;
+  protected static fonts?: UNFonts;
 
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
 
   public static ui: UnitUiManager;
 
-  public static init = async (env: UNEnvironment, theme?: string, language?: string) => {
+  public static init = async (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts) => {
     try {
       this.env = env;
       this.theme = theme;
       this.language = language;
+      this.fonts = fonts;
+
       this.ui = new UnitUiManager();
       await fetchUnitScript();
       EventBus.Instance.event(SDKMessage.IS_SDK_INITIALIZED, {});
@@ -63,6 +67,10 @@ export class UnitSDK {
     return this.language;
   };
 
+  public static getFonts = () => {
+    return this.fonts;
+  };
+
   public static getSignedNonce = () => {
     return this.signedNonce;
   };

package/src/webComponent/WebComponent.tsx

@@ -13,6 +13,7 @@ import type { WebViewMessage } from '../messages/webMessages';
 import { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';
 import { handleRequestDownload } from './WebComponent.utils';
 import type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
+import { getFontFacesString } from '../scripts/html/fontFaces';
 
 const { UNAppInfo } = NativeModules;
 
@@ -79,7 +80,11 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
 
     const componentParams = (props.params || '') + themeParam + languageParam;
+
+    const fontFaces = getFontFacesString(UnitSDK.getFonts());
+
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
+    newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');
     setSourceHtml(newHtml);
@@ -130,7 +135,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       overScrollMode="never"
       injectedJavaScript={unitScript}
       style={{ width: '100%', flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}
-      source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
+      source={{ html: sourceHtml, baseUrl: Platform.OS === 'android' ?  `https://${baseName}` : ''}}
       onMessage={onMessage}
       androidHardwareAccelerationDisabled
     />

package/src/webComponent/html.ts

@@ -5,7 +5,8 @@ export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
   BODY: '<BODY_HTML_CODE>',
   SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',
-  WINDOW_PARAMS: '<WINDOW_PARAMS>'
+  WINDOW_PARAMS: '<WINDOW_PARAMS>',
+  FONT_FACES: '<FONT_FACES>'
 };
 
 const htmlText = `
@@ -23,9 +24,17 @@ const htmlText = `
     ${HTML_PLACEHOLDER.WINDOW_PARAMS}
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+
+    <style type="text/css">
+      ${HTML_PLACEHOLDER.FONT_FACES}
+
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
 
-  <body style="margin: 0;">
+  <body>
     ${HTML_PLACEHOLDER.BODY}
 
     <script>