react-native-unit-components 1.10.0 → 1.11.0

package/lib/typescript/src/webComponent/WebComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebComponent.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAWpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAM/F,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,uFAuHvB,CAAC"}

package/lib/typescript/src/webComponent/WebComponent.utils.d.ts

@@ -3,3 +3,4 @@ export declare const getInfoParams: () => Promise<{
     [key: string]: string;
 }>;
 export declare const handleRequestDownload: (details: RequestDownloadEvent, onReadyToShare: () => void) => Promise<void>;
+//# sourceMappingURL=WebComponent.utils.d.ts.map

package/lib/typescript/src/webComponent/WebComponent.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebComponent.utils.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAGjF,eAAO,MAAM,aAAa;;EAazB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAAmB,oBAAoB,kBAAkB,MAAM,IAAI,kBAoBpG,CAAC"}

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

@@ -7,3 +7,4 @@ export declare const HTML_PLACEHOLDER: {
 };
 declare const htmlText: string;
 export default htmlText;
+//# sourceMappingURL=html.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/html.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,QAAA,MAAM,QAAQ,QAyEb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
@@ -24,50 +24,47 @@
   "scripts": {
     "test": "jest",
     "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "eslint \"**/*.{ts,tsx}\" --fix",
     "prepare": "bob build",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn && yarn example pods"
+    "cleanNodeModules": "rm -rf node_modules",
+    "bootstrap": "yarn cleanNodeModules && yarn example cleanNodeModules && yarn example && yarn && yarn example pods"
   },
   "keywords": [
     "react-native",
-    "ios",
-    "android"
+    "Unit",
+    "components"
   ],
-  "author": "Alon Shprung <alonshp1@gmail.com> (https://github.com/alonshp)",
+  "author": "Unit",
   "license": "MIT",
   "homepage": "https://www.unit.co",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@arkweid/lefthook": "^0.7.7",
     "@babel/eslint-parser": "^7.18.2",
-    "@commitlint/config-conventional": "^17.0.2",
     "@react-native-community/eslint-config": "^3.0.2",
-    "@release-it/conventional-changelog": "^5.0.0",
-    "@types/jest": "^28.1.2",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "0.72.2",
+    "@types/jest": "^26.0.14",
+    "@types/react": "18.2.0",
+    "@types/react-native": "^0.69.9",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "commitlint": "^17.0.2",
-    "eslint": "^8.29.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.31.11",
-    "jest": "^28.1.1",
-    "pod-install": "^0.1.0",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
     "prettier": "^2.0.5",
-    "react": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-builder-bob": "^0.18.3",
-    "react-native-webview": "^13.6.2",
+    "react": "18.2.0",
+    "react-native": "0.69.9",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-webview": "^13.6.3",
     "typescript": "^4.5.2"
   },
   "resolutions": {
-    "@types/react": "18.0.0"
+    "@types/react": "^16.14.20"
   },
   "peerDependencies": {
     "react": "*",
@@ -77,9 +74,9 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.3.3",
-    "react-native-plaid-link-sdk": "^9.0.1",
-    "react-native-webview": "^13.6.2",
+    "axios": "^1.6.5",
+    "react-native-plaid-link-sdk": "^11.5.1",
+    "react-native-webview": "^13.6.3",
     "react-redux": "^8.1.2"
   },
   "jest": {
@@ -89,11 +86,6 @@
       "<rootDir>/lib/"
     ]
   },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
   "eslintConfig": {
     "root": true,
     "parser": "@babel/eslint-parser",
@@ -114,10 +106,6 @@
       ]
     }
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,

package/react-native-unit-components.podspec

@@ -16,20 +16,27 @@ Pod::Spec.new do |s|
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
   s.dependency "React-Core"
 
   # Don't install the dependencies when we run `pod install` in the old architecture.
   if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
     s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
+    s.pod_target_xcconfig = {
         "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
         "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
     }
-
+    s.dependency "React-RCTFabric"
     s.dependency "React-Codegen"
     s.dependency "RCT-Folly"
     s.dependency "RCTRequired"
     s.dependency "RCTTypeSafety"
     s.dependency "ReactCommon/turbomodule/core"
+    end
   end
 end

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -8,15 +8,21 @@ import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  PlaidLinkTokenData,
+  PlaidTokenCreatedEvent,
+  RequestExternalSdkEvent,
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import * as AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNPlaidAccountFilter } from '../../types/shared';
 
 export interface UNACHCreditComponentProps {
-  accountId: string;
+  accountId?: string;
   customerToken: string;
   theme?: string;
   language?: string;
@@ -24,8 +30,14 @@ export interface UNACHCreditComponentProps {
   fee?: number;
   withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
   sameDay?: boolean;
+  plaidAccountFilters?: UNPlaidAccountFilter[];
+  plaidLinkCustomizationName?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
 }
 
 const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
@@ -61,7 +73,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         data: {
           [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
-        }
+        },
       };
       props.onLoad(achOnload);
       return;
@@ -75,6 +87,14 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
       case PaymentMessage.PAYMENT_CREATED: {
         const achCreditEvent = message.details as ACHEvent;
         props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHData);
@@ -106,7 +126,9 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => { console.log(exit); }
+          onExit: exit => {
+            console.log(exit);
+          },
         }).catch(e => {
           console.error(e);
         });

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -4,14 +4,21 @@ import type { LinkSuccess } from 'react-native-plaid-link-sdk';
 import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
+  const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
+  const plaidLinkCustomizationNameParam = props.plaidLinkCustomizationName ? `plaid-link-customization-name="${props.plaidLinkCustomizationName}"` : '';
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
+    ${accountIdParam}
     customer-token="${props.customerToken}"
     with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    ${plaidAccountFiltersParam}
+    ${plaidLinkCustomizationNameParam}
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -20,11 +27,15 @@ export const getACHCreditScript = (appPackageName?: string) => {
     ${LISTENERS.unitPlaidTokenCreated}
     ${appPackageName && `window.UnitMobileSDKConfig.androidPackageName='${appPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${LISTENERS.requestRefresh}
+
   `;
 };
 
 export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
-  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -4,7 +4,12 @@ import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
-import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  PlaidLinkTokenData,
+  PlaidTokenCreatedEvent,
+  RequestExternalSdkEvent,
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
 import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
@@ -15,9 +20,10 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import * as AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNPlaidAccountFilter } from '../../types/shared';
 
 export interface UNACHDebitComponentProps {
-  accountId: string;
+  accountId?: string;
   customerToken: string;
   theme?: string;
   language?: string;
@@ -25,7 +31,13 @@ export interface UNACHDebitComponentProps {
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
   sameDay?: boolean;
+  plaidAccountFilters?: UNPlaidAccountFilter[];
+  plaidLinkCustomizationName?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
 }
 
 const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
@@ -61,7 +73,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         data: {
           [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
-        }
+        },
       };
       props.onLoad(achOnload);
       return;
@@ -75,6 +87,14 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
       case PaymentMessage.PAYMENT_CREATED: {
         const achDebitEvent = message.details as ACHEvent;
         props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHData);
@@ -106,7 +126,9 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => { console.log(exit); }
+          onExit: exit => {
+            console.log(exit);
+          },
         }).catch(e => {
           console.error(e);
         });

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -5,13 +5,20 @@ import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
+  const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
+  const plaidLinkCustomizationNameParam = props.plaidLinkCustomizationName ? `plaid-link-customization-name="${props.plaidLinkCustomizationName}"` : '';
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
+    ${accountIdParam}
     customer-token="${props.customerToken}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    ${plaidAccountFiltersParam}
+    ${plaidLinkCustomizationNameParam}
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -20,11 +27,14 @@ export const getACHDebitScript = (androidPackageName?: string) => {
     ${LISTENERS.unitPlaidTokenCreated}
     ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${LISTENERS.requestRefresh}
     `;
 };
 
 export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
-  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,8 +1,13 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  RequestRefreshEvent,
+  RequestRenderingEvent,
+  UnitMessage,
+  UnitRequestRefreshEventTypes,
+} from '../../messages/webMessages/unitMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -20,34 +25,39 @@ import type { UNAccountMenuAction } from '../../types/shared';
 import {
   BottomSheetRenderingType,
   SlotRendering,
-  type BottomSheetSlotData,
 } from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
 
 export interface UNAccountComponentProps {
   // inputs
   accountId?: string;
   customerToken: string;
+  menuItems?: UNAccountMenuItem[];
 
   // ui
   theme?: string;
   language?: string;
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
+  showLeftToSpend?: boolean;
 
   // events
   onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
   onAccountChanged?: (account: UNAccountData) => void;
+  onRequestLeftToSpendDetails?: (account: UNCreditAccount) => void;
 }
 
 export interface UNAccountRef {
   openActionsMenu: () => void;
   openAction: (action: UNAccountMenuAction) => void;
+  refresh: () => void;
 }
 
 export enum UNAccountAction {
@@ -59,17 +69,21 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
   const dispatch = useDispatch();
   const [height, setHeight] = useState(0);
-
-  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
-
   const webRef = useRef<WebView>(null);
+  // currentAccountId is used to store the current account id for the "imperative" refresh event.
+  const accountIdRef = useRef<string | undefined>(props.accountId);
 
   const handleAccountChanged = (account: UNAccountData) => {
+    accountIdRef.current = account.id;
     props.onAccountChanged && props.onAccountChanged(account);
   };
 
   const requestRefresh = (data: RequestRefreshEvent) => {
-    setRequestRefreshEvent(data);
+    injectRefreshEventIfNeeded(webRef.current, data);
+  };
+
+  const handleRequestLeftToSpendDetails = (accountData: UNCreditAccount) => {
+    props.onRequestLeftToSpendDetails && props.onRequestLeftToSpendDetails(accountData);
   };
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
@@ -84,7 +98,12 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
     if (RESPONSE_KEYS.account in response) {
       // AccountsOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      const accountResponse = response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>;
+      props.onLoad(accountResponse);
+      // if accountId is not provided, set the first account as current
+      if (!props.accountId && accountResponse.data && accountResponse.data.length > 0) {
+        accountIdRef.current = accountResponse.data[0].id;
+      }
       return;
     }
 
@@ -94,10 +113,6 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
-  useEffect(() => {
-    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
-  }, [requestRefreshEvent]);
-
   useImperativeHandle(accountRef, () => ({
     openActionsMenu() {
       injectOpenActionsMenuScript(webRef.current);
@@ -105,6 +120,14 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     openAction(action: UNAccountMenuAction) {
       injectRequestAccountActionScript(webRef.current, action);
     },
+    refresh() {
+      requestRefresh({
+        type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT,
+        refEvent: undefined,
+        dependencies: [WebComponentType.account.valueOf()],
+        resourceId: accountIdRef.current,
+      });
+    },
   }));
 
   const handleMessage = (message: WebViewMessage) => {
@@ -124,13 +147,16 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
-        
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+
         break;
       }
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
+      case UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
+        handleRequestLeftToSpendDetails(message.details as UNCreditAccount);
+        break;
     }
   };
 

package/src/components/UNAccountComponent/UNAccountComponent.utils.ts

@@ -1,25 +1,28 @@
 import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
 import type WebView from 'react-native-webview';
-import type { UNAccountMenuAction } from 'src/types/shared';
+import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_REQUEST_REFRESH } from '../../scripts/html/bodyScript';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
+    show-left-to-spend="${props.showLeftToSpend || false}"
+    ${menuItemsParam}
   `;
 };
 
 export const getAccountScript = () => {
   return `
-    const dispatchRefreshEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
-    window.dispatchEvent(event)
-    }
+    ${DISPATCH_REQUEST_REFRESH}
+    ${LISTENERS.unitRequestLeftToSpendDetails}
   `;
 };
 

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,6 +1,11 @@
-import React, { useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  RequestRefreshEvent,
+  RequestRenderingEvent,
+  UnitMessage,
+  UnitRequestRefreshEventTypes,
+} from '../../messages/webMessages/unitMessages';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
@@ -17,12 +22,11 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import {
   BottomSheetRenderingType,
-  type BottomSheetSlotData,
-  type SlotRendering,
 } from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { withReduxStore } from '../../helpers/store/helpers';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
@@ -40,13 +44,19 @@ export interface UNActivityComponentProps {
   theme?: string;
   language?: string;
   hideFilterButton?: boolean;
+  hideTitle?: boolean;
+  hideBackToTop?: boolean;
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
   // event
   onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
-const UNActivityComponent = (props: UNActivityComponentProps) => {
+export interface UNActivityRef {
+  refresh: () => void;
+}
+
+const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentProps>(function UNActivityComponent(props, activityRef) {
   const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
@@ -55,6 +65,17 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
     injectRefreshEventIfNeeded(webRef.current, data);
   };
 
+  useImperativeHandle(activityRef, () => ({
+    refresh() {
+      requestRefresh({
+        type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT,
+        refEvent: undefined,
+        dependencies: [WebComponentType.activity.valueOf()],
+        resourceId: '',
+      });
+    },
+  }));
+
   const dispatchActivityFiltersChanged = (query: string) => {
     injectFiltersChanged(webRef.current, query);
   };
@@ -105,7 +126,7 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
@@ -144,6 +165,6 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
       {renderActivityWebView()}
     </View>
   );
-};
+});
 
-export default withReduxStore<UNActivityComponentProps>(UNActivityComponent);
+export default withReduxStoreAndRefForwarding<UNActivityComponentProps, UNActivityRef>(UNActivityComponent);