react-native-unit-components/lib/module/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.js

Unit React Native components

import { withReduxStore } from '../../../helpers/store/helpers';
import { ActivityIndicator } from 'react-native';
import React, { useRef } from 'react';
import { WebComponent } from '../../../webComponent/WebComponent';
import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
import UnitAddToWalletButtonView from '../UnitAddToWalletButtonNativeComponent';
import { useDispatch } from 'react-redux';
import { getStylesObject } from './UNAddToWalletBottomSheetItem.styles';
import { useCardWallet } from '../../../helpers/pushProvisioningService/hooks/useCardWallet';
import { getAddToWalletParams, getAddToWalletWindowParams } from './UNAddToWalletComponent.utils';
import { UnitComponentsMessage } from '../../../messages/webMessages/unitComponentsMessages';
import { injectHtmlFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.utils';
import { setEvent } from '../../../slices/SharedEventsSlice';
import { overFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
import { PageMessage } from '../../../messages/webMessages/pageMessage';
import { UNBaseView } from '../../UNBaseView';
const UNAddToWalletComponent = props => {
  const dispatch = useDispatch();
  const webRef = useRef(null);
  const {
    currentUNWallet
  } = useCardWallet(props.cardId);
  const styles = getStylesObject();
  const shouldRenderAddToWalletWebView = () => {
    return currentUNWallet && (currentUNWallet.status === UNCardAddToWalletStatus.readyToProvisioning || currentUNWallet.status === UNCardAddToWalletStatus.addedToWallet);
  };
  const handleAddToWalletClicked = () => {
    if (!currentUNWallet) return;
    launchStartCardProvisioning(currentUNWallet);
  };
  const handleWebViewMessage = message => {
    if (!message || !message.type) return;
    switch (message.type) {
      case PageMessage.PAGE_LOADED:
        injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
        break;
      case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
        dispatch(setEvent({
          key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
          data: {}
        }));
        break;
      default:
        break;
    }
  };
  const renderAddToWalletWebView = () => {
    if (currentUNWallet == undefined || currentUNWallet?.status === UNCardAddToWalletStatus.pending) {
      return /*#__PURE__*/React.createElement(ActivityIndicator, {
        style: styles.loader
      });
    }
    return /*#__PURE__*/React.createElement(UNBaseView, {
      style: {
        flex: 1
      },
      fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
    }, shouldRenderAddToWalletWebView() && /*#__PURE__*/React.createElement(WebComponent, {
      ref: webRef,
      type: WebComponentType.cardAction,
      presentationMode: PresentationMode.CoverInjectedHeight,
      params: getAddToWalletParams(props),
      isScrollable: false,
      onMessage: message => handleWebViewMessage(message),
      windowParams: getAddToWalletWindowParams(currentUNWallet)
    }), currentUNWallet?.status === UNCardAddToWalletStatus.readyToProvisioning && /*#__PURE__*/React.createElement(UnitAddToWalletButtonView, {
      style: styles.addToWalletButton,
      onAddToWalletClicked: handleAddToWalletClicked
    }));
  };
  return renderAddToWalletWebView();
};
export default withReduxStore(UNAddToWalletComponent);
//# sourceMappingURL=UNAddToWalletComponent.js.map