welsh translations of account details
This commit is contained in:
@@ -63,6 +63,142 @@ const RenderTextfield = ({
|
||||
);
|
||||
};
|
||||
|
||||
const RenderRadioList = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
aria-describedby={name + "-hint"}
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label
|
||||
className="govuk-fieldset__heading govuk-body-m"
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div className="govuk-radios govuk-radios--small govuk-radios--inline">
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
data-children-count={key}
|
||||
key={key}
|
||||
>
|
||||
<Field
|
||||
id={id + "_" + index}
|
||||
name={id}
|
||||
component="input"
|
||||
type="radio"
|
||||
className="govuk-radios__input"
|
||||
value={options[key]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderPickList = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
optionsArr,
|
||||
meta: { touched, error },
|
||||
errorMsg,
|
||||
}) => {
|
||||
let { t, lang } = useTranslation();
|
||||
optionsArr = [
|
||||
t("account:account-preferred-language-english") + ":846040001",
|
||||
t("account:account-preferred-language-welsh") + ":846040000",
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id="passport-issued-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select "
|
||||
id={name}
|
||||
name={name}
|
||||
>
|
||||
<option>Select...</option>
|
||||
{Object.keys(optionsArr).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsArr[key].split(":")[1]}
|
||||
>
|
||||
{optionsArr[key].split(":")[0]}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
let PersonalDetails = (props) => {
|
||||
const {
|
||||
handleSubmit,
|
||||
@@ -109,12 +245,12 @@ let PersonalDetails = (props) => {
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<h2 className="govuk-fieldset__heading">
|
||||
About you
|
||||
{t("account:account-about-you-label")}
|
||||
</h2>
|
||||
</legend>
|
||||
<div className="govuk-form-group ">
|
||||
<span className="govuk-label ">
|
||||
Role:{" "}
|
||||
{t("account:account-role-label")}:{" "}
|
||||
{
|
||||
props.props.accountDetails
|
||||
.accountDetails[
|
||||
@@ -123,6 +259,20 @@ let PersonalDetails = (props) => {
|
||||
}
|
||||
</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="Is required"
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="firstname"
|
||||
id="firstname"
|
||||
@@ -130,7 +280,7 @@ let PersonalDetails = (props) => {
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="First name"
|
||||
label={t("account:account-first-name-label")}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
@@ -140,7 +290,7 @@ let PersonalDetails = (props) => {
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="Last name"
|
||||
label={t("account:account-last-name-label")}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
@@ -150,7 +300,7 @@ let PersonalDetails = (props) => {
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label="Email address"
|
||||
label={t("account:account-email-address-label")}
|
||||
disabled
|
||||
/>
|
||||
<Field
|
||||
@@ -160,7 +310,7 @@ let PersonalDetails = (props) => {
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label="Telephone"
|
||||
label={t("account:account-telephone-label")}
|
||||
/>
|
||||
|
||||
<Field
|
||||
@@ -169,14 +319,14 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Company/Group"
|
||||
label={t("account:account-company-group-label")}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<h2 className="govuk-fieldset__heading">
|
||||
What is your address?
|
||||
{t("account:account-your-address-label")}
|
||||
</h2>
|
||||
</legend>
|
||||
|
||||
@@ -186,7 +336,9 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 1"
|
||||
label={t(
|
||||
"account:account-address-line-1-label"
|
||||
)}
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
@@ -196,7 +348,9 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 2"
|
||||
label={t(
|
||||
"account:account-address-line-2-label"
|
||||
)}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
@@ -205,7 +359,7 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="Town/City"
|
||||
label={t("account:account-town-city-label")}
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
@@ -215,7 +369,7 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="County"
|
||||
label={t("account:account-county-label")}
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
@@ -225,7 +379,7 @@ let PersonalDetails = (props) => {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-5"
|
||||
label="Postcode"
|
||||
label={t("account:account-postcode-label")}
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
@@ -236,7 +390,7 @@ let PersonalDetails = (props) => {
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
<Link
|
||||
href={
|
||||
@@ -244,7 +398,9 @@ let PersonalDetails = (props) => {
|
||||
props.props.accountDetails.loggedinUserId
|
||||
}
|
||||
>
|
||||
<a className="govuk-link">Cancel</a>
|
||||
<a className="govuk-link">
|
||||
{t("common:cancel-link")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -25,12 +25,22 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const getPreferredLanguageLabel = (id) => {
|
||||
return id == 846040001
|
||||
? t("account:account-preferred-language-english")
|
||||
: t("account:account-preferred-language-welsh");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="govuk-heading-m">About you</h2>
|
||||
<h2 className="govuk-heading-m">
|
||||
{t("account:account-about-you-label")}
|
||||
</h2>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">First name</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-first-name-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -45,15 +55,18 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
first name
|
||||
{t("account:account-first-name-label")}{" "}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Last name</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{" "}
|
||||
{t("account:account-last-name-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -68,16 +81,19 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
last name
|
||||
{t("account:account-last-name-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Email address</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{" "}
|
||||
{t("account:account-email-address-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -92,16 +108,18 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
email address
|
||||
{t("account:account-email-address-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Telephone</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-telephone-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -116,15 +134,18 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
telephone
|
||||
{t("account:account-telephone-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Company/Group</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{" "}
|
||||
{t("account:account-company-group-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -139,20 +160,50 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
company/group
|
||||
{t("account:account-company-group-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-preferred-language-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{getPreferredLanguageLabel(
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
.pinswg_preferredlanguage
|
||||
)}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#company"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{t("account:account-preferred-language-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<h2 className="govuk-heading-m">
|
||||
{" "}
|
||||
{t("account:account-your-address-label")}
|
||||
</h2>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
|
||||
<h2 className="govuk-heading-m">Your address</h2>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Address Line 1</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-address-line-1-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -167,16 +218,18 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
address line 1
|
||||
{t("account:account-address-line-1-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Address line 2</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-address-line-2-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -191,16 +244,18 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
address line 2
|
||||
{t("account:account-address-line-2-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Town/City</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("account:account-town-city-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -215,16 +270,19 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
town/city
|
||||
{t("account:account-town-city-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">County</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{" "}
|
||||
{t("account:account-county-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -239,16 +297,19 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
county
|
||||
{t("account:account-county-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Postcode</dt>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{" "}
|
||||
{t("account:account-postcode-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.props.form.personalDetailsForm.values
|
||||
@@ -263,10 +324,10 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("common:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
postcode
|
||||
{t("account:account-postcode-label")}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
@@ -281,12 +342,12 @@ const BuildCheckPersonalDetails = (props) => {
|
||||
setAccountUpdatedComplete(true);
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
<Link
|
||||
href={"/myportal?q=" + props.accountDetails.loggedinUserId}
|
||||
>
|
||||
<a className="govuk-link">Cancel</a>
|
||||
<a className="govuk-link"> {t("common:back-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -42,19 +42,18 @@ const PersonalDetailsComplete = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="govuk-body">Your details have been updated</p>
|
||||
<p className="govuk-body">{t("account:account-complete-para-1")}</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a
|
||||
metus non quam mollis egestas. Integer ac leo cursus, laoreet
|
||||
nulla sed, tempus tellus. Mauris condimentum erat arcu.
|
||||
</p>
|
||||
<p className="govuk-body">{t("account:account-complete-para-2")}</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
<Link
|
||||
href={"/myportal?q=" + props.accountDetails.loggedinUserId}
|
||||
>
|
||||
<a className="govuk-link">Return to My Portal</a>
|
||||
<a className="govuk-link">
|
||||
{" "}
|
||||
{t("account:account-complete-return-to-portal-link")}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</>
|
||||
|
||||
@@ -125,7 +125,6 @@ const Breadcrumbs = (props) => {
|
||||
{router.pathname == "/myportal/advancedsearch" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
www
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
@@ -603,7 +602,7 @@ const Breadcrumbs = (props) => {
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Your account
|
||||
{t("account:account-title")}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -512,7 +512,9 @@ let AdvancedSearch = (props) => {
|
||||
},
|
||||
]}
|
||||
//validate={[required]}
|
||||
label={"Case Status"}
|
||||
label={t(
|
||||
"search:case-status-label"
|
||||
)}
|
||||
errormsg="Local authority is required"
|
||||
/>
|
||||
{/* <fieldset className="govuk-fieldset">
|
||||
|
||||
Reference in New Issue
Block a user