%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/pages/migration/steps/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/pages/migration/steps/DirectDebitFailed.js |
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, };