%PDF-
%PDF-
Mini Shell
import React, { useState } from "react";
import PropTypes from "prop-types";
import { useMediaQuery } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { Field, FIELD_COMPONENTS } from "common/components/Field";
import { Text, TEXT_KINDS, TEXT_SIZES } from "common/components/Text";
import { emailPattern } from "utils/fieldValidations";
import { Button } from "common/components/Button/Button";
import { DirectDebitGrid, DirectDebitFooter } from "../SignUpBusiness.styles";
import DirectDebitHeader from "./DirectDebitHeader";
function DirectDebit({ defaultValue, onClose, onConfirm }) {
const [directDebitForm, setDirectDebitForm] = useState({
email: defaultValue.email,
street: "",
streetNumber: "",
postalCode: defaultValue.postalCode,
city: defaultValue.city,
});
const [isEdited, setIsEdited] = useState([]);
const isMobile = useMediaQuery("(max-width: 654px)");
const [t] = useTranslation();
const changeHandler = (changes) => {
setDirectDebitForm((prevState) => ({
...prevState,
...changes,
}));
};
const hasEdited = (key) => {
setIsEdited((prevState) => [...prevState, key]);
};
const onConfirmHandler = () => {
for (const key in directDebitForm) {
if (isEdited.indexOf(key) === -1) {
hasEdited(key);
}
}
if (
emailPattern(directDebitForm.email)
|| directDebitForm.street.length === 0
|| directDebitForm.streetNumber.length === 0
|| directDebitForm.postalCode.length === 0
|| directDebitForm.city.length === 0
) {
return;
}
onConfirm(directDebitForm);
};
return (
<>
<DirectDebitHeader label={t("directDebit.confirmDetails")} />
<DirectDebitGrid container spacing={isMobile ? 0 : 2}>
<DirectDebitGrid item md={12} sm={12}>
<Field
component={FIELD_COMPONENTS.TEXT}
onChange={changeHandler}
label={t("email")}
value={directDebitForm.email}
notValid={
emailPattern(directDebitForm.email) && isEdited.includes("email")
}
keyProperty="email"
required
onBlur={() => hasEdited("email")}
/>
<Text
kind={TEXT_KINDS.BODY}
size={TEXT_SIZES.SMALL}
color="neutral.secondary"
>
{t("directDebit.emailNote")}
</Text>
</DirectDebitGrid>
<DirectDebitGrid item container md={6} sm={12}>
<Field
component={FIELD_COMPONENTS.TEXT}
onChange={changeHandler}
label={t("streetName")}
value={directDebitForm.street}
notValid={
directDebitForm.street.length === 0 && isEdited.includes("street")
}
keyProperty="street"
required
onBlur={() => hasEdited("street")}
/>
</DirectDebitGrid>
<DirectDebitGrid item container md={6} sm={12}>
<Field
component={FIELD_COMPONENTS.TEXT}
onChange={changeHandler}
label={t("streetNumber")}
value={directDebitForm.streetNumber}
notValid={
directDebitForm.streetNumber.length === 0
&& isEdited.includes("streetNumber")
}
keyProperty="streetNumber"
required
onBlur={() => hasEdited("streetNumber")}
/>
</DirectDebitGrid>
<DirectDebitGrid item container md={6} sm={12}>
<Field
component={FIELD_COMPONENTS.TEXT}
onChange={changeHandler}
label={t("postalCode")}
value={directDebitForm.postalCode}
notValid={
directDebitForm.postalCode.length === 0
&& isEdited.includes("postalCode")
}
keyProperty="postalCode"
required
onBlur={() => hasEdited("postalCode")}
/>
</DirectDebitGrid>
<DirectDebitGrid item container md={6} sm={12}>
<Field
component={FIELD_COMPONENTS.TEXT}
onChange={changeHandler}
label={t("city")}
value={directDebitForm.city}
notValid={
directDebitForm.city.length === 0 && isEdited.includes("city")
}
keyProperty="city"
required
onBlur={() => hasEdited("city")}
/>
</DirectDebitGrid>
</DirectDebitGrid>
<DirectDebitFooter>
<Button onClick={onClose}>Cancel</Button>
<Button filled onClick={onConfirmHandler} id="form-next-button">
{t("general-next")}
</Button>
</DirectDebitFooter>
</>
);
}
DirectDebit.propTypes = {
onClose: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired,
defaultValue: PropTypes.object.isRequired,
};
export default DirectDebit;
1.0 
Mini Shell