react-native-unit-components 2.1.0 → 2.2.0

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -89,7 +89,6 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
   const withPlaid = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'with-plaid');
@@ -106,7 +105,6 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
       withPlaid: withPlaid ? withPlaid === 'true' : undefined,
@@ -123,7 +121,6 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
   const plaidLinkCustomizationName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-link-customization-name');
@@ -139,7 +136,6 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
       plaidAccountFilters: plaidAccountFiltersArray,
@@ -206,7 +202,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
@@ -221,7 +216,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent.tsx

@@ -134,7 +134,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
       );
     case BottomSheetNativePlaceType.overFullScreen:
       return (
-        <UNKeyboardAvoidingView style={{ height }}>
+        <UNKeyboardAvoidingView style={{ height, padding, paddingTop, paddingBottom }}>
           {renderNativeComponent()}
         </UNKeyboardAvoidingView>
       );

package/src/components/UNBottomSheetComponent/components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent.tsx

@@ -30,12 +30,13 @@ import {
 } from '../../../../slices/BottomSheetSlice';
 import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
 import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
-import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { BOTTOM_PADDING, fullScreenHeight, LEFT_PADDING, overFullScreenHeight, RIGHT_PADDING, statusBarHeight, TOP_PADDING, VERTICAL_PADDING } from '../../UNBottomSheetComponent.constants';
 import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
 import { OpenPlaidEvent, PlaidMessage } from '../../../../messages/webMessages/plaidMessages';
 import { PayeeCounterpartyEvent, PayeeManagementMessage } from '../../../../messages/webMessages/payeeManagementMessage';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
 import { MultipleCardsFiltersChangedEvent, MultipleCardsMessage } from '../../../../messages/webMessages/multipleCardsMessage';
+import { View } from 'react-native';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -101,17 +102,35 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       case PageMessage.PAGE_HEIGHT: {
         const height = (message.details as HeightEvent).height;
         switch (nativePlace) {
-          case BottomSheetNativePlaceType.overFullScreen:
-            injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+          case BottomSheetNativePlaceType.overFullScreen: {
+            if (!props.requestRenderingEvent.data.isPaddingIncluded) {
+              injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight - VERTICAL_PADDING);
+            } else {
+              injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+            }
             break;
-          case BottomSheetNativePlaceType.modal:
-            injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+          }
+          case BottomSheetNativePlaceType.modal:  {
+            if (!props.requestRenderingEvent.data.isPaddingIncluded) {
+              injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight - VERTICAL_PADDING);
+            } else {
+              injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+            }
             break;
+          }
           case BottomSheetNativePlaceType.menu: case BottomSheetNativePlaceType.contentHeight:
             if (height < overFullScreenHeight) {
-              dispatch(setComponentHeight(height));
+              dispatch(setComponentHeight(
+                props.requestRenderingEvent.data.isPaddingIncluded ? 
+                  height :
+                  height + VERTICAL_PADDING
+              ));
             } else {
-              dispatch(setComponentHeight(overFullScreenHeight));
+              dispatch(setComponentHeight(
+                props.requestRenderingEvent.data.isPaddingIncluded ? 
+                  overFullScreenHeight :
+                  overFullScreenHeight + VERTICAL_PADDING
+              ));
             }
             break;
         }
@@ -194,19 +213,29 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       dispatch(setShouldEnableBottomSheetScroll(false));
     }
   };
+  
+  // If isPaddingIncluded is true, we don't need to add padding to the web component
+  const paddingStyle = !props.requestRenderingEvent.data.isPaddingIncluded ? {
+    paddingTop: TOP_PADDING,
+    paddingBottom: BOTTOM_PADDING,
+    paddingLeft: LEFT_PADDING,
+    paddingRight: RIGHT_PADDING,
+  } : {};
 
   return (
-    <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.slot}
-        presentationMode={PresentationMode.CoverInjectedHeight}
-        script={getBottomSheetScript()}
-        onMessage={_onWebMessage}
-        isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-        handleScroll={_onScrollWebView}
-      />
-    </UNKeyboardAvoidingView>
+    <View style={paddingStyle}>
+      <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.slot}
+          presentationMode={PresentationMode.CoverInjectedHeight}
+          script={getBottomSheetScript()}
+          onMessage={_onWebMessage}
+          isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+          handleScroll={_onScrollWebView}
+        />
+      </UNKeyboardAvoidingView>
+    </View>
   );
 };
 

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -37,6 +37,7 @@ export interface UNMultipleCardsComponentProps {
   cardsPerPage?: number;
   disableCardClick?: boolean;
   isRowItemClickable?: boolean;
+  showSeeAllCardsLink?: boolean;
   theme?: string;
   language?: string;
   queryFilter?: string;

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.utils.ts

@@ -12,6 +12,7 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   ${cardsPerPage}
   disable-card-click="${props.disableCardClick || false}"
   is-row-item-clickable="${props.isRowItemClickable || false}"
+  show-see-all-cards-link="${props.showSeeAllCardsLink || false}"
   ${queryFilter}
   hide-title="${props.hideTitle || false}"
   hide-back-to-top="${props.hideBackToTop || false}"

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -43,6 +43,7 @@ export interface UNPayeeManagementComponentProps {
 
   hideTitle?: boolean;
   hideCounterpartyActionsButton?: boolean;
+  showAccountTypeSelector?: boolean;
 
   menuPlaceholder?: string;
   flowPlaceholder?: string;

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.utils.ts

@@ -3,7 +3,7 @@ import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { UNPayeeManagementComponentProps } from './UNPayeeManagementComponent';
-import { DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_COUNTERPARTY_DELETED, DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
 import { LinkError, LinkSuccess } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent } from '../../messages/webMessages/plaidMessages';
 
@@ -28,6 +28,7 @@ export const getPayeeParams = (props: UNPayeeManagementComponentProps) => {
     ${counterPartiesPerPageParam}
     hide-title="${props.hideTitle || false}"
     hide-counterparty-actions-button="${props.hideCounterpartyActionsButton || false}"
+    show-account-type-selector="${props.showAccountTypeSelector ?? false}"
     ${menuPlaceholderParam}
     ${flowPlaceholderParam}
     ${payeeCreationPlaceholderParam}
@@ -49,6 +50,7 @@ export const getPayeeManagementScript = () => {
     ${DISPATCH_PLAID_EXIT}
     ${DISPATCH_OPEN_PLAID}
     ${DISPATCH_REQUEST_REFRESH}
+    ${DISPATCH_COUNTERPARTY_DELETED}
   `;
 };
 

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.tsx

@@ -16,7 +16,6 @@ import { WirePaymentCreatedEvent } from '../../messages/webMessages/wirePaymentM
 export interface UNWirePaymentComponentProps {
   // inputs
   accountId?: string;
-  fee?: number;
 
   // ui
   theme?: string;

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.utils.ts

@@ -3,10 +3,8 @@ import { UNWirePaymentComponentProps } from './UNWirePaymentComponent';
 
 export const getWirePaymentParams = (props: UNWirePaymentComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
-  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     ${accountIdParam}
-    ${feeParam}
     is-auto-focus="${props.isAutoFocus || false}"
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"

package/src/messages/webMessages/unitComponentsMessages.ts

@@ -30,6 +30,7 @@ export interface RequestRenderingEventData {
   nativeComponentName?: WebComponentType,
   nativePlace: BottomSheetNativePlaceType,
   nativeComponent: string,
+  isPaddingIncluded: boolean
 }
 
 export interface RequestRefreshEvent {

package/src/scripts/html/bodyScript.ts

@@ -375,3 +375,10 @@ export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
       document.querySelector("unit-elements-account").dispatchEvent(new CustomEvent("unitRequestAccountAction", {detail: {action: action}}))
     }
 `;
+
+export const DISPATCH_COUNTERPARTY_DELETED = `
+  const dispatchCounterpartyDeletedEvent = (details) => {
+    const event = new CustomEvent("unitCounterpartyDeleted",{ detail: { data: details } });
+    window.dispatchEvent(event);
+  }
+`;

package/src/unitComponentsSdkManager/UnitComponentsSdk.constants.ts

@@ -4,7 +4,7 @@ import { UNComponentsSecuritySettings, UNComponentsSnapshotProtectionStrategy }
 const WEB_SDK_RECOMMENDED_STRATEGY: UNComponentsWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
   major: 2,
-  minor: 4,
+  minor: 5,
 };
 
 const DEFAULT_SECURITY_SETTINGS: UNComponentsSecuritySettings = {

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -25,7 +25,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '2.1.0';
+  protected static sdkVersion = '2.2.0';
 
   public static init = async (
     env: UNComponentsEnvironment,

package/src/webComponent/html.ts

@@ -14,7 +14,7 @@ import {
   DISPATCH_EVENT_TO_CONTINUE,
   DISPATCH_CARD_STATUS_CHANGED,
   DISPATCH_MULTIPLE_CARDS_FILTER_CHANGED_EVENT,
-  DISPATCH_CARD_CREATED_EVENT
+  DISPATCH_CARD_CREATED_EVENT,
 } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {