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>
|
||||
|
||||
Reference in New Issue
Block a user