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

Unit React Native components

import React, { useRef } from 'react';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { WebComponent } from '../../webComponent/WebComponent';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { withReduxStore } from '../../helpers/store/helpers';
import { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { useDispatch } from 'react-redux';
import { setEvent } from '../../slices/SharedEventsSlice';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
import { useListenerToEvent } from '../../hooks/useListenerToEvent';
import { openLink } from 'react-native-plaid-link-sdk';
import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
const UNPayeeManagementComponent = props => {
  const dispatch = useDispatch();
  const webRef = useRef(null);
  const requestRefresh = data => {
    injectRefreshEventIfNeeded(webRef.current, data);
  };
  const openPlaid = openPlaidData => {
    injectUnitOpenPlaid(webRef.current, openPlaidData);
    const linkToken = openPlaidData.plaidLinkToken.attributes.linkToken;
    linkToken && openLink({
      tokenConfig: {
        noLoadingState: false,
        token: linkToken
      },
      onSuccess: success => {
        injectUnitPlaidResponse(webRef.current, success);
      },
      onExit: exit => {
        injectUnitPlaidExit(webRef.current, exit.error);
      }
    }).catch(e => {
      console.error(e);
    });
  };
  const reportCounterpartyDeleted = counterparty => {
    props.onCounterpartyDeleted && props.onCounterpartyDeleted(counterparty);
  };
  useListenerToEvent({
    busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH,
    action: requestRefresh
  });
  useListenerToEvent({
    busEventKey: PlaidMessage.UNIT_OPEN_PLAID,
    action: openPlaid
  });
  useListenerToEvent({
    busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
    action: reportCounterpartyDeleted
  });
  const handleRequestRendering = requestRenderingEvent => {
    switch (requestRenderingEvent.data.nativeComponentName) {
      default:
        {
          const slotData = {
            componentName: requestRenderingEvent.data.nativeComponentName,
            requestRenderingEvent: requestRenderingEvent
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          dispatch(setEvent({
            key: BottomSheetNativeMessage.REQUEST_RENDERING,
            data
          }));
        }
    }
  };
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.counterpartiesResult in response) {
      props.onLoad(response[RESPONSE_KEYS.counterpartiesResult]);
      return;
    }
    console.error('On Load Error: unexpected response type');
    return;
  };
  const handleMessage = message => {
    switch (message.type) {
      case UnitComponentsMessage.UNIT_REQUEST_RENDERING:
        {
          const requestRenderingEvent = message.details;
          handleRequestRendering(requestRenderingEvent);
          break;
        }
      case UnitComponentsMessage.UNIT_ON_LOAD:
        {
          handleUnitOnLoad(message.details);
          break;
        }
      case PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED:
        {
          const account = message.details.account;
          props.onConnectedAccountCreated && props.onConnectedAccountCreated(account);
          break;
        }
      case PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED:
        {
          const counterparty = message.details.counterparty;
          props.onCounterpartyCreated && props.onCounterpartyCreated(counterparty);
          break;
        }
      case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED:
        {
          const counterparty = message.details.account;
          props.onMicroDepositConnectionCreated && props.onMicroDepositConnectionCreated(counterparty);
          break;
        }
      case PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED:
        {
          const account = message.details.account;
          props.onMicroDepositConnectionRejected && props.onMicroDepositConnectionRejected(account);
          break;
        }
    }
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: {
      height: '100%'
    },
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    ref: webRef,
    type: WebComponentType.payeeManagement,
    presentationMode: PresentationMode.Inherit,
    params: getPayeeParams(props),
    script: getPayeeManagementScript(),
    theme: props.theme,
    nestedScrollEnabled: true,
    language: props.language,
    onMessage: message => handleMessage(message)
  }));
};
export default withReduxStore(UNPayeeManagementComponent);
//# sourceMappingURL=UNPayeeManagementComponent.js.map