react-native-unit-components 0.1.0 → 1.0.1

package/lib/module/webComponent/WebComponent.js

@@ -1,44 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
-import { Dimensions } from 'react-native';
 import { WebView } from 'react-native-webview';
-import EventBus, { BusEvent } from '../helpers/EventBus';
-import html from './html';
-import { UnitMessage } from './webMessages/unitMessages';
+import EventBus from '../helpers/EventBus';
+import html, { HTML_PLACEHOLDER } from './html';
+import { UnitMessage } from '../messages/webMessages/unitMessages';
+import { useListenerToBus } from '../hooks/listenerToBus';
+import { getHtmlBody } from '../scripts/html/bodyHtml';
+import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
+import { NativeMessage } from '../messages/nativeMessages';
 export let 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 || (WebComponentType = {}));
 
-export const WebComponent = /*#__PURE__*/React.forwardRef((props, webRef) => {
+export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(props, webRef) {
+  const [unitScript, setUnitScript] = useState(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState(null);
-  const windowWidth = Dimensions.get('window').width;
+  const width = props.width ?? '100%';
+
+  const listenerAction = data => {
+    setUnitScript(data.unitScript);
+  };
+
+  useListenerToBus([{
+    busEventKey: NativeMessage.IS_SCRIPT_FETCHED,
+    action: listenerAction
+  }]);
   useEffect(() => {
-    const component = props.type.valueOf();
-    let newHtml = html.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`);
-    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '');
+    if (!unitScript) {
+      fetchUnitScript();
+      return;
+    }
+
+    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));
+    newHtml = newHtml.replace(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 == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
-      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details);
+      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details);
     } else {
-      props.onMessage(message);
+      props.onMessage && props.onMessage(message);
     }
   };
 
   if (!sourceHtml) return null;
+
+  const _onScroll = event => {
+    if (props.handleScroll) {
+      props.handleScroll(event);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React.createElement(WebView, {
     ref: webRef,
     cacheEnabled: false,
-    scrollEnabled: false,
+    scrollEnabled: props.isScrollable,
+    onScroll: _onScroll,
     overScrollMode: "never",
+    injectedJavaScript: unitScript,
     style: {
-      width: windowWidth
+      width: width,
+      flex: 1
     },
     source: {
       html: sourceHtml

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Dimensions","WebView","EventBus","BusEvent","html","UnitMessage","WebComponentType","WebComponent","forwardRef","props","webRef","sourceHtml","setSourceHtml","windowWidth","get","width","component","type","valueOf","newHtml","replace","params","script","onMessage","e","message","JSON","parse","nativeEvent","data","UNIT_REQUEST_REFRESH","details","Instance","event","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,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SACEC,OADF,QAGO,sBAHP;AAIA,OAAOC,QAAP,IAAmBC,QAAnB,QAAmC,qBAAnC;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AAGA,SAAyCC,WAAzC,QAA4D,4BAA5D;AAwBA,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAKZ,OAAO,MAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAN,CAA6C,CAACC,KAAD,EAAQC,MAAR,KAAmB;EAC1F,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8Bb,QAAQ,CAAgB,IAAhB,CAA5C;EAEA,MAAMc,WAAW,GAAGb,UAAU,CAACc,GAAX,CAAe,QAAf,EAAyBC,KAA7C;EAEAjB,SAAS,CAAC,MAAM;IACd,MAAMkB,SAAiB,GAAGP,KAAK,CAACQ,IAAN,CAAWC,OAAX,EAA1B;IACA,IAAIC,OAAO,GAAGf,IAAI,CAACgB,OAAL,CAAa,aAAb,EAA6B,IAAGJ,SAAU,IAAGP,KAAK,CAACY,MAAN,IAAgB,EAAG,OAAML,SAAU,GAAhF,CAAd;IACAG,OAAO,GAAGA,OAAO,CAACC,OAAR,CAAgB,sBAAhB,EAAwCX,KAAK,CAACa,MAAN,IAAgB,EAAxD,CAAV;IACAV,aAAa,CAACO,OAAD,CAAb;EACD,CALQ,EAKN,CAACV,KAAK,CAACY,MAAP,CALM,CAAT;;EAOA,MAAME,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAcC,IAAzB,CAAhB;;IAEA,IAAIJ,OAAO,CAACR,IAAR,IAAgBZ,WAAW,CAACyB,oBAA5B,IAAoDL,OAAO,CAACM,OAAhE,EAAyE;MACvE7B,QAAQ,CAAC8B,QAAT,CAAkBC,KAAlB,CAAwB9B,QAAQ,CAAC+B,eAAjC,EAAkDT,OAAO,CAACM,OAA1D;IACD,CAFD,MAEO;MACLtB,KAAK,CAACc,SAAN,CAAgBE,OAAhB;IACD;EACF,CARD;;EAUA,IAAI,CAACd,UAAL,EAAiB,OAAO,IAAP;EAEjB,oBACE,oBAAC,OAAD;IACE,GAAG,EAAED,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAE,KAHjB;IAIE,cAAc,EAAC,OAJjB;IAKE,KAAK,EAAE;MAAEK,KAAK,EAAEF;IAAT,CALT;IAME,MAAM,EAAE;MAAET,IAAI,EAAEO;IAAR,CANV;IAOE,SAAS,EAAEY;EAPb,EADF;AAUD,CAlC2B,CAArB"}
+{"version":3,"names":["React","useEffect","useState","WebView","EventBus","html","HTML_PLACEHOLDER","UnitMessage","useListenerToBus","getHtmlBody","fetchUnitScript","globalUnitScript","NativeMessage","WebComponentType","WebComponent","forwardRef","props","webRef","unitScript","setUnitScript","sourceHtml","setSourceHtml","width","listenerAction","data","busEventKey","IS_SCRIPT_FETCHED","action","newHtml","replace","BODY","type","valueOf","params","presentationMode","SCRIPT_FROM_NATIVE","script","onMessage","e","message","JSON","parse","nativeEvent","UNIT_REQUEST_REFRESH","details","Instance","event","_onScroll","handleScroll","isScrollable","flex"],"sources":["WebComponent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport 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 { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { NativeMessage } from '../messages/nativeMessages';\nimport type { WebViewMessage } from '../messages/webMessages';\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  isScrollable?: boolean,\n  handleScroll?: (event: any) => void,\n  width?: number;\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  const width = props.width ?? '100%';\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  const _onScroll = (event: any) => {\n    if (props.handleScroll) {\n      props.handleScroll(event);\n    }\n\n    return null;\n  };\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={props.isScrollable}\n      onScroll={_onScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: width, flex: 1 }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  );\n});\n"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,OAAT,QAA6C,sBAA7C;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,IAAP,IAAeC,gBAAf,QAAuC,QAAvC;AACA,SAA8BC,WAA9B,QAAiD,sCAAjD;AACA,SAASC,gBAAT,QAAiC,wBAAjC;AACA,SAASC,WAAT,QAA8C,0BAA9C;AACA,SAASC,eAAT,EAA0BC,gBAA1B,QAAkD,+BAAlD;AACA,SAASC,aAAT,QAA8B,4BAA9B;AAcA,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAOZ,OAAO,MAAMC,YAAY,gBAAGd,KAAK,CAACe,UAAN,CAA6C,SAASD,YAAT,CAAsBE,KAAtB,EAA6BC,MAA7B,EAAqC;EAC5G,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BjB,QAAQ,CAAqBS,gBAArB,CAA5C;EACA,MAAM,CAACS,UAAD,EAAaC,aAAb,IAA8BnB,QAAQ,CAAgB,IAAhB,CAA5C;EACA,MAAMoB,KAAK,GAAGN,KAAK,CAACM,KAAN,IAAe,MAA7B;;EAEA,MAAMC,cAAc,GAAIC,IAAD,IAAmC;IACxDL,aAAa,CAACK,IAAI,CAACN,UAAN,CAAb;EACD,CAFD;;EAIAV,gBAAgB,CAAC,CAAC;IAAEiB,WAAW,EAAEb,aAAa,CAACc,iBAA7B;IAAgDC,MAAM,EAAEJ;EAAxD,CAAD,CAAD,CAAhB;EAEAtB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,UAAL,EAAiB;MACfR,eAAe;MACf;IACD;;IAED,IAAIkB,OAAO,GAAGvB,IAAI,CAACwB,OAAL,CAAavB,gBAAgB,CAACwB,IAA9B,EAAoCrB,WAAW,CAACO,KAAK,CAACe,IAAN,CAAWC,OAAX,EAAD,EAAuBhB,KAAK,CAACiB,MAA7B,EAAqCjB,KAAK,CAACkB,gBAA3C,CAA/C,CAAd;IACAN,OAAO,GAAGA,OAAO,CAACC,OAAR,CAAgBvB,gBAAgB,CAAC6B,kBAAjC,EAAqDnB,KAAK,CAACoB,MAAN,IAAgB,EAArE,CAAV;IACAf,aAAa,CAACO,OAAD,CAAb;EAED,CAVQ,EAUN,CAACZ,KAAK,CAACiB,MAAP,EAAef,UAAf,CAVM,CAAT;;EAYA,MAAMmB,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAclB,IAAzB,CAAhB;;IACA,IAAIe,OAAO,CAACR,IAAR,IAAgBxB,WAAW,CAACoC,oBAA5B,IAAoDJ,OAAO,CAACK,OAAhE,EAAyE;MACvExC,QAAQ,CAACyC,QAAT,CAAkBC,KAAlB,CAAwBvC,WAAW,CAACoC,oBAApC,EAA0DJ,OAAO,CAACK,OAAlE;IACD,CAFD,MAEO;MACL5B,KAAK,CAACqB,SAAN,IAAmBrB,KAAK,CAACqB,SAAN,CAAgBE,OAAhB,CAAnB;IACD;EACF,CAPD;;EASA,IAAI,CAACnB,UAAL,EAAiB,OAAO,IAAP;;EAEjB,MAAM2B,SAAS,GAAID,KAAD,IAAgB;IAChC,IAAI9B,KAAK,CAACgC,YAAV,EAAwB;MACtBhC,KAAK,CAACgC,YAAN,CAAmBF,KAAnB;IACD;;IAED,OAAO,IAAP;EACD,CAND;;EAQA,oBACE,oBAAC,OAAD;IACE,GAAG,EAAE7B,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAED,KAAK,CAACiC,YAHvB;IAIE,QAAQ,EAAEF,SAJZ;IAKE,cAAc,EAAC,OALjB;IAME,kBAAkB,EAAE7B,UANtB;IAOE,KAAK,EAAE;MAAEI,KAAK,EAAEA,KAAT;MAAgB4B,IAAI,EAAE;IAAtB,CAPT;IAQE,MAAM,EAAE;MAAE7C,IAAI,EAAEe;IAAR,CARV;IASE,SAAS,EAAEiB;EATb,EADF;AAYD,CAtD2B,CAArB"}

package/lib/module/webComponent/html.js

@@ -1,3 +1,9 @@
+import { DISPTACH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT } from '../scripts/html/bodyScript';
+export const HTML_PLACEHOLDER = {
+  SCRIPT_UNIT: '<SCRIPT_UNIT>',
+  BODY: '<BODY_HTML_CODE>',
+  SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>'
+};
 const htmlText = `
   <!DOCTYPE html>
   <html lang="en">
@@ -7,64 +13,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)
-        }
-      }
+      ${POST_MESSAGE_TO_SDK}
 
-      const postHeight = () => {
-        setTimeout(() => {
-          const height = window.document.documentElement.getBoundingClientRect().height + 36
-          postMessageToSDK({ type: "pageHeight", details: { height } })
-        })
-      }
+      ${POST_PAGE_HEIGHT}
 
-      window.addEventListener('DOMContentLoaded', e => {
-        postMessageToSDK({ type: "pageLoaded" })
-      });
+      ${LISTENERS.isPageLoaded}
 
-      window.addEventListener("unitRequestRendering", (e) => {
-        postMessageToSDK({ type: "unitRequestRendering", details: { data: JSON.stringify(e.detail) }})
-      });
+      ${LISTENERS.onLoad}
 
-      window.addEventListener("unitOnLoad", (e) => {
-        postHeight()
-        postMessageToSDK({ type: "unitOnLoad" })
-      });
+      ${LISTENERS.requestRendering}
 
-      window.addEventListener("unitRequestCloseFlow", (e) => {
-        postMessageToSDK({ type: "unitRequestCloseFlow" })
-      });
+      ${LISTENERS.requestOpenLink}
 
-      window.addEventListener("unitRequestOpenLink", (e) => {
-        postMessageToSDK({ type: "unitRequestOpenLink", details: e.detail })
-      });
+      ${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)
-        })
-      });
+      ${LISTENERS.cardStatusChange}
 
-      const dispatchRenderingEvent = (details) => {
-        const event = new CustomEvent("unitRequestRendering",{ detail: JSON.parse(details) })
-        window.dispatchEvent(event)
-      }
+      ${DISPTACH_RENDERING_EVENT}
 
-      <SCRIPT_FROM_NATIVE>
+      ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}
     </script>
   </body>
 `;

package/lib/module/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;AAuEA,eAAeA,QAAf"}
+{"version":3,"names":["DISPTACH_RENDERING_EVENT","LISTENERS","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","htmlText","isPageLoaded","onLoad","requestRendering","requestOpenLink","requestCloseFlow","cardStatusChange"],"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,SAASA,wBAAT,EAAmCC,SAAnC,EAA8CC,mBAA9C,EAAmEC,gBAAnE,QAA2F,4BAA3F;AAEA,OAAO,MAAMC,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,QAAQJ,mBAAoB;AAC5B;AACA,QAAQC,gBAAiB;AACzB;AACA,QAAQF,SAAS,CAACQ,YAAa;AAC/B;AACA,QAAQR,SAAS,CAACS,MAAO;AACzB;AACA,QAAQT,SAAS,CAACU,gBAAiB;AACnC;AACA,QAAQV,SAAS,CAACW,eAAgB;AAClC;AACA,QAAQX,SAAS,CAACY,gBAAiB;AACnC;AACA,QAAQZ,SAAS,CAACa,gBAAiB;AACnC;AACA,QAAQd,wBAAyB;AACjC;AACA,QAAQI,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA,CArCA;AAuCA,eAAeC,QAAf"}

package/lib/typescript/assets/images/index.d.ts

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

package/lib/typescript/components/UNActivityComponent/UNActivityComponent.d.ts

@@ -0,0 +1,6 @@
+export interface UNActivityComponentProps {
+    accountId: string;
+    customerToken: string;
+    theme?: string;
+}
+export declare const UNActivityComponent: (props: UNActivityComponentProps) => JSX.Element;

package/lib/typescript/components/UNActivityComponent/UNActivityComponent.utils.d.ts

@@ -0,0 +1,2 @@
+import type { UNActivityComponentProps } from './UNActivityComponent';
+export declare const getActivityParams: (props: UNActivityComponentProps) => string;

package/lib/typescript/components/UNBookPaymentComponent/UNBookPaymentComponent.d.ts

@@ -0,0 +1,11 @@
+import type { UNBookPaymentData } from '../../sharedTypes';
+export interface UNBookPaymentComponentProps {
+    accountId: string;
+    customerToken: string;
+    isSameCustomer: boolean;
+    counterPartyAccountId: string;
+    counterPartyName: string;
+    theme?: string;
+    onPaymentCreated?: (data: UNBookPaymentData) => void;
+}
+export declare const UNBookPaymentComponent: (props: UNBookPaymentComponentProps) => JSX.Element;

package/lib/typescript/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.d.ts

@@ -0,0 +1,3 @@
+import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
+export declare const getBookPaymentParams: (props: UNBookPaymentComponentProps) => string;
+export declare const getBookPaymentScript: () => string;

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.d.ts

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

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.d.ts

@@ -0,0 +1,7 @@
+export declare enum ScrollState {
+    onTop = "onTop",
+    onlyWebView = "webViewScroll",
+    onlyBottomSheet = "onlyBottomSheet",
+    unScrollable = "unScrollable"
+}
+export declare const UNBottomSheetComponent: () => JSX.Element;

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const getStylesObject: () => {
+    container: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+};

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.d.ts

@@ -0,0 +1,5 @@
+import type WebView from 'react-native-webview';
+export declare const getBottomSheetScript: () => string;
+export declare const renderingBottomSheetRequest: (currentWebView: WebView, renderingRequest: string) => void;
+export declare const resetHtml: (currentWebView: WebView) => void;
+export declare const handleHtmlFullHeight: (currentWebView: WebView | null, windowHeight: number) => number;

package/lib/typescript/components/{Card/CardComponent.d.ts → UNCardComponent/UNCardComponent.d.ts}

@@ -1,6 +1,8 @@
+import type { UNCardData } from '../../sharedTypes';
 export interface UNCardComponentProps {
     cardId: string;
     customerToken: string;
-    onStatusChanged?: (card: any) => void;
+    theme?: string;
+    onStatusChanged?: (card: UNCardData) => void;
 }
 export declare const UNCardComponent: (props: UNCardComponentProps) => JSX.Element;

package/lib/typescript/components/UNCardComponent/UNCardComponent.utils.d.ts

@@ -0,0 +1,6 @@
+import type WebView from 'react-native-webview';
+import type { UNCardComponentProps } from './UNCardComponent';
+import { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+export declare const getCardParams: (props: UNCardComponentProps) => string;
+export declare const getCardScript: () => string;
+export declare const injectRefreshEventIfNeeded: (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => void;

package/lib/typescript/components/index.d.ts

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

package/lib/typescript/helpers/{BottomSheet.d.ts → BottomSheet/BottomSheet.d.ts}

@@ -6,8 +6,11 @@ export interface BottomSheetProps {
     sliderMaxHeight: number;
     onOpen: () => void;
     onClose: () => void;
+    height: number;
     animationDuration: number;
     expandToMaxHeightEnabled: boolean;
+    handleWebViewScroll: () => void;
+    shouldEnableBottomSheetScroll: boolean;
 }
 declare const BottomSheet: {
     (props: BottomSheetProps): JSX.Element;

package/lib/typescript/helpers/BottomSheet/BottomSheet.styles.d.ts

@@ -0,0 +1,63 @@
+export declare const getStylesObject: (fadeAnim: any) => {
+    outsideContainer: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+        left: number;
+    };
+    animation: {
+        backgroundColor: string;
+        flex: number;
+        opacity: any;
+    };
+    container: {
+        position: "relative";
+        flex: number;
+        marginTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        backgroundColor: string;
+        overflow: "hidden";
+    };
+    lineContainer: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        alignItems: "center";
+    };
+    line: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        marginTop: number;
+        backgroundColor: string;
+    };
+    outerContent: {
+        flex: number;
+    };
+    innerContent: {
+        flex: number;
+    };
+    closeButton: {
+        position: "absolute";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: number;
+        height: number;
+        backgroundColor: string;
+        borderRadius: number;
+        padding: number;
+        top: number;
+        right: number;
+        zIndex: number;
+    };
+};

package/lib/typescript/helpers/EventBus.d.ts

@@ -1,15 +1,13 @@
-export declare enum BusEvent {
-    REQUEST_RENDERING = "unitRequestRendering",
-    CARD_STATUS_CHANGED = "cardStatusChanged",
-    REQUEST_REFRESH = "requestRefresh"
-}
+import type { NativeMessage } from '../messages/nativeMessages';
+import type { WebViewMessageType } from '../messages/webMessages';
+export declare type BusEventKey = NativeMessage | WebViewMessageType;
 export default class EventBus {
     private static _instance;
     private eventListeners;
     private constructor();
     static get Instance(): EventBus;
-    event(event: BusEvent, data: any): void;
-    addListener(event: BusEvent, listener: (data: any) => void): void;
+    event(event: BusEventKey, data: any): void;
+    addListener(event: BusEventKey, listener: (data: any) => void): void;
     removeListener(listener: (data: any) => void): void;
     private _remove;
 }

package/lib/typescript/hooks/listenerToBus.d.ts

@@ -0,0 +1,7 @@
+import { BusEventKey } from '../helpers/EventBus';
+declare type Listener = {
+    busEventKey: BusEventKey;
+    action: (data: any) => void;
+};
+export declare const useListenerToBus: (listeners: Listener[]) => void;
+export {};

package/lib/typescript/hooks/useAppStateListener.d.ts

@@ -0,0 +1 @@
+export declare const useAppStateListener: () => boolean;

package/lib/typescript/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './sharedTypes';
+export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/lib/typescript/messages/nativeMessages/index.d.ts

@@ -0,0 +1,3 @@
+export declare enum NativeMessage {
+    IS_SCRIPT_FETCHED = "isScriptFetched"
+}

package/lib/typescript/messages/webMessages/bookPaymentMessage.d.ts

@@ -0,0 +1,8 @@
+import type { UNBookPaymentData } from '../../sharedTypes';
+export declare enum BookPaymentMessage {
+    PAYMENT_CREATED = "unitPaymentCreated"
+}
+export interface PaymentCreatedEvent {
+    data: UNBookPaymentData;
+}
+export declare type BookPaymentEvent = PaymentCreatedEvent;

package/lib/typescript/{webComponent → messages}/webMessages/cardMessage.d.ts

@@ -1,7 +1,8 @@
+import type { UNCardData } from '../../sharedTypes';
 export declare enum CardMessage {
-    CARD_STATUS_CHANGE = "cardStatusChanged"
+    CARD_STATUS_CHANGED = "unitCardStatusChanged"
 }
 export interface CardStatusChangedEvent {
-    card: any;
+    card: UNCardData;
 }
 export declare type CardEvent = CardStatusChangedEvent;

package/lib/typescript/messages/webMessages/index.d.ts

@@ -0,0 +1,11 @@
+import type { BookPaymentEvent, BookPaymentMessage } from './bookPaymentMessage';
+import type { CardEvent, CardMessage } from './cardMessage';
+import type { PageEvent, PageMessage } from './pageMessage';
+import type { UnitEvent, UnitMessage } from './unitMessages';
+export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage | BookPaymentMessage;
+declare type WebViewEvent = PageEvent | UnitEvent | CardEvent | BookPaymentEvent;
+export interface WebViewMessage {
+    type: WebViewMessageType;
+    details?: WebViewEvent;
+}
+export {};

package/lib/typescript/nativeComponent/UNNativeAddToWalletButton.d.ts

@@ -0,0 +1,6 @@
+declare type UnitAddToWalletButtonViewProps = {
+    style: object;
+    onAddToWalletClicked: () => void;
+};
+declare const UnitAddToWalletButtonView: import("react-native").HostComponent<UnitAddToWalletButtonViewProps>;
+export default UnitAddToWalletButtonView;

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

@@ -0,0 +1,7 @@
+export declare const webViewId = "webViewContainer";
+export declare enum PresentationMode {
+    CoverInjectedHeight = "coverInjectedHeight",
+    Inherit = "inherit",
+    Default = "deafult"
+}
+export declare const getHtmlBody: (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => string;

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

@@ -0,0 +1,11 @@
+export declare const POST_MESSAGE_TO_SDK = "\n  const postMessageToSDK = (message) => {\n    if ('ReactNativeWebView' in window) {\n    const messageString = JSON.stringify(message)\n    window['ReactNativeWebView'].postMessage(messageString)\n    }\n  }\n";
+export declare const POST_PAGE_HEIGHT: string;
+export declare const LISTENERS: {
+    isPageLoaded: string;
+    requestRendering: string;
+    onLoad: string;
+    requestCloseFlow: string;
+    requestOpenLink: string;
+    cardStatusChange: string;
+};
+export declare const DISPTACH_RENDERING_EVENT: string;

package/lib/typescript/sharedTypes/bookPayment.types.d.ts

@@ -0,0 +1,26 @@
+import type { Tags, Relationship } from "./types";
+declare type BookPaymentStatus = "Sent" | "Rejected";
+export declare type UNBookPaymentData = {
+    type: "bookPayment";
+    id: string;
+    attributes: {
+        createdAt: string | Date;
+        status: BookPaymentStatus;
+        reason: string;
+        direction: 'Debit' | 'Credit';
+        description: string;
+        transactionSummaryOverride?: string;
+        amount: string;
+        tags: Tags;
+    };
+    relationships: {
+        account: Relationship;
+        customer?: Relationship;
+        customers?: Relationship;
+        counterpartyAccount: Relationship;
+        counterpartyCustomer: Relationship;
+        transaction: Relationship;
+        recurringPayment: Relationship;
+    };
+};
+export {};

package/lib/typescript/sharedTypes/card.types.d.ts

@@ -0,0 +1,56 @@
+import type { Address, FullName, Limits, Relationship, Tags } from "./types";
+export declare type UNCardData = IndividualDebitCard | BusinessDebitCard;
+declare type CardStatus = "Active" | "Inactive" | "Stolen" | "Lost" | "Frozen" | "ClosedByCustomer" | "SuspectedFraud";
+declare type IndividualDebitCard = {
+    id: string;
+    type: "individualDebitCard" | "individualVirtualDebitCard";
+    attributes: {
+        createdAt: string;
+        last4Digits: string;
+        expirationDate: string;
+        status: CardStatus;
+        shippingAddress?: Address;
+        updatedAt?: string;
+        design?: string;
+        additionalEmbossedText?: string;
+        idempotencyKey?: string;
+        tags?: Tags;
+        limits?: Limits;
+        printOnlyBusinessName?: boolean;
+    };
+    relationships: {
+        account: Relationship;
+        customer: Relationship;
+    };
+};
+declare type BusinessDebitCard = {
+    id: string;
+    type: "businessDebitCard" | "businessVirtualDebitCard";
+    attributes: {
+        fullName: FullName;
+        dateOfBirth: string;
+        address: Address;
+        shippingAddress?: Address;
+        phone: string;
+        email: string;
+        createdAt: string;
+        last4Digits: string;
+        expirationDate: string;
+        status: CardStatus;
+        updatedAt?: string;
+        ssn?: string;
+        passport?: string;
+        nationality?: string;
+        design?: string;
+        additionalEmbossedText?: string;
+        idempotencyKey?: string;
+        tags?: Record<string, string>;
+        limits?: Limits;
+        printOnlyBusinessName?: boolean;
+    };
+    relationships: {
+        account: Relationship;
+        customer: Relationship;
+    };
+};
+export {};

package/lib/typescript/sharedTypes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bookPayment.types';
+export * from './card.types';

package/lib/typescript/sharedTypes/types.d.ts

@@ -0,0 +1,27 @@
+export declare type Address = {
+    street: string;
+    street2?: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+};
+export declare type Limits = {
+    dailyWithdrawal?: string | number;
+    dailyPurchase?: string | number;
+    monthlyWithdrawal?: string | number;
+    monthlyPurchase?: string | number;
+};
+declare type Data = {
+    type: string;
+    id: string;
+};
+export declare type Relationship = {
+    data: null | [] | Data | Data[];
+};
+export declare type FullName = {
+    first: string;
+    last: string;
+};
+export declare type Tags = Record<string, string>;
+export {};

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

@@ -0,0 +1,9 @@
+export declare const VARIABLES: {
+    COLORS: {
+        WHITE: string;
+        BLACK: string;
+        BLUE: string;
+        GREY: string;
+        SILVER_FLAKE: string;
+    };
+};