react-native-unit-components 2.0.1 → 2.1.0

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

@@ -13,6 +13,7 @@ import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDep
 import UNACHDebitComponent from '../../../UNACHDebitComponent/UNACHDebitComponent';
 import UNBookPaymentComponent from '../../../UNBookPaymentComponent/UNBookPaymentComponent';
 import UNWirePaymentComponent from '../../../UNWirePaymentComponent/UNWirePaymentComponent';
+import UNCreateCardComponent from '../../../UNCreateCardComponent/UNCreateCardComponent';
 import { PageMessage } from '../../../../messages/webMessages/pageMessage';
 import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
@@ -115,6 +116,12 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.CreateCardComponent:
+        return (
+          <UNCreateCardComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
     }
   };
 

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

@@ -35,6 +35,7 @@ import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bo
 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';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -161,6 +162,12 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           data: (message.details as ActivityFiltersChangedEvent),
         }));
         break;
+      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED:
+        dispatch(setEvent({
+          key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
+          data: (message.details as MultipleCardsFiltersChangedEvent),
+        }));
+        break;
       case PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED: {
         dispatch(setEvent({
           key: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -45,6 +45,8 @@ export interface UNCardComponentProps {
   hideActionsMenuButton?: boolean;
   hideCardTitle?: boolean;
   hideSensitiveDataButton?: boolean;
+  showCardTypeSubtitle?: boolean;
+  showCardHolderSubtitle?: boolean;
 
   // events
   onLoad?: (response: UNComponentsOnLoadResponse<UNCard>) => void;

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -18,6 +18,8 @@ export const getCardParams = (props: UNCardComponentProps) => {
     learn-more-url="${props.learnMoreUrl || ''}"
     ${feeParam}
     ${menuItemsParam}
+    show-card-type-subtitle="${props.showCardTypeSubtitle || false}"
+    show-card-holder-subtitle="${props.showCardHolderSubtitle || false}"
   `;
 };
 
@@ -40,8 +42,9 @@ export const injectRequestHideSensitiveDataScript = (currentWeb: WebView | null)
 export const injectRequestShowSensitiveDataScript = (currentWeb: WebView | null) => {
   currentWeb?.injectJavaScript(`dispatchRequestShowSensitiveData('${WebComponentType.card}')`);
 };
+
 export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => {
   if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == cardId) {
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
-};
+};

package/src/components/UNCreateCardComponent/UNCreateCardComponent.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getCreateCardParams } from './UNCreateCardComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { UNCard, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { UNCreateCardComponentResources, UNCreateCardType } from '../../types/shared/createCard.types';
+import { CardCreatedEvent, CardMessage } from '../../messages/webMessages/cardMessage';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+
+export interface UNCreateCardComponentProps {
+  // inputs
+  accountId?: string;
+  cardTypes: UNCreateCardType[];
+  virtualCardFee?: number;
+  physicalCardFee?: number;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNComponentsOnLoadResponse<UNCreateCardComponentResources>) => void
+  onCardCreated?: (cardData: UNCard) => void
+}
+
+const UNCreateCardComponent = (props: UNCreateCardComponentProps) => {
+  const dispatch = useDispatch();
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNComponentsError);
+      return;
+    }
+    if (RESPONSE_KEYS.createCardResult in response) {
+      const createCardResponse = response[RESPONSE_KEYS.createCardResult] as UNComponentsOnLoadResponseData<UNCreateCardComponentResources>;
+      props.onLoad(createCardResponse);
+      return;
+    }
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case UnitComponentsMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+      case CardMessage.CARD_CREATED:
+        dispatch(setEvent({
+          key: CardMessage.CARD_CREATED,
+          data: (message.details as CardCreatedEvent),
+        }));
+        props.onCardCreated && props.onCardCreated(message.details as UNCard);
+        break;
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad} fallback={<></>}>
+    <WebComponent
+      type={WebComponentType.createCard}
+      presentationMode={PresentationMode.Inherit}
+      params={getCreateCardParams(props)}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      theme={props.theme}
+      language={props.language}
+    />
+  </UNBaseView>;
+};
+
+export default withReduxStore<UNCreateCardComponentProps>(UNCreateCardComponent);

package/src/components/UNCreateCardComponent/UNCreateCardComponent.utils.ts

@@ -0,0 +1,14 @@
+import { UNCreateCardComponentProps } from "./UNCreateCardComponent";
+
+export const getCreateCardParams = (props: UNCreateCardComponentProps) => {
+  const cardTypesParam = props.cardTypes ? `card-types="${props.cardTypes.join()}"` : '';
+  const physicalFeeParam = props.physicalCardFee ? `physical-card-fee="${props.physicalCardFee}"` : '';
+  const virtualFeeParam = props.virtualCardFee ? `virtual-card-fee="${props.virtualCardFee}"` : '';
+
+  return `
+    account-id="${props.accountId}"
+    ${cardTypesParam}
+    ${physicalFeeParam}
+    ${virtualFeeParam}
+  `;
+};

package/src/components/UNCreateCardComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNCreateCardComponent, UNCreateCardComponentProps } from './UNCreateCardComponent';

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -8,8 +8,8 @@ import type WebView from 'react-native-webview';
 
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { getMultipleCardsParams, getMultipleCardsScript } from './UNMultipleCardsComponent.utils';
-import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { getMultipleCardsParams, getMultipleCardsScript, injectCardCreated, injectCardStatusChangedEvent, injectMultipleCardsFiltersChanged } from './UNMultipleCardsComponent.utils';
+import { RequestRenderingEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type {
@@ -24,6 +24,10 @@ import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messa
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
+import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
@@ -32,6 +36,7 @@ export interface UNMultipleCardsComponentProps {
   paginationType?: UNMultipleCardsComponentPaginationType;
   cardsPerPage?: number;
   disableCardClick?: boolean;
+  isRowItemClickable?: boolean;
   theme?: string;
   language?: string;
   queryFilter?: string;
@@ -44,18 +49,34 @@ export interface UNMultipleCardsComponentProps {
 }
 
 const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
+  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
-  const injectRefreshEventIfNeeded = (card: UNCard | null) => {
-    webRef.current?.injectJavaScript(`dispatchCardStatueChanged('${JSON.stringify({data: card})}')`);
+  const dispatchCardStatusChanged = (card: UNCard) => {
+    injectCardStatusChangedEvent(webRef.current, card);
   };
 
-  const requestRefresh = (card: UNCard) => {
-    injectRefreshEventIfNeeded(card);
+  const dispatchMultipleCardsFiltersChanged = (query: string) => {
+    injectMultipleCardsFiltersChanged(webRef.current, query);
   };
 
-  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: requestRefresh });
+  const dispatchCardCreated = (card: string) => {
+    injectCardCreated(webRef.current, card);
+  };
+
+  useListenerToEvent({ 
+    busEventKey: CardMessage.CARD_STATUS_CHANGED, 
+    action: dispatchCardStatusChanged 
+  });
+  useListenerToEvent({
+    busEventKey: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
+    action: dispatchMultipleCardsFiltersChanged,
+  });
+  useListenerToEvent({
+    busEventKey: CardMessage.CARD_CREATED,
+    action: dispatchCardCreated,
+  });
 
   const cardClicked = (card: UNCard) => {
     if (props.onCardClicked) {
@@ -74,7 +95,6 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
 
     if (RESPONSE_KEYS.cards in response) {
-      // MultipleCardsOnLoadResponse;
       props.onLoad(response[RESPONSE_KEYS.cards] as UNComponentsOnLoadResponseData<UNMultipleCardsOnLoadData>);
       return;
     }
@@ -96,6 +116,21 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
       }
       case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED: {
         cardClicked(message.details as MultipleCardsCardClickedEvent);
+        break;
+      }
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
+        const slotData: BottomSheetSlotData = {
+          componentName: WebComponentType.multipleCards,
+          componentResourceId: undefined,
+          requestRenderingEvent: message.details as RequestRenderingEvent,
+        };
+      
+        const data = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData,
+        } as SlotRendering;
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        break;
       }
     }
   };
@@ -118,4 +153,4 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
   );
 };
 
-export default withReduxStore<UNMultipleCardsComponentProps>(UNMultipleCardsComponent);
+export default withReduxStore<UNMultipleCardsComponentProps>(UNMultipleCardsComponent);

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

@@ -1,5 +1,7 @@
 import type { UNMultipleCardsComponentProps } from './UNMultipleCardsComponent';
 import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import WebView from 'react-native-webview';
+import { UNCard } from '../../types/shared';
 
 export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) => {
   const paginationType = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
@@ -9,6 +11,7 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   ${paginationType}
   ${cardsPerPage}
   disable-card-click="${props.disableCardClick || false}"
+  is-row-item-clickable="${props.isRowItemClickable || false}"
   ${queryFilter}
   hide-title="${props.hideTitle || false}"
   hide-back-to-top="${props.hideBackToTop || false}"
@@ -25,12 +28,24 @@ const MULTIPLE_CARDS_LISTENERS = {
       }).catch((e) => {
         console.log(e)
       })
-  });
+    });
   `,
 };
 
 export const getMultipleCardsScript = () => {
   return `
-     ${MULTIPLE_CARDS_LISTENERS.cardClicked}
+    ${MULTIPLE_CARDS_LISTENERS.cardClicked}
   `;
 };
+
+export const injectMultipleCardsFiltersChanged = (currentWeb: WebView | null, query: string) => {
+  currentWeb?.injectJavaScript(`dispatchMultipleCardsFilterChangedEvent('${query}')`);
+};
+
+export const injectCardCreated = (currentWeb: WebView | null, card: string) => {
+  currentWeb?.injectJavaScript(`dispatchCardCreatedEvent('${card}')`);
+};
+
+export const injectCardStatusChangedEvent = (currentWeb: WebView | null, card: UNCard | null) => {
+  currentWeb?.injectJavaScript(`dispatchCardStatusChanged('${JSON.stringify({ data: card })}')`);
+};

package/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './UNPayeeManagementComponent';
 export * from './UNWirePaymentComponent';
 export * from './UNMultiFactorAuthenticationComponent';
 export * from './UNCardActionComponent';
+export * from './UNCreateCardComponent';

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -93,11 +93,11 @@ const BottomSheet = (props: BottomSheetProps) => {
   }, [props.isOpen]);
 
   useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', _onBackPress);
+    const backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', _onBackPress);
     const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));
 
     return (() => {
-      BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
+      backHandlerSubscription.remove();
       panelHeightValue.removeListener(id);
     });
   }, []);

package/src/messages/webMessages/cardMessage.ts

@@ -2,7 +2,9 @@ import type { UNCard } from '../../types/shared';
 
 export enum CardMessage {
   CARD_ACTIVATED = 'unitCardActivated',
-  CARD_STATUS_CHANGED = 'unitCardStatusChanged'
+  CARD_STATUS_CHANGED = 'unitCardStatusChanged',
+  CARD_CREATED = 'unitCardCreated'
+
 }
 
 export interface CardStatusChangedEvent {
@@ -13,6 +15,9 @@ export interface CardActivatedEvent {
   card: UNCard;
 }
 
+export type CardCreatedEvent = UNCard;
+
 export type CardEvent =
   | CardStatusChangedEvent
   | CardActivatedEvent
+  | CardCreatedEvent

package/src/messages/webMessages/multipleCardsMessage.ts

@@ -2,8 +2,10 @@ import type { UNCard } from '../../types/shared';
 
 export enum MultipleCardsMessage {
   UNIT_MULTIPLE_CARDS_CARD_CLICKED = 'unitMultipleCardsCardClicked',
+  UNIT_MULTIPLE_CARDS_FILTERS_CHANGED = 'unitMultipleCardsFiltersChanged'
 }
 
 export type MultipleCardsCardClickedEvent = UNCard;
+export type MultipleCardsFiltersChangedEvent = string;
 
-export type MultipleCardsEvent = MultipleCardsCardClickedEvent
+export type MultipleCardsEvent = MultipleCardsCardClickedEvent | MultipleCardsFiltersChangedEvent;

package/src/messages/webMessages/onLoadMessage.ts

@@ -5,7 +5,8 @@ import type {
   UNComponentsOnLoadResponseData,
   UNAuthorization,
   UNCounterparty,
-  UNTransaction
+  UNTransaction,
+  UNCreateCardComponentResources
 } from '../../types/shared';
 
 export enum RESPONSE_KEYS {
@@ -18,7 +19,8 @@ export enum RESPONSE_KEYS {
   authorizations = 'authorizationsResult',
   repayment = 'repaymentResult',
   accountCards = 'accountCardsResult',
-  counterpartiesResult = 'counterpartiesResult'
+  counterpartiesResult = 'counterpartiesResult',
+  createCardResult = 'createCardResult'
 }
 
 export type CardsOnLoadResponse = {
@@ -50,6 +52,10 @@ export type PayeeManagementOnLoadResponse = {
   [RESPONSE_KEYS.counterpartiesResult]: UNComponentsOnLoadResponseData<[UNCounterparty]>
 }
 
+export type CreateCardOnLoadResponse = {
+  [RESPONSE_KEYS.createCardResult]: UNComponentsOnLoadResponseData<UNCreateCardComponentResources>
+}
+
 export type UnitOnLoadResponseSuccessData =
   | CardOnLoadResponse
   | CardsOnLoadResponse
@@ -58,6 +64,7 @@ export type UnitOnLoadResponseSuccessData =
   | AccountOnLoadResponse
   | ActivityOnLoadResponse
   | PayeeManagementOnLoadResponse
+  | CreateCardOnLoadResponse
 
 export type UnitOnLoadResponseEvent =
   | UNComponentsError

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.tsx

@@ -26,6 +26,10 @@ import { UNBaseView } from '../../UNBaseView';
 export interface UNAddToWalletComponentProps {
   customerToken: string;
   cardId: string;
+
+  // ui
+  theme?: string;
+  language?: string;
 }
 
 const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
@@ -73,6 +77,8 @@ const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
               type={WebComponentType.cardAction}
               presentationMode={PresentationMode.CoverInjectedHeight}
               params={getAddToWalletParams(props)}
+              theme={props.theme}
+              language={props.language}
               isScrollable={false}
               onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
               windowParams={getAddToWalletWindowParams(currentUNWallet)}

package/src/nativeComponents/UNBaseView/UNBaseView.tsx

@@ -7,7 +7,6 @@ import {
 import { UNComponentsError, UNComponentsErrorCodes, UNComponentsErrorData } from '../../types/shared';
 import { useIsJailbrokeDevice } from '../../hooks/useIsJailbrokeDevice';
 import { useSnapshotProtection } from '../../hooks/useSnapshotProtection';
-import UnitAndroidSecureView from '../UNSecureView/UNSecureViewNativeComponent';
 import { RootState } from '../../store';
 import { useSelector } from 'react-redux';
 
@@ -44,6 +43,8 @@ const UNBaseView = (props: UnitSecureViewProps) => {
   }
 
   if (Platform.OS == 'android') {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const UnitAndroidSecureView = require('../UNSecureView/UNSecureViewNativeComponent.android').default;
     return <UnitAndroidSecureView filterTouchesWhenObscured={true} {...props}/>;
   } else {
     return (