react-native-unit-components 1.14.0 → 2.0.0

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.tsx

@@ -0,0 +1,83 @@
+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 { getMultiFactorAuthenticationParams, getMultiFactorAuthenticationScript } from './UNMultiFactorAuthenticationComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { MultiFactorAuthenticationFinishedEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { UNComponentsError, UNComponentsOnLoadResponse, UNCustomerTokenVerification, UNMultiFactorAuthenticationFinished } from '../../types/shared';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+
+export interface UNMultiFactorAuthenticationComponentProps {
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNComponentsOnLoadResponse<undefined>) => void
+  onVerificationTokenCreated?: (data: UNCustomerTokenVerification) => void
+  onAuthenticationFinished?: (data: UNMultiFactorAuthenticationFinished) => void
+}
+
+const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthenticationComponentProps) => {
+  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;
+    }
+
+    props.onLoad({ data: undefined });
+  };
+
+  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 MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED:
+        props.onVerificationTokenCreated && props.onVerificationTokenCreated(message.details as UNCustomerTokenVerification);
+        break;
+      case UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED: {
+        const data = JSON.parse((message.details as MultiFactorAuthenticationFinishedEvent).unitVerifiedCustomerTokenString);
+        props.onAuthenticationFinished && props.onAuthenticationFinished(data as UNMultiFactorAuthenticationFinished);
+        break;
+      }
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad} fallback={<></>}>
+    <WebComponent
+      type={WebComponentType.multiFactorAuthentication}
+      presentationMode={PresentationMode.Inherit}
+      params={getMultiFactorAuthenticationParams()}
+      script={getMultiFactorAuthenticationScript()}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      theme={props.theme}
+      language={props.language}
+    />
+  </UNBaseView>;
+};
+
+export default withReduxStore<UNMultiFactorAuthenticationComponentProps>(UNMultiFactorAuthenticationComponent);

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.utils.ts

@@ -0,0 +1,25 @@
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+
+export const getMultiFactorAuthenticationParams = () => {
+  return `
+  `;
+};
+
+const MULTI_FACTOR_AUTHENTICATION_LISTENERS = {
+  verificationTokenCreated: `
+    window.addEventListener("${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `
+};
+
+export const getMultiFactorAuthenticationScript = () => {
+  return `
+     ${MULTI_FACTOR_AUTHENTICATION_LISTENERS.verificationTokenCreated}
+  `;
+};

package/src/components/UNMultiFactorAuthenticationComponent/index.ts

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

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -9,26 +9,25 @@ 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 { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type {
-  UNCardData,
-  UNError,
+  UNCard,
+  UNComponentsError,
   UNMultipleCardsComponentPaginationType,
   UNMultipleCardsOnLoadData,
-  UNOnLoadResponse,
-  UNOnLoadResponseData,
+  UNComponentsOnLoadResponse,
+  UNComponentsOnLoadResponseData,
 } from '../../types/shared';
 import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { CardMessage } from '../../messages/webMessages/cardMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
 export interface UNMultipleCardsComponentProps {
-  // inputs
-  customerToken: string;
-
   // ui
   paginationType?: UNMultipleCardsComponentPaginationType;
   cardsPerPage?: number;
@@ -40,15 +39,25 @@ export interface UNMultipleCardsComponentProps {
   hideBackToTop?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
-  onCardClicked?: (card: UNCardData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
+  onCardClicked?: (card: UNCard) => void;
 }
 
 const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
-  const cardClicked = (card: UNCardData) => {
+  const injectRefreshEventIfNeeded = (card: UNCard | null) => {
+    webRef.current?.injectJavaScript(`dispatchCardStatueChanged('${JSON.stringify({data: card})}')`);
+  };
+
+  const requestRefresh = (card: UNCard) => {
+    injectRefreshEventIfNeeded(card);
+  };
+
+  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: requestRefresh });
+
+  const cardClicked = (card: UNCard) => {
     if (props.onCardClicked) {
       props.onCardClicked(card);
     }
@@ -60,13 +69,13 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.cards in response) {
       // MultipleCardsOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.cards] as UNOnLoadResponseData<UNMultipleCardsOnLoadData>);
+      props.onLoad(response[RESPONSE_KEYS.cards] as UNComponentsOnLoadResponseData<UNMultipleCardsOnLoadData>);
       return;
     }
 
@@ -77,7 +86,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -93,7 +102,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
 
   const style = defaultHeight ? { height: defaultHeight } : { flex: 1};
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.multipleCards}

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

@@ -6,7 +6,6 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   const cardsPerPage = props.cardsPerPage ? `cards-per-page="${props.cardsPerPage}"` : '';
   const queryFilter = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
   return `
-  customer-token="${props.customerToken}"
   ${paginationType}
   ${cardsPerPage}
   disable-card-click="${props.disableCardClick || false}"

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.tsx

@@ -1,21 +1,19 @@
 import React, { useState } from 'react';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
   getNextRepaymentParams,
 } from './UNNextRepaymentComponent.utils';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import type { UNCreditAccountRepaymentInformation, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNRepaymentData } from '../../types/shared/repayment.types';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNNextRepaymentComponentProps {
   // inputs
-  customerToken: string;
   accountId: string;
 
   // ui
@@ -24,7 +22,7 @@ export interface UNNextRepaymentComponentProps {
   hideTitle?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<[UNRepaymentData]>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNCreditAccountRepaymentInformation]>) => void;
 }
 
 const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
@@ -37,12 +35,12 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.repayment in response) {
-      props.onLoad(response[RESPONSE_KEYS.repayment] as UNOnLoadResponseData<[UNRepaymentData]>);
+      props.onLoad(response[RESPONSE_KEYS.repayment] as UNComponentsOnLoadResponseData<[UNCreditAccountRepaymentInformation]>);
       return;
     }
 
@@ -52,7 +50,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
 
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
 
@@ -63,7 +61,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
   };
 
   return (
-    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.nextRepayment}
         presentationMode={PresentationMode.Default}

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.utils.ts

@@ -3,8 +3,7 @@ import { UNNextRepaymentComponentProps } from './UNNextRepaymentComponent';
 export const getNextRepaymentParams = (props: UNNextRepaymentComponentProps) => {
 
   return `
-    customer-token="${props.customerToken}"
     account-id="${props.accountId}"
-    hide-actions-menu-button="${props.hideTitle || false}"
+    hide-title="${props.hideTitle || false}"
   `;
 };

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -2,16 +2,24 @@ import React, { useRef } from 'react';
 import type WebView from 'react-native-webview';
 import {
   RequestRefreshEvent,
-  UnitMessage,
-} from '../../messages/webMessages/unitMessages';
+  UnitComponentsMessage,
+} from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNPayeeConnectedAccount, UNPayeeCounterparty, UNPayeeManagementComponentPaginationType, UNPayeeManagementMenuItem, UNPlaidAccountFilter } from '../../types/shared';
+import { 
+  UNConnectedAccount, 
+  UNCounterparty, 
+  UNComponentsError, 
+  UNComponentsOnLoadResponse, 
+  UNPayeeManagementComponentPaginationType, 
+  UNPayeeManagementMenuItem, 
+  UNPlaidAccountFilter 
+} from '../../types/shared';
 import { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
-import { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
 import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
@@ -20,10 +28,10 @@ import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeConnectedAccountEvent, PayeeCounterpartyEvent, PayeeManagementMessage, PayeeMicroDepositeConnectionEvent } from '../../messages/webMessages/payeeManagementMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNPayeeManagementComponentProps {
   // inputs
-  customerToken: string;
   menuItems?: UNPayeeManagementMenuItem[];
   queryFilter?: string;
   paginationType?: UNPayeeManagementComponentPaginationType;
@@ -45,12 +53,13 @@ export interface UNPayeeManagementComponentProps {
   plaidLinkCustomizationName?: string;
 
   // events
-  onCounterpartyCreated?: (counterparty: UNPayeeCounterparty) => void;
-  onCounterpartyDeleted?: (counterparty: UNPayeeCounterparty) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNCounterparty]>) => void;
+  onCounterpartyCreated?: (counterparty: UNCounterparty) => void;
+  onCounterpartyDeleted?: (counterparty: UNCounterparty) => void;
 
-  onConnectedAccountCreated?: (connectedAccount: UNPayeeConnectedAccount) => void;
-  onMicroDepositConnectionCreated?: (onnectedAccount: UNPayeeCounterparty) => void;
-  onMicroDepositConnectionRejected?: (connectedAccount: UNPayeeConnectedAccount) => void;
+  onConnectedAccountCreated?: (connectedAccount: UNConnectedAccount) => void;
+  onMicroDepositConnectionCreated?: (onnectedAccount: UNCounterparty) => void;
+  onMicroDepositConnectionRejected?: (connectedAccount: UNConnectedAccount) => void;
 }
 
 const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
@@ -79,11 +88,11 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     });
   };
 
-  const reportCounterpartyDeleted = (counterparty: UNPayeeCounterparty) => {
+  const reportCounterpartyDeleted = (counterparty: UNCounterparty) => {
     props.onCounterpartyDeleted && props.onCounterpartyDeleted(counterparty);
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: PlaidMessage.UNIT_OPEN_PLAID, action: openPlaid });
   useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: reportCounterpartyDeleted });
 
@@ -103,33 +112,53 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     }
   };
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNComponentsError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      props.onLoad(response[RESPONSE_KEYS.counterpartiesResult] as UNComponentsOnLoadResponse<[UNCounterparty]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const requestRenderingEvent = message.details as RequestRenderingEvent;
         handleRequestRendering(requestRenderingEvent);
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD: {
+      case UnitComponentsMessage.UNIT_ON_LOAD: {
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       }
       case PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED: {
-        const account: UNPayeeConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
+        const account: UNConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
         props.onConnectedAccountCreated && props.onConnectedAccountCreated(account);
         break;
       }
       case PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED: {
-        const counterparty: UNPayeeCounterparty = (message.details as PayeeCounterpartyEvent).counterparty;
+        const counterparty: UNCounterparty = (message.details as PayeeCounterpartyEvent).counterparty;
         props.onCounterpartyCreated &&  props.onCounterpartyCreated(counterparty);
         break;
       }
       case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED: {
-        const counterparty: UNPayeeCounterparty = (message.details as PayeeMicroDepositeConnectionEvent).account;
+        const counterparty: UNCounterparty = (message.details as PayeeMicroDepositeConnectionEvent).account;
         props.onMicroDepositConnectionCreated && props.onMicroDepositConnectionCreated(counterparty);
         break;
       }
       case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED: {
-        const account: UNPayeeConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
+        const account: UNConnectedAccount = (message.details as PayeeConnectedAccountEvent).account;
         props.onMicroDepositConnectionRejected && props.onMicroDepositConnectionRejected(account);
         break;
       }
@@ -137,7 +166,7 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
   };
 
   return (
-    <UNBaseView style={{ height: '100%' }}>
+    <UNBaseView style={{ height: '100%' }} fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.payeeManagement}

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

@@ -1,4 +1,4 @@
-import { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
@@ -22,7 +22,6 @@ export const getPayeeParams = (props: UNPayeeManagementComponentProps) => {
   const payeeCreationPlaceholderParam = props.payeeCreationPlaceholder ? `payee-creation-placeholder="${props.payeeCreationPlaceholder}"` : '';
   const microDepositConnectionPlaceholderParam = props.microDepositConnectionPlaceholder ? `micro-deposit-connection-placeholder="${props.microDepositConnectionPlaceholder}"` : '';
   return `
-    customer-token="${props.customerToken}"
     ${menuItemsParam}
     ${queryFilterParam}
     ${paginationTypeParam}

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.tsx

@@ -1,18 +1,17 @@
 import React, { useState } from 'react';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import { UNAccount, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { WebViewMessage } from '../../messages/webMessages';
 import { getProgramDetailsParams } from './UNProgramDetailsComponent.utils';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNProgramDetailsComponentProps {
   // inputs
-  customerToken: string;
   accountId: string;
 
   // ui
@@ -21,7 +20,7 @@ export interface UNProgramDetailsComponentProps {
   hideTitle?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNAccount]>) => void;
 }
 
 const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
@@ -35,12 +34,12 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      props.onLoad(response[RESPONSE_KEYS.account] as UNComponentsOnLoadResponseData<[UNAccount]>);
       return;
     }
 
@@ -50,7 +49,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
 
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
 
@@ -61,7 +60,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
   };
 
   return (
-    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.programDetails}
         presentationMode={PresentationMode.Default}

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.utils.ts

@@ -2,7 +2,6 @@ import { UNProgramDetailsComponentProps } from './UNProgramDetailsComponent';
 
 export const getProgramDetailsParams = (props: UNProgramDetailsComponentProps) => {
   return `
-    customer-token="${props.customerToken}"
     account-id="${props.accountId}"
     hide-title="${props.hideTitle || false}"
     `;

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { WebComponent } from '../../webComponent/WebComponent';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage, UnitWhiteLabelAppEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitComponentsMessage, UnitWhiteLabelAppEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
   BottomSheetRenderingType,
@@ -21,10 +21,11 @@ import {
 } from './UNWhiteLabelAppComponent.utils';
 import { UserDataKeys } from '../../types/internal/unitStore.types';
 import { PageMessage } from '../../messages/webMessages/pageMessage';
-import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
+import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreModuleHelper/UNStoreModuleHelper';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
 
 export interface UNWhiteLabelAppComponentProps {
   // inputs
@@ -43,7 +44,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
 
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
 
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.whiteLabelApp,
@@ -58,9 +59,10 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
-      case UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD: {
+      case UnitComponentsMessage.UNIT_WHITE_LABEL_APP_ON_LOAD: {
         const data = message.details as UnitWhiteLabelAppEvent;
         if (data.attributes.customerToken) {
+          UnitComponentsSDK.setCustomerToken(data.attributes.customerToken);
           UNStoreManagerHelper.saveValue(UserDataKeys.unitCustomerToken, data.attributes.customerToken);
           // Upon receiving a new token, the web interface updates the window. Therefore, we (only) store it for subsequent windows.
           // updateWindowUnitStore();
@@ -95,7 +97,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
     webRef.current?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
@@ -103,7 +105,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
 
   const renderWebView = () => {
     return (
-      <UNBaseView style={{ flex: 1 }}>
+      <UNBaseView style={{ flex: 1 }} >
         <WebComponent
           ref={webRef}
           type={WebComponentType.whiteLabelApp}

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.utils.ts

@@ -1,5 +1,5 @@
 import WebView from 'react-native-webview';
-import { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import { UNWhiteLabelAppComponentProps } from './UNWhiteLabelAppComponent';
 import { DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
 
@@ -32,4 +32,4 @@ export const getWhiteLabelAppScript = () => {
 
     ${LISTENERS.unitWhiteLabelAppOnLoad}
   `;
-};
+};