import _ from "lodash";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
Field,
reduxForm,
formValueSelector,
getFormSubmitErrors,
} from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import RegisterFormCheck from "./registerCheck";
import RegisterComplete from "./registerComplete";
const RenderTextfield = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
type,
errorMsg,
disabled,
meta: { touched, error },
...custom
}) => {
return (
<>
);
};
const RegisterForm = (props) => {
const {
handleSubmit,
pristine,
valid,
value,
setRegisterFormComplete,
setAccountCreatedComplete,
loggedInUserEmail,
emailaddress1,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
let errorsobj = {};
const emailRegex =
/(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
const required = (value) =>
value
? undefined
: t("account:register-new-account-postcode-label-errormsg");
const email = (value) =>
value && !emailRegex.test(value) ? "Invalid email address" : undefined;
const phoneNumber = (value) =>
value &&
!/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
value
)
? "Invalid phone number"
: undefined;
const passwordsMatch = (value, allValues) =>
value !== allValues.pinswg_custom_password
? "Passwords don't match"
: undefined;
const minLength = (min) => (value) =>
value && value.length < min
? `Must be ${min} characters or more`
: undefined;
const minLength5 = minLength(5);
const postcode = (value) =>
value &&
!/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
value
)
? t("account:register-new-account-postcode-invalid-label-errormsg")
: undefined;
const [hasErrors, setHasErrors] = useState("");
const onHandleSubmit = (values) => {
//console.log(values);
setRegisterFormComplete(true);
};
//console.log(pristine);
return (
<>
{!pristine && !valid && (
Error:{" "}
There are errors on this page. Please correct any
required fields and submit again.
)}
{props.accountCreatedComplete != true ? (
props.registerFormComplete == false ? (
) : (
)
) : (
)}
);
};
const mapStateToProps = (state, props) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
//form: state.form,
initialValues: {
emailaddress1: props.loggedInUserEmail,
},
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
};
};
const selector = formValueSelector("accountRegisterForm"); // <-- same as form name
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "accountRegisterForm",
enableReinitialize: true,
destroyOnUnmount: false,
})(RegisterForm)
);