react-native-unit-components 0.1.0 → 1.0.0

package/README.md

@@ -1,2 +1,157 @@
-# unit-react-native-components
-Unit React Native Components
+# React Native SDK
+
+## Installation
+
+Add the react-native-unit-components dependency to your project:
+
+With npm:
+```bash
+$ npm install --save react-native-unit-components
+```
+
+With yarn:
+```bash
+$ yarn add react-native-unit-components
+```
+
+## Usage
+
+### Initialize Unit SDK
+Call to `UnitSDK.init` in your root component with the requested environment and your source.
+This also helps us to improve the app performance.
+
+The `UNEnvironment` enum should be used.
+```js
+enum UNEnvironment {
+  sandbox,
+  production
+}
+```
+#### Input:
+| Name            | Type                         | Required  | Description                                  |
+| --------------- | ---------------------------- | --------- | -------------------------------------------- |
+| env             | UNEnvironment                | YES       | Unit environment.                            |
+| theme           | string                       | NO        | A URL that specifies the UI configuration.   |
+
+#### Example:
+```js
+import React, { useEffect } from 'react';
+import { UnitSDK, UNEnvironment } from 'react-native-unit-components';
+
+const THEME = 'A URL that specifies the UI configuration';
+
+export default function YourRootComponent() {
+  useEffect(() => {
+    UnitSDK.init(UNEnvironment.production, THEME);
+  }, [])
+}
+```
+
+### Bottom Sheet Component
+
+The `UNBottomSheetComponent` is a View that our SDK controls in order to show menus and forms in your application.
+It is mandatory to have one `UNBottomSheetComponent` when our components are visible.
+
+The `UNBottomSheetComponent` have an absolute position and should be able to take the full width the height of the screen.
+We recommend to place the `UNBottomSheetComponent` in your root component of your application.
+
+#### The structure of your root component might look as follows:
+```js
+import React, { useEffect } from 'react';
+import { UNBottomSheetComponent } from 'react-native-unit-components';
+
+export default function YourRootComponent() {
+  return (
+    <>
+      <YourComponents />
+      <UNBottomSheetComponent />
+    </>
+  );
+}
+```
+
+### Components
+
+#### Card Component
+
+##### UNCardComponent props:
+| Name            | Type                         | Required  | Description                                  |
+| --------------- | ---------------------------- | --------- | -------------------------------------------- |
+| customerToken   | string                       | YES       | A Unit Customer token.                       |
+| cardId          | string                       | YES       | Unit card id.                                |
+| theme           | string                       | No        | A URL that specifies the UI configuration.   |
+| onStatusChanged | (card: UNCardData)  =>  void | No        | Callback for card status changes.            |
+
+##### Example:
+```js
+import React from 'react';
+import { UNCardComponent, UNCardData } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNCardComponent
+      cardId={'632197'}
+      customerToken={''}
+      onStatusChanged={(card: UNCardData) => { console.log(card) }}
+    />
+  );
+}
+```
+
+#### Book Payment Component
+
+##### UNBookPaymentComponent props:
+| Name                  | Type                                   | Required  | Description                                    |
+| --------------------- | -------------------------------------- | --------- | ---------------------------------------------- |
+| customerToken         | string                                 | YES       | A Unit Customer token.                         |
+| accountId             | string                                 | YES       | Unit account id. The account from which money is being sent. |
+| counterPartyAccountId | string                                 | YES       | Unit account id. The account which will receive money.       |
+| counterPartyName      | string                                 | YES       | Name of the counterparty. This is the name that will be displayed in the Book Payment UI during the transfer.|
+| isSameCustomer        | boolean                                | NO        | Stating whether both accounts belong to the same customer. Allows fetching additional information about the counterparty account. Default "false" |
+| theme                 | string                                 | No        | A URL that specifies the UI configuration.     |
+| onPaymentCreated      | (bookPayment: BookPaymentType) => void | NO        | Callback for the created bookPayment.          |
+
+
+##### Example:
+```js
+import React from 'react';
+import { UNBookPaymentComponent } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNBookPaymentComponent
+      customerToken={''}
+      accountId={'1105561'}
+      counterPartyAccountId={'1105562'}
+      counterPartyName={'Peter Parker"'}
+      isSameCustomer={true}
+      onPaymentCreated={(bookPayment: BookPaymentType) => { console.log(bookPayment) }}
+    />
+  );
+}
+```
+
+#### Activity Component
+
+##### UNActivityComponent props:
+| Name                  | Type                                   | Required  | Description                                    |
+| --------------------- | -------------------------------------- | --------- | ---------------------------------------------- |
+| customerToken         | string                                 | YES       | A Unit Customer token.                         |
+| accountId             | string                                 | No        | Unit account id. The account for which the activity will be shown. If not specified: the activity of the customer (all accounts) will be shown |
+| theme                 | string                                 | No        | A URL that specifies the UI configuration.     |
+
+
+##### Example:
+```js
+import React from 'react';
+import { UNActivityComponent } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNActivityComponent
+      customerToken={''}
+      accountId={'1105561'}
+    />
+  );
+}
+```

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CloseIcon", {
+  enumerable: true,
+  get: function () {
+    return _close.default;
+  }
+});
+
+var _close = _interopRequireDefault(require("./close.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

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

package/lib/commonjs/components/UNActivityComponent/UNActivityComponent.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNActivityComponent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bodyHtml = require("../../scripts/html/bodyHtml");
+
+var _WebComponent = require("../../webComponent/WebComponent");
+
+var _UNActivityComponent = require("./UNActivityComponent.utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const UNActivityComponent = props => {
+  return /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
+    type: _WebComponent.WebComponentType.activity,
+    presentationMode: _bodyHtml.PresentationMode.Inherit,
+    params: (0, _UNActivityComponent.getActivityParams)(props),
+    shouldEnableWebViewScroll: false
+  });
+};
+
+exports.UNActivityComponent = UNActivityComponent;
+//# sourceMappingURL=UNActivityComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["UNActivityComponent","props","WebComponentType","activity","PresentationMode","Inherit","getActivityParams"],"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;;AACA;;AACA;;AACA;;;;AAQO,MAAMA,mBAAmB,GAAIC,KAAD,IAAqC;EACtE,oBACE,6BAAC,0BAAD;IACE,IAAI,EAAEC,8BAAA,CAAiBC,QADzB;IAEE,gBAAgB,EAAEC,0BAAA,CAAiBC,OAFrC;IAGE,MAAM,EAAE,IAAAC,sCAAA,EAAkBL,KAAlB,CAHV;IAIE,yBAAyB,EAAE;EAJ7B,EADF;AAQD,CATM"}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActivityParams = void 0;
+
+var _UnitSdkManager = require("../../unitSdkManager/UnitSdkManager");
+
+const getActivityParams = props => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    theme="${props.theme ?? _UnitSdkManager.UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};
+
+exports.getActivityParams = getActivityParams;
+//# sourceMappingURL=UNActivityComponent.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getActivityParams","props","accountId","customerToken","theme","UnitSDK","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;;AAGO,MAAMA,iBAAiB,GAAIC,KAAD,IAAqC;EACpE,OAAQ;AACV,kBAAkBA,KAAK,CAACC,SAAU;AAClC,sBAAsBD,KAAK,CAACE,aAAc;AAC1C,aAAaF,KAAK,CAACG,KAAN,IAAeC,uBAAA,CAAQC,QAAR,EAAmB;AAC/C;AACA,GALE;AAMD,CAPM"}

package/lib/commonjs/components/UNBookPaymentComponent/UNBookPaymentComponent.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNBookPaymentComponent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _WebComponent = require("../../webComponent/WebComponent");
+
+var _bodyHtml = require("../../scripts/html/bodyHtml");
+
+var _UNBookPaymentComponent = require("./UNBookPaymentComponent.utils");
+
+var _bookPaymentMessage = require("../../messages/webMessages/bookPaymentMessage");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const UNBookPaymentComponent = props => {
+  const handleWebViewMessage = message => {
+    if (message.type === _bookPaymentMessage.BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
+      const response = message.details;
+      props.onPaymentCreated(response.data);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
+    type: _WebComponent.WebComponentType.bookPayment,
+    presentationMode: _bodyHtml.PresentationMode.Inherit,
+    params: (0, _UNBookPaymentComponent.getBookPaymentParams)(props),
+    script: (0, _UNBookPaymentComponent.getBookPaymentScript)(),
+    onMessage: message => handleWebViewMessage(message),
+    shouldEnableWebViewScroll: false
+  });
+};
+
+exports.UNBookPaymentComponent = UNBookPaymentComponent;
+//# sourceMappingURL=UNBookPaymentComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["UNBookPaymentComponent","props","handleWebViewMessage","message","type","BookPaymentMessage","PAYMENT_CREATED","onPaymentCreated","response","details","data","WebComponentType","bookPayment","PresentationMode","Inherit","getBookPaymentParams","getBookPaymentScript"],"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;;AACA;;AACA;;AACA;;AAEA;;;;AAaO,MAAMA,sBAAsB,GAAIC,KAAD,IAAwC;EAC5E,MAAMC,oBAAoB,GAAIC,OAAD,IAA6B;IACxD,IAAIA,OAAO,CAACC,IAAR,KAAiBC,sCAAA,CAAmBC,eAApC,IAAuDL,KAAK,CAACM,gBAAjE,EAAmF;MACjF,MAAMC,QAAQ,GAAGL,OAAO,CAACM,OAAzB;MACAR,KAAK,CAACM,gBAAN,CAAuBC,QAAQ,CAACE,IAAhC;IACD;EACF,CALD;;EAOA,oBACE,6BAAC,0BAAD;IACE,IAAI,EAAEC,8BAAA,CAAiBC,WADzB;IAEE,gBAAgB,EAAEC,0BAAA,CAAiBC,OAFrC;IAGE,MAAM,EAAE,IAAAC,4CAAA,EAAqBd,KAArB,CAHV;IAIE,MAAM,EAAE,IAAAe,4CAAA,GAJV;IAKE,SAAS,EAAGb,OAAD,IAA6BD,oBAAoB,CAACC,OAAD,CAL9D;IAME,yBAAyB,EAAE;EAN7B,EADF;AAUD,CAlBM"}

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBookPaymentScript = exports.getBookPaymentParams = void 0;
+
+var _bookPaymentMessage = require("../../messages/webMessages/bookPaymentMessage");
+
+var _UnitSdkManager = require("../../unitSdkManager/UnitSdkManager");
+
+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 ?? _UnitSdkManager.UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};
+
+exports.getBookPaymentParams = getBookPaymentParams;
+
+const getBookPaymentScript = () => {
+  return `
+    window.addEventListener("${_bookPaymentMessage.BookPaymentMessage.PAYMENT_CREATED}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${_bookPaymentMessage.BookPaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+  `;
+};
+
+exports.getBookPaymentScript = getBookPaymentScript;
+//# sourceMappingURL=UNBookPaymentComponent.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getBookPaymentParams","props","accountId","customerToken","isSameCustomer","counterPartyAccountId","counterPartyName","theme","UnitSDK","getTheme","getBookPaymentScript","BookPaymentMessage","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;;AACA;;AAEO,MAAMA,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,IAAeC,uBAAA,CAAQC,QAAR,EAAmB;AAC/C;AACA,GARE;AASD,CAVM;;;;AAYA,MAAMC,oBAAoB,GAAG,MAAM;EACxC,OAAQ;AACV,+BAA+BC,sCAAA,CAAmBC,eAAgB;AAClE;AACA;AACA,sCAAsCD,sCAAA,CAAmBC,eAAgB;AACzE;AACA;AACA;AACA;AACA,GATE;AAUD,CAXM"}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = void 0;
+const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;
+exports.BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = BOTTOM_SHEET_MAX_PRECANTAGE_SIZE;
+//# sourceMappingURL=UNBottomSheetComponent.constants.js.map

package/lib/commonjs/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":";;;;;;AAAO,MAAMA,gCAAgC,GAAG,GAAzC"}

package/lib/commonjs/components/{BottomSheet/BottomSheetComponent.js → UNBottomSheetComponent/UNBottomSheetComponent.js}

@@ -11,15 +11,25 @@ var _WebComponent = require("../../webComponent/WebComponent");
 
 var _reactNative = require("react-native");
 
-var _BottomSheet = _interopRequireDefault(require("../../helpers/BottomSheet"));
+var _BottomSheet = _interopRequireDefault(require("../../helpers/BottomSheet/BottomSheet"));
 
-var _EventBus = _interopRequireWildcard(require("../../helpers/EventBus"));
+var _EventBus = _interopRequireDefault(require("../../helpers/EventBus"));
 
-var _pageMessage = require("../../webComponent/webMessages/pageMessage");
+var _pageMessage = require("../../messages/webMessages/pageMessage");
 
-var _unitMessages = require("../../webComponent/webMessages/unitMessages");
+var _unitMessages = require("../../messages/webMessages/unitMessages");
 
-var _cardMessage = require("../../webComponent/webMessages/cardMessage");
+var _cardMessage = require("../../messages/webMessages/cardMessage");
+
+var _listenerToBus = require("../../hooks/listenerToBus");
+
+var _UNBottomSheetComponent = require("./UNBottomSheetComponent.utils");
+
+var _UNBottomSheetComponent2 = require("./UNBottomSheetComponent.styles");
+
+var _bodyHtml = require("../../scripts/html/bodyHtml");
+
+var _useAppStateListener = require("../../hooks/useAppStateListener");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,94 +38,74 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const UNBottomSheetComponent = () => {
-  const [isActive, setIsActive] = (0, _react.useState)(false);
+  const [isBottomSheetActive, setIsBottomSheetActive] = (0, _react.useState)(false);
   const [height, setHeight] = (0, _react.useState)(0);
   const [renderingRequest, setRenderingRequest] = (0, _react.useState)(null);
+  const [shouldEnableWebViewScroll, setShouldEnableWebViewScroll] = (0, _react.useState)(false);
   const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = (0, _react.useState)(false);
   const [newHeightMessage, setNewHeightMessage] = (0, _react.useState)(null);
+  const isAppActive = (0, _useAppStateListener.useAppStateListener)();
+  const styles = (0, _UNBottomSheetComponent2.getStylesObject)();
   const webRef = (0, _react.useRef)(null);
 
-  const _listener = data => {
+  const listenerAction = data => {
     setRenderingRequest(data);
-    setIsActive(true);
+    setIsBottomSheetActive(true);
   };
 
+  (0, _react.useEffect)(() => {
+    if (!isAppActive) {
+      setIsBottomSheetActive(false);
+    }
+  }, [isAppActive]);
   (0, _react.useEffect)(() => {
     if (!webRef.current) return;
 
     if (renderingRequest) {
-      var _webRef$current;
-
-      (_webRef$current = webRef.current) === null || _webRef$current === void 0 ? void 0 : _webRef$current.injectJavaScript(`dispatchRenderingEvent('${renderingRequest}')`);
+      (0, _UNBottomSheetComponent.renderingBottomSheetRequest)(webRef.current, renderingRequest);
     }
   }, [webRef.current, renderingRequest]);
   (0, _react.useEffect)(() => {
-    if (!isActive) {
+    if (!isBottomSheetActive) {
+      webRef.current && (0, _UNBottomSheetComponent.resetHtml)(webRef.current);
       setHeight(0);
       setRenderingRequest(null);
     }
-  }, [isActive]);
+  }, [isBottomSheetActive]);
   (0, _react.useEffect)(() => {
     if (!waitForLoadingNewComponent && newHeightMessage) {
       setWaitForLoadingNewComponent(false);
       setNewHeight(newHeightMessage);
     }
   }, [waitForLoadingNewComponent, newHeightMessage]);
-  (0, _react.useEffect)(() => {
-    _EventBus.default.Instance.addListener(_EventBus.BusEvent.REQUEST_RENDERING, _listener);
-
-    return () => {
-      _EventBus.default.Instance.removeListener(_listener);
-    };
-  }, []);
-
-  const getBottomSheetScript = () => {
-    return `
-      window.addEventListener("unitRequestRefresh", (e) => {
-        postMessageToSDK({ type: "unitRequestRefresh", details:  e.detail  })
-      });
-    `;
-  };
+  (0, _listenerToBus.useListenerToBus)([{
+    busEventKey: _unitMessages.UnitMessage.UNIT_REQUEST_RENDERING,
+    action: listenerAction
+  }]);
 
   const setNewHeight = message => {
     if (renderingRequest) {
       const nativePlace = JSON.parse(renderingRequest).nativePlace;
 
       if (nativePlace == 'overFullScreen') {
-        const windowHeight = _reactNative.Dimensions.get('window').height * 0.94;
-        setHeight(windowHeight);
+        const bottomSheetNewHeight = (0, _UNBottomSheetComponent.handleHtmlFullHeight)(webRef.current, _reactNative.Dimensions.get('window').height);
+        setHeight(bottomSheetNewHeight);
+        setShouldEnableWebViewScroll(true);
       } else {
         setHeight(message.details.height);
+        setShouldEnableWebViewScroll(false);
       }
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    pointerEvents: isActive ? undefined : 'none',
-    style: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_BottomSheet.default, {
-    isOpen: isActive,
-    onClose: () => setIsActive(false),
-    onOpen: () => setIsActive(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      height,
-      paddingTop: height === 0 ? 0 : 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
-    ref: webRef,
-    type: _WebComponent.WebComponentType.slot,
-    script: getBottomSheetScript(),
-    onMessage: message => {
-      if (renderingRequest && message.type == _pageMessage.PageMessage.PAGE_HEIGHT) {
-        setNewHeightMessage(message);
-      } else if (message.type == _unitMessages.UnitMessage.UNIT_REQUEST_RENDERING) {
+  const onWebMessage = message => {
+    switch (message.type) {
+      case _pageMessage.PageMessage.PAGE_HEIGHT:
+        renderingRequest && setNewHeightMessage(message);
+        break;
+
+      case _unitMessages.UnitMessage.UNIT_REQUEST_RENDERING:
+        // eslint-disable-next-line no-case-declarations
         const {
           data
         } = message.details;
@@ -126,18 +116,47 @@ const UNBottomSheetComponent = () => {
           setWaitForLoadingNewComponent(true);
           setTimeout(() => setWaitForLoadingNewComponent(false), 400);
         }
-      } else if (message.type == _cardMessage.CardMessage.CARD_STATUS_CHANGE) {
-        _EventBus.default.Instance.event(_EventBus.BusEvent.CARD_STATUS_CHANGED, message.details.card);
-      } else if (message.type == _unitMessages.UnitMessage.UNIT_REQUEST_CLOSE_FLOW) {
-        setIsActive(false);
-      } else if (message.type == _unitMessages.UnitMessage.UNIT_REQUEST_OPEN_LINK) {
-        const href = message.details.href;
+
+        break;
+
+      case _cardMessage.CardMessage.CARD_STATUS_CHANGED:
+        _EventBus.default.Instance.event(_cardMessage.CardMessage.CARD_STATUS_CHANGED, message.details.card);
+
+        break;
+
+      case _unitMessages.UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        setIsBottomSheetActive(false);
+        break;
+
+      case _unitMessages.UnitMessage.UNIT_REQUEST_OPEN_LINK:
+        // eslint-disable-next-line no-case-declarations
+        const {
+          href
+        } = message.details;
 
         _reactNative.Linking.openURL(href);
-      }
+
+        break;
     }
-  })))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: isBottomSheetActive ? undefined : 'none',
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_BottomSheet.default, {
+    isOpen: isBottomSheetActive,
+    height: height,
+    onClose: () => setIsBottomSheetActive(false),
+    onOpen: () => setIsBottomSheetActive(true)
+  }, isAppActive && /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
+    ref: webRef,
+    type: _WebComponent.WebComponentType.slot,
+    presentationMode: _bodyHtml.PresentationMode.CoverInjectedHeight,
+    script: (0, _UNBottomSheetComponent.getBottomSheetScript)(),
+    onMessage: onWebMessage,
+    shouldEnableWebViewScroll: shouldEnableWebViewScroll
+  }))));
 };
 
 exports.UNBottomSheetComponent = UNBottomSheetComponent;
-//# sourceMappingURL=BottomSheetComponent.js.map
+//# sourceMappingURL=UNBottomSheetComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["UNBottomSheetComponent","isBottomSheetActive","setIsBottomSheetActive","useState","height","setHeight","renderingRequest","setRenderingRequest","shouldEnableWebViewScroll","setShouldEnableWebViewScroll","waitForLoadingNewComponent","setWaitForLoadingNewComponent","newHeightMessage","setNewHeightMessage","isAppActive","useAppStateListener","styles","getStylesObject","webRef","useRef","listenerAction","data","useEffect","current","renderingBottomSheetRequest","resetHtml","setNewHeight","useListenerToBus","busEventKey","UnitMessage","UNIT_REQUEST_RENDERING","action","message","nativePlace","JSON","parse","bottomSheetNewHeight","handleHtmlFullHeight","Dimensions","get","details","onWebMessage","type","PageMessage","PAGE_HEIGHT","setTimeout","CardMessage","CARD_STATUS_CHANGED","EventBus","Instance","event","card","UNIT_REQUEST_CLOSE_FLOW","UNIT_REQUEST_OPEN_LINK","href","Linking","openURL","undefined","container","WebComponentType","slot","PresentationMode","CoverInjectedHeight","getBottomSheetScript"],"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":"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"}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStylesObject = void 0;
+
+var _reactNative = require("react-native");
+
+const getStylesObject = () => {
+  return _reactNative.StyleSheet.create({
+    container: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  });
+};
+
+exports.getStylesObject = getStylesObject;
+//# sourceMappingURL=UNBottomSheetComponent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getStylesObject","StyleSheet","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;;AAEO,MAAMA,eAAe,GAAG,MAAM;EACnC,OAAOC,uBAAA,CAAWC,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"}