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

Unit React Native components

import React, { useRef } from 'react';
import { WebComponent } from '../../webComponent/WebComponent';
import { withReduxStore } from '../../helpers/store/helpers';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { UnitMessage } from '../../messages/webMessages/unitMessages';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { setEvent } from '../../slices/SharedEventsSlice';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
import { useDispatch } from 'react-redux';
import { useListenerToEvent } from '../../hooks/useListenerToEvent';
import { getWhiteLabelAppParams, getWhiteLabelAppScript, injectRefreshEventIfNeeded } from './UNWhiteLabelAppComponent.utils';
import { UserDataKeys } from '../../types/internal/unitStore.types';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
import { ActivityMessage } from '../../messages/webMessages/activityMessage';
import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
const UNWhiteLabelAppComponent = props => {
  const webRef = useRef(null);
  const dispatch = useDispatch();
  const handleWebViewMessage = message => {
    switch (message.type) {
      case UnitMessage.UNIT_REQUEST_RENDERING:
        {
          const slotData = {
            componentName: WebComponentType.whiteLabelApp,
            requestRenderingEvent: message.details
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          dispatch(setEvent({
            key: BottomSheetNativeMessage.REQUEST_RENDERING,
            data
          }));
          break;
        }
      case UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD:
        {
          const data = message.details;
          if (data.attributes.customerToken) {
            UNStoreManagerHelper.saveValue(UserDataKeys.unitCustomerToken, data.attributes.customerToken);
            // Upon receiving a new token, the web interface updates the window. Therefore, we (only) store it for subsequent windows.
            // updateWindowUnitStore();
          }
          break;
        }
      case PageMessage.PAGE_LOADED:
        updateWindowUnitStore();
    }
  };
  const updateWindowUnitStore = async () => {
    /**
     * The 2FA-token (verifiedToken) is managed for all the components in UNWebComponent.
     */
    try {
      const token = await UNStoreManagerHelper.getValue(UserDataKeys.unitCustomerToken);
      if (token) {
        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token);
      }
    } catch (e) {
      console.log(e);
    }
  };
  const requestRefresh = data => {
    injectRefreshEventIfNeeded(webRef.current, data);
  };
  const dispatchActivityFiltersChanged = query => {
    webRef.current?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
  };
  useListenerToEvent({
    busEventKey: UnitMessage.UNIT_REQUEST_REFRESH,
    action: requestRefresh
  });
  useListenerToEvent({
    busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
    action: dispatchActivityFiltersChanged
  });
  const renderWebView = () => {
    return /*#__PURE__*/React.createElement(UNBaseView, {
      style: {
        flex: 1
      }
    }, /*#__PURE__*/React.createElement(WebComponent, {
      ref: webRef,
      type: WebComponentType.whiteLabelApp,
      presentationMode: PresentationMode.Inherit,
      params: getWhiteLabelAppParams(props),
      onMessage: handleWebViewMessage,
      isScrollable: true,
      theme: props.theme,
      language: props.language,
      script: getWhiteLabelAppScript()
    }));
  };
  return renderWebView();
};
export default withReduxStore(UNWhiteLabelAppComponent);
//# sourceMappingURL=UNWhiteLabelAppComponent.js.map