14244 GEL updates and rework

This commit is contained in:
2025-02-21 09:19:31 +00:00
parent baa1f7c4f3
commit 8d3d356815
8 changed files with 376 additions and 334 deletions
+183 -172
View File
@@ -246,183 +246,194 @@ let PersonalDetails = (props) => {
return (
<>
{props.accountUpdatedComplete == false ? (
props.personalDetailsComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t("account:account-about-you-label")}
</h2>
</legend>
<div className="govuk-form-group ">
<span className="govuk-label ">
{t("account:account-role-label")}:{" "}
{
<div className="govuk-form-group">
{props.accountUpdatedComplete == false ? (
props.personalDetailsComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t("account:account-about-you-label")}
</h2>
</legend>
<div className="govuk-form-group ">
<span className="govuk-label ">
{t("account:account-role-label")}:{" "}
{
props.props.accountDetails
.accountDetails[
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
]
}
</span>
</div>
<Field
name="pinswg_preferredlanguage"
component={RenderPickList}
datafieldname={"pinswg_preferredlanguage"}
optionsArr={["English", "Welsh"]}
className="govuk-input govuk-input--width-20 govuk-radios--inline"
validate={[required]}
label={t(
"account:account-preferred-language-label"
)}
errorMsg={t("account:is-required-label")}
/>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t(
"account:account-first-name-label"
)}
errorMsg={t("account:is-required-label")}
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-last-name-label")}
errorMsg={t("account:is-required-label")}
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t(
"account:account-email-address-label"
)}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t("account:account-telephone-label")}
/>
<Field
name="company"
id="company"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-company-group-label"
)}
errorMsg={t("account:is-required-label")}
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t(
"account:account-your-address-label"
)}
</h2>
</legend>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-1-label"
)}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-2-label"
)}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-town-city-label")}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-county-label")}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t("account:account-postcode-label")}
validate={[required, postcode]}
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
<Link
href={
"/myportal?q=" +
props.props.accountDetails
.accountDetails[
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
]
.loggedinUserId
}
</span>
className="govuk-link"
>
{t("common:cancel-link")}
</Link>
</div>
<Field
name="pinswg_preferredlanguage"
component={RenderPickList}
datafieldname={"pinswg_preferredlanguage"}
optionsArr={["English", "Welsh"]}
className="govuk-input govuk-input--width-20 govuk-radios--inline"
validate={[required]}
label={t(
"account:account-preferred-language-label"
)}
errorMsg={t("account:is-required-label")}
/>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-first-name-label")}
errorMsg={t("account:is-required-label")}
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-last-name-label")}
errorMsg={t("account:is-required-label")}
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t("account:account-email-address-label")}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t("account:account-telephone-label")}
/>
<Field
name="company"
id="company"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t("account:account-company-group-label")}
errorMsg={t("account:is-required-label")}
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t("account:account-your-address-label")}
</h2>
</legend>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-1-label"
)}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-2-label"
)}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-town-city-label")}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-county-label")}
validate={[required]}
errorMsg={t("account:is-required-label")}
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t("account:account-postcode-label")}
validate={[required, postcode]}
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
<Link
href={
"/myportal?q=" +
props.props.accountDetails.loggedinUserId
</form>
) : (
<>
<BuildCheckPersonalDetails
props={props}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
className="govuk-link"
>
{t("common:cancel-link")}
</Link>
</div>
</form>
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</>
)
) : (
<>
<BuildCheckPersonalDetails
props={props}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</>
)
) : (
<PersonalDetailsComplete props={props} />
)}
<PersonalDetailsComplete props={props} />
)}
</div>
</>
);
};
+145 -141
View File
@@ -137,149 +137,153 @@ const RegisterForm = (props) => {
{props.accountCreatedComplete != true ? (
props.registerFormComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t(
"account:register-new-account-sub-heading-1"
)}{" "}
{loggedInUserEmail}
</h2>
</legend>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t(
"account:register-new-account-first-name-label"
)}
errorMsg={t(
"account:register-new-account-first-name-label-errormsg"
)}
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t(
"account:register-new-account-last-name-label"
)}
errorMsg={t(
"account:register-new-account-last-name-label-errormsg"
)}
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t(
"account:register-new-account-email-address-label"
)}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t(
"account:register-new-account-phone-label"
)}
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t(
"account:register-new-account-sub-heading-2"
)}
</h2>
</legend>
<div className="card" id="personalDetailsCard">
<div className="card-body">
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t(
"account:register-new-account-sub-heading-1"
)}{" "}
{loggedInUserEmail}
</h2>
</legend>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t(
"account:register-new-account-first-name-label"
)}
errorMsg={t(
"account:register-new-account-first-name-label-errormsg"
)}
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t(
"account:register-new-account-last-name-label"
)}
errorMsg={t(
"account:register-new-account-last-name-label-errormsg"
)}
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t(
"account:register-new-account-email-address-label"
)}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t(
"account:register-new-account-phone-label"
)}
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t(
"account:register-new-account-sub-heading-2"
)}
</h2>
</legend>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:register-new-account-address-line-1-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-address-line-1-label-errormsg"
)}
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:register-new-account-address-line-2-label"
)}
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t(
"account:register-new-account-town-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-town-label-errormsg"
)}
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t(
"account:register-new-account-county-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-county-label-errormsg"
)}
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t(
"account:register-new-account-postcode-label"
)}
validate={[required, postcode]}
/>
</fieldset>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:register-new-account-address-line-1-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-address-line-1-label-errormsg"
)}
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:register-new-account-address-line-2-label"
)}
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t(
"account:register-new-account-town-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-town-label-errormsg"
)}
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t(
"account:register-new-account-county-label"
)}
validate={[required]}
errorMsg={t(
"account:register-new-account-county-label-errormsg"
)}
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t(
"account:register-new-account-postcode-label"
)}
validate={[required, postcode]}
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
</div>
</div>
</div>
</form>
) : (
+3
View File
@@ -53,6 +53,9 @@ const Header = (props) => {
"/myportal/advancedsearch",
"/myportal/advancedsearchresults",
"/myportal/case/[ticketnumber]",
"/account/personaldetails",
"/register",
"/myportal/searchresults",
];
const hasContactLink = [
+1 -1
View File
@@ -73,7 +73,7 @@ const ServiceBanner = (props) => {
<div className="serviceBanner_userDetails_name">
<Link
href="/account/personaldetails"
className="govuk-button-secondary govuk-link"
className="govuk-button-secondary govuk-link--no-underline"
>
{props.accountDetails.accountDetails.firstname}{" "}
{props.accountDetails.accountDetails.lastname}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"register-new-account-heading": "Create a new account",
"register-new-account-status-created-label": "Your account has created",
"register-new-account-status-created-label": "Your account has been created",
"register-new-account-status-not-created-label": "Your account has not been created",
"register-new-account-checking-label": "Checking for account...",
"help-heading": "Help",
+32 -16
View File
@@ -6,6 +6,7 @@ import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import Footer from "../../components/footer";
import ServiceBanner from "../../components/myportal/servicebanner";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
@@ -64,6 +65,8 @@ const Home = (props) => {
<div className="govuk-grid-column-full">
<div className="govuk-width-container">
<Breadcrumbs slug={appealtypes} props={props} />
<ServiceBanner props={props} />
<main
className="govuk-main-wrapper--auto-spacing"
id="main-content"
@@ -71,22 +74,35 @@ const Home = (props) => {
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h1>{t("account:account-title")}</h1>
<PersonalDetails
props={props}
accountUpdatedComplete={
accountUpdatedComplete
}
personalDetailsComplete={
personalDetailsComplete
}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
<div className="govuk-form-group">
<div
className="card"
id="personalDetailsCard"
>
<div className="card-body">
<h1>
{t(
"account:account-title"
)}
</h1>{" "}
<PersonalDetails
props={props}
accountUpdatedComplete={
accountUpdatedComplete
}
personalDetailsComplete={
personalDetailsComplete
}
setPersonalDetailsComplete={
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</div>
</div>
</div>
</div>
</div>
</main>
+3 -2
View File
@@ -6,7 +6,7 @@ import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import Footer from "../../components/footer";
import ServiceBanner from "../../components/servicebanner";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
@@ -47,6 +47,7 @@ const Home = (props) => {
<div className="govuk-grid-column-full">
<div className="govuk-width-container">
<Breadcrumbs slug={appealtypes} />
<ServiceBanner props={props} noSignin={true} />
<main
className="govuk-main-wrapper--auto-spacing"
id="main-content"
@@ -107,7 +108,7 @@ const Home = (props) => {
{registerFormComplete != true ||
accountCreatedComplete != true ? (
<div className="govuk-grid-column-one-third">
<h2 className="govuk-heading-m">
<h2 className="">
{t("account:help-heading")}
</h2>
+8 -1
View File
@@ -102,6 +102,7 @@ body {
&:hover {
background-color: $blue;
color: #eeeeee;
text-decoration: none;
}
}
@@ -533,7 +534,7 @@ a.longLinkBreak {
label {
margin-top: 0px;
background-color: $lightgrey_semi;
padding: 20px 20px 20px 50px;
padding: 20px 20px 20px 20px;
&:before {
top: 18px;
@@ -2957,3 +2958,9 @@ ul.subFieldList {
}
#personalDetailsCard {
.govuk-fieldset {
margin-bottom: 20px;
}
}