%PDF-
%PDF-
Mini Shell
Mini Shell
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import warningIcon from "assets/images/warning.svg";
import { CircularProgress } from "@material-ui/core";
import { isLoading, sepaIsRegistered } from "../selectors";
export function DirectDebitFailed({
classes,
confirmSepaPayment,
handleNext,
handlePrevious,
}) {
const [t] = useTranslation();
const loading = useSelector(isLoading);
const sepaRegistrationStatus = useSelector(sepaIsRegistered);
const [showLoadingEffect, setShowLoadingEffect] = useState(false);
useEffect(() => {
if (sepaRegistrationStatus === 1) handleNext();
if (!loading && sepaRegistrationStatus === 2) {
setShowLoadingEffect(true);
setTimeout(() => setShowLoadingEffect(false), 300);
}
}, [loading, sepaRegistrationStatus, handleNext]);
const retry = () => {
confirmSepaPayment();
};
return (
!showLoadingEffect && (
<div className={classes.wrapper}>
<img src={warningIcon} alt="Failure" className={classes.icon} />
<h2 className={classes.heading2}>
{t("migration.directDebitFailed.title")}
</h2>
<p className={`${classes.paragraph} ${classes.centerText}`}>
{t("migration.directDebitFailed.description")}
</p>
<div className={classes.horizontalButtonsContainer}>
<button style={{ marginTop: "0px" }} type="button" className={classes.button} onClick={retry}>{t("tryAgain")}</button>
<button type="button" className={classes.lightButton} onClick={handleNext}>{t("migration.addLater")}</button>
</div>
<div
className={`${classes.link} ${classes.backLink}`}
onClick={handlePrevious}
>
<
{" "}
{t("migration.setPassword.back")}
</div>
<div>
{loading && <CircularProgress className={classes.circularProgress} />}
</div>
</div>
)
);
}
DirectDebitFailed.propTypes = {
classes: PropTypes.object.isRequired,
confirmSepaPayment: PropTypes.func.isRequired,
handleNext: PropTypes.func.isRequired,
handlePrevious: PropTypes.func.isRequired,
};
Zerion Mini Shell 1.0