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

Unit React Native components

import React, { useState } from 'react';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
import { WebComponent } from '../../webComponent/WebComponent';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { withReduxStore } from '../../helpers/store/helpers';
import { getMultiFactorAuthenticationParams, getMultiFactorAuthenticationScript } from './UNMultiFactorAuthenticationComponent.utils';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
const UNMultiFactorAuthenticationComponent = props => {
  const [height, setHeight] = useState(0);
  const [presentationMode, setPresentationMode] = useState(PresentationMode.Inherit);
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    props.onLoad({
      data: undefined
    });
  };
  const handleWebViewMessage = message => {
    if (!message || !message.details) return;
    switch (message.type) {
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
      case PageMessage.PAGE_HEIGHT:
        {
          const currentHeight = message.details.height;
          setHeight(currentHeight);
          if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
            setPresentationMode(PresentationMode.Default);
          }
          break;
        }
      case MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED:
        props.onVerificationTokenCreated && props.onVerificationTokenCreated(message.details);
        break;
      case UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED:
        {
          const data = JSON.parse(message.details.unitVerifiedCustomerTokenString);
          props.onAuthenticationFinished && props.onAuthenticationFinished(data);
          break;
        }
    }
  };
  const style = presentationMode === PresentationMode.Inherit ? {
    flex: 1
  } : {
    height: height
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: style,
    onLoadError: handleUnitOnLoad,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    type: WebComponentType.multiFactorAuthentication,
    presentationMode: PresentationMode.Inherit,
    params: getMultiFactorAuthenticationParams(),
    script: getMultiFactorAuthenticationScript(),
    onMessage: message => handleWebViewMessage(message),
    theme: props.theme,
    language: props.language
  }));
};
export default withReduxStore(UNMultiFactorAuthenticationComponent);
//# sourceMappingURL=UNMultiFactorAuthenticationComponent.js.map