react-native-unit-components 1.0.1 → 1.0.3

package/README.md

@@ -75,17 +75,20 @@ export default function YourRootComponent() {
 #### 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.            |
+| 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.                        |
+| pushProvisioningModule | typeof NativeModules         | No        | A Native Module that implements Visa's push provisioning |
 
 ##### Example:
 ```js
 import React from 'react';
 import { UNCardComponent, UNCardData } from 'react-native-unit-components';
+import { NativeModules } from 'react-native';
+const { PushProvisioningModule } = NativeModules;
 
 export default function YourComponent() {
   return (
@@ -93,11 +96,51 @@ export default function YourComponent() {
       cardId={'632197'}
       customerToken={''}
       onStatusChanged={(card: UNCardData) => { console.log(card) }}
+      pushProvisioningModule={PushProvisioningModule}
     />
   );
 }
 ```
 
+##### Add card to wallet capability - Optional
+
+[Complete the add to wallet guide for React Native](https://guides.unit.co/add-to-mobile-wallet#react-native), skipping the [last module access from javascript](https://guides.unit.co/add-to-mobile-wallet#module-access-from-javascript-1), to use this capability.
+
+Call `UnitSDK.setSignedNonce` with the signedNonce response you obtained from the `launchInitialize` method of the `PushProvisioningModule` in Javascript.
+
+Then pass the `PushProvisioningModule` as a prop to [Unit's Card Component](#card-component). This will let the SDK get wallets and start card provisioning for you once the native add to wallet button was pressed.
+
+
+###### Input:
+| Name            | Type                         | Required  | Description                                  |
+| --------------- | ---------------------------- | --------- | -------------------------------------------- |
+| signedNonce     | string                       | YES       | A signed nonce obtained from Visa.           |
+
+###### Example:
+```js
+import React from "react";
+import { UnitSDK } from "react-native-unit-components";
+import { NativeModules } from 'react-native';
+const { PushProvisioningModule } = NativeModules;
+
+export default function YourRootComponent() {
+  useEffect(() => {
+    const launchInitialize = async () => {
+      try {
+        // To call the module method to use SDK method initialize
+        const response = await PushProvisioningModule.launchInitialize();
+        const signedNonce = JSON.parse(response).signedNonce;
+        UnitSDK.setSignedNonce(signedNonce);
+      } catch (error) {
+        // Manage errors
+      }
+    };
+
+    launchInitialize();
+  }, []);
+};
+```
+
 #### Book Payment Component
 
 ##### UNBookPaymentComponent props:
@@ -112,6 +155,7 @@ export default function YourComponent() {
 | onPaymentCreated      | (bookPayment: BookPaymentType) => void | NO        | Callback for the created bookPayment.          |
 
 
+
 ##### Example:
 ```js
 import React from 'react';
@@ -155,3 +199,28 @@ export default function YourComponent() {
   );
 }
 ```
+
+#### Account Component
+
+##### UNAccountComponent props:
+| Name                  | Type                                   | Required  | Description                                    |
+| --------------------- | -------------------------------------- | --------- | ---------------------------------------------- |
+| customerToken         | string                                 | YES       | A Unit Customer token.                         |
+| accountId             | string                                 | No        | Unit account id. The account to show, when not provided, one of the customer's accounts will be shown. |
+| theme                 | string                                 | No        | A URL that specifies the UI configuration.     |
+
+
+##### Example:
+```js
+import React from 'react';
+import { UNAccountComponent } from 'react-native-unit-components';
+
+export default function YourComponent() {
+  return (
+    <UNAccountComponent
+      customerToken={''}
+      accountId={'1105561'}
+    />
+  );
+}
+```

package/android/src/main/AndroidManifest.xml

@@ -1,4 +1,15 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.unitreactnativecomponents">
-
+  <application>
+    <provider
+      android:name="androidx.core.content.FileProvider"
+      android:authorities="${applicationId}.provider"
+      android:exported="false"
+      android:grantUriPermissions="true">
+      <meta-data
+        android:name="android.support.FILE_PROVIDER_PATHS"
+        android:resource="@xml/file_paths">
+      </meta-data>
+    </provider>
+  </application>
 </manifest>

package/android/src/main/java/com/unitreactnativecomponents/UnitReactNativeComponentsPackage.kt

@@ -3,11 +3,12 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.unitreactnativecomponents.sharepdf.UNShareFile
 
 
 class UnitReactNativeComponentsPackage : ReactPackage {
     override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return emptyList()
+        return listOf(UNShareFile(reactContext))
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {

package/android/src/main/java/com/unitreactnativecomponents/sharepdf/UNSharePDF.kt

@@ -0,0 +1,75 @@
+package com.unitreactnativecomponents.sharepdf
+
+import android.content.Intent
+import android.net.Uri
+import android.util.Base64
+import androidx.core.content.FileProvider
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import java.io.File
+import java.io.FileOutputStream
+import java.io.IOException
+
+class UNShareFile(var reactContext: ReactApplicationContext) :
+  ReactContextBaseJavaModule(reactContext) {
+  @ReactMethod
+  fun share(base64pdf: String, filename: String, promise: Promise) {
+    try {
+      cleanSharedFiles()
+      val pdfFile = writeFile(base64pdf, filename)
+      shareFile(pdfFile)
+      promise.resolve(true)
+    } catch (e: IOException) {
+      promise.reject(e)
+    }
+  }
+
+  private fun cleanSharedFiles() {
+    val directoryPath = directoryPath
+    if (directoryPath.isDirectory) {
+      for (file in directoryPath.list()) {
+        File(directoryPath, file).delete()
+      }
+    }
+  }
+
+  @Throws(IOException::class)
+  private fun writeFile(base64pdf: String, filename: String): File {
+    val directoryPath = directoryPath
+    directoryPath.mkdir()
+    val newFilePath = File(directoryPath.path, filename)
+    val pdfAsBytes = Base64.decode(base64pdf, Base64.DEFAULT)
+    FileOutputStream(newFilePath, false).use { os ->
+      os.write(pdfAsBytes)
+      os.flush()
+    }
+    return newFilePath
+  }
+
+  private fun shareFile(file: File) {
+    val outputFileUri: Uri =
+      FileProvider.getUriForFile(reactContext, reactContext.packageName + ".provider", file)
+    val intentShareFile = Intent(Intent.ACTION_SEND)
+    intentShareFile.type = TYPE_PDF
+    intentShareFile.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+    intentShareFile.putExtra(Intent.EXTRA_STREAM, outputFileUri)
+    intentShareFile.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+    val currentActivity = currentActivity
+    currentActivity!!.startActivity(Intent.createChooser(intentShareFile, ""))
+  }
+
+  override fun getName(): String {
+    return REACT_CLASS
+  }
+
+  private val directoryPath: File
+    private get() = File(reactContext.currentActivity!!.filesDir, PDF_CACHE_DIR)
+
+  companion object {
+    private const val REACT_CLASS = "RNShareFile"
+    private const val TYPE_PDF: String = "application/pdf"
+    private const val PDF_CACHE_DIR = "pdf_documents_for_sharing"
+  }
+}

package/android/src/main/res/layout/un_black_add_to_googlepay_button.xml

@@ -3,7 +3,7 @@
     android:clickable="true"
     android:focusable="true"
     android:layout_width="match_parent"
-    android:layout_height="48sp"
+    android:layout_height="match_parent"
     android:background="@drawable/un_black_googlepay_button_no_shadow_background"
     android:padding="2sp"
     android:contentDescription="@string/add_to_googlepay_button_content_description">
@@ -29,4 +29,4 @@
         android:duplicateParentState="true"
         android:scaleType="fitXY"
         android:src="@drawable/un_black_googlepay_button_overlay" />
-</RelativeLayout>
+</RelativeLayout>

package/android/src/main/res/layout/un_view_google_push_provisioning.xml

@@ -8,36 +8,24 @@
         android:id="@+id/google_view_push_provisioning_layout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_margin="10dp"
-        tools:layout_editor_absoluteX="149dp"
-        tools:layout_editor_absoluteY="-120dp"
         >
 
         <include
             android:id="@+id/white_add_to_googlepay_button_no_shadow"
             layout="@layout/un_white_add_to_googlepay_button_no_shadow"
-            android:layout_width="200dp"
-            android:layout_height="52dp"
-            android:layout_centerHorizontal="true"
             android:visibility="invisible"
           />
 
         <include
             android:id="@+id/black_add_to_googlepay_button"
             layout="@layout/un_black_add_to_googlepay_button"
-            android:layout_width="200dp"
-            android:layout_height="52dp"
-            android:layout_centerHorizontal="true"
             android:visibility="invisible"
-            />
+          />
 
 
         <include
             android:id="@+id/white_add_to_googlepay_button"
             layout="@layout/un_white_add_to_googlepay_button"
-            android:layout_width="200dp"
-            android:layout_height="52dp"
-            android:layout_centerHorizontal="true"
             android:visibility="invisible" />
 
     </RelativeLayout>

package/android/src/main/res/layout/un_white_add_to_googlepay_button.xml

@@ -3,7 +3,7 @@
     android:clickable="true"
     android:focusable="true"
     android:layout_width="match_parent"
-    android:layout_height="48sp"
+    android:layout_height="match_parent"
     android:background="@drawable/un_googlepay_button_background"
     android:padding="4sp"
     android:contentDescription="@string/add_to_googlepay_button_content_description">

package/android/src/main/res/layout/un_white_add_to_googlepay_button_no_shadow.xml

@@ -3,7 +3,7 @@
     android:clickable="true"
     android:focusable="true"
     android:layout_width="match_parent"
-    android:layout_height="48sp"
+    android:layout_height="match_parent"
     android:background="@drawable/un_googlepay_button_no_shadow_background"
     android:padding="2sp"
     android:contentDescription="@string/add_to_googlepay_button_content_description">

package/android/src/main/res/xml/file_paths.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths>
+  <files-path name="pdf_documents_for_sharing" path="pdf_documents_for_sharing/" />
+</paths>

package/ios/UnitReactNativeComponentsViewManager.m

@@ -4,5 +4,4 @@
 
 RCT_EXPORT_VIEW_PROPERTY(onAddToWalletClicked, RCTDirectEventBlock)
 
-
 @end

package/ios/UnitReactNativeComponentsViewManager.swift

@@ -38,8 +38,12 @@ class UnitAddToWalletButtonView : UIView {
     
     func center(addPassButton: PKAddPassButton) {
         addPassButton.translatesAutoresizingMaskIntoConstraints = false
-        addPassButton.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
-        addPassButton.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
+        NSLayoutConstraint.activate([
+            addPassButton.leadingAnchor.constraint(equalTo: self.leadingAnchor),
+            addPassButton.trailingAnchor.constraint(equalTo: self.trailingAnchor),
+            addPassButton.topAnchor.constraint(equalTo: self.topAnchor),
+            addPassButton.bottomAnchor.constraint(equalTo: self.bottomAnchor)
+        ])
     }
     
     

package/lib/commonjs/components/UNAccountComponent/UNAccountComponent.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNAccountComponent = exports.AccountAction = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _pageMessage = require("../..//messages/webMessages/pageMessage");
+
+var _unitMessages = require("../../messages/webMessages/unitMessages");
+
+var _EventBus = _interopRequireDefault(require("../../helpers/EventBus"));
+
+var _WebComponent = require("../../webComponent/WebComponent");
+
+var _listenerToBus = require("../../hooks/listenerToBus");
+
+var _UNAccountComponent = require("./UNAccountComponent.utils");
+
+var _bodyHtml = require("../../scripts/html/bodyHtml");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+let AccountAction;
+exports.AccountAction = AccountAction;
+
+(function (AccountAction) {
+  AccountAction["List"] = "account-list";
+  AccountAction["Menu"] = "account-menu";
+})(AccountAction || (exports.AccountAction = AccountAction = {}));
+
+const UNAccountComponent = props => {
+  const [height, setHeight] = (0, _react.useState)(0);
+
+  const windowWidth = _reactNative.Dimensions.get('window').width;
+
+  const [requestRefreshEvent, setRequestRefreshEvent] = (0, _react.useState)(null);
+  const webRef = (0, _react.useRef)(null);
+
+  const requestRefresh = data => {
+    setRequestRefreshEvent(data);
+  };
+
+  (0, _listenerToBus.useListenerToBus)([{
+    busEventKey: _unitMessages.UnitMessage.UNIT_REQUEST_REFRESH,
+    action: requestRefresh
+  }]);
+  (0, _react.useEffect)(() => {
+    (0, _UNAccountComponent.injectRefreshEventIfNeeded)(webRef.current, requestRefreshEvent);
+  }, [requestRefreshEvent]);
+
+  const handleMessage = message => {
+    switch (message.type) {
+      case _unitMessages.UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details);
+        break;
+
+      case _unitMessages.UnitMessage.UNIT_REQUEST_RENDERING:
+        {
+          const event = {
+            componentName: _WebComponent.WebComponentType.account,
+            componentResourceId: props.accountId,
+            requestRenderingEvent: message.details
+          };
+
+          _EventBus.default.Instance.event(_unitMessages.UnitMessage.UNIT_REQUEST_RENDERING, event);
+
+          break;
+        }
+
+      case _pageMessage.PageMessage.PAGE_HEIGHT:
+        setHeight(message.details.height);
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
+    ref: webRef,
+    type: _WebComponent.WebComponentType.account,
+    presentationMode: _bodyHtml.PresentationMode.Default,
+    params: (0, _UNAccountComponent.getAccountParams)(props),
+    script: (0, _UNAccountComponent.getAccountScript)(),
+    theme: props.theme,
+    onMessage: message => handleMessage(message),
+    width: windowWidth,
+    isScrollable: false
+  }));
+};
+
+exports.UNAccountComponent = UNAccountComponent;
+//# sourceMappingURL=UNAccountComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AccountAction","UNAccountComponent","props","height","setHeight","useState","windowWidth","Dimensions","get","width","requestRefreshEvent","setRequestRefreshEvent","webRef","useRef","requestRefresh","data","useListenerToBus","busEventKey","UnitMessage","UNIT_REQUEST_REFRESH","action","useEffect","injectRefreshEventIfNeeded","current","handleMessage","message","type","UNIT_ON_LOAD","onLoad","details","UNIT_REQUEST_RENDERING","event","componentName","WebComponentType","account","componentResourceId","accountId","requestRenderingEvent","EventBus","Instance","PageMessage","PAGE_HEIGHT","PresentationMode","Default","getAccountParams","getAccountScript","theme"],"sources":["UNAccountComponent.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Dimensions, View } from 'react-native';\nimport type WebView from 'react-native-webview';\nimport { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';\nimport { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';\nimport EventBus from '../../helpers/EventBus';\nimport { WebComponent, WebComponentType } from '../../webComponent/WebComponent';\nimport { useListenerToBus } from '../../hooks/listenerToBus';\nimport type { WebViewMessage } from '../../messages/webMessages';\nimport { getAccountParams, getAccountScript, injectRefreshEventIfNeeded } from './UNAccountComponent.utils';\nimport { PresentationMode } from '../../scripts/html/bodyHtml';\nimport type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';\nimport type { ResponseUnitOnLoadEvent } from '../../sharedTypes';\n\nexport interface UNAccountComponentProps {\n  accountId?: string;\n  customerToken: string;\n  theme?: string;\n  onLoad?: (response: ResponseUnitOnLoadEvent) => void;\n}\n\nexport enum AccountAction {\n  List = 'account-list',\n  Menu = 'account-menu'\n}\n\nexport const UNAccountComponent = (props: UNAccountComponentProps) => {\n  const [height, setHeight] = useState(0);\n  const windowWidth = Dimensions.get('window').width;\n\n  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);\n\n  const webRef = useRef<WebView>(null);\n\n  const requestRefresh = (data: RequestRefreshEvent) => {\n    setRequestRefreshEvent(data);\n  };\n\n  useListenerToBus([\n    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },\n  ]);\n\n  useEffect(() => {\n    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);\n  }, [requestRefreshEvent]);\n\n  const handleMessage = (message: WebViewMessage) => {\n    switch (message.type) {\n      case UnitMessage.UNIT_ON_LOAD:\n        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);\n        break;\n      case UnitMessage.UNIT_REQUEST_RENDERING: {\n        const event: BottomSheetSlotData = {\n          componentName: WebComponentType.account,\n          componentResourceId: props.accountId,\n          requestRenderingEvent: message.details as RequestRenderingEvent\n        };\n        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);\n        break;\n      }\n      case PageMessage.PAGE_HEIGHT:\n        setHeight((message.details as HeightEvent).height);\n        break;\n    }\n  };\n\n  return (\n    <View style={{ height }}>\n      <WebComponent\n        ref={webRef}\n        type={WebComponentType.account}\n        presentationMode={PresentationMode.Default}\n        params={getAccountParams(props)}\n        script={getAccountScript()}\n        theme={props.theme}\n        onMessage={message => handleMessage(message)}\n        width={windowWidth}\n        isScrollable={false}\n      />\n    </View>\n  );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;IAWYA,a;;;WAAAA,a;EAAAA,a;EAAAA,a;GAAAA,a,6BAAAA,a;;AAKL,MAAMC,kBAAkB,GAAIC,KAAD,IAAoC;EACpE,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAS,CAAT,CAA5B;;EACA,MAAMC,WAAW,GAAGC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,KAA7C;;EAEA,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgD,IAAAN,eAAA,EAAqC,IAArC,CAAtD;EAEA,MAAMO,MAAM,GAAG,IAAAC,aAAA,EAAgB,IAAhB,CAAf;;EAEA,MAAMC,cAAc,GAAIC,IAAD,IAA+B;IACpDJ,sBAAsB,CAACI,IAAD,CAAtB;EACD,CAFD;;EAIA,IAAAC,+BAAA,EAAiB,CACf;IAAEC,WAAW,EAAEC,yBAAA,CAAYC,oBAA3B;IAAiDC,MAAM,EAAEN;EAAzD,CADe,CAAjB;EAIA,IAAAO,gBAAA,EAAU,MAAM;IACd,IAAAC,8CAAA,EAA2BV,MAAM,CAACW,OAAlC,EAA2Cb,mBAA3C;EACD,CAFD,EAEG,CAACA,mBAAD,CAFH;;EAIA,MAAMc,aAAa,GAAIC,OAAD,IAA6B;IACjD,QAAQA,OAAO,CAACC,IAAhB;MACE,KAAKR,yBAAA,CAAYS,YAAjB;QACEzB,KAAK,CAAC0B,MAAN,IAAgB1B,KAAK,CAAC0B,MAAN,CAAaH,OAAO,CAACI,OAArB,CAAhB;QACA;;MACF,KAAKX,yBAAA,CAAYY,sBAAjB;QAAyC;UACvC,MAAMC,KAA0B,GAAG;YACjCC,aAAa,EAAEC,8BAAA,CAAiBC,OADC;YAEjCC,mBAAmB,EAAEjC,KAAK,CAACkC,SAFM;YAGjCC,qBAAqB,EAAEZ,OAAO,CAACI;UAHE,CAAnC;;UAKAS,iBAAA,CAASC,QAAT,CAAkBR,KAAlB,CAAwBb,yBAAA,CAAYY,sBAApC,EAA4DC,KAA5D;;UACA;QACD;;MACD,KAAKS,wBAAA,CAAYC,WAAjB;QACErC,SAAS,CAAEqB,OAAO,CAACI,OAAT,CAAiC1B,MAAlC,CAAT;QACA;IAfJ;EAiBD,CAlBD;;EAoBA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEA;IAAF;EAAb,gBACE,6BAAC,0BAAD;IACE,GAAG,EAAES,MADP;IAEE,IAAI,EAAEqB,8BAAA,CAAiBC,OAFzB;IAGE,gBAAgB,EAAEQ,0BAAA,CAAiBC,OAHrC;IAIE,MAAM,EAAE,IAAAC,oCAAA,EAAiB1C,KAAjB,CAJV;IAKE,MAAM,EAAE,IAAA2C,oCAAA,GALV;IAME,KAAK,EAAE3C,KAAK,CAAC4C,KANf;IAOE,SAAS,EAAErB,OAAO,IAAID,aAAa,CAACC,OAAD,CAPrC;IAQE,KAAK,EAAEnB,WART;IASE,YAAY,EAAE;EAThB,EADF,CADF;AAeD,CAvDM"}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.injectRefreshEventIfNeeded = exports.getAccountScript = exports.getAccountParams = exports.getAccountActionType = void 0;
+
+var _UNAccountComponent = require("./UNAccountComponent");
+
+var _unitMessages = require("../../messages/webMessages/unitMessages");
+
+var _WebComponent = require("../../webComponent/WebComponent");
+
+const getAccountParams = props => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+  `;
+};
+
+exports.getAccountParams = getAccountParams;
+
+const getAccountScript = () => {
+  return `
+    const dispatchRefreshEvent = (details) => {
+    const event = new CustomEvent("${_unitMessages.UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+    }
+  `;
+};
+
+exports.getAccountScript = getAccountScript;
+
+const injectRefreshEventIfNeeded = (currentWeb, requestRefreshEvent) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(_WebComponent.WebComponentType.account.valueOf())) {
+    currentWeb === null || currentWeb === void 0 ? void 0 : currentWeb.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};
+
+exports.injectRefreshEventIfNeeded = injectRefreshEventIfNeeded;
+
+const getAccountActionType = requestRendering => {
+  return requestRendering.data.nativeComponent.includes(_UNAccountComponent.AccountAction.List) ? _UNAccountComponent.AccountAction.List : _UNAccountComponent.AccountAction.Menu;
+};
+
+exports.getAccountActionType = getAccountActionType;
+//# sourceMappingURL=UNAccountComponent.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getAccountParams","props","accountId","customerToken","getAccountScript","UnitMessage","UNIT_REQUEST_REFRESH","injectRefreshEventIfNeeded","currentWeb","requestRefreshEvent","dependencies","includes","WebComponentType","account","valueOf","injectJavaScript","JSON","stringify","getAccountActionType","requestRendering","data","nativeComponent","AccountAction","List","Menu"],"sources":["UNAccountComponent.utils.ts"],"sourcesContent":["import { AccountAction, UNAccountComponentProps } from './UNAccountComponent';\nimport { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';\nimport type WebView from 'react-native-webview';\nimport { WebComponentType } from '../../webComponent/WebComponent';\n\nexport const getAccountParams = (props: UNAccountComponentProps) => {\n  return `\n    account-id=\"${props.accountId}\"\n    customer-token=\"${props.customerToken}\"\n  `;\n};\n\nexport const getAccountScript = () => {\n  return `\n    const dispatchRefreshEvent = (details) => {\n    const event = new CustomEvent(\"${UnitMessage.UNIT_REQUEST_REFRESH}\",{ detail: JSON.parse(details) })\n    window.dispatchEvent(event)\n    }\n  `;\n};\n\nexport const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {\n  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.account.valueOf())) {\n    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);\n  }\n};\n\nexport const getAccountActionType = (requestRendering: RequestRenderingEvent) => {\n  return requestRendering.data.nativeComponent.includes(AccountAction.List) ? AccountAction.List : AccountAction.Menu;\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEO,MAAMA,gBAAgB,GAAIC,KAAD,IAAoC;EAClE,OAAQ;AACV,kBAAkBA,KAAK,CAACC,SAAU;AAClC,sBAAsBD,KAAK,CAACE,aAAc;AAC1C,GAHE;AAID,CALM;;;;AAOA,MAAMC,gBAAgB,GAAG,MAAM;EACpC,OAAQ;AACV;AACA,qCAAqCC,yBAAA,CAAYC,oBAAqB;AACtE;AACA;AACA,GALE;AAMD,CAPM;;;;AASA,MAAMC,0BAA0B,GAAG,CAACC,UAAD,EAA6BC,mBAA7B,KAAiF;EACzH,IAAIA,mBAAmB,IAAIA,mBAAmB,CAACC,YAApB,CAAiCC,QAAjC,CAA0CC,8BAAA,CAAiBC,OAAjB,CAAyBC,OAAzB,EAA1C,CAA3B,EAA0G;IACxGN,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEO,gBAAZ,CAA8B,yBAAwBC,IAAI,CAACC,SAAL,CAAeR,mBAAf,CAAoC,IAA1F;EACD;AACF,CAJM;;;;AAMA,MAAMS,oBAAoB,GAAIC,gBAAD,IAA6C;EAC/E,OAAOA,gBAAgB,CAACC,IAAjB,CAAsBC,eAAtB,CAAsCV,QAAtC,CAA+CW,iCAAA,CAAcC,IAA7D,IAAqED,iCAAA,CAAcC,IAAnF,GAA0FD,iCAAA,CAAcE,IAA/G;AACD,CAFM"}

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

@@ -5,7 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UNActivityComponent = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _unitMessages = require("../../messages/webMessages/unitMessages");
+
+var _listenerToBus = require("../../hooks/listenerToBus");
+
+var _pageMessage = require("../../messages/webMessages/pageMessage");
 
 var _bodyHtml = require("../../scripts/html/bodyHtml");
 
@@ -13,15 +21,62 @@ var _WebComponent = require("../../webComponent/WebComponent");
 
 var _UNActivityComponent = require("./UNActivityComponent.utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 DEFAULT_HEIGHT = _reactNative.Dimensions.get('window').height * 0.5;
 
 const UNActivityComponent = props => {
-  return /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
-    type: _WebComponent.WebComponentType.activity,
-    presentationMode: _bodyHtml.PresentationMode.Inherit,
-    params: (0, _UNActivityComponent.getActivityParams)(props),
-    isScrollable: false
-  });
+  const webRef = (0, _react.useRef)(null);
+  const [defaultHeight, setDefaultHeight] = (0, _react.useState)();
+
+  const requestRefresh = data => {
+    (0, _UNActivityComponent.injectRefreshEventIfNeeded)(webRef.current, data);
+  };
+
+  (0, _listenerToBus.useListenerToBus)([{
+    busEventKey: _unitMessages.UnitMessage.UNIT_REQUEST_REFRESH,
+    action: requestRefresh
+  }]);
+
+  const handleWebViewMessage = message => {
+    switch (message.type) {
+      case _unitMessages.UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details);
+        break;
+
+      case _pageMessage.PageMessage.PAGE_HEIGHT:
+        {
+          const currentHeight = message.details.height;
+          currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+          break;
+        }
+    }
+  };
+
+  const renderActivityWebView = () => {
+    return /*#__PURE__*/_react.default.createElement(_WebComponent.WebComponent, {
+      ref: webRef,
+      type: _WebComponent.WebComponentType.activity,
+      presentationMode: _bodyHtml.PresentationMode.Inherit,
+      params: (0, _UNActivityComponent.getActivityParams)(props),
+      onMessage: message => handleWebViewMessage(message),
+      nestedScrollEnabled: true,
+      theme: props.theme,
+      script: (0, _UNActivityComponent.getActivityScript)()
+    });
+  };
+
+  if (!defaultHeight) {
+    return renderActivityWebView();
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: defaultHeight
+    }
+  }, renderActivityWebView());
 };
 
 exports.UNActivityComponent = UNActivityComponent;

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

@@ -1 +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      isScrollable={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,YAAY,EAAE;EAJhB,EADF;AAQD,CATM"}
+{"version":3,"names":["DEFAULT_HEIGHT","Dimensions","get","height","UNActivityComponent","props","webRef","useRef","defaultHeight","setDefaultHeight","useState","requestRefresh","data","injectRefreshEventIfNeeded","current","useListenerToBus","busEventKey","UnitMessage","UNIT_REQUEST_REFRESH","action","handleWebViewMessage","message","type","UNIT_ON_LOAD","onLoad","details","PageMessage","PAGE_HEIGHT","currentHeight","renderActivityWebView","WebComponentType","activity","PresentationMode","Inherit","getActivityParams","theme","getActivityScript"],"sources":["UNActivityComponent.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { Dimensions, View } from 'react-native';\nimport { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../../hooks/listenerToBus';\nimport type { WebViewMessage } from '../../messages/webMessages';\nimport { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';\nimport { PresentationMode } from '../../scripts/html/bodyHtml';\nimport type { ResponseUnitOnLoadEvent } from '../../sharedTypes';\nimport { WebComponent, WebComponentType } from '../../webComponent/WebComponent';\nimport { getActivityParams, getActivityScript, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';\nimport type WebView from 'react-native-webview';\n\nconst DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;\nexport interface UNActivityComponentProps {\n  accountId: string;\n  customerToken: string;\n  theme?: string;\n  onLoad?: (response: ResponseUnitOnLoadEvent) => void\n}\n\nexport const UNActivityComponent = (props: UNActivityComponentProps) => {\n  const webRef = useRef<WebView>(null);\n  const [defaultHeight, setDefaultHeight] = useState<number>();\n\n  const requestRefresh = (data: RequestRefreshEvent) => {\n    injectRefreshEventIfNeeded(webRef.current, data);\n  };\n\n  useListenerToBus([\n    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },\n  ]);\n\n  const handleWebViewMessage = (message: WebViewMessage) => {\n    switch (message.type) {\n      case UnitMessage.UNIT_ON_LOAD:\n        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);\n        break;\n      case PageMessage.PAGE_HEIGHT: {\n        const currentHeight = (message.details as HeightEvent).height;\n        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);\n        break;\n      }\n    }\n  };\n\n  const renderActivityWebView = () => {\n    return (\n      <WebComponent\n        ref={webRef}\n        type={WebComponentType.activity}\n        presentationMode={PresentationMode.Inherit}\n        params={getActivityParams(props)}\n        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}\n        nestedScrollEnabled={true}\n        theme={props.theme}\n        script={getActivityScript()}\n      />\n    );\n  };\n\n  if (!defaultHeight) {\n    return renderActivityWebView();\n  }\n\n  return (\n    <View style={{ height: defaultHeight }}>\n      {renderActivityWebView()}\n    </View>\n  );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;AAGA,MAAMA,cAAc,GAAGC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAzB,GAAkC,GAAzD;;AAQO,MAAMC,mBAAmB,GAAIC,KAAD,IAAqC;EACtE,MAAMC,MAAM,GAAG,IAAAC,aAAA,EAAgB,IAAhB,CAAf;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,GAA1C;;EAEA,MAAMC,cAAc,GAAIC,IAAD,IAA+B;IACpD,IAAAC,+CAAA,EAA2BP,MAAM,CAACQ,OAAlC,EAA2CF,IAA3C;EACD,CAFD;;EAIA,IAAAG,+BAAA,EAAiB,CACf;IAAEC,WAAW,EAAEC,yBAAA,CAAYC,oBAA3B;IAAiDC,MAAM,EAAER;EAAzD,CADe,CAAjB;;EAIA,MAAMS,oBAAoB,GAAIC,OAAD,IAA6B;IACxD,QAAQA,OAAO,CAACC,IAAhB;MACE,KAAKL,yBAAA,CAAYM,YAAjB;QACElB,KAAK,CAACmB,MAAN,IAAgBnB,KAAK,CAACmB,MAAN,CAAaH,OAAO,CAACI,OAArB,CAAhB;QACA;;MACF,KAAKC,wBAAA,CAAYC,WAAjB;QAA8B;UAC5B,MAAMC,aAAa,GAAIP,OAAO,CAACI,OAAT,CAAiCtB,MAAvD;UACAyB,aAAa,KAAK,CAAlB,IAAuBnB,gBAAgB,CAACT,cAAD,CAAvC;UACA;QACD;IARH;EAUD,CAXD;;EAaA,MAAM6B,qBAAqB,GAAG,MAAM;IAClC,oBACE,6BAAC,0BAAD;MACE,GAAG,EAAEvB,MADP;MAEE,IAAI,EAAEwB,8BAAA,CAAiBC,QAFzB;MAGE,gBAAgB,EAAEC,0BAAA,CAAiBC,OAHrC;MAIE,MAAM,EAAE,IAAAC,sCAAA,EAAkB7B,KAAlB,CAJV;MAKE,SAAS,EAAGgB,OAAD,IAA6BD,oBAAoB,CAACC,OAAD,CAL9D;MAME,mBAAmB,EAAE,IANvB;MAOE,KAAK,EAAEhB,KAAK,CAAC8B,KAPf;MAQE,MAAM,EAAE,IAAAC,sCAAA;IARV,EADF;EAYD,CAbD;;EAeA,IAAI,CAAC5B,aAAL,EAAoB;IAClB,OAAOqB,qBAAqB,EAA5B;EACD;;EAED,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAE1B,MAAM,EAAEK;IAAV;EAAb,GACGqB,qBAAqB,EADxB,CADF;AAKD,CAjDM"}

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

@@ -3,18 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActivityParams = void 0;
+exports.injectRefreshEventIfNeeded = exports.getActivityScript = exports.getActivityParams = void 0;
 
-var _UnitSdkManager = require("../../unitSdkManager/UnitSdkManager");
+var _WebComponent = require("./../../webComponent/WebComponent");
+
+var _bodyScript = require("./../../scripts/html/bodyScript");
 
 const getActivityParams = props => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
-    theme="${props.theme ?? _UnitSdkManager.UnitSDK.getTheme()}"
     style="height: 100%"
   `;
 };
 
 exports.getActivityParams = getActivityParams;
+
+const getActivityScript = () => {
+  return _bodyScript.DISPATCH_REQUEST_REFRESH;
+};
+
+exports.getActivityScript = getActivityScript;
+
+const injectRefreshEventIfNeeded = (currentWeb, requestRefreshEvent) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(_WebComponent.WebComponentType.activity.valueOf())) {
+    currentWeb === null || currentWeb === void 0 ? void 0 : currentWeb.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};
+
+exports.injectRefreshEventIfNeeded = injectRefreshEventIfNeeded;
 //# sourceMappingURL=UNActivityComponent.utils.js.map