react-native-unit-components 0.1.0 → 1.0.0

package/lib/commonjs/unitSdkManager/UnitSdkManager.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnitSDK = exports.UNIT_SCRIPT_URL = exports.UNEnvironment = void 0;
+
+var _UnitSdk = require("./UnitSdk.api");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+let UNEnvironment;
+exports.UNEnvironment = UNEnvironment;
+
+(function (UNEnvironment) {
+  UNEnvironment["sandbox"] = "sandbox";
+  UNEnvironment["production"] = "production";
+})(UNEnvironment || (exports.UNEnvironment = UNEnvironment = {}));
+
+const UNIT_SCRIPT_URL = {
+  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',
+  [UNEnvironment.production]: 'https://ui.unit.co/components.js'
+};
+exports.UNIT_SCRIPT_URL = UNIT_SCRIPT_URL;
+
+class UnitSDK {}
+
+exports.UnitSDK = UnitSDK;
+
+_defineProperty(UnitSDK, "env", void 0);
+
+_defineProperty(UnitSDK, "theme", void 0);
+
+_defineProperty(UnitSDK, "init", async (env, theme) => {
+  try {
+    UnitSDK.env = env;
+    UnitSDK.theme = theme;
+    await (0, _UnitSdk.fetchUnitScript)();
+  } catch (e) {
+    console.log(e);
+  }
+});
+
+_defineProperty(UnitSDK, "getEnv", () => {
+  return UnitSDK.env;
+});
+
+_defineProperty(UnitSDK, "getTheme", () => {
+  return UnitSDK.theme;
+});
+//# sourceMappingURL=UnitSdkManager.js.map

package/lib/commonjs/unitSdkManager/UnitSdkManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UNEnvironment","UNIT_SCRIPT_URL","sandbox","production","UnitSDK","env","theme","fetchUnitScript","e","console","log"],"sources":["UnitSdkManager.ts"],"sourcesContent":["import { fetchUnitScript } from './UnitSdk.api';\n\nexport enum UNEnvironment {\n  sandbox = 'sandbox',\n  production = 'production'\n}\n\nexport const UNIT_SCRIPT_URL = {\n  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',\n  [UNEnvironment.production]: 'https://ui.unit.co/components.js'\n};\nexport class UnitSDK {\n  protected static env?: UNEnvironment;\n  protected static theme?: string;\n\n  public static init = async (env: UNEnvironment, theme: string) => {\n    try {\n      this.env = env;\n      this.theme = theme;\n      await fetchUnitScript();\n    } catch (e) {\n      console.log(e);\n    }\n  };\n\n  public static getEnv = () => {\n    return this.env;\n  };\n\n  public static getTheme = () => {\n    return this.theme;\n  };\n}\n"],"mappings":";;;;;;;AAAA;;;;IAEYA,a;;;WAAAA,a;EAAAA,a;EAAAA,a;GAAAA,a,6BAAAA,a;;AAKL,MAAMC,eAAe,GAAG;EAC7B,CAACD,aAAa,CAACE,OAAf,GAAyB,oCADI;EAE7B,CAACF,aAAa,CAACG,UAAf,GAA4B;AAFC,CAAxB;;;AAIA,MAAMC,OAAN,CAAc;;;;gBAARA,O;;gBAAAA,O;;gBAAAA,O,UAIU,OAAOC,GAAP,EAA2BC,KAA3B,KAA6C;EAChE,IAAI;IALKF,OAMP,CAAKC,GAAL,GAAWA,GAAX;IANOD,OAOP,CAAKE,KAAL,GAAaA,KAAb;IACA,MAAM,IAAAC,wBAAA,GAAN;EACD,CAJD,CAIE,OAAOC,CAAP,EAAU;IACVC,OAAO,CAACC,GAAR,CAAYF,CAAZ;EACD;AACF,C;;gBAZUJ,O,YAcY,MAAM;EAC3B,OAfSA,OAeF,CAAKC,GAAZ;AACD,C;;gBAhBUD,O,cAkBc,MAAM;EAC7B,OAnBSA,OAmBF,CAAKE,KAAZ;AACD,C"}

package/lib/commonjs/webComponent/WebComponent.js

@@ -7,15 +7,21 @@ exports.WebComponentType = exports.WebComponent = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactNative = require("react-native");
-
 var _reactNativeWebview = require("react-native-webview");
 
-var _EventBus = _interopRequireWildcard(require("../helpers/EventBus"));
+var _EventBus = _interopRequireDefault(require("../helpers/EventBus"));
+
+var _html = _interopRequireWildcard(require("./html"));
+
+var _unitMessages = require("../messages/webMessages/unitMessages");
+
+var _listenerToBus = require("../hooks/listenerToBus");
 
-var _html = _interopRequireDefault(require("./html"));
+var _bodyHtml = require("../scripts/html/bodyHtml");
 
-var _unitMessages = require("./webMessages/unitMessages");
+var _UnitSdk = require("../unitSdkManager/UnitSdk.api");
+
+var _nativeMessages = require("../messages/nativeMessages");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,30 +34,42 @@ exports.WebComponentType = WebComponentType;
 
 (function (WebComponentType) {
   WebComponentType["card"] = "unit-elements-card";
+  WebComponentType["bookPayment"] = "unit-elements-book-payment";
+  WebComponentType["activity"] = "unit-elements-activity";
   WebComponentType["slot"] = "unit-elements-sdk-slot";
 })(WebComponentType || (exports.WebComponentType = WebComponentType = {}));
 
-const WebComponent = /*#__PURE__*/_react.default.forwardRef((props, webRef) => {
+const WebComponent = /*#__PURE__*/_react.default.forwardRef(function WebComponent(props, webRef) {
+  const [unitScript, setUnitScript] = (0, _react.useState)(_UnitSdk.globalUnitScript);
   const [sourceHtml, setSourceHtml] = (0, _react.useState)(null);
 
-  const windowWidth = _reactNative.Dimensions.get('window').width;
+  const listenerAction = data => {
+    setUnitScript(data.unitScript);
+  };
 
+  (0, _listenerToBus.useListenerToBus)([{
+    busEventKey: _nativeMessages.NativeMessage.IS_SCRIPT_FETCHED,
+    action: listenerAction
+  }]);
   (0, _react.useEffect)(() => {
-    const component = props.type.valueOf();
+    if (!unitScript) {
+      (0, _UnitSdk.fetchUnitScript)();
+      return;
+    }
 
-    let newHtml = _html.default.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`);
+    let newHtml = _html.default.replace(_html.HTML_PLACEHOLDER.BODY, (0, _bodyHtml.getHtmlBody)(props.type.valueOf(), props.params, props.presentationMode));
 
-    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '');
+    newHtml = newHtml.replace(_html.HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     setSourceHtml(newHtml);
-  }, [props.params]);
+  }, [props.params, unitScript]);
 
   const onMessage = e => {
     const message = JSON.parse(e.nativeEvent.data);
 
     if (message.type == _unitMessages.UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
-      _EventBus.default.Instance.event(_EventBus.BusEvent.REQUEST_REFRESH, message.details);
+      _EventBus.default.Instance.event(_unitMessages.UnitMessage.UNIT_REQUEST_REFRESH, message.details);
     } else {
-      props.onMessage(message);
+      props.onMessage && props.onMessage(message);
     }
   };
 
@@ -59,10 +77,12 @@ const WebComponent = /*#__PURE__*/_react.default.forwardRef((props, webRef) => {
   return /*#__PURE__*/_react.default.createElement(_reactNativeWebview.WebView, {
     ref: webRef,
     cacheEnabled: false,
-    scrollEnabled: false,
+    scrollEnabled: props.shouldEnableWebViewScroll,
     overScrollMode: "never",
+    injectedJavaScript: unitScript,
     style: {
-      width: windowWidth
+      width: props.width ?? '100%',
+      flex: 1
     },
     source: {
       html: sourceHtml

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

@@ -1 +1 @@
-{"version":3,"names":["WebComponentType","WebComponent","React","forwardRef","props","webRef","sourceHtml","setSourceHtml","useState","windowWidth","Dimensions","get","width","useEffect","component","type","valueOf","newHtml","html","replace","params","script","onMessage","e","message","JSON","parse","nativeEvent","data","UnitMessage","UNIT_REQUEST_REFRESH","details","EventBus","Instance","event","BusEvent","REQUEST_REFRESH"],"sources":["WebComponent.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  WebView,\n  WebViewMessageEvent\n} from 'react-native-webview'\nimport EventBus, { BusEvent } from '../helpers/EventBus';\n\nimport html from './html';\nimport type { CardEvent, CardMessage } from './webMessages/cardMessage';\nimport type { PageEvent, PageMessage } from './webMessages/pageMessage';\nimport { RequestRefreshEvent, UnitEvent, UnitMessage } from './webMessages/unitMessages';\n\nexport type WebViewMessageType =\n  | PageMessage\n  | CardMessage\n  | UnitMessage\n\ntype WebViewEvent =\n  | PageEvent\n  | UnitEvent\n  | CardEvent\n\nexport interface WebViewMessage {\n  type: WebViewMessageType,\n  details?: WebViewEvent\n}\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  params?: string;\n  onMessage: (message: WebViewMessage) => void;\n  script?: string;\n}\n\nexport enum WebComponentType {\n  card = 'unit-elements-card',\n  slot = 'unit-elements-sdk-slot'\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>((props, webRef) => {\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null)\n\n  const windowWidth = Dimensions.get('window').width;\n\n  useEffect(() => {\n    const component: string = props.type.valueOf()\n    let newHtml = html.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`)\n    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '')\n    setSourceHtml(newHtml)\n  }, [props.params])\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage\n\n    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {\n      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details as RequestRefreshEvent)\n    } else {\n      props.onMessage(message)\n    }\n  }\n\n  if (!sourceHtml) return null\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={false}\n      overScrollMode=\"never\"\n      style={{ width: windowWidth }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  )\n})\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AAEA;;AAGA;;;;;;;;IAwBYA,gB;;;WAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,gCAAAA,gB;;AAKL,MAAMC,YAAY,gBAAGC,cAAA,CAAMC,UAAN,CAA6C,CAACC,KAAD,EAAQC,MAAR,KAAmB;EAC1F,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAwB,IAAxB,CAApC;;EAEA,MAAMC,WAAW,GAAGC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,KAA7C;;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,SAAiB,GAAGV,KAAK,CAACW,IAAN,CAAWC,OAAX,EAA1B;;IACA,IAAIC,OAAO,GAAGC,aAAA,CAAKC,OAAL,CAAa,aAAb,EAA6B,IAAGL,SAAU,IAAGV,KAAK,CAACgB,MAAN,IAAgB,EAAG,OAAMN,SAAU,GAAhF,CAAd;;IACAG,OAAO,GAAGA,OAAO,CAACE,OAAR,CAAgB,sBAAhB,EAAwCf,KAAK,CAACiB,MAAN,IAAgB,EAAxD,CAAV;IACAd,aAAa,CAACU,OAAD,CAAb;EACD,CALD,EAKG,CAACb,KAAK,CAACgB,MAAP,CALH;;EAOA,MAAME,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAcC,IAAzB,CAAhB;;IAEA,IAAIJ,OAAO,CAACT,IAAR,IAAgBc,yBAAA,CAAYC,oBAA5B,IAAoDN,OAAO,CAACO,OAAhE,EAAyE;MACvEC,iBAAA,CAASC,QAAT,CAAkBC,KAAlB,CAAwBC,kBAAA,CAASC,eAAjC,EAAkDZ,OAAO,CAACO,OAA1D;IACD,CAFD,MAEO;MACL3B,KAAK,CAACkB,SAAN,CAAgBE,OAAhB;IACD;EACF,CARD;;EAUA,IAAI,CAAClB,UAAL,EAAiB,OAAO,IAAP;EAEjB,oBACE,6BAAC,2BAAD;IACE,GAAG,EAAED,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAE,KAHjB;IAIE,cAAc,EAAC,OAJjB;IAKE,KAAK,EAAE;MAAEO,KAAK,EAAEH;IAAT,CALT;IAME,MAAM,EAAE;MAAES,IAAI,EAAEZ;IAAR,CANV;IAOE,SAAS,EAAEgB;EAPb,EADF;AAUD,CAlC2B,CAArB"}
+{"version":3,"names":["WebComponentType","WebComponent","React","forwardRef","props","webRef","unitScript","setUnitScript","useState","globalUnitScript","sourceHtml","setSourceHtml","listenerAction","data","useListenerToBus","busEventKey","NativeMessage","IS_SCRIPT_FETCHED","action","useEffect","fetchUnitScript","newHtml","html","replace","HTML_PLACEHOLDER","BODY","getHtmlBody","type","valueOf","params","presentationMode","SCRIPT_FROM_NATIVE","script","onMessage","e","message","JSON","parse","nativeEvent","UnitMessage","UNIT_REQUEST_REFRESH","details","EventBus","Instance","event","shouldEnableWebViewScroll","width","flex"],"sources":["WebComponent.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { WebView, WebViewMessageEvent } from 'react-native-webview';\nimport EventBus from '../helpers/EventBus';\nimport html, { HTML_PLACEHOLDER } from './html';\nimport { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../hooks/listenerToBus';\nimport type { WebViewMessage } from '../messages/webMessages';\nimport { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { NativeMessage } from '../messages/nativeMessages';\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  width?: number;\n  shouldEnableWebViewScroll?: boolean;\n}\n\nexport enum WebComponentType {\n  card = 'unit-elements-card',\n  bookPayment = 'unit-elements-book-payment',\n  activity = 'unit-elements-activity',\n  slot = 'unit-elements-sdk-slot'\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\n  const listenerAction = (data: { unitScript?: string }) => {\n    setUnitScript(data.unitScript);\n  };\n\n  useListenerToBus([{ busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: listenerAction }]);\n\n  useEffect(() => {\n    if (!unitScript) {\n      fetchUnitScript();\n      return;\n    }\n\n    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');\n    setSourceHtml(newHtml);\n\n  }, [props.params, unitScript]);\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;\n    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {\n      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);\n    } else {\n      props.onMessage && props.onMessage(message);\n    }\n  };\n\n  if (!sourceHtml) return null;\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={props.shouldEnableWebViewScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: props.width ?? '100%', flex: 1 }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  );\n});\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;IAYYA,gB;;;WAAAA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,gCAAAA,gB;;AAOL,MAAMC,YAAY,gBAAGC,cAAA,CAAMC,UAAN,CAA6C,SAASF,YAAT,CAAsBG,KAAtB,EAA6BC,MAA7B,EAAqC;EAC5G,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAA6BC,yBAA7B,CAApC;EACA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAH,eAAA,EAAwB,IAAxB,CAApC;;EAEA,MAAMI,cAAc,GAAIC,IAAD,IAAmC;IACxDN,aAAa,CAACM,IAAI,CAACP,UAAN,CAAb;EACD,CAFD;;EAIA,IAAAQ,+BAAA,EAAiB,CAAC;IAAEC,WAAW,EAAEC,6BAAA,CAAcC,iBAA7B;IAAgDC,MAAM,EAAEN;EAAxD,CAAD,CAAjB;EAEA,IAAAO,gBAAA,EAAU,MAAM;IACd,IAAI,CAACb,UAAL,EAAiB;MACf,IAAAc,wBAAA;MACA;IACD;;IAED,IAAIC,OAAO,GAAGC,aAAA,CAAKC,OAAL,CAAaC,sBAAA,CAAiBC,IAA9B,EAAoC,IAAAC,qBAAA,EAAYtB,KAAK,CAACuB,IAAN,CAAWC,OAAX,EAAZ,EAAkCxB,KAAK,CAACyB,MAAxC,EAAgDzB,KAAK,CAAC0B,gBAAtD,CAApC,CAAd;;IACAT,OAAO,GAAGA,OAAO,CAACE,OAAR,CAAgBC,sBAAA,CAAiBO,kBAAjC,EAAqD3B,KAAK,CAAC4B,MAAN,IAAgB,EAArE,CAAV;IACArB,aAAa,CAACU,OAAD,CAAb;EAED,CAVD,EAUG,CAACjB,KAAK,CAACyB,MAAP,EAAevB,UAAf,CAVH;;EAYA,MAAM2B,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAczB,IAAzB,CAAhB;;IACA,IAAIsB,OAAO,CAACR,IAAR,IAAgBY,yBAAA,CAAYC,oBAA5B,IAAoDL,OAAO,CAACM,OAAhE,EAAyE;MACvEC,iBAAA,CAASC,QAAT,CAAkBC,KAAlB,CAAwBL,yBAAA,CAAYC,oBAApC,EAA0DL,OAAO,CAACM,OAAlE;IACD,CAFD,MAEO;MACLrC,KAAK,CAAC6B,SAAN,IAAmB7B,KAAK,CAAC6B,SAAN,CAAgBE,OAAhB,CAAnB;IACD;EACF,CAPD;;EASA,IAAI,CAACzB,UAAL,EAAiB,OAAO,IAAP;EAEjB,oBACE,6BAAC,2BAAD;IACE,GAAG,EAAEL,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAED,KAAK,CAACyC,yBAHvB;IAIE,cAAc,EAAC,OAJjB;IAKE,kBAAkB,EAAEvC,UALtB;IAME,KAAK,EAAE;MAAEwC,KAAK,EAAE1C,KAAK,CAAC0C,KAAN,IAAe,MAAxB;MAAgCC,IAAI,EAAE;IAAtC,CANT;IAOE,MAAM,EAAE;MAAEzB,IAAI,EAAEZ;IAAR,CAPV;IAQE,SAAS,EAAEuB;EARb,EADF;AAWD,CA5C2B,CAArB"}

package/lib/commonjs/webComponent/html.js

@@ -3,7 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.HTML_PLACEHOLDER = void 0;
+
+var _bodyScript = require("../scripts/html/bodyScript");
+
+const HTML_PLACEHOLDER = {
+  SCRIPT_UNIT: '<SCRIPT_UNIT>',
+  BODY: '<BODY_HTML_CODE>',
+  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>'
+};
+exports.HTML_PLACEHOLDER = HTML_PLACEHOLDER;
 const htmlText = `
   <!DOCTYPE html>
   <html lang="en">
@@ -13,64 +22,32 @@ const htmlText = `
     <script>
       window.UnitMobileSDK = true
     </script>
-    <script src="https://unit-white-labeled-banking.netlify.app/client-events.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   </html>
 
-  <body style="margin: 0">
-    <COMPONENT>
+  <body style="margin: 0;">
+    ${HTML_PLACEHOLDER.BODY}
 
     <script>
-      const postMessageToSDK = (message) => {
-        if ('ReactNativeWebView' in window) {
-          const messageString = JSON.stringify(message)
-          window['ReactNativeWebView'].postMessage(messageString)
-        }
-      }
+      ${_bodyScript.POST_MESSAGE_TO_SDK}
 
-      const postHeight = () => {
-        setTimeout(() => {
-          const height = window.document.documentElement.getBoundingClientRect().height + 36
-          postMessageToSDK({ type: "pageHeight", details: { height } })
-        })
-      }
+      ${_bodyScript.POST_PAGE_HEIGHT}
 
-      window.addEventListener('DOMContentLoaded', e => {
-        postMessageToSDK({ type: "pageLoaded" })
-      });
+      ${_bodyScript.LISTENERS.isPageLoaded}
 
-      window.addEventListener("unitRequestRendering", (e) => {
-        postMessageToSDK({ type: "unitRequestRendering", details: { data: JSON.stringify(e.detail) }})
-      });
+      ${_bodyScript.LISTENERS.onLoad}
 
-      window.addEventListener("unitOnLoad", (e) => {
-        postHeight()
-        postMessageToSDK({ type: "unitOnLoad" })
-      });
+      ${_bodyScript.LISTENERS.requestRendering}
 
-      window.addEventListener("unitRequestCloseFlow", (e) => {
-        postMessageToSDK({ type: "unitRequestCloseFlow" })
-      });
+      ${_bodyScript.LISTENERS.requestOpenLink}
 
-      window.addEventListener("unitRequestOpenLink", (e) => {
-        postMessageToSDK({ type: "unitRequestOpenLink", details: e.detail })
-      });
+      ${_bodyScript.LISTENERS.requestCloseFlow}
 
-      window.addEventListener("unitCardStatusChanged", (e) => {
-        const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "cardStatusChanged", details:  { card: JSON.stringify(data.data) }})
-        }).catch((e) => {
-          console.log(e)
-        })
-      });
+      ${_bodyScript.LISTENERS.cardStatusChange}
 
-      const dispatchRenderingEvent = (details) => {
-        const event = new CustomEvent("unitRequestRendering",{ detail: JSON.parse(details) })
-        window.dispatchEvent(event)
-      }
+      ${_bodyScript.DISPTACH_RENDERING_EVENT}
 
-      <SCRIPT_FROM_NATIVE>
+      ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}
     </script>
   </body>
 `;

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

@@ -1 +1 @@
-{"version":3,"names":["htmlText"],"sources":["html.ts"],"sourcesContent":["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`\n\nexport default htmlText\n"],"mappings":";;;;;;AAAA,MAAMA,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArEA;eAuEeA,Q"}
+{"version":3,"names":["HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","htmlText","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","LISTENERS","isPageLoaded","onLoad","requestRendering","requestOpenLink","requestCloseFlow","cardStatusChange","DISPTACH_RENDERING_EVENT"],"sources":["html.ts"],"sourcesContent":["import { DISPTACH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT } 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};\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    </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    ${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.requestRendering}\n\n      ${LISTENERS.requestOpenLink}\n\n      ${LISTENERS.requestCloseFlow}\n\n      ${LISTENERS.cardStatusChange}\n\n      ${DISPTACH_RENDERING_EVENT}\n\n      ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}\n    </script>\n  </body>\n`;\n\nexport default htmlText;\n"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG;EAC9BC,WAAW,EAAE,eADiB;EAE9BC,IAAI,EAAE,kBAFwB;EAG9BC,kBAAkB,EAAE;AAHU,CAAzB;;AAMP,MAAMC,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,gBAAgB,CAACE,IAAK;AAC5B;AACA;AACA,QAAQG,+BAAoB;AAC5B;AACA,QAAQC,4BAAiB;AACzB;AACA,QAAQC,qBAAA,CAAUC,YAAa;AAC/B;AACA,QAAQD,qBAAA,CAAUE,MAAO;AACzB;AACA,QAAQF,qBAAA,CAAUG,gBAAiB;AACnC;AACA,QAAQH,qBAAA,CAAUI,eAAgB;AAClC;AACA,QAAQJ,qBAAA,CAAUK,gBAAiB;AACnC;AACA,QAAQL,qBAAA,CAAUM,gBAAiB;AACnC;AACA,QAAQC,oCAAyB;AACjC;AACA,QAAQd,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA,CArCA;eAuCeC,Q"}

package/lib/module/assets/images/index.js

@@ -0,0 +1,2 @@
+export { default as CloseIcon } from './close.png';
+//# sourceMappingURL=index.js.map

package/lib/module/assets/images/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","CloseIcon"],"sources":["index.ts"],"sourcesContent":["export { default as CloseIcon } from './close.png';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC"}

package/lib/module/components/UNActivityComponent/UNActivityComponent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { getActivityParams } from './UNActivityComponent.utils';
+export const UNActivityComponent = props => {
+  return /*#__PURE__*/React.createElement(WebComponent, {
+    type: WebComponentType.activity,
+    presentationMode: PresentationMode.Inherit,
+    params: getActivityParams(props),
+    shouldEnableWebViewScroll: false
+  });
+};
+//# sourceMappingURL=UNActivityComponent.js.map

package/lib/module/components/UNActivityComponent/UNActivityComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PresentationMode","WebComponent","WebComponentType","getActivityParams","UNActivityComponent","props","activity","Inherit"],"sources":["UNActivityComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { PresentationMode } from '../../scripts/html/bodyHtml';\nimport { WebComponent, WebComponentType } from '../../webComponent/WebComponent';\nimport { getActivityParams } from './UNActivityComponent.utils';\n\nexport interface UNActivityComponentProps {\n  accountId: string;\n  customerToken: string;\n  theme?: string;\n}\n\nexport const UNActivityComponent = (props: UNActivityComponentProps) => {\n  return (\n    <WebComponent\n      type={WebComponentType.activity}\n      presentationMode={PresentationMode.Inherit}\n      params={getActivityParams(props)}\n      shouldEnableWebViewScroll={false}\n    />\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,6BAAjC;AACA,SAASC,YAAT,EAAuBC,gBAAvB,QAA+C,iCAA/C;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AAQA,OAAO,MAAMC,mBAAmB,GAAIC,KAAD,IAAqC;EACtE,oBACE,oBAAC,YAAD;IACE,IAAI,EAAEH,gBAAgB,CAACI,QADzB;IAEE,gBAAgB,EAAEN,gBAAgB,CAACO,OAFrC;IAGE,MAAM,EAAEJ,iBAAiB,CAACE,KAAD,CAH3B;IAIE,yBAAyB,EAAE;EAJ7B,EADF;AAQD,CATM"}

package/lib/module/components/UNActivityComponent/UNActivityComponent.utils.js

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

package/lib/module/components/UNActivityComponent/UNActivityComponent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnitSDK","getActivityParams","props","accountId","customerToken","theme","getTheme"],"sources":["UNActivityComponent.utils.ts"],"sourcesContent":["import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';\nimport type { UNActivityComponentProps } from './UNActivityComponent';\n\nexport const getActivityParams = (props: UNActivityComponentProps) => {\n  return `\n    account-id=\"${props.accountId}\"\n    customer-token=\"${props.customerToken}\"\n    theme=\"${props.theme ?? UnitSDK.getTheme()}\"\n    style=\"height: 100%\"\n  `;\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,qCAAxB;AAGA,OAAO,MAAMC,iBAAiB,GAAIC,KAAD,IAAqC;EACpE,OAAQ;AACV,kBAAkBA,KAAK,CAACC,SAAU;AAClC,sBAAsBD,KAAK,CAACE,aAAc;AAC1C,aAAaF,KAAK,CAACG,KAAN,IAAeL,OAAO,CAACM,QAAR,EAAmB;AAC/C;AACA,GALE;AAMD,CAPM"}

package/lib/module/components/UNBookPaymentComponent/UNBookPaymentComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
+import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+export const UNBookPaymentComponent = props => {
+  const handleWebViewMessage = message => {
+    if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
+      const response = message.details;
+      props.onPaymentCreated(response.data);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(WebComponent, {
+    type: WebComponentType.bookPayment,
+    presentationMode: PresentationMode.Inherit,
+    params: getBookPaymentParams(props),
+    script: getBookPaymentScript(),
+    onMessage: message => handleWebViewMessage(message),
+    shouldEnableWebViewScroll: false
+  });
+};
+//# sourceMappingURL=UNBookPaymentComponent.js.map

package/lib/module/components/UNBookPaymentComponent/UNBookPaymentComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","WebComponent","WebComponentType","PresentationMode","getBookPaymentParams","getBookPaymentScript","BookPaymentMessage","UNBookPaymentComponent","props","handleWebViewMessage","message","type","PAYMENT_CREATED","onPaymentCreated","response","details","data","bookPayment","Inherit"],"sources":["UNBookPaymentComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { WebComponent, WebComponentType } from '../../webComponent/WebComponent';\nimport { PresentationMode } from '../../scripts/html/bodyHtml';\nimport { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';\nimport type { WebViewMessage } from '../../messages/webMessages';\nimport { BookPaymentEvent, BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';\nimport type { UNBookPaymentData } from '../../sharedTypes';\n\nexport interface UNBookPaymentComponentProps {\n  accountId: string;\n  customerToken: string;\n  isSameCustomer: boolean;\n  counterPartyAccountId: string;\n  counterPartyName: string;\n  theme?: string;\n  onPaymentCreated?: (data: UNBookPaymentData) => void;\n}\n\nexport const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {\n  const handleWebViewMessage = (message: WebViewMessage) => {\n    if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {\n      const response = message.details as BookPaymentEvent;\n      props.onPaymentCreated(response.data);\n    }\n  };\n\n  return (\n    <WebComponent\n      type={WebComponentType.bookPayment}\n      presentationMode={PresentationMode.Inherit}\n      params={getBookPaymentParams(props)}\n      script={getBookPaymentScript()}\n      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}\n      shouldEnableWebViewScroll={false}\n    />\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,YAAT,EAAuBC,gBAAvB,QAA+C,iCAA/C;AACA,SAASC,gBAAT,QAAiC,6BAAjC;AACA,SAASC,oBAAT,EAA+BC,oBAA/B,QAA2D,gCAA3D;AAEA,SAA2BC,kBAA3B,QAAqD,+CAArD;AAaA,OAAO,MAAMC,sBAAsB,GAAIC,KAAD,IAAwC;EAC5E,MAAMC,oBAAoB,GAAIC,OAAD,IAA6B;IACxD,IAAIA,OAAO,CAACC,IAAR,KAAiBL,kBAAkB,CAACM,eAApC,IAAuDJ,KAAK,CAACK,gBAAjE,EAAmF;MACjF,MAAMC,QAAQ,GAAGJ,OAAO,CAACK,OAAzB;MACAP,KAAK,CAACK,gBAAN,CAAuBC,QAAQ,CAACE,IAAhC;IACD;EACF,CALD;;EAOA,oBACE,oBAAC,YAAD;IACE,IAAI,EAAEd,gBAAgB,CAACe,WADzB;IAEE,gBAAgB,EAAEd,gBAAgB,CAACe,OAFrC;IAGE,MAAM,EAAEd,oBAAoB,CAACI,KAAD,CAH9B;IAIE,MAAM,EAAEH,oBAAoB,EAJ9B;IAKE,SAAS,EAAGK,OAAD,IAA6BD,oBAAoB,CAACC,OAAD,CAL9D;IAME,yBAAyB,EAAE;EAN7B,EADF;AAUD,CAlBM"}

package/lib/module/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.js

@@ -0,0 +1,26 @@
+import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+export const getBookPaymentParams = props => {
+  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)
+        })
+    });
+  `;
+};
+//# sourceMappingURL=UNBookPaymentComponent.utils.js.map

package/lib/module/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BookPaymentMessage","UnitSDK","getBookPaymentParams","props","accountId","customerToken","isSameCustomer","counterPartyAccountId","counterPartyName","theme","getTheme","getBookPaymentScript","PAYMENT_CREATED"],"sources":["UNBookPaymentComponent.utils.ts"],"sourcesContent":["import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';\n\nimport { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';\nimport { UnitSDK } from '../../unitSdkManager/UnitSdkManager';\n\nexport const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {\n  return `\n    account-id=\"${props.accountId}\"\n    customer-token=\"${props.customerToken}\"\n    is-same-customer=\"${props.isSameCustomer}\"\n    counterparty-account-id=\"${props.counterPartyAccountId}\"\n    counterparty-name=\"${props.counterPartyName}\"\n    theme=\"${props.theme ?? UnitSDK.getTheme()}\"\n    style=\"height: 100%\"\n  `;\n};\n\nexport const getBookPaymentScript = () => {\n  return `\n    window.addEventListener(\"${BookPaymentMessage.PAYMENT_CREATED}\", (e) => {\n      const response = e.detail\n        response.then((data) => {\n          postMessageToSDK({ type: \"${BookPaymentMessage.PAYMENT_CREATED}\", details:  { data: JSON.stringify(data.data) }})\n        }).catch((e) => {\n          console.log(e)\n        })\n    });\n  `;\n};\n"],"mappings":"AAEA,SAASA,kBAAT,QAAmC,+CAAnC;AACA,SAASC,OAAT,QAAwB,qCAAxB;AAEA,OAAO,MAAMC,oBAAoB,GAAIC,KAAD,IAAwC;EAC1E,OAAQ;AACV,kBAAkBA,KAAK,CAACC,SAAU;AAClC,sBAAsBD,KAAK,CAACE,aAAc;AAC1C,wBAAwBF,KAAK,CAACG,cAAe;AAC7C,+BAA+BH,KAAK,CAACI,qBAAsB;AAC3D,yBAAyBJ,KAAK,CAACK,gBAAiB;AAChD,aAAaL,KAAK,CAACM,KAAN,IAAeR,OAAO,CAACS,QAAR,EAAmB;AAC/C;AACA,GARE;AASD,CAVM;AAYP,OAAO,MAAMC,oBAAoB,GAAG,MAAM;EACxC,OAAQ;AACV,+BAA+BX,kBAAkB,CAACY,eAAgB;AAClE;AACA;AACA,sCAAsCZ,kBAAkB,CAACY,eAAgB;AACzE;AACA;AACA;AACA;AACA,GATE;AAUD,CAXM"}

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.js

@@ -0,0 +1,2 @@
+export const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;
+//# sourceMappingURL=UNBottomSheetComponent.constants.js.map

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BOTTOM_SHEET_MAX_PRECANTAGE_SIZE"],"sources":["UNBottomSheetComponent.constants.ts"],"sourcesContent":["export const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;\n"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,GAAG,GAAzC"}

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.js

@@ -0,0 +1,131 @@
+import React, { useEffect, useRef, useState } from 'react';
+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 { PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { CardMessage } from '../../messages/webMessages/cardMessage';
+import { useListenerToBus } from '../../hooks/listenerToBus';
+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 const UNBottomSheetComponent = () => {
+  const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
+  const [height, setHeight] = useState(0);
+  const [renderingRequest, setRenderingRequest] = useState(null);
+  const [shouldEnableWebViewScroll, setShouldEnableWebViewScroll] = useState(false);
+  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
+  const [newHeightMessage, setNewHeightMessage] = useState(null);
+  const isAppActive = useAppStateListener();
+  const styles = getStylesObject();
+  const webRef = useRef(null);
+
+  const listenerAction = data => {
+    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);
+    }
+  }, [isBottomSheetActive]);
+  useEffect(() => {
+    if (!waitForLoadingNewComponent && newHeightMessage) {
+      setWaitForLoadingNewComponent(false);
+      setNewHeight(newHeightMessage);
+    }
+  }, [waitForLoadingNewComponent, newHeightMessage]);
+  useListenerToBus([{
+    busEventKey: UnitMessage.UNIT_REQUEST_RENDERING,
+    action: listenerAction
+  }]);
+
+  const setNewHeight = message => {
+    if (renderingRequest) {
+      const nativePlace = JSON.parse(renderingRequest).nativePlace;
+
+      if (nativePlace == 'overFullScreen') {
+        const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);
+        setHeight(bottomSheetNewHeight);
+        setShouldEnableWebViewScroll(true);
+      } else {
+        setHeight(message.details.height);
+        setShouldEnableWebViewScroll(false);
+      }
+    }
+  };
+
+  const onWebMessage = message => {
+    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;
+
+        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.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;
+        Linking.openURL(href);
+        break;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: isBottomSheetActive ? undefined : 'none',
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(BottomSheet, {
+    isOpen: isBottomSheetActive,
+    height: height,
+    onClose: () => setIsBottomSheetActive(false),
+    onOpen: () => setIsBottomSheetActive(true)
+  }, isAppActive && /*#__PURE__*/React.createElement(WebComponent, {
+    ref: webRef,
+    type: WebComponentType.slot,
+    presentationMode: PresentationMode.CoverInjectedHeight,
+    script: getBottomSheetScript(),
+    onMessage: onWebMessage,
+    shouldEnableWebViewScroll: shouldEnableWebViewScroll
+  }))));
+};
+//# sourceMappingURL=UNBottomSheetComponent.js.map

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","WebComponent","WebComponentType","Dimensions","Linking","View","BottomSheet","EventBus","PageMessage","UnitMessage","CardMessage","useListenerToBus","getBottomSheetScript","handleHtmlFullHeight","renderingBottomSheetRequest","resetHtml","getStylesObject","PresentationMode","useAppStateListener","UNBottomSheetComponent","isBottomSheetActive","setIsBottomSheetActive","height","setHeight","renderingRequest","setRenderingRequest","shouldEnableWebViewScroll","setShouldEnableWebViewScroll","waitForLoadingNewComponent","setWaitForLoadingNewComponent","newHeightMessage","setNewHeightMessage","isAppActive","styles","webRef","listenerAction","data","current","setNewHeight","busEventKey","UNIT_REQUEST_RENDERING","action","message","nativePlace","JSON","parse","bottomSheetNewHeight","get","details","onWebMessage","type","PAGE_HEIGHT","setTimeout","CARD_STATUS_CHANGED","Instance","event","card","UNIT_REQUEST_CLOSE_FLOW","UNIT_REQUEST_OPEN_LINK","href","openURL","undefined","container","slot","CoverInjectedHeight"],"sources":["UNBottomSheetComponent.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport type WebView from 'react-native-webview';\nimport { WebComponent, WebComponentType } from '../../webComponent/WebComponent';\nimport { Dimensions, Linking, View } from 'react-native';\nimport BottomSheet from '../../helpers/BottomSheet/BottomSheet';\nimport EventBus from '../../helpers/EventBus';\nimport { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';\nimport { RequestOpenLinkEvent, RequestRenderingData, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';\nimport { CardMessage, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';\nimport { useListenerToBus } from '../../hooks/listenerToBus';\nimport type { WebViewMessage } from '../../messages/webMessages';\nimport { getBottomSheetScript, handleHtmlFullHeight, renderingBottomSheetRequest, resetHtml } from './UNBottomSheetComponent.utils';\nimport { getStylesObject } from './UNBottomSheetComponent.styles';\nimport { PresentationMode } from '../../scripts/html/bodyHtml';\nimport { useAppStateListener } from '../../hooks/useAppStateListener';\n\nexport const UNBottomSheetComponent = () => {\n  const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);\n  const [height, setHeight] = useState(0);\n\n  const [renderingRequest, setRenderingRequest] = useState<string | null>(null);\n  const [shouldEnableWebViewScroll, setShouldEnableWebViewScroll] = useState(false);\n\n  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);\n  const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);\n\n  const isAppActive = useAppStateListener();\n\n  const styles = getStylesObject();\n\n  const webRef = useRef<WebView>(null);\n\n  const listenerAction = (data: string) => {\n    setRenderingRequest(data);\n    setIsBottomSheetActive(true);\n  };\n\n  useEffect(() => {\n    if (!isAppActive) {\n      setIsBottomSheetActive(false);\n    }\n  }, [isAppActive]);\n\n  useEffect(() => {\n    if (!webRef.current) return;\n    if (renderingRequest) {\n      renderingBottomSheetRequest(webRef.current, renderingRequest);\n    }\n  }, [webRef.current, renderingRequest]);\n\n  useEffect(() => {\n    if (!isBottomSheetActive) {\n      webRef.current && resetHtml(webRef.current);\n      setHeight(0);\n      setRenderingRequest(null);\n    }\n  }, [isBottomSheetActive]);\n\n  useEffect(() => {\n    if (!waitForLoadingNewComponent && newHeightMessage) {\n      setWaitForLoadingNewComponent(false);\n      setNewHeight(newHeightMessage);\n    }\n  }, [waitForLoadingNewComponent, newHeightMessage]);\n\n  useListenerToBus([{ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: listenerAction }]);\n\n  const setNewHeight = (message: WebViewMessage) => {\n    if (renderingRequest) {\n      const nativePlace = (JSON.parse(renderingRequest) as RequestRenderingData).nativePlace;\n      if (nativePlace == 'overFullScreen') {\n        const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);\n        setHeight(bottomSheetNewHeight);\n        setShouldEnableWebViewScroll(true);\n      } else {\n        setHeight((message.details as HeightEvent).height);\n        setShouldEnableWebViewScroll(false);\n      }\n    }\n  };\n\n  const onWebMessage = (message: WebViewMessage) => {\n    switch (message.type) {\n      case PageMessage.PAGE_HEIGHT:\n        renderingRequest && setNewHeightMessage(message);\n        break;\n      case UnitMessage.UNIT_REQUEST_RENDERING:\n        // eslint-disable-next-line no-case-declarations\n        const { data } = (message.details as RequestRenderingEvent);\n        if (data != renderingRequest) {\n          setHeight(0);\n          setRenderingRequest(data);\n          setWaitForLoadingNewComponent(true);\n          setTimeout(() => setWaitForLoadingNewComponent(false), 400);\n        }\n        break;\n      case CardMessage.CARD_STATUS_CHANGED:\n        EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);\n        break;\n      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:\n        setIsBottomSheetActive(false);\n        break;\n      case UnitMessage.UNIT_REQUEST_OPEN_LINK:\n        // eslint-disable-next-line no-case-declarations\n        const { href } = (message.details as RequestOpenLinkEvent);\n        Linking.openURL(href);\n        break;\n    }\n  };\n\n  return (\n    <>\n      <View\n        pointerEvents={isBottomSheetActive ? undefined : 'none'}\n        style={styles.container}\n      >\n        <BottomSheet\n          isOpen={isBottomSheetActive}\n          height={height}\n          onClose={() => setIsBottomSheetActive(false)}\n          onOpen={() => setIsBottomSheetActive(true)}\n        >\n          { isAppActive && (\n            <WebComponent\n              ref={webRef}\n              type={WebComponentType.slot}\n              presentationMode={PresentationMode.CoverInjectedHeight}\n              script={getBottomSheetScript()}\n              onMessage={onWebMessage}\n              shouldEnableWebViewScroll={shouldEnableWebViewScroll}\n            />)}\n        </BottomSheet>\n      </View>\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AAEA,SAASC,YAAT,EAAuBC,gBAAvB,QAA+C,iCAA/C;AACA,SAASC,UAAT,EAAqBC,OAArB,EAA8BC,IAA9B,QAA0C,cAA1C;AACA,OAAOC,WAAP,MAAwB,uCAAxB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,SAAsBC,WAAtB,QAAyC,wCAAzC;AACA,SAA4EC,WAA5E,QAA+F,yCAA/F;AACA,SAASC,WAAT,QAAoD,wCAApD;AACA,SAASC,gBAAT,QAAiC,2BAAjC;AAEA,SAASC,oBAAT,EAA+BC,oBAA/B,EAAqDC,2BAArD,EAAkFC,SAAlF,QAAmG,gCAAnG;AACA,SAASC,eAAT,QAAgC,iCAAhC;AACA,SAASC,gBAAT,QAAiC,6BAAjC;AACA,SAASC,mBAAT,QAAoC,iCAApC;AAEA,OAAO,MAAMC,sBAAsB,GAAG,MAAM;EAC1C,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgDrB,QAAQ,CAAC,KAAD,CAA9D;EACA,MAAM,CAACsB,MAAD,EAASC,SAAT,IAAsBvB,QAAQ,CAAC,CAAD,CAApC;EAEA,MAAM,CAACwB,gBAAD,EAAmBC,mBAAnB,IAA0CzB,QAAQ,CAAgB,IAAhB,CAAxD;EACA,MAAM,CAAC0B,yBAAD,EAA4BC,4BAA5B,IAA4D3B,QAAQ,CAAC,KAAD,CAA1E;EAEA,MAAM,CAAC4B,0BAAD,EAA6BC,6BAA7B,IAA8D7B,QAAQ,CAAC,KAAD,CAA5E;EACA,MAAM,CAAC8B,gBAAD,EAAmBC,mBAAnB,IAA0C/B,QAAQ,CAAwB,IAAxB,CAAxD;EAEA,MAAMgC,WAAW,GAAGd,mBAAmB,EAAvC;EAEA,MAAMe,MAAM,GAAGjB,eAAe,EAA9B;EAEA,MAAMkB,MAAM,GAAGnC,MAAM,CAAU,IAAV,CAArB;;EAEA,MAAMoC,cAAc,GAAIC,IAAD,IAAkB;IACvCX,mBAAmB,CAACW,IAAD,CAAnB;IACAf,sBAAsB,CAAC,IAAD,CAAtB;EACD,CAHD;;EAKAvB,SAAS,CAAC,MAAM;IACd,IAAI,CAACkC,WAAL,EAAkB;MAChBX,sBAAsB,CAAC,KAAD,CAAtB;IACD;EACF,CAJQ,EAIN,CAACW,WAAD,CAJM,CAAT;EAMAlC,SAAS,CAAC,MAAM;IACd,IAAI,CAACoC,MAAM,CAACG,OAAZ,EAAqB;;IACrB,IAAIb,gBAAJ,EAAsB;MACpBV,2BAA2B,CAACoB,MAAM,CAACG,OAAR,EAAiBb,gBAAjB,CAA3B;IACD;EACF,CALQ,EAKN,CAACU,MAAM,CAACG,OAAR,EAAiBb,gBAAjB,CALM,CAAT;EAOA1B,SAAS,CAAC,MAAM;IACd,IAAI,CAACsB,mBAAL,EAA0B;MACxBc,MAAM,CAACG,OAAP,IAAkBtB,SAAS,CAACmB,MAAM,CAACG,OAAR,CAA3B;MACAd,SAAS,CAAC,CAAD,CAAT;MACAE,mBAAmB,CAAC,IAAD,CAAnB;IACD;EACF,CANQ,EAMN,CAACL,mBAAD,CANM,CAAT;EAQAtB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC8B,0BAAD,IAA+BE,gBAAnC,EAAqD;MACnDD,6BAA6B,CAAC,KAAD,CAA7B;MACAS,YAAY,CAACR,gBAAD,CAAZ;IACD;EACF,CALQ,EAKN,CAACF,0BAAD,EAA6BE,gBAA7B,CALM,CAAT;EAOAnB,gBAAgB,CAAC,CAAC;IAAE4B,WAAW,EAAE9B,WAAW,CAAC+B,sBAA3B;IAAmDC,MAAM,EAAEN;EAA3D,CAAD,CAAD,CAAhB;;EAEA,MAAMG,YAAY,GAAII,OAAD,IAA6B;IAChD,IAAIlB,gBAAJ,EAAsB;MACpB,MAAMmB,WAAW,GAAIC,IAAI,CAACC,KAAL,CAAWrB,gBAAX,CAAD,CAAuDmB,WAA3E;;MACA,IAAIA,WAAW,IAAI,gBAAnB,EAAqC;QACnC,MAAMG,oBAAoB,GAAGjC,oBAAoB,CAACqB,MAAM,CAACG,OAAR,EAAiBlC,UAAU,CAAC4C,GAAX,CAAe,QAAf,EAAyBzB,MAA1C,CAAjD;QACAC,SAAS,CAACuB,oBAAD,CAAT;QACAnB,4BAA4B,CAAC,IAAD,CAA5B;MACD,CAJD,MAIO;QACLJ,SAAS,CAAEmB,OAAO,CAACM,OAAT,CAAiC1B,MAAlC,CAAT;QACAK,4BAA4B,CAAC,KAAD,CAA5B;MACD;IACF;EACF,CAZD;;EAcA,MAAMsB,YAAY,GAAIP,OAAD,IAA6B;IAChD,QAAQA,OAAO,CAACQ,IAAhB;MACE,KAAK1C,WAAW,CAAC2C,WAAjB;QACE3B,gBAAgB,IAAIO,mBAAmB,CAACW,OAAD,CAAvC;QACA;;MACF,KAAKjC,WAAW,CAAC+B,sBAAjB;QACE;QACA,MAAM;UAAEJ;QAAF,IAAYM,OAAO,CAACM,OAA1B;;QACA,IAAIZ,IAAI,IAAIZ,gBAAZ,EAA8B;UAC5BD,SAAS,CAAC,CAAD,CAAT;UACAE,mBAAmB,CAACW,IAAD,CAAnB;UACAP,6BAA6B,CAAC,IAAD,CAA7B;UACAuB,UAAU,CAAC,MAAMvB,6BAA6B,CAAC,KAAD,CAApC,EAA6C,GAA7C,CAAV;QACD;;QACD;;MACF,KAAKnB,WAAW,CAAC2C,mBAAjB;QACE9C,QAAQ,CAAC+C,QAAT,CAAkBC,KAAlB,CAAwB7C,WAAW,CAAC2C,mBAApC,EAA0DX,OAAO,CAACM,OAAT,CAA4CQ,IAArG;QACA;;MACF,KAAK/C,WAAW,CAACgD,uBAAjB;QACEpC,sBAAsB,CAAC,KAAD,CAAtB;QACA;;MACF,KAAKZ,WAAW,CAACiD,sBAAjB;QACE;QACA,MAAM;UAAEC;QAAF,IAAYjB,OAAO,CAACM,OAA1B;QACA5C,OAAO,CAACwD,OAAR,CAAgBD,IAAhB;QACA;IAxBJ;EA0BD,CA3BD;;EA6BA,oBACE,uDACE,oBAAC,IAAD;IACE,aAAa,EAAEvC,mBAAmB,GAAGyC,SAAH,GAAe,MADnD;IAEE,KAAK,EAAE5B,MAAM,CAAC6B;EAFhB,gBAIE,oBAAC,WAAD;IACE,MAAM,EAAE1C,mBADV;IAEE,MAAM,EAAEE,MAFV;IAGE,OAAO,EAAE,MAAMD,sBAAsB,CAAC,KAAD,CAHvC;IAIE,MAAM,EAAE,MAAMA,sBAAsB,CAAC,IAAD;EAJtC,GAMIW,WAAW,iBACX,oBAAC,YAAD;IACE,GAAG,EAAEE,MADP;IAEE,IAAI,EAAEhC,gBAAgB,CAAC6D,IAFzB;IAGE,gBAAgB,EAAE9C,gBAAgB,CAAC+C,mBAHrC;IAIE,MAAM,EAAEpD,oBAAoB,EAJ9B;IAKE,SAAS,EAAEqC,YALb;IAME,yBAAyB,EAAEvB;EAN7B,EAPJ,CAJF,CADF,CADF;AAyBD,CAvHM"}

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.styles.js

@@ -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
+    }
+  });
+};
+//# sourceMappingURL=UNBottomSheetComponent.styles.js.map

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","getStylesObject","create","container","position","top","bottom","left","right"],"sources":["UNBottomSheetComponent.styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const getStylesObject = () => {\n  return StyleSheet.create({\n    container: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0\n    }\n  });\n};\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAEA,OAAO,MAAMC,eAAe,GAAG,MAAM;EACnC,OAAOD,UAAU,CAACE,MAAX,CAAkB;IACvBC,SAAS,EAAE;MACTC,QAAQ,EAAE,UADD;MAETC,GAAG,EAAE,CAFI;MAGTC,MAAM,EAAE,CAHC;MAITC,IAAI,EAAE,CAJG;MAKTC,KAAK,EAAE;IALE;EADY,CAAlB,CAAP;AASD,CAVM"}

package/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.js

@@ -0,0 +1,29 @@
+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, renderingRequest) => {
+  currentWebView === null || currentWebView === void 0 ? void 0 : currentWebView.injectJavaScript(`
+    document.activeElement && document.activeElement.blur();
+    dispatchRenderingEvent('${renderingRequest}');
+  `);
+};
+export const resetHtml = currentWebView => {
+  currentWebView === null || currentWebView === void 0 ? void 0 : currentWebView.injectJavaScript(`
+    document.activeElement && document.activeElement.blur();
+    document.getElementById('webViewContainer').style.height = null;
+  `);
+};
+export const handleHtmlFullHeight = (currentWebView, windowHeight) => {
+  const bottomSheetHeight = windowHeight * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE;
+  currentWebView && (currentWebView === null || currentWebView === void 0 ? void 0 : currentWebView.injectJavaScript(`
+    document.getElementById('webViewContainer').style.height = '${bottomSheetHeight}px';
+  `));
+  return bottomSheetHeight;
+};
+//# sourceMappingURL=UNBottomSheetComponent.utils.js.map