connect-transfer-react-native-sdk/lib/module/containers/MAErrorView.js

Connect Transfer React Native SDK for Mastercard Open Banking Connect

"use strict";

import { useEffect, useRef } from 'react';
import { SafeAreaView, Text, Image, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import ErrorIcon from '../assets/errorIcon.png';
import MASecuredBy from '../components/MASecuredBy';
import MAButton from '../components/MAButton';
import { MAErrorViewStyles as styles } from './ContainerStyles';
import { ListenerType, RedirectReason, TransferActionCodes, TransferActionEvents } from '../constants';
import { useTransferEventResponse } from '../events/transferEventHandlers';
import { getTranslation } from '../utility/utils';
import { resetData } from '../redux/slices/authenticationSlice';
import { eventQueue, useSendAuditData } from '../events/auditEventQueue';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const MAErrorView = ({
  isExperienceError = false,
  isInvalidUrl = false
}) => {
  const dispatch = useDispatch();
  const timeoutRef = useRef(null);
  const {
    t
  } = useTranslation();
  const {
    eventHandler: transferEventHandler
  } = useSelector(state => state.event || {});
  const {
    data
  } = useSelector(state => state.errorTranslation || {});
  const errorData = useSelector(state => state.user?.error?.response?.data ?? {}, shallowEqual);
  const error = useSelector(state => state.user?.error);
  const auditServiceToken = useSelector(state => state.user?.data?.auditServiceDetails?.token);
  const {
    getResponseForClose,
    getResponseForError
  } = useTransferEventResponse();
  const sendAuditData = useSendAuditData();
  const FIVE_MINUTES = 5 * 60 * 1000;
  const {
    code,
    user_message
  } = errorData;
  const errorText = data && getTranslation(user_message, data);
  const isApiTimeout = error?.code === TransferActionCodes.API_TIMEOUT;
  const finalCode = getFinalCode();
  useEffect(() => {
    transferEventHandler?.onErrorEvent(getResponseForError(finalCode));
    auditServiceToken && sendAuditData(TransferActionEvents.ERROR, {
      code: finalCode
    });
    timeoutRef.current = setTimeout(() => {
      onExitPressed();
    }, FIVE_MINUTES);
    return () => {
      clearTimeoutRef();
    };
  }, []);
  function getFinalCode() {
    let errorCode = isExperienceError ? -1 : code;
    if (isInvalidUrl) {
      errorCode = TransferActionCodes.INVALID_URL;
    } else if (isApiTimeout) {
      errorCode = TransferActionCodes.API_TIMEOUT;
    }
    return errorCode;
  }
  const clearTimeoutRef = () => {
    if (timeoutRef?.current) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
  };
  const onExitPressed = () => {
    transferEventHandler?.onTransferEnd(getResponseForClose(RedirectReason.ERROR, finalCode));
    auditServiceToken && sendAuditData(TransferActionEvents.END, {
      code: finalCode,
      reason: RedirectReason.ERROR,
      listenerType: ListenerType.CLOSE
    });
    eventQueue.destroy();
    dispatch(resetData());
    clearTimeoutRef();
  };
  const errorScreenFooter = () => {
    return /*#__PURE__*/_jsxs(View, {
      style: styles.footerView,
      children: [/*#__PURE__*/_jsx(MAButton, {
        text: t('Exit'),
        onPress: onExitPressed
      }), /*#__PURE__*/_jsx(MASecuredBy, {})]
    });
  };
  const getErrorText = () => {
    let title = t('ErrorTitle');
    let subTitle = `${t('ErrorSubtitle')} (${TransferActionCodes.API_OR_ATOMIC_ERROR})`;
    if (isInvalidUrl) {
      subTitle = `${t('InvalidUrlErrorSubtitle')} (${TransferActionCodes.INVALID_URL})`;
    } else if (isApiTimeout) {
      subTitle = `${t('ServerTimeoutErrorSubtitle')} (${TransferActionCodes.API_TIMEOUT})`;
    } else if (isExperienceError) {
      title = t('ExperienceErrorTitle');
      subTitle = `${t('ExperienceErrorSubtitle')} (${TransferActionCodes.INVALID_EXPERIENCE})`;
    } else if (code && user_message) {
      subTitle = `${errorText} (${code})`;
    }
    return {
      title,
      subTitle
    };
  };
  return /*#__PURE__*/_jsx(SafeAreaView, {
    style: styles.safeAreaView,
    children: /*#__PURE__*/_jsxs(View, {
      style: styles.errorView,
      children: [/*#__PURE__*/_jsx(Text, {
        style: styles.titleText,
        children: getErrorText().title
      }), /*#__PURE__*/_jsx(Text, {
        style: styles.descriptionText,
        children: getErrorText().subTitle
      }), /*#__PURE__*/_jsx(Image, {
        source: ErrorIcon,
        resizeMode: "contain",
        style: styles.errorIcon
      }), errorScreenFooter()]
    })
  });
};
export default MAErrorView;
//# sourceMappingURL=MAErrorView.js.map