robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added create contact flow for registration

Browse Source
This commit is contained in:
robbond
2021-10-13 07:40:36 +01:00
parent 7238a79895
commit b34c56145d
22 changed files with 663 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/account/registerCheck.js
+15 -10
View File
@@ -9,6 +9,7 @@ import {
getFormSubmitErrors,
} from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setAccCr } from "../../store/accountDetails/action";
const RegisterFormCheck = (props) => {
const {
@@ -18,6 +19,7 @@ const RegisterFormCheck = (props) => {
value,
setRegisterFormComplete,
setAccountCreatedComplete,
setAccCr,
} = props;
let { t, lang } = useTranslation();
@@ -70,7 +72,6 @@ const RegisterFormCheck = (props) => {
>
Change
<span className="govuk-visually-hidden">
{" "}
last name
</span>
</a>
@@ -81,7 +82,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.email
.emailaddress1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -105,7 +106,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.telephone
.telephone1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -123,7 +124,7 @@ const RegisterFormCheck = (props) => {
</a>
</dd>
</div>
<div className="govuk-summary-list__row">
{/* <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">Company/Group</dt>
<dd className="govuk-summary-list__value">
{
@@ -146,7 +147,7 @@ const RegisterFormCheck = (props) => {
</span>
</a>
</dd>
</div>
</div> */}
</dl>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<h2 className="govuk-heading-m">Your address</h2>
@@ -156,7 +157,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline1
.address1_line1
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -180,7 +181,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.addressline2
.address1_line2
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -204,7 +205,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.towncity
.address1_city
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -228,7 +229,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.county
.address1_county
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -252,7 +253,7 @@ const RegisterFormCheck = (props) => {
<dd className="govuk-summary-list__value">
{
props.props.props.form.accountRegisterForm.values
.postcode
.address1_postalcode
}
</dd>
<dd className="govuk-summary-list__actions">
@@ -278,6 +279,7 @@ const RegisterFormCheck = (props) => {
className="govuk-button"
data-module="govuk-button"
onClick={() => {
setAccCr(false);
setAccountCreatedComplete(true);
}}
>
@@ -304,6 +306,9 @@ const mapDispatchToProps = (dispatch) => {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
setAccCr: (accState) => {
dispatch(setAccCr(accState));
},
};
};
components/account/registerComplete.js
+77 -14
View File
@@ -1,8 +1,10 @@
import _ from "lodash";
import Link from "next/link";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import {
Field,
reduxForm,
@@ -18,6 +20,10 @@ import {
setAccountCreatedComplete,
} from "react-redux";
import { setAccCr, setLogout } from "../../store/accountDetails/action";
import { getEmailAccountCheck, createAccount } from "../../actions";
const RegisterComplete = (props) => {
const {
footerLinks,
@@ -26,13 +32,50 @@ const RegisterComplete = (props) => {
value,
setRegisterFormComplete,
setAccountCreatedComplete,
setAccCr,
} = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
const [accountCreated, setAccountCreated] = useState(false);
useEffect(() => {
let accountBody = props.props.props.form.accountRegisterForm.values;
let emailAddress =
props.props.props.form.accountRegisterForm.values.emailaddress1;
Object.assign(accountBody, {
"pinswg_typeofinvolvement": 846040001,
});
accountBody = _.omit(accountBody, ["custom_password_check"]);
let checkEmailObj = {};
switch (props.accountDetails.accCr) {
case "created":
case "exists":
break;
default:
let emailExists = getEmailAccountCheck(
accountBody.emailaddress1
).then((data) => {
data["@odata.count"] > 0
? setAccCr("exists")
: (checkEmailObj = createAccount(accountBody).then(
(data) => {
//console.log(data);
setAccCr("created");
}
));
});
break;
}
});
return props.accountDetails.accCr == "created" ? (
<>
<p className="govuk-body">We have sent you a confirmation email.</p>
@@ -43,18 +86,35 @@ const RegisterComplete = (props) => {
metus non quam mollis egestas. Integer ac leo cursus, laoreet
nulla sed, tempus tellus. Mauris condimentum erat arcu.
</p>
<p className="govuk-body">
Sed imperdiet dignissim ipsum. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. In id leo
in turpis aliquam venenatis ut non erat. Ut est arcu, luctus sit
amet pretium sed, iaculis non purus. Etiam dictum tortor commodo
luctus rhoncus.
</p>
<p className="govuk-body">
<Link href="/">
<a className="govuk-link">Login to My Portal</a>
</Link>
<a
href="/"
className="govuk-link"
onClick={() => {
setLogout(), window.localStorage.clear();
}}
>
Login to My Portal
</a>
</p>
</>
) : (
<>
<h2 className="govuk-heading-m">
Please try again with a different email address
</h2>
<p className="govuk-body">
<a
onClick={() => {
setRegisterFormComplete(false),
setAccountCreatedComplete(false),
setAccCr("false");
}}
className="govuk-link"
>
Try registering again
</a>
</p>
</>
);
@@ -73,8 +133,11 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispatch) => {
return {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
setAccCr: (accountCreated) => {
dispatch(setAccCr(accountCreated));
},
setLogout: () => {
dispatch(setLogout());
},
};
};
components/account/registerform.js
+50 -19
View File
@@ -87,9 +87,21 @@ const RegisterForm = (props) => {
? "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 [hasErrors, setHasErrors] = useState("");
const onHandleSubmit = (values) => {
//console.log(values);
setRegisterFormComplete(true);
};
@@ -125,8 +137,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="email"
id="email"
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
@@ -134,8 +146,8 @@ const RegisterForm = (props) => {
label="Email address"
/>
<Field
name="telephone"
id="telephone"
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
@@ -144,14 +156,29 @@ const RegisterForm = (props) => {
/>
<Field
name="companygroup"
id="companygroup"
name="pinswg_custom_password"
id="pinswg_custom_password"
component={RenderTextfield}
type="text"
type="password"
className="govuk-input govuk-input--width-20"
label="Company/Group"
label="Password"
validate={[required, minLength5]}
errorMsg="Is required"
/>
<Field
name="custom_password_check"
id="custom_password_check"
component={RenderTextfield}
type="password"
className="govuk-input govuk-input--width-20"
label="Confirm password"
validate={[
required,
passwordsMatch,
minLength5,
]}
errorMsg="Passwords do not match"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -161,8 +188,8 @@ const RegisterForm = (props) => {
</legend>
<Field
name="addressline1"
id="addressline1"
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
@@ -171,8 +198,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="addressline2"
id="addressline2"
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
@@ -180,8 +207,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="towncity"
id="towncity"
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
@@ -190,8 +217,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="county"
id="county"
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
@@ -200,8 +227,8 @@ const RegisterForm = (props) => {
errorMsg="Is required"
/>
<Field
name="postcode"
id="postcode"
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
@@ -229,7 +256,11 @@ const RegisterForm = (props) => {
/>
)
) : (
<RegisterComplete />
<RegisterComplete
props={props}
setRegisterFormComplete={setRegisterFormComplete}
setAccountCreatedComplete={setAccountCreatedComplete}
/>
)}
</>
);