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

Unit React Native components

import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { WebComponent } from '../../webComponent/WebComponent';
import { getCardParams, getCardScript, injectRefreshEventIfNeeded, injectOpenActionsMenuScript, injectRequestCardActionScript, injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript } from './UNCardComponent.utils';
import { UNCardMenuAction } from '../../types/shared';
import { CardMessage } from '../../messages/webMessages/cardMessage';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
import { selectWallet } from '../../slices/pushProvisioningSlice';
import { useDispatch, useSelector } from 'react-redux';
import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
import { useListenerToEvent } from '../../hooks/useListenerToEvent';
import { setEvent } from '../../slices/SharedEventsSlice';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
const UNCardComponent = /*#__PURE__*/React.forwardRef(function UNCardComponent(props, cardRef) {
  const dispatch = useDispatch();
  const [height, setHeight] = useState(0);
  const webRef = useRef(null);
  const {
    initializePushProvisioning
  } = useLaunchInitialize();
  const {
    signedNonce
  } = useSelector(selectWallet);
  useImperativeHandle(cardRef, () => ({
    openActionsMenu() {
      injectOpenActionsMenuScript(webRef.current);
    },
    openAction(action) {
      injectRequestCardActionScript(webRef.current, action);
    },
    showSensitiveData() {
      injectRequestShowSensitiveDataScript(webRef.current);
    },
    hideSensitiveData() {
      injectRequestHideSensitiveDataScript(webRef.current);
    }
  }));
  const cardStatusChanged = card => {
    if (props.onStatusChanged) {
      props.onStatusChanged(card);
    }
  };
  const cardActivated = card => {
    if (props.onCardActivated) {
      props.onCardActivated(card);
    }
  };
  const requestRefresh = data => {
    injectRefreshEventIfNeeded(webRef.current, data, props.cardId);
  };
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.card in response) {
      // CardOnLoadResponse
      props.onLoad(response[RESPONSE_KEYS.card]);
      return;
    }
    console.error('On Load Error: unexpected response type');
    return;
  };
  useListenerToEvent({
    busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH,
    action: requestRefresh
  });
  useListenerToEvent({
    busEventKey: CardMessage.CARD_STATUS_CHANGED,
    action: cardStatusChanged
  });
  useListenerToEvent({
    busEventKey: CardMessage.CARD_ACTIVATED,
    action: cardActivated
  });
  const handleMessage = message => {
    if (!message || !message.details) return;
    switch (message.type) {
      case UnitComponentsMessage.UNIT_REQUEST_RENDERING:
        {
          const slotData = {
            componentName: WebComponentType.card,
            componentResourceId: props.cardId,
            requestRenderingEvent: message.details
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          dispatch(setEvent({
            key: BottomSheetNativeMessage.REQUEST_RENDERING,
            data
          }));
          sendActionCallbackIfNeeded(slotData.requestRenderingEvent);
          break;
        }
      case PageMessage.PAGE_HEIGHT:
        setHeight(message.details.height);
        break;
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
    }
  };
  const sendActionCallbackIfNeeded = requestRenderingEvent => {
    switch (requestRenderingEvent.data.nativeComponentName) {
      case WebComponentType.cardMenu:
        props.onActionsMenuClicked && props.onActionsMenuClicked();
        break;
      case WebComponentType.cardAction:
        {
          // Find the relevant action from the native component
          const actionMatch = requestRenderingEvent.data.nativeComponent.match(/action=([^\s]+)/);
          if (actionMatch && props.onAction) {
            const actionString = actionMatch[1];

            // Check if the actionString matches any value in the UNCardMenuAction enum
            if (Object.values(UNCardMenuAction).includes(actionString)) {
              props.onAction(actionString);
            }
          }
        }
    }
  };
  useEffect(() => {
    if (props.pushProvisioningModule) {
      UnitComponentsSDK.setPushProvisioningModule(props.pushProvisioningModule);
    }
  }, [props.pushProvisioningModule]);
  useEffect(() => {
    if (signedNonce || !UnitComponentsSDK.getPushProvisionModule()) return;
    initializePushProvisioning();
  }, []);
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: {
      height,
      width: '100%',
      minWidth: 235
    },
    onLoadError: handleUnitOnLoad,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    ref: webRef,
    type: WebComponentType.card,
    presentationMode: PresentationMode.Default,
    params: getCardParams(props),
    theme: props.theme,
    language: props.language,
    script: getCardScript(),
    onMessage: message => handleMessage(message),
    isScrollable: false
  }));
});
export default withReduxStoreAndRefForwarding(UNCardComponent);
//# sourceMappingURL=UNCardComponent.js.map