%PDF-
%PDF-
Mini Shell
Mini Shell
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,
};
Zerion Mini Shell 1.0