Commit 2f1d9ba6 authored by TJHeeringa's avatar TJHeeringa

Improved handling of IBAN

parent 579f7d44
......@@ -3592,6 +3592,11 @@
}
}
},
"bic-from-iban": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/bic-from-iban/-/bic-from-iban-1.0.0.tgz",
"integrity": "sha1-lfAWveaXYAAbA9tFXt50nThDmsc="
},
"big-integer": {
"version": "1.6.48",
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
......@@ -8064,6 +8069,11 @@
"resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz",
"integrity": "sha1-2WyScyB28HJxG2sQ/X1PZa2O4j0="
},
"iban": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz",
"integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w=="
},
"ibm-openapi-validator": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/ibm-openapi-validator/-/ibm-openapi-validator-0.16.2.tgz",
......
......@@ -4,18 +4,21 @@ import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
import { Osiris } from "App/Components/Forms/Osiris";
import PropTypes from "prop-types";
import React from "react";
import React, {useEffect} from "react";
import { ValidatorForm } from "react-material-ui-form-validator";
import { useGet } from "restful-react";
import { getBIC } from "bic-from-iban";
import { useAlertHandler} from "../../Contexts/AlertHandler";
import {useAPI} from "../../Contexts/API";
import CheckboxField from "../Fields/CheckboxField";
import DateField from "../Fields/DateField";
import SelectField from "../Fields/SelectField";
import TextField from "../Fields/TextField";
import Wrapper from "../Fields/Wrapper";
import Block from "../PageLayout/Content/Block";
import CheckboxField from "../Fields/CheckboxField";
import isIban from "../ValidatorRules/isIban";
import isTruthy from "../ValidatorRules/isTruthy";
const ProfileForm = ({container, ...rest}) => {
......@@ -69,6 +72,15 @@ const ProfileFormWithoutContainer = ({ update, profile, onSuccess, disabled, han
resolve: data => data && data.results
});
useEffect(()=>{
// called when component is mounted
ValidatorForm.addValidationRule(isIban.name, isIban.validate);
// return function is called when component is unmounted
return function (){
ValidatorForm.removeValidationRule(isIban.name);
};
});
const handleSubmit = (event, values) => {
if (update) {
patchProfile(profile);
......@@ -110,6 +122,7 @@ const ProfileFormWithoutContainer = ({ update, profile, onSuccess, disabled, han
<ValidatorForm
onSubmit={handleSubmit}
onError={errors => console.log(errors)}
debounceTime={1000}
>
<Typography variant={"h5"}>General</Typography>
<Wrapper>
......@@ -214,20 +227,21 @@ const ProfileFormWithoutContainer = ({ update, profile, onSuccess, disabled, han
name={"IBAN"}
value={profile.iban}
onChange={(event) => handleProfileChange("iban", event.target.value)}
validators={["isIban"]}
errorMessages={["This is not a valid iban"]}
helperText={"Enter the IBAN without spaces, so NL12RABO0123456789 instead of NL12 RABO 0123 4567 89."}
disabled={disabled}
required
/>
</Wrapper>
<Wrapper>
<TextField
name={"BIC"}
value={profile.bic_code}
helperText={"This will be derived from your IBAN. This will be entered automatically when the IBAN is valid."}
disabled
required
/>
</Wrapper>
{/*<Wrapper>*/}
{/* <TextField*/}
{/* name={"BIC"}*/}
{/* value={profile.iban && getBIC(profile.iban)}*/}
{/* helperText={"This will be derived from your IBAN. This will be entered automatically when the IBAN is valid."}*/}
{/* disabled*/}
{/* />*/}
{/*</Wrapper>*/}
<Typography variant={"h5"}>Education</Typography>
<Wrapper>
<SelectField
......
......@@ -23,7 +23,7 @@ const ProfileInfo = ({ profile }) => {
};
data["Financial"] = {
"IBAN:": profile.iban,
"BIC": profile.bic_code
// "BIC": profile.bic_code
};
data["Education"] = {
"Phase:": profile.is_master ? "Master" : "Bachelor",
......
......@@ -13,34 +13,7 @@ export const Profile = ({profile: propProfile, infoOrForm, ...props}) => {
const [profile, setProfile] = useState(propProfile);
const handleProfileChange = (field, value) => {
if (field === "iban" && (value.length >14 && value.length < 35 )) {
API.callv2({
url: "https://openiban.com/validate/" +value + "?getBIC=true&validateBankCode=true",
method: "GET",
on_succes: (ibanData) => {
if (ibanData.valid === true) {
alerthandler.handleAlertHandler("green", "IBAN valid");
setProfile(prevState => ({
...prevState,
"iban": value,
"bic_code": ibanData["bankData"]["bic"]
}));
} else {
setProfile(prevState => ({
...prevState,
"iban": value,
"bic_code": ""
}));
}
},
on_failure: () => {
alerthandler.handleAlertHandler("red", "openiban.com check of your IBAN failed");
},
external: true
});
} else {
setProfile(prevState =>({...prevState, [field]: value}));
}
setProfile(prevState =>({...prevState, [field]: value}));
};
if (infoOrForm === "info") {
......
import { isValid } from "iban";
const isIban = {
name: "isIban",
validate: (value) => isValid(value)
};
export default isIban;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment