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

Unit React Native components

import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { PageMessage } from '../..//messages/webMessages/pageMessage';
import { UnitComponentsMessage, UnitRequestRefreshEventTypes } from '../../messages/webMessages/unitComponentsMessages';
import { WebComponent } from '../../webComponent/WebComponent';
import { getAccountParams, getAccountScript, injectOpenActionsMenuScript, injectRefreshEventIfNeeded, injectRequestAccountActionScript } from './UNAccountComponent.utils';
import { AccountMessage } from '../../messages/webMessages/accountMessage';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
import { useDispatch } from 'react-redux';
import { setEvent } from '../../slices/SharedEventsSlice';
import { useListenerToEvent } from '../../hooks/useListenerToEvent';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
export let UNAccountAction = /*#__PURE__*/function (UNAccountAction) {
  UNAccountAction["List"] = "account-list";
  UNAccountAction["Menu"] = "account-menu";
  return UNAccountAction;
}({});
const UNAccountComponent = /*#__PURE__*/React.forwardRef(function UNAccountComponent(props, accountRef) {
  const dispatch = useDispatch();
  const [height, setHeight] = useState(0);
  const webRef = useRef(null);
  // currentAccountId is used to store the current account id for the "imperative" refresh event.
  const accountIdRef = useRef(undefined);
  useEffect(() => {
    accountIdRef.current = props.accountId;
  }, [props.accountId]);
  const handleAccountChanged = account => {
    accountIdRef.current = account.id;
    props.onAccountChanged && props.onAccountChanged(account);
  };
  const requestRefresh = data => {
    injectRefreshEventIfNeeded(webRef.current, data);
  };
  const handleRequestLeftToSpendDetails = accountData => {
    props.onRequestLeftToSpendDetails && props.onRequestLeftToSpendDetails(accountData);
  };
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.account in response) {
      // AccountsOnLoadResponse;
      const accountResponse = response[RESPONSE_KEYS.account];
      props.onLoad(accountResponse);
      // if accountId is not provided, set the first account as current
      if (!props.accountId && accountResponse.data && accountResponse.data.length > 0) {
        accountIdRef.current = accountResponse.data[0].id;
      }
      return;
    }
    console.error('On Load Error: unexpected response type.');
    return;
  };
  useListenerToEvent({
    busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH,
    action: requestRefresh
  });
  useListenerToEvent({
    busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED,
    action: handleAccountChanged
  });
  useImperativeHandle(accountRef, () => ({
    openActionsMenu() {
      injectOpenActionsMenuScript(webRef.current);
    },
    openAction(action) {
      injectRequestAccountActionScript(webRef.current, action);
    },
    refresh() {
      requestRefresh({
        type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT,
        refEvent: undefined,
        dependencies: [WebComponentType.account.valueOf()],
        resourceId: accountIdRef.current
      });
    }
  }));
  const handleMessage = message => {
    switch (message.type) {
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
      case UnitComponentsMessage.UNIT_REQUEST_RENDERING:
        {
          const slotData = {
            componentName: WebComponentType.account,
            componentResourceId: props.accountId,
            requestRenderingEvent: message.details
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          dispatch(setEvent({
            key: BottomSheetNativeMessage.REQUEST_RENDERING,
            data
          }));
          break;
        }
      case PageMessage.PAGE_HEIGHT:
        setHeight(message.details.height);
        break;
      case UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
        handleRequestLeftToSpendDetails(message.details);
        break;
    }
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: {
      height,
      width: '100%'
    },
    onLoadError: handleUnitOnLoad,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    ref: webRef,
    type: WebComponentType.account,
    presentationMode: PresentationMode.Default,
    params: getAccountParams(props),
    script: getAccountScript(),
    theme: props.theme,
    language: props.language,
    onMessage: message => handleMessage(message),
    isScrollable: false
  }));
});
export default withReduxStoreAndRefForwarding(UNAccountComponent);
//# sourceMappingURL=UNAccountComponent.js.map