%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/EditDirectDebit.js |
import React, { useState } from "react"; import { TextField } from "@material-ui/core"; import { useSelector } from "react-redux"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { sepaData } from "../selectors"; function OutlinedTextField({ classes, helperText, label, update, value, }) { return ( <TextField classes={{ root: classes.outlinedTextField, }} error={!value} helperText={!value ? helperText : ""} InputLabelProps={{ shrink: true }} label={label} margin="normal" onChange={(event) => update(event.target.value)} required value={value} variant="outlined" /> ); } OutlinedTextField.propTypes = { classes: PropTypes.object.isRequired, helperText: PropTypes.string.isRequired, label: PropTypes.string.isRequired, update: PropTypes.func.isRequired, value: PropTypes.string.isRequired, }; export function EditDirectDebit({ classes, onCancel, onSave }) { const [t] = useTranslation(); const { firstName: sepaFirstName, lastName: sepaLastName, billingAddress: { street: sepaStreet, postalCode: sepaPostalCode, city: sepaCity, }, email: sepaEmail, iban, } = useSelector(sepaData); const [firstName, setFirstName] = useState(sepaFirstName); const [lastName, setLastName] = useState(sepaLastName); const [street, setStreet] = useState(sepaStreet); const [postalCode, setPostalCode] = useState(sepaPostalCode); const [city, setCity] = useState(sepaCity); const [email, setEmail] = useState(sepaEmail); const onSubmit = (event) => { event.preventDefault(); onSave({ firstName, lastName, street, postalCode, city, email, }); }; return ( <div className={classes.wrapper}> <h2 className={classes.heading2}> {t("migration.directDebit.edit")} </h2> <form id="edit-direct-debit-form" onSubmit={onSubmit}> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("general-firstname"))} id="first-name" label={t("general-firstname")} update={setFirstName} value={firstName} /> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("general-lastname"))} id="last-name" label={t("general-lastname")} update={setLastName} value={lastName} /> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("street"))} id="street" label={t("street")} update={setStreet} value={street} /> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("postalCode"))} id="zip-code" label={t("postalCode")} update={setPostalCode} value={postalCode} /> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("city"))} id="city" label={t("city")} update={setCity} value={city} /> <OutlinedTextField classes={classes} helperText={t("form-validator.labelIsRequired").replace("$label", t("email"))} id="email" label={t("email")} update={setEmail} value={email} /> </form> <div className={classes.ibanContainer}> <div className={classes.ibanDetails}> <p className={classes.ibanText}>{t("directDebit.iban")}</p> <p className={classes.ibanNumber}>{iban}</p> </div> </div> <div className={classes.horizontalButtonsContainer} style={{ marginTop: "35px" }}> <button style={{ marginTop: "0px" }} className={classes.button} form="edit-direct-debit-form" type="submit" > {t("save")} </button> <button className={classes.lightButton} onClick={onCancel} type="button" > {t("cancel")} </button> </div> </div> ); } EditDirectDebit.propTypes = { classes: PropTypes.object.isRequired, onCancel: PropTypes.func.isRequired, onSave: PropTypes.func.isRequired, };