react-native-unit-components 2.0.2 → 2.2.0

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,8 @@ export interface UNMultipleCardsComponentProps {
   paginationType?: UNMultipleCardsComponentPaginationType;
   cardsPerPage?: number;
   disableCardClick?: boolean;
+  isRowItemClickable?: boolean;
+  showSeeAllCardsLink?: boolean;
   theme?: string;
   language?: string;
   queryFilter?: string;
@@ -44,18 +50,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 +96,6 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
 
     if (RESPONSE_KEYS.cards in response) {
-      // MultipleCardsOnLoadResponse;
       props.onLoad(response[RESPONSE_KEYS.cards] as UNComponentsOnLoadResponseData<UNMultipleCardsOnLoadData>);
       return;
     }
@@ -96,6 +117,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 +154,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,8 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   ${paginationType}
   ${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}"
@@ -25,12 +29,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/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/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/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

@@ -6,12 +6,14 @@ import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
+import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const POST_MESSAGE_TO_SDK = `
   const postMessageToSDK = (message) => {
     if ('ReactNativeWebView' in window) {
-    const messageString = JSON.stringify(message)
-    window['ReactNativeWebView'].postMessage(messageString)
+      const messageString = JSON.stringify(message)
+      window['ReactNativeWebView'].postMessage(messageString)
     }
   }
 `;
@@ -44,7 +46,7 @@ export const LISTENERS = {
   `,
   onLoad: `
     window.addEventListener("${UnitComponentsMessage.UNIT_ON_LOAD}", (e) => {
-      if (document.querySelector("unit-elements-account") !== null) {
+      if (document.querySelector("${WebComponentType.account}") !== null) {
         // 10 milliseconds delay to render AccountComponent correctly
         setTimeout(() => {
           postHeight()
@@ -53,16 +55,14 @@ export const LISTENERS = {
         postHeight()
       }
       postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_ON_LOAD}", details: e.detail })
-
     });
   `,
   requestCloseFlow: `
     window.addEventListener("${UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW}", (e) => {
-    // Add a delay of 200 milliseconds to allow the SDK to finish processing prior events that require a Promise before closing the flow
-    setTimeout(() => {
-        postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW}" });
-    }, 200);
-
+      // Add a delay of 200 milliseconds to allow the SDK to finish processing prior events that require a Promise before closing the flow
+      setTimeout(() => {
+          postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW}" });
+      }, 200);
     });
   `,
   requestOpenLink: `
@@ -93,49 +93,58 @@ export const LISTENERS = {
       }).catch((e) => {
         console.log(e)
       })
-  });
+    });
+  `,
+  cardCreated: `
+    window.addEventListener("${CardMessage.CARD_CREATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${CardMessage.CARD_CREATED}", details: JSON.stringify(data.data)})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
   `,
   unitRequestExternalSdk: `
-  window.addEventListener("${UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
-    postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
-  });
+    window.addEventListener("${UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
+      postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
+    });
   `,
-
   unitRequestLeftToSpendDetails: `
-  window.addEventListener("${UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", (e) => {
-    postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", details: e.detail })
-  });
+    window.addEventListener("${UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", (e) => {
+      postMessageToSDK({ type: "${UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", details: e.detail })
+    });
   `,
   unitPaymentCreated: `
-  window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
-    const response = e.detail
+    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
+      const response = e.detail
       response.then((data) => {
         postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: data.data }})
       }).catch((e) => {
         console.log(e)
       })
-  });
+    });
   `,
   unitPaymentInitialStageBackButtonClicked: `
-  window.addEventListener("unitPaymentInitialStageBackButtonClicked", (e) => {
-    postMessageToSDK({ type: "${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", details: { data: e.detail }})
-  });
+    window.addEventListener("${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", (e) => {
+      postMessageToSDK({ type: "${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", details: { data: e.detail }})
+    });
   `,
 
   unitPaymentFinalStageDoneButtonClicked: `
-   window.addEventListener("unitPaymentFinalStageDoneButtonClicked", (e) => {
+   window.addEventListener("${PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED}", (e) => {
     postMessageToSDK({ type: "${PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED}", details: { data: e.detail }})
    });
   `,
   unitPlaidTokenCreated: `
-  window.addEventListener("${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
-    const response = e.detail
-    response.then((data) => {
-      postMessageToSDK({ type: "${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
-    }).catch((e) => {
-      console.log(e)
-    })
-  });
+    window.addEventListener("${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
   `,
   unitAccountChanged: `
     window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CHANGED}", (e) => {
@@ -152,6 +161,11 @@ export const LISTENERS = {
       postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
     });
   `,
+  unitMultipleCardsFiltersChanged: `
+    window.addEventListener("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED}", (e) => {
+      postMessageToSDK({ type: "${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED}", details: e.detail })
+    });
+  `,
   unitMultiFactorAuthFinished: `
     window.addEventListener("${UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", async (e) => {
       const response = await e.detail.response;
@@ -238,14 +252,14 @@ export const LISTENERS = {
   `,
 
   unitOpenPlaid: `
-  window.addEventListener("${PlaidMessage.UNIT_OPEN_PLAID}", async (e) => {
-    const response = event.detail;
-    response.then((data) => {
-      postMessageToSDK({ type: "${PlaidMessage.UNIT_OPEN_PLAID}", details: data.data })
-    }).catch((e) => {
-      console.log(e)
-    })
-  });
+    window.addEventListener("${PlaidMessage.UNIT_OPEN_PLAID}", async (e) => {
+      const response = event.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PlaidMessage.UNIT_OPEN_PLAID}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
   `
 };
 
@@ -264,7 +278,7 @@ export const DISPATCH_EVENT_TO_CONTINUE = `
 `;
 
 export const DISPATCH_CARD_STATUS_CHANGED = `
-  const dispatchCardStatueChanged = (details) => {
+  const dispatchCardStatusChanged = (details) => {
     const event = new CustomEvent("${CardMessage.CARD_STATUS_CHANGED}",{ detail: JSON.parse(details) })
     window.dispatchEvent(event)
   }
@@ -291,29 +305,44 @@ export const SET_ITEM_IN_WINDOW_UNIT_STORE = `
 
 export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
   const dispatchActivityFilterChangedEvent = (details) => {
-    const event = new CustomEvent("unitActivityFiltersChanged",{ detail: details});
+    const event = new CustomEvent("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}",{ detail: details});
+    window.dispatchEvent(event);
+  }
+`;
+
+export const DISPATCH_MULTIPLE_CARDS_FILTER_CHANGED_EVENT = `
+  const dispatchMultipleCardsFilterChangedEvent = (details) => {
+    const event = new CustomEvent("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED}",{ detail: details });
+    window.dispatchEvent(event);
+  }
+`;
+
+export const DISPATCH_CARD_CREATED_EVENT = `
+  const dispatchCardCreatedEvent = (details) => {
+    // Add fromSDK to avoid infinite loop
+    const event = new CustomEvent("${CardMessage.CARD_CREATED}",{ detail: { data: JSON.parse(details) ,fromSDK: true } });
     window.dispatchEvent(event);
   }
 `;
 
 export const DISPATCH_PLAID_RESPONSE = `
     const dispatchPlaidEvent = (details) => {
-    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
-    window.dispatchEvent(event)
+      const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
+      window.dispatchEvent(event)
     }
 `;
 
 export const DISPATCH_PLAID_EXIT = `
     const dispatchPlaidExit = (details) => {
-    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_EXIT}",{ detail: details })
-    window.dispatchEvent(event)
+      const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_EXIT}",{ detail: details })
+      window.dispatchEvent(event)
     }
 `;
 
 export const DISPATCH_OPEN_PLAID = `
     const dispatchOpenPlaidEvent = (details) => {
-    const event = new CustomEvent("${PlaidMessage.UNIT_OPEN_PLAID}",{ detail: details })
-    window.dispatchEvent(event)
+      const event = new CustomEvent("${PlaidMessage.UNIT_OPEN_PLAID}",{ detail: details })
+      window.dispatchEvent(event)
     }
 `;
 
@@ -346,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/slices/SharedEventsSlice.ts

@@ -6,11 +6,11 @@ import type { UNAccount, UNCard } from '../types/shared';
 import type { ActivityFiltersChangedEvent } from '../messages/webMessages/activityMessage';
 import type { MultiFactorAuthenticationFinishedEvent, RequestRefreshEvent } from '../messages/webMessages/unitComponentsMessages';
 import type { BottomSheetNativeMessage } from '../messages/nativeMessages/bottomSheetMessage';
-import type { CardMessage } from '../messages/webMessages/cardMessage';
+import type { CardCreatedEvent, CardMessage } from '../messages/webMessages/cardMessage';
 import type { AccountMessage } from '../messages/webMessages/accountMessage';
 import type { ActivityMessage } from '../messages/webMessages/activityMessage';
 import type { UnitComponentsMessage } from '../messages/webMessages/unitComponentsMessages';
-import type { MultipleCardsMessage } from '../messages/webMessages/multipleCardsMessage';
+import type { MultipleCardsFiltersChangedEvent, MultipleCardsMessage } from '../messages/webMessages/multipleCardsMessage';
 import { BottomSheetRenderingMessage } from '../messages/nativeMessages/bottomSheetMessage';
 import { PageMessage } from '../messages/webMessages/pageMessage';
 import { OpenPlaidEvent, PlaidMessage } from '../messages/webMessages/plaidMessages';
@@ -44,6 +44,16 @@ type ActivityFiltersChangedEventState = {
   data: ActivityFiltersChangedEvent
 }
 
+type MultipleCardsFiltersChangedEventState = {
+  key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED
+  data: MultipleCardsFiltersChangedEvent
+}
+
+type CardCreatedEventState = {
+  key: CardMessage.CARD_CREATED
+  data: CardCreatedEvent
+}
+
 type RequestCloseBottomSheetFlowEventState = {
   key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
   data: EmptyObj
@@ -83,9 +93,11 @@ type PayeeCounterpartyDeletedEventState = {
 type SharedEvent =
   | CardStatusChangedEventState
   | CardActivatedEventState
-  | MultipleCardsCardClickedEventState
+  | CardCreatedEventState
   | AccountChangedEventState
   | ActivityFiltersChangedEventState
+  | MultipleCardsCardClickedEventState
+  | MultipleCardsFiltersChangedEventState
   | RequestCloseBottomSheetFlowEventState
   | RequestRenderingBottomSheetEventState
   | RequestRefreshEventState

package/src/types/internal/bottomSheet.types.ts

@@ -8,6 +8,7 @@ import { UNACHDebitComponentProps } from '../../components/UNACHDebitComponent';
 import { UNCheckDepositComponentProps } from '../../components/UNCheckDepositComponent';
 import { UNBookPaymentComponentProps } from '../../components/UNBookPaymentComponent';
 import { UNWirePaymentComponentProps } from '../../components/UNWirePaymentComponent';
+import { UNCreateCardComponentProps } from '../../components/UNCreateCardComponent';
 
 export enum BottomSheetNativePlaceType {
   overFullScreen = 'overFullScreen',
@@ -50,7 +51,8 @@ export enum BottomSheetNativeComponentType {
   ACHDebitComponent = 'UNACHDebitComponent',
   CheckDepositComponent = 'UNCheckDepositComponent',
   BookPaymentComponent = 'UNBookPaymentComponent',
-  WirePaymentComponent = 'UNWirePaymentComponent'
+  WirePaymentComponent = 'UNWirePaymentComponent',
+  CreateCardComponent = 'UNCreateCardComponent'
 }
 
 export type BottomSheetNativeAddToWalletComponentType = {
@@ -83,12 +85,18 @@ export type BottomSheetNativeWirePaymentComponentType = {
   props: UNWirePaymentComponentProps
 }
 
+export type BottomSheetNativeCreateCardComponentType = {
+  type: BottomSheetNativeComponentType.CreateCardComponent,
+  props: UNCreateCardComponentProps
+}
+
 export type BottomSheetNativeComponent = BottomSheetNativeAddToWalletComponentType
   | BottomSheetNativeACHCreditComponentType
   | BottomSheetNativeACHDebitComponentType
   | BottomSheetNativeCheckDepositComponentType
   | BottomSheetNativeBookPaymentComponentType
   | BottomSheetNativeWirePaymentComponentType
+  | BottomSheetNativeCreateCardComponentType
 
 export type BottomSheetSlotData = {
   // The data that rendered by the web view

package/src/types/internal/webComponent.types.ts

@@ -15,6 +15,7 @@ export enum WebComponentType {
   wirePayment = 'unit-elements-wire-payment',
   whiteLabelApp = 'unit-elements-white-label-app',
   multiFactorAuthentication = 'unit-elements-multi-factor-authentication',
+  createCard = 'unit-elements-create-card',
   cardMenu = 'unit-elements-card-menu'
 }
 

package/src/types/shared/account.types.ts

@@ -171,4 +171,9 @@ export enum UNAccountMenuItem {
 export interface UNBankDetails {
   name: string
   address: UNAddress
+}
+
+export enum UNAccountStatusPosition {
+  Start = 'start',
+  End = 'end',
 }