react-native-unit-components/lib/module/components/UNACHDebitComponent/UNACHDebitComponent.js

Unit React Native components

import React, { useEffect, useRef, useState } from 'react';
import { WebComponent } from '../../webComponent/WebComponent';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { Platform } from 'react-native';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { getACHDebitParams, getACHDebitScript, injectRequestCounterpartyDeletedScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
import { open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import AppInfo from '../../utils/AppInfo';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { withReduxStore } from '../../helpers/store/helpers';
import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
import { ensureArray } from '../../utils/onLoadMessages.utils';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
import { eventBus } from '../../utils/eventBus';
import { useEventListener } from '../../hooks/useEventListener';
import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
const UNACHDebitComponent = props => {
  const [height, setHeight] = useState(0);
  const [appPackageName, setAppPackageName] = useState('');
  const webRef = useRef(null);
  const [presentationMode, setPresentationMode] = useState(PresentationMode.Inherit);
  useEffect(() => {
    const setPackageNameForAndroid = async () => {
      if (Platform.OS === 'android') {
        const packageName = await AppInfo.getAppIdentifier();
        setAppPackageName(packageName);
      }
    };
    setPackageNameForAndroid();
  }, []);
  const handleCounterpartyDeleted = data => {
    injectRequestCounterpartyDeletedScript(webRef.current, data);
  };
  useEventListener({
    busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
    action: handleCounterpartyDeleted
  });
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
      const account = response[RESPONSE_KEYS.account].data;
      // ACHOnLoadResponse;
      const achOnload = {
        data: {
          [RESPONSE_KEYS.account]: ensureArray(account),
          [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data
        }
      };
      props.onLoad(achOnload);
      return;
    }
    if (RESPONSE_KEYS.counterpartiesResult in response) {
      const counterparties = response[RESPONSE_KEYS.counterpartiesResult].data;
      const accountResponse = response;
      const accountData = accountResponse[RESPONSE_KEYS.account]?.data;
      const achOnload = {
        data: {
          [RESPONSE_KEYS.account]: accountData ? ensureArray(accountData) : [],
          [RESPONSE_KEYS.counterpartyAccount]: counterparties
        }
      };
      props.onLoad(achOnload);
      return;
    }
    console.error('On Load Error: unexpected response type');
    return;
  };
  const handleWebViewMessage = message => {
    if (!message || !message.details) return;
    switch (message.type) {
      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED:
        {
          props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
          break;
        }
      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED:
        {
          props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
          break;
        }
      case PaymentMessage.PAYMENT_CREATED:
        {
          const achDebitEvent = message.details;
          props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data);
          break;
        }
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
      case UnitComponentsMessage.UNIT_REQUEST_RENDERING:
        {
          const slotData = {
            componentName: WebComponentType.achDebitPayment,
            componentResourceId: props.accountId,
            requestRenderingEvent: message.details
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
          break;
        }
      case PageMessage.PAGE_HEIGHT:
        {
          const currentHeight = message.details.height;
          setHeight(currentHeight);
          if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
            setPresentationMode(PresentationMode.Default);
          }
          break;
        }
      case PlaidMessage.UNIT_PLAID_TOKEN_CREATED:
        {
          const linkTokenEvent = message.details;
          const linkTokenData = linkTokenEvent.linkToken;
          const link = linkTokenData.attributes.linkToken;
          createPlaidLink({
            token: link
          });
          break;
        }
      case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK:
        {
          const externalSdkType = message.details.type;
          if (externalSdkType !== 'plaid') return;
          openPlaidLink({
            onSuccess: success => {
              injectUnitPlaidResponse(webRef.current, success);
            },
            onExit: exit => {
              console.log(exit);
            }
          });
          break;
        }
    }
  };
  const style = presentationMode === PresentationMode.Inherit ? {
    flex: 1
  } : {
    height: height
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: style,
    onLoadError: handleUnitOnLoad,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    ref: webRef,
    type: WebComponentType.achDebitPayment,
    presentationMode: presentationMode,
    params: getACHDebitParams(props),
    script: getACHDebitScript(appPackageName),
    onMessage: message => handleWebViewMessage(message),
    isScrollable: true,
    theme: props.theme,
    language: props.language
  }));
};
export default withReduxStore(UNACHDebitComponent);
//# sourceMappingURL=UNACHDebitComponent.js.map