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