%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/pages/migration/steps/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/pages/migration/steps/DirectDebitConfirmationStep.js |
import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Checkbox, FormControlLabel, Typography, } from "@material-ui/core"; import { Box } from "common/components"; import MessageBox, { TYPES as MESSAGE_BOX_TYPES } from "common/components/MessageBox"; import { completeSepaPaymentSetUp } from "actions/api_actions"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import sepaLogo from "../images/lastschriftlogo.svg"; import { EditDirectDebit } from "./EditDirectDebit"; import { resetSepaStatus, setSepaDetails } from "../actions"; import { sepaData, sepaIsRegistered } from "../selectors"; import { DirectDebitFailed } from "./DirectDebitFailed"; export function DirectDebitConfirmationStep({ classes, handleNext }) { const dispatch = useDispatch(); const [t] = useTranslation(); const [authorizationGiven, setAuthorizationGiven] = useState(false); const [showEditForm, setShowEditForm] = useState(false); const [showMessageBox, setShowMessageBox] = useState(false); const sepaDetails = useSelector(sepaData); const sepaRegistrationStatus = useSelector(sepaIsRegistered); const authorizationText = t("migration.directDebit.authorization"); const translatedCountryCode = t(`countryCode.${sepaDetails.billingAddress.countryCode}`); const isMissing = (value) => !value; const dataMissing = isMissing(sepaDetails.firstName) || isMissing(sepaDetails.lastName); const directDebitFailed = sepaRegistrationStatus === 2; useEffect(() => { if (sepaRegistrationStatus === 1) handleNext(); }, [sepaRegistrationStatus, handleNext]); const updateSepaDetails = (payload) => { dispatch(setSepaDetails(payload)); setShowEditForm(false); }; const closeEditForm = () => { setShowEditForm(false); }; const handleChange = () => { setAuthorizationGiven(!authorizationGiven); if (showMessageBox) { setShowMessageBox(false); } }; const confirmSepaPayment = () => { dispatch(completeSepaPaymentSetUp({ accountId: sepaDetails.billingAccountId, paymentConfigurationId: sepaDetails.paymentConfigurationId, firstName: sepaDetails.firstName, lastName: sepaDetails.lastName, email: sepaDetails.email, address: { street: sepaDetails.billingAddress.street, city: sepaDetails.billingAddress.city, postalCode: sepaDetails.billingAddress.postalCode, }, })); }; const handleSubmit = () => { if (!authorizationGiven) { setShowMessageBox(true); return null; } if (dataMissing) { return null; } return confirmSepaPayment(); }; const resetDirectDebit = () => { dispatch(resetSepaStatus); }; return ( <> {!showEditForm && !directDebitFailed && ( <div> <div className={classes.sepaTitle}> <img style={{ visibility: "hidden" }} src={sepaLogo} alt="Direct Debit Logo" /> <h2 className={classes.heading2}> {t("migration.directDebit.title")} </h2> <img src={sepaLogo} alt="Direct Debit Logo" /> </div> <div className={classes.sepaDetailsBox}> <div className={classes.sepaDetails}> <p> {sepaDetails.firstName && `${sepaDetails.firstName} `} {sepaDetails.lastName && sepaDetails.lastName} </p> <p> {`${sepaDetails.billingAddress.street}, ${sepaDetails.billingAddress.postalCode} ${sepaDetails.billingAddress.city}, ${translatedCountryCode}`} </p> <p> {sepaDetails.email} </p> <p className={classes.sepaIban}> {sepaDetails.iban} </p> </div> <div className={classes.sepaEditButtonContainer}> <button type="button" className={`${classes.sepaEditButton} ${classes.lightButton}`} onClick={() => setShowEditForm(true)}>{t("edit")}</button> </div> </div> <Box before={5}> <FormControlLabel className={classes.sepaAuthorizationText} control={( <Checkbox checked={authorizationGiven} color="primary" onChange={handleChange} /> )} label={ <Typography className={classes.sepaAuthorizationText}>{authorizationText}</Typography> } /> </Box> {showMessageBox && ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={2}> {t("migration.directDebit.authorizationMissing")} </MessageBox> )} {dataMissing && ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR}> {t("migration.directDebit.firstOrLastNameMissing")} </MessageBox> )} <button type="button" className={classes.button} onClick={handleSubmit}>{t("general-confirm")}</button> </div> )} {showEditForm && ( <EditDirectDebit classes={classes} onSave={updateSepaDetails} onCancel={closeEditForm} /> )} {directDebitFailed && ( <DirectDebitFailed classes={classes} confirmSepaPayment={confirmSepaPayment} handlePrevious={resetDirectDebit} handleNext={handleNext} /> )} </> ); } DirectDebitConfirmationStep.propTypes = { classes: PropTypes.object.isRequired, handleNext: PropTypes.func.isRequired, };