added form ordering and validation for s78
This commit is contained in:
+6
-6
@@ -4,7 +4,7 @@ ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
|
||||
//ESNR Tenant
|
||||
TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
|
||||
//WGO Tenant
|
||||
TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
|
||||
//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
|
||||
GRANT_TYPE = "client_credentials"
|
||||
|
||||
HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
|
||||
@@ -28,11 +28,11 @@ RELAYPATH = "dev-pedw-hc"
|
||||
|
||||
|
||||
//Preprod Oauth WGO
|
||||
CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
|
||||
CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
|
||||
RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
|
||||
RELAYURI = "pp-pedw-ns.servicebus.windows.net"
|
||||
RELAYPATH = "pp-pedw-hc"
|
||||
//CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
|
||||
//CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
|
||||
//RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
|
||||
//RELAYURI = "pp-pedw-ns.servicebus.windows.net"
|
||||
//RELAYPATH = "pp-pedw-hc"
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -230,6 +230,53 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal/[appealtypes]" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
? router.locale + "/myportal"
|
||||
: "/myportal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:parent-page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/myportal/[appealtypes]" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
? router.locale + "/myportal"
|
||||
: "/myportal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:parent-page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{props.formTitle}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal/selectappeal" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
|
||||
+604
-82
@@ -12,6 +12,17 @@ import pickListLookup from "../../data/picklistLookups.json";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import FileUpload from "../newappeal/fileupload";
|
||||
import Dropzone, { useDropzone } from "react-dropzone";
|
||||
import _ from "lodash";
|
||||
import { connect, useDispatch } from "react-redux";
|
||||
|
||||
import {
|
||||
addYears,
|
||||
addMonths,
|
||||
addDays,
|
||||
subYears,
|
||||
subMonths,
|
||||
subDays,
|
||||
} from "date-fns";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -50,86 +61,204 @@ const RenderTextfield = ({
|
||||
};
|
||||
|
||||
export function Textfield(props) {
|
||||
const { name, label, validate, ticketnumber } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
validation,
|
||||
ticketnumber,
|
||||
form,
|
||||
formProps,
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
hint,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
if (name == "pinswg_name") {
|
||||
let { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={ticketnumber}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={ticketnumber}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-body">{t(hint)}</div>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
// console.log(parentField, showIfHasParentShowValue);
|
||||
// console.log(parentField, formProps, form);
|
||||
|
||||
//console.log("validation props:", validation);
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
//validate={[required]}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const RenderMultiline = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
errorMsg,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<textarea {...input} rows={rows} className={className}></textarea>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
||||
{FieldsTranslations(label)}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span id={id + "-error"} className="govuk-error-message">
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{touched &&
|
||||
((error && (
|
||||
<span>{errorMsg ? errorMsg : error}</span>
|
||||
)) ||
|
||||
(warning && <span>{warning}</span>))}
|
||||
</span>
|
||||
)}
|
||||
<textarea
|
||||
{...input}
|
||||
rows={rows}
|
||||
className={className}
|
||||
></textarea>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function MultiLinefield(props) {
|
||||
const { name, label } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
// console.log(parentField, showIfHasParentShowValue);
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information, like your
|
||||
National Insurance number or credit card details.
|
||||
</div>
|
||||
<>
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<div>
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information.
|
||||
</div>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information.
|
||||
</div>
|
||||
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -145,6 +274,42 @@ const RenderDatePicker = ({
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
registerLocale("cy", cy);
|
||||
|
||||
var startDateArr =
|
||||
custom.dateStart != "0" ? custom.dateStart.split("") : custom.dateStart;
|
||||
var endDateArr =
|
||||
custom.dateEnd != "0" ? custom.dateEnd.split("") : custom.dateEnd;
|
||||
|
||||
var minDate =
|
||||
startDateArr == 0
|
||||
? new Date()
|
||||
: startDateArr[0] == "-"
|
||||
? startDateArr[2] == "y"
|
||||
? subYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? subMonths(new Date(), startDateArr[1])
|
||||
: subDays(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "y"
|
||||
? addYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? addMonths(new Date(), startDateArr[1])
|
||||
: addDays(new Date(), startDateArr[1]);
|
||||
|
||||
var maxDate =
|
||||
endDateArr == 0
|
||||
? new Date()
|
||||
: startDateArr[0] == "-"
|
||||
? startDateArr[2] == "y"
|
||||
? subYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? subMonths(new Date(), startDateArr[1])
|
||||
: subDays(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "y"
|
||||
? addYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? addMonths(new Date(), startDateArr[1])
|
||||
: addDays(new Date(), startDateArr[1]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -185,6 +350,9 @@ const RenderDatePicker = ({
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={value || null}
|
||||
className="govuk-input govuk-input--width-10"
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
|
||||
// value={!value ? null : new Date(value)}
|
||||
/>
|
||||
@@ -195,18 +363,53 @@ const RenderDatePicker = ({
|
||||
};
|
||||
|
||||
export function DateFieldPicker(props) {
|
||||
const { name, label } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
dateStart,
|
||||
dateEnd,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
//validate={[required]}
|
||||
errorMsg="Select a date"
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -332,7 +535,13 @@ const RenderYesNo = ({
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div className="govuk-radios govuk-radios--inline govuk-radios--small">
|
||||
<div
|
||||
className={
|
||||
custom.inline == false
|
||||
? "govuk-radios govuk-radios--small"
|
||||
: "govuk-radios govuk-radios--inline govuk-radios--small"
|
||||
}
|
||||
>
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
@@ -346,6 +555,31 @@ const RenderYesNo = ({
|
||||
type="radio"
|
||||
className="govuk-radios__input"
|
||||
value={options[key]}
|
||||
onChange={(e) => {
|
||||
let docListObj = custom.documentList;
|
||||
if (
|
||||
custom.requiredDocumentValue ==
|
||||
"Yes" ||
|
||||
custom.requiredDocumentValue ==
|
||||
"Ydw"
|
||||
) {
|
||||
e.target.value == "Ydw" ||
|
||||
e.target.value == "Yes"
|
||||
? (docListObj = Object.assign(
|
||||
docListObj,
|
||||
{
|
||||
["documentCheckList_" +
|
||||
id]:
|
||||
custom.requiredDocumentLabel,
|
||||
}
|
||||
))
|
||||
: delete docListObj[
|
||||
"documentCheckList_" + id
|
||||
];
|
||||
console.log(docListObj);
|
||||
custom.setDocumentsList(docListObj);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
@@ -365,7 +599,7 @@ const RenderYesNo = ({
|
||||
export function YesNofield(props) {
|
||||
const router = useRouter();
|
||||
|
||||
const { name, label } = props;
|
||||
const { name, label, inline, validation } = props;
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
@@ -376,10 +610,291 @@ export function YesNofield(props) {
|
||||
label={props.label}
|
||||
options={yesNo}
|
||||
id={props.name}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
className={"govuk-radios__input"}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
inline={_.has(props, "inline") ? props.inline : "true"}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderRadio = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
let { t } = useTranslation();
|
||||
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"}
|
||||
>
|
||||
{FieldsTranslations(label)}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className={
|
||||
custom.inline == false
|
||||
? "govuk-radios govuk-radios--small"
|
||||
: "govuk-radios govuk-radios--inline govuk-radios--small"
|
||||
}
|
||||
>
|
||||
{" "}
|
||||
{custom.hint != false && (
|
||||
<div class="govuk-hint">{t(custom.hint)}</div>
|
||||
)}
|
||||
{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].split("|")[0]}
|
||||
onChange={(e) => {
|
||||
let docListObj = custom.documentList;
|
||||
if (
|
||||
custom.requiredDocumentValue ==
|
||||
"Yes"
|
||||
) {
|
||||
e.target.value != "846040000"
|
||||
? (docListObj = Object.assign(
|
||||
docListObj,
|
||||
{
|
||||
["documentCheckList_" +
|
||||
id]:
|
||||
custom.requiredDocumentLabel,
|
||||
}
|
||||
))
|
||||
: delete docListObj[
|
||||
"documentCheckList_" + id
|
||||
];
|
||||
custom.setDocumentsList(docListObj);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{t(options[key].split("|")[1])}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function Radiofield(props) {
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
datafieldname,
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
} = props;
|
||||
|
||||
const router = useRouter();
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
// console.log(props.options);
|
||||
|
||||
const fieldOptions = props.options
|
||||
.slice(1, props.options.length - 1)
|
||||
.split(",");
|
||||
|
||||
//parentFieldShowOnValue
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
|
||||
// console.log(showIfHasParentShowValue);
|
||||
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={name}
|
||||
datafieldname={datafieldname}
|
||||
label={label}
|
||||
options={fieldOptions}
|
||||
id={name}
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderRadio}
|
||||
inline={props.inline}
|
||||
hint={props.hint}
|
||||
validate={eval(validation)}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Field
|
||||
name={name}
|
||||
datafieldname={datafieldname}
|
||||
label={label}
|
||||
options={fieldOptions}
|
||||
id={name}
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderRadio}
|
||||
inline={props.inline}
|
||||
hint={props.hint}
|
||||
validate={eval(validation)}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderCheckBox = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
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"}
|
||||
>
|
||||
{FieldsTranslations(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-checkboxes ">
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-checkboxes__item"
|
||||
data-children-count={key}
|
||||
key={key}
|
||||
>
|
||||
<Field
|
||||
id={id + "_" + index}
|
||||
name={id + "_" + index}
|
||||
component="input"
|
||||
type="checkbox"
|
||||
className="govuk-checkboxes__input"
|
||||
value={options[key]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function CheckBoxfield(props) {
|
||||
const router = useRouter();
|
||||
|
||||
console.log(props);
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
const fieldOptions =
|
||||
router.locale == "cy" ? ["Ydw", "Na", "2323"] : ["Yes", "No", "23232"];
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
datafieldname={props.datafieldname}
|
||||
label={props.label}
|
||||
options={fieldOptions}
|
||||
id={props.id}
|
||||
className={props.className}
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderCheckBox}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -438,7 +953,8 @@ export function PickList(props) {
|
||||
}
|
||||
|
||||
export function NumericField(props) {
|
||||
const { name, label } = props;
|
||||
const { name, label, validation } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
@@ -448,7 +964,6 @@ export function NumericField(props) {
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
spellCheck="false"
|
||||
@@ -456,13 +971,16 @@ export function NumericField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DecimalField(props) {
|
||||
const { name, label } = props;
|
||||
const { name, label, validation } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
@@ -472,7 +990,7 @@ export function DecimalField(props) {
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
// component="input"
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
spellCheck="false"
|
||||
@@ -480,6 +998,8 @@ export function DecimalField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -491,24 +1011,26 @@ export function ReadOnlyfield(props) {
|
||||
const { name, label, value } = props;
|
||||
//console.log(props.value.refno);
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={value}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={value}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FieldsTranslations = (label) => {
|
||||
export const FieldsTranslations = (label) => {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
@@ -207,7 +207,7 @@ let Login = (props) => {
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:login-card-title")}
|
||||
</h3>{" "}
|
||||
{/* <form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{validLoginID == false && (
|
||||
<div className="govuk-error-message govuk-form-group--error">
|
||||
Incorrect username or password
|
||||
@@ -254,7 +254,7 @@ let Login = (props) => {
|
||||
{t("home:login-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
</form> */}
|
||||
</form>
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-xs">
|
||||
<a
|
||||
|
||||
@@ -0,0 +1,448 @@
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useRouter } from "next/router";
|
||||
import { connect } from "react-redux";
|
||||
import { Field, formValueSelector, reduxForm } from "redux-form";
|
||||
|
||||
let AboutYou = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { onSubmit, handleSubmit, appellantAgentValue } = props;
|
||||
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const appellantAgent =
|
||||
router.locale == "cy" ? ["Apelydd", "Asiant"] : ["Appellant", "Agent"];
|
||||
const contactPref =
|
||||
router.locale == "cy" ? ["Ebost", "Post"] : ["Email", "Post"];
|
||||
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
const emailRegex =
|
||||
/(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
|
||||
|
||||
const email = (value) =>
|
||||
value && !emailRegex.test(value) ? "Invalid email address" : undefined;
|
||||
const phoneNumber = (value) =>
|
||||
value &&
|
||||
!/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
|
||||
value
|
||||
)
|
||||
? "Invalid phone number"
|
||||
: undefined;
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
disabled,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label
|
||||
className="govuk-label "
|
||||
htmlFor={id}
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{touched &&
|
||||
((error && (
|
||||
<span>{errorMsg ? errorMsg : error}</span>
|
||||
)) ||
|
||||
(warning && <span>{warning}</span>))}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
{...input}
|
||||
className={className}
|
||||
name={id}
|
||||
id={id}
|
||||
type={type}
|
||||
disabled={disabled ? true : false}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderYesNo = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
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--inline govuk-radios--small">
|
||||
{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 onHandleSubmit = (values) => {
|
||||
event.preventDefault();
|
||||
|
||||
console.log(values);
|
||||
router.replace("/newappeal");
|
||||
};
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<Field
|
||||
name={"onbehalfof"}
|
||||
id={"onbehalfof"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t("newappeal:about-you-on-behalf-label")}
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
<details class="govuk-details" data-module="govuk-details">
|
||||
<summary class="govuk-details__summary">
|
||||
<span class="govuk-details__summary-text">
|
||||
Who can appeal?
|
||||
</span>
|
||||
</summary>
|
||||
<div class="govuk-details__text">
|
||||
Only those named as an applicant on the original
|
||||
application form can submit an appeal. if you are
|
||||
submitting an appeal on behalf of a company state the
|
||||
name of the company you are representing,
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<Field
|
||||
name={"appellantAgent"}
|
||||
datafieldname={"appellantAgent"}
|
||||
label={t("newappeal:about-you-who-are-you-label")}
|
||||
options={appellantAgent}
|
||||
id={"appellantAgent"}
|
||||
className="govuk-radios__input"
|
||||
validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
{(appellantAgentValue == "Appellant" ||
|
||||
appellantAgentValue == "Apelydd") && (
|
||||
<>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-appellant-contact-details")}
|
||||
</h2>
|
||||
<Field
|
||||
name={"appellantfirstname"}
|
||||
id={"appellantfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantlastname"}
|
||||
id={"appellantlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"appellantemailaddress"}
|
||||
id={"appellantemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantphonenumber"}
|
||||
id={"appellantphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="numberz"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"contactPrefs"}
|
||||
datafieldname={"contactPrefs"}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-preferences-label"
|
||||
)}
|
||||
options={contactPref}
|
||||
id={"contactPrefs"}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{(appellantAgentValue == "Agent" ||
|
||||
appellantAgentValue == "Asiant") && (
|
||||
<>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-appellant-contact-details")}
|
||||
</h2>
|
||||
<Field
|
||||
name={"appellantfirstname"}
|
||||
id={"appellantfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantlastname"}
|
||||
id={"appellantlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"appellantemailaddress"}
|
||||
id={"appellantemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantphonenumber"}
|
||||
id={"appellantphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-agent-contact-details")}
|
||||
</h2>{" "}
|
||||
<Field
|
||||
name={"agentcompanyname"}
|
||||
id={"agentcompanyname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-companyname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentfirstname"}
|
||||
id={"agentfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentlastname"}
|
||||
id={"agentlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"agentemailaddress"}
|
||||
id={"agentemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentphonenumber"}
|
||||
id={"agentphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"contactPrefs"}
|
||||
datafieldname={"contactPrefs"}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-preferences-label"
|
||||
)}
|
||||
options={contactPref}
|
||||
id={"contactPrefs"}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
AboutYou = reduxForm({
|
||||
form: "caseForm", // a unique identifier for this form
|
||||
destroyOnUnmount: false,
|
||||
})(AboutYou);
|
||||
|
||||
const selector = formValueSelector("caseForm"); // <-- same as form name
|
||||
|
||||
AboutYou = connect((state) => {
|
||||
// can select values individually
|
||||
const appellantAgentValue = selector(state, "appellantAgent");
|
||||
|
||||
return {
|
||||
appellantAgentValue,
|
||||
};
|
||||
})(AboutYou);
|
||||
|
||||
export default AboutYou;
|
||||
|
||||
// export default connect(
|
||||
// mapStateToProps,
|
||||
// mapDispatchToProps
|
||||
// )(
|
||||
// reduxForm({
|
||||
// form: "caseForm",
|
||||
// destroyOnUnmount: false,
|
||||
// })(AboutYou)
|
||||
// );
|
||||
@@ -5,7 +5,6 @@ import xpath from "xpath";
|
||||
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
@@ -14,6 +13,8 @@ import {
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
FileUploadField,
|
||||
CheckBoxfield,
|
||||
Radiofield,
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
@@ -26,9 +27,11 @@ export default function BuildField(props) {
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
console.log(props);
|
||||
//console.log(props);
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
//console.log(props.datafieldname, classid);
|
||||
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return (
|
||||
@@ -54,6 +57,7 @@ export default function BuildField(props) {
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
picklistData={props.picklistData}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -62,10 +66,38 @@ export default function BuildField(props) {
|
||||
<YesNofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<Radiofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
options={props.datafieldcontent}
|
||||
inline={false}
|
||||
hint={props.hint}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
return (
|
||||
<Textfield
|
||||
name={props.datafieldname}
|
||||
@@ -75,6 +107,12 @@ export default function BuildField(props) {
|
||||
props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -83,6 +121,13 @@ export default function BuildField(props) {
|
||||
<DateFieldPicker
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
dateStart={props.dateStart}
|
||||
dateEnd={props.dateEnd}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -91,6 +136,11 @@ export default function BuildField(props) {
|
||||
<MultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -99,6 +149,7 @@ export default function BuildField(props) {
|
||||
<NumericField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -107,6 +158,7 @@ export default function BuildField(props) {
|
||||
<DecimalField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -118,6 +170,21 @@ export default function BuildField(props) {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<CheckBoxfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
props={props}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
|
||||
@@ -35,9 +35,61 @@ export default function BuildRow(props) {
|
||||
} else {
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var validation = xpath.select("//@validation", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
var datafieldcontent = xpath.select(
|
||||
"//@datafieldcontent",
|
||||
doc
|
||||
);
|
||||
var parentField = xpath.select("//@parentField", doc);
|
||||
|
||||
console.log(doc, datafieldname[0].value);
|
||||
var parentFieldShowOnValue = xpath.select(
|
||||
"//@parentFieldShowOnValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentValue = xpath.select(
|
||||
"//@requiredDocumentValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentLabel = xpath.select(
|
||||
"//@requiredDocumentLabel",
|
||||
doc
|
||||
);
|
||||
|
||||
var hint = xpath.select("//label/@hint", doc);
|
||||
var dateStart = xpath.select("//@dateStart", doc);
|
||||
var dateEnd = xpath.select("//@dateEnd", doc);
|
||||
|
||||
hint = !_.isEmpty(hint) && hint[0].value;
|
||||
|
||||
validation = !_.isEmpty(validation)
|
||||
? validation[0].value
|
||||
: [];
|
||||
|
||||
parentField =
|
||||
!_.isEmpty(parentField) && parentField[0].value;
|
||||
|
||||
parentFieldShowOnValue =
|
||||
!_.isEmpty(parentFieldShowOnValue) &&
|
||||
parentFieldShowOnValue[0].value;
|
||||
|
||||
datafieldcontent =
|
||||
!_.isEmpty(datafieldcontent) &&
|
||||
datafieldcontent[0].value;
|
||||
|
||||
requiredDocumentValue =
|
||||
!_.isEmpty(requiredDocumentValue) &&
|
||||
requiredDocumentValue[0].value;
|
||||
|
||||
requiredDocumentLabel =
|
||||
!_.isEmpty(requiredDocumentLabel) &&
|
||||
requiredDocumentLabel[0].value;
|
||||
|
||||
dateStart = !_.isEmpty(dateStart) && dateStart[0].value;
|
||||
|
||||
dateEnd = !_.isEmpty(dateEnd) && dateEnd[0].value;
|
||||
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
@@ -61,15 +113,25 @@ export default function BuildRow(props) {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// console.log(
|
||||
// datafieldname[0].value,
|
||||
// isRequiredField[0].RequiredLevel.Value
|
||||
// );
|
||||
if (typeof isRequiredField[0] != "undefined") {
|
||||
if (
|
||||
isRequiredField[0].RequiredLevel.Value != "None"
|
||||
) {
|
||||
//console.log(datafieldname[0].value, validation);
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
datafieldcontent={datafieldcontent}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={
|
||||
parentFieldShowOnValue
|
||||
}
|
||||
key={key}
|
||||
props={props}
|
||||
picklistData={
|
||||
@@ -79,6 +141,22 @@ export default function BuildRow(props) {
|
||||
mandatoryFieldsData={
|
||||
mandatoryFieldsData
|
||||
}
|
||||
hint={hint}
|
||||
requiredDocumentLabel={
|
||||
requiredDocumentLabel
|
||||
}
|
||||
requiredDocumentValue={
|
||||
requiredDocumentValue
|
||||
}
|
||||
validation={validation}
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
setDocumentsList={
|
||||
props.props.setDocumentsList
|
||||
}
|
||||
documentList={
|
||||
props.props.appealType.documentList
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
||||
@@ -10,7 +10,11 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
setDocumentsList,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
import { FieldsTranslations } from "../elements";
|
||||
|
||||
import { query } from "jsonpath";
|
||||
|
||||
let BuildSection = (props) => {
|
||||
@@ -35,6 +39,7 @@ let BuildSection = (props) => {
|
||||
mandatoryFieldsData,
|
||||
} = props;
|
||||
|
||||
const documentListObj = props.appealType.documentList;
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
@@ -131,8 +136,7 @@ let BuildSection = (props) => {
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
{/* {titles[0].value}{" "} */}
|
||||
Enter your appeal information
|
||||
{titles[0].value}
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{hasErrors == true ? (
|
||||
@@ -200,7 +204,7 @@ let BuildSection = (props) => {
|
||||
className="at-nav"
|
||||
>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
Progress:
|
||||
{t("newappeal:new-appeal-progress-nav-label")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
@@ -211,7 +215,11 @@ let BuildSection = (props) => {
|
||||
{Object.keys(titleList).map((key) =>
|
||||
parseInt(key) + 1 == currentSection ? (
|
||||
<li key={key}>
|
||||
<b>{titleList[key].value} </b>
|
||||
<b>
|
||||
{FieldsTranslations(
|
||||
titleList[key].value
|
||||
)}{" "}
|
||||
</b>
|
||||
</li>
|
||||
) : (
|
||||
<li key={key}>
|
||||
@@ -229,10 +237,14 @@ let BuildSection = (props) => {
|
||||
);
|
||||
}}
|
||||
>
|
||||
{titleList[key].value}
|
||||
{FieldsTranslations(
|
||||
titleList[key].value
|
||||
)}
|
||||
</a>
|
||||
) : (
|
||||
titleList[key].value
|
||||
FieldsTranslations(
|
||||
titleList[key].value
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
@@ -242,6 +254,28 @@ let BuildSection = (props) => {
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{Object.keys(documentListObj).length > 0 && (
|
||||
<div>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
{t("newappeal:new-appeal-documentlist-nav")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
<ol className="govuk-list document-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
{Object.entries(documentListObj).map(
|
||||
([key, value]) => {
|
||||
return <li>{value}</li>;
|
||||
}
|
||||
)}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -265,6 +299,9 @@ const mapDispatchToProps = (dispatch) => {
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
setDocumentsList: (documentList) => {
|
||||
dispatch(setDocumentsList(documentList));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ let CompleteAppeal = (props) => {
|
||||
Object.assign(updateBody, {
|
||||
"pinswg_Appellant@odata.bind":
|
||||
"/contacts(" + props.props.accountDetails.loggedinUserId + ")",
|
||||
"pinswg_AssociatedLPA@odata.bind":
|
||||
"pinswg_LocalPlanningAuthority@odata.bind":
|
||||
"/accounts(" + props.appealType.appealLPA + ")",
|
||||
"pinswg_name": props.appealType.caseReference.ticketnumber,
|
||||
[updateBindAppealTypeToIncident + "@odata.bind"]:
|
||||
@@ -35,6 +35,7 @@ let CompleteAppeal = (props) => {
|
||||
});
|
||||
|
||||
updateBody = JSON.stringify(updateBody);
|
||||
console.log("werwe");
|
||||
|
||||
updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
|
||||
updateBody = updateBody.replace(/:"No"/gm, `:false`);
|
||||
|
||||
@@ -52,7 +52,7 @@ const TimeOut = (props) => {
|
||||
}}
|
||||
element={document}
|
||||
stopOnIdle={true}
|
||||
onActive={console.log(" bbis active", idleTimer)}
|
||||
//onActive={console.log(" bbis active", idleTimer)}
|
||||
onIdle={onIdle}
|
||||
timeout={1000 * inactiveTimeOut * 1}
|
||||
/>
|
||||
|
||||
@@ -2123,6 +2123,230 @@
|
||||
{
|
||||
"value": "Type of Planning Application",
|
||||
"value_cy": "Math o Gais Cynllunio"
|
||||
},
|
||||
{
|
||||
"value": "Case reference",
|
||||
"value_cy": "Cyfeirnod achos"
|
||||
},
|
||||
{
|
||||
"value": "Development description",
|
||||
"value_cy": "Disgrifiad o'r datblygiad"
|
||||
},
|
||||
{
|
||||
"value": "Do not include personal or financial information.",
|
||||
"value_cy": "Peidiwch â chynnwys gwybodaeth bersonol neu ariannol."
|
||||
},
|
||||
{
|
||||
"value": "Has the description of the development changed since the application was submitted?",
|
||||
"value_cy": "Ydy disgrifiad o'r datblygiad wedi newid ers cyflwyno'r cais?"
|
||||
},
|
||||
{
|
||||
"value": "What date was your application decided on by the LPA?",
|
||||
"value_cy": "Ar ba ddyddiad y penderfynodd yr ACLl ar eich cais?"
|
||||
},
|
||||
{
|
||||
"value": "What was the LPA Application Reference number given to your application?",
|
||||
"value_cy": "Beth oedd y Cyfeirnod Cais ACLl a roddwyd i'ch cais?"
|
||||
},
|
||||
{
|
||||
"value": "When is the application form dated?",
|
||||
"value_cy": "Pryd mae dyddiad ar y ffurflen gais?"
|
||||
},
|
||||
{
|
||||
"value": "Has your application been decided by the LPA?",
|
||||
"value_cy": "A yw'r ACLl wedi penderfynu ar eich cais?"
|
||||
},
|
||||
{
|
||||
"value": "Appeal details",
|
||||
"value_cy": "Manylion yr apêl"
|
||||
},
|
||||
{
|
||||
"value": "Site visit information",
|
||||
"value_cy": "Gwybodaeth ymweliad safle"
|
||||
},
|
||||
{
|
||||
"value": "Appeal site ownership details",
|
||||
"value_cy": "Manylion perchnogaeth safle apêl"
|
||||
},
|
||||
{
|
||||
"value": "Ownership Certificate",
|
||||
"value_cy": "Tystysgrif Perchnogaeth"
|
||||
},
|
||||
{
|
||||
"value": "We need to know who owns the appeal site. If you do not own the appeal site or if you own only part of it, we need to know the name(s) of the owner(s) or part owner(s). We also need to be sure that the other owner(s) know that you have made an appeal. Please refer to the guidance notes on completing this section.",
|
||||
"value_cy": "Mae angen i ni wybod pwy sy'n berchen ar safle'r apźl. Os nad ydych yn berchen ar safle'r apźl neu os mai dim ond rhan ohono rydych yn berchen arno, mae angen i ni wybod enw(au) y perchennog(perchnogion) neu'r rhan-berchennog/perchnogion. Mae angen i ni hefyd fod yn siŵr bod y perchennog/perchnogion eraill yn gwybod eich bod wedi gwneud apêl. Cyfeiriwch at y nodiadau canllaw ar lenwi'r adran hon."
|
||||
},
|
||||
{
|
||||
"value": "Not applicable",
|
||||
"value_cy": "Amherthnasol"
|
||||
},
|
||||
{
|
||||
"value": "Certificate A - (If you are the sole owner of the whole appeal site, certificate A applies). I certify that, on the day 21 days before the date of this appeal, nobody except the appellant, was the owner (see the guidance leaflet for a definition) of any part of the land to which the appeal relates",
|
||||
"value_cy": "Tystysgrif A - (Os mai chi yw unig berchennog safle cyfan yr apźl, mae tystysgrif A yn gymwys). Tystiaf, ar y diwrnod 21 diwrnod cyn dyddiad yr apêl hon, nad oedd neb ac eithrio’r apelydd, yn berchennog (gweler y daflen arweiniad am ddiffiniad) unrhyw ran o’r tir y mae’r apêl yn ymwneud ag ef"
|
||||
},
|
||||
{
|
||||
"value": "Certificate B - I certify that the appellant (or the agent) has given the requisite notice (see the guidance leaflet) to everyone else who, on the day 21 days before the date of this appeal, was the owner (see the guidance leaflet for a definition) of any part of the land to which the appeal relates, as listed below:",
|
||||
"value_cy": "Tystysgrif B – Tystiaf fod y mae’r apelydd (neu’r asiant) wedi rhoi’r hysbysiad gofynnol (gweler y daflen arweiniad) i bawb arall a oedd, ar y diwrnod 21 diwrnod cyn dyddiad yr apêl hon, yn berchennog (gweler y daflen arweiniad am ddiffiniad) unrhyw ran o y tir y mae'r apźl yn ymwneud ag ef, fel y'i rhestrir isod:"
|
||||
},
|
||||
{
|
||||
"value": "Certificates C & D - If you do not know who owns all or part of the appeal site, complete either Certificate C or Certificate D at Annexe 1 of our guidance and attach it to the appeal form",
|
||||
"value_cy": "Tystysgrifau C a D - Os nad ydych yn gwybod pwy sy'n berchen ar safle'r apźl i gyd neu ran ohono, cwblhewch naill ai Tystysgrif C neu Dystysgrif D yn Atodiad 1 ein canllaw a'i hatodi i'r ffurflen apelio"
|
||||
},
|
||||
{
|
||||
"value": "Agricultural holding",
|
||||
"value_cy": "Daliadaeth amaethyddol"
|
||||
},
|
||||
{
|
||||
"value": "We also need to know whether the appeal site forms part of an agricultural holding. Please select either (a), (b)(i) or (b)(ii)",
|
||||
"value_cy": "Mae angen inni wybod hefyd a yw safle'r apźl yn rhan o ddaliad amaethyddol. Dewiswch naill ai (a), (b)(i) neu (b)(ii)"
|
||||
},
|
||||
{
|
||||
"value": "(a) None of the land to which the appeal relates is, or is part of, an agricultural holding",
|
||||
"value_cy": "(a) Nid oes unrhyw ran o’r tir y mae’r apêl yn ymwneud ag ef yn ddaliad amaethyddol, neu’n rhan o ddaliad amaethyddol"
|
||||
},
|
||||
{
|
||||
"value": "(b) (i) The appeal site is, or is part of an agricultural holding, and the appellant is the sole agricultural tenant",
|
||||
"value_cy": "(b) (i) Mae safle’r apêl yn ddaliad amaethyddol, neu’n rhan o ddaliad amaethyddol, a’r apelydd yw’r unig denant amaethyddol"
|
||||
},
|
||||
{
|
||||
"value": "(b) (ii) The appeal site is, or is part of, an agricultural holding and the appellant (or the agent) has given the requisite notice to every person (other than the appellant) who, on the day 21 days before the date of the appeal, was a tenant of anagricultural holding on all or part of the land to which the appeal relates as listed below:",
|
||||
"value_cy": "(b) (ii) Mae safle’r apêl yn ddaliad amaethyddol neu’n rhan o ddaliad amaethyddol ac mae’r apelydd (neu’r asiant) wedi rhoi’r hysbysiad gofynnol i bob person (ac eithrio’r apelydd) sydd, ar y diwrnod 21 diwrnod cyn y dyddiad o’r apêl, a oedd yn denant daliad amaethyddol ar y cyfan neu ran o’r tir y mae’r apêl yn ymwneud ag ef fel a restrir isod:"
|
||||
},
|
||||
{
|
||||
"value": "Tenants name",
|
||||
"value_cy": "Enw'r tenant"
|
||||
},
|
||||
{
|
||||
"value": "Date started",
|
||||
"value_cy": "Dyddiad dechrau"
|
||||
},
|
||||
{
|
||||
"value": "Site Viewable from Road",
|
||||
"value_cy": "Safle Gweladwy o Ffordd"
|
||||
},
|
||||
{
|
||||
"value": "Does the inspector need to enter the site?",
|
||||
"value_cy": "A oes angen i'r arolygydd fynd i mewn i'r safle?"
|
||||
},
|
||||
{
|
||||
"value": "Please explain why the inspector needs to enter the site",
|
||||
"value_cy": "Eglurwch pam fod angen i'r arolygydd fynd i mewn i'r safle"
|
||||
},
|
||||
{
|
||||
"value": "Do not include personal or financial information.",
|
||||
"value_cy": "Peidiwch â chynnwys gwybodaeth bersonol neu ariannol."
|
||||
},
|
||||
{
|
||||
"value": "Are there any health and safety issues the Inspector needs to be aware of when visiting the site?",
|
||||
"value_cy": "A oes unrhyw faterion iechyd a diogelwch y mae angen i'r Arolygydd fod yn ymwybodol ohonynt wrth ymweld â'r safle?"
|
||||
},
|
||||
{
|
||||
"value": "Please set out the potential health and safety issues",
|
||||
"value_cy": "Nodwch y materion iechyd a diogelwch posibl"
|
||||
},
|
||||
{
|
||||
"value": "Do not include personal or financial information.",
|
||||
"value_cy": "Peidiwch â chynnwys gwybodaeth bersonol neu ariannol."
|
||||
},
|
||||
{
|
||||
"value": "Appeal site information",
|
||||
"value_cy": "Gwybodaeth safle apêl"
|
||||
},
|
||||
{
|
||||
"value": "What is overall the size of the appeal site, as shown on the red line boundary plan? (in hectares)",
|
||||
"value_cy": "Beth yw maint safle'r apęl yn gyffredinol, fel y dangosir ar gynllun ffin y llinell goch? (mewn hectarau)"
|
||||
},
|
||||
{
|
||||
"value": "What is the area of floor space proposed? (in square metres). If no new floor space is proposed, please enter 0.",
|
||||
"value_cy": "Beth yw arwynebedd y llawr a gynigir? (mewn metrau sgwâr). Os na chynigir arwynebedd llawr newydd, nodwch 0."
|
||||
},
|
||||
{
|
||||
"value": "Is flooding an issue?",
|
||||
"value_cy": "Ydy llifogydd yn broblem?"
|
||||
},
|
||||
{
|
||||
"value": "Do the works affect the setting of a Listed Building?",
|
||||
"value_cy": "A yw'r gwaith yn effeithio ar leoliad Adeilad Rhestredig?"
|
||||
},
|
||||
{
|
||||
"value": "Is the appeal site within an Area of Outstanding Natural Beauty?",
|
||||
"value_cy": "A yw safle'r apźl o fewn Ardal o Harddwch Naturiol Eithriadol?"
|
||||
},
|
||||
{
|
||||
"value": "Is the appeal site in a Conservation Area?",
|
||||
"value_cy": "A yw safle'r apźl mewn Ardal Gadwraeth?"
|
||||
},
|
||||
{
|
||||
"value": "Is the appeal site in or adjacent to, or likely to affect a Site of Special Scientific Interest (SSSI), a Special Conservation Area (SAC) or an Internationally Designated Site?",
|
||||
"value_cy": "A yw safle'r apźl o fewn neu'n gyfagos i Safle o Ddiddordeb Gwyddonol Arbennig (SoDdGA), Ardal Cadwraeth Arbennig (ACA) neu Safle a Ddynodir yn Rhyngwladol, neu'n debygol o effeithio arno?"
|
||||
},
|
||||
{
|
||||
"value": "Are any protected species likely to be affected by the proposals?",
|
||||
"value_cy": "A yw unrhyw rywogaethau a warchodir yn debygol o gael eu heffeithio gan y cynigion?"
|
||||
},
|
||||
{
|
||||
"value": "Appeal procedure",
|
||||
"value_cy": "Trefn apelio"
|
||||
},
|
||||
{
|
||||
"value": "Upload documents",
|
||||
"value_cy": "Uwchlwytho dogfennau"
|
||||
},
|
||||
{
|
||||
"value": "Are you appealing because of",
|
||||
"value_cy": "Ydych chi'n apelio oherwydd"
|
||||
},
|
||||
{
|
||||
"value": "Has there been any other appeals made on this, or on nearby land, against a refusal of planning permission?",
|
||||
"value_cy": "A oes unrhyw apeliadau eraill wedi eu gwneud ar hyn, neu ar dir cyfagos, yn erbyn gwrthod caniatâd cynllunio?"
|
||||
},
|
||||
{
|
||||
"value": "Please provide details of the appeals including our reference number, if known",
|
||||
"value_cy": "Rhowch fanylion yr apeliadau gan gynnwys ein rhif cyfeirnod, os yw'n hysbys"
|
||||
},
|
||||
{
|
||||
"value": "Do not include personal or financial information.",
|
||||
"value_cy": "Peidiwch â chynnwys gwybodaeth bersonol neu ariannol."
|
||||
},
|
||||
{
|
||||
"value": "Submission of case",
|
||||
"value_cy": "Cyflwyno achos"
|
||||
},
|
||||
{
|
||||
"value": "Introduction",
|
||||
"value_cy": "Rhagymadrodd"
|
||||
},
|
||||
{
|
||||
"value": "What procedure would you like the appeal to follow? More informatiion on this can be found in the guidance notes.",
|
||||
"value_cy": "Pa weithdrefn yr hoffech i'r apêl ei dilyn? Ceir rhagor o wybodaeth am hyn yn y nodiadau canllaw."
|
||||
},
|
||||
{
|
||||
"value": "Please explain why you have chosen this procedure",
|
||||
"value_cy": "Eglurwch pam eich bod wedi dewis y driniaeth hon"
|
||||
},
|
||||
{
|
||||
"value": "Do not include personal or financial information.",
|
||||
"value_cy": "Peidiwch â chynnwys gwybodaeth bersonol neu ariannol."
|
||||
},
|
||||
{
|
||||
"value": "Do you intend to submit a costs application with this appeal? (see guidance for further information)",
|
||||
"value_cy": "A ydych yn bwriadu cyflwyno cais costau gyda'r apêl hon? (gweler y canllawiau am ragor o wybodaeth)"
|
||||
},
|
||||
{
|
||||
"value": "Would you prefer a virtual or in person event?",
|
||||
"value_cy": "A fyddai'n well gennych ddigwyddiad rhithwir neu ddigwyddiad personol?"
|
||||
},
|
||||
{
|
||||
"value": "Virtual",
|
||||
"value_cy": "Rhith"
|
||||
},
|
||||
{
|
||||
"value": "In person",
|
||||
"value_cy": "Yn bersonol"
|
||||
},
|
||||
{
|
||||
"value": "Please explain why you have chosen this procedure",
|
||||
"value_cy": "Eglurwch pam eich bod wedi dewis y driniaeth hon"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+348
-951
File diff suppressed because it is too large
Load Diff
@@ -8,5 +8,34 @@
|
||||
"select-appeal-type-label-error-msg": "Mae angen math o achos",
|
||||
"select-default": "Dewiswch...",
|
||||
"change-link-label": "Newid",
|
||||
"submit-appeal-button": "Cyflwyno apêl"
|
||||
"submit-appeal-button": "Cyflwyno apêl",
|
||||
"about-you-page-title": "Amdanat ti",
|
||||
"about-you-on-behalf-label": "Cyflwynwyd apêl ar ran:",
|
||||
"about-you-who-are-you-label": "Ai chi yw'r apelydd neu asiant sy'n gweithredu ar ran yr apelydd?",
|
||||
"about-you-appellant-contact-details": "Manylion cyswllt yr Apelydd",
|
||||
"about-you-appellant-contact-details-firstname-label": "Enw cyntaf",
|
||||
"about-you-appellant-contact-details-lastname-label": "Enw olaf",
|
||||
"about-you-appellant-contact-details-email-label": "Cyfeiriad ebost",
|
||||
"about-you-appellant-contact-details-phone-label": "Rhif ffôn",
|
||||
"about-you-agent-contact-details": "Manylion cyswllt yr Asiant",
|
||||
"about-you-agent-contact-details-companyname-label": "Enw cwmni",
|
||||
"about-you-agent-contact-details-firstname-label": "Enw cyntaf",
|
||||
"about-you-agent-contact-details-lastname-label": "Enw olaf",
|
||||
"about-you-agent-contact-details-email-label": "Cyfeiriad ebost",
|
||||
"about-you-agent-contact-details-phone-label": "Rhif ffôn",
|
||||
"about-you-agent-contact-preferences-label": "Nodwch a fyddai'n well gennych i ni gysylltu â chi drwy e-bost neu'r post",
|
||||
"new-appeal-progress-nav-label": "Cynnydd",
|
||||
"new-appeal-documentlist-nav": "Angen dogfen",
|
||||
"new-appeal-introduction-paragraph": "Intro text to explain process. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare lobortis sollicitudin. Pellentesque ac libero auctor, efficitur urna faucibus, fringilla nisi. Fusce viverra pharetra tristique. In diam est, interdum sagittis tempus non, ultricies at ante. Nullam porta dolor sit amet.",
|
||||
"new-appeal-ownership-hint": "Mae angen i ni wybod pwy sy'n berchen ar safle'r apźl. Os nad ydych yn berchen ar safle'r apźl neu os mai dim ond rhan ohono rydych yn berchen arno, mae angen i ni wybod enw(au) y perchennog(perchnogion) neu'r rhan-berchennog/perchnogion. Mae angen i ni hefyd fod yn siŵr bod y perchennog/perchnogion eraill yn gwybod eich bod wedi gwneud apêl. Cyfeiriwch at y nodiadau canllaw ar lenwi'r adran hon.",
|
||||
"new-appeal-ownership-option-NA": "Amherthnasol",
|
||||
"new-appeal-ownership-option-A": "Tystysgrif A - (Os mai chi yw unig berchennog safle cyfan yr apźl, mae tystysgrif A yn gymwys). Tystiaf, ar y diwrnod 21 diwrnod cyn dyddiad yr apêl hon, nad oedd neb ac eithrio’r apelydd, yn berchennog (gweler y daflen arweiniad am ddiffiniad) unrhyw ran o’r tir y mae’r apêl yn ymwneud ag ef",
|
||||
"new-appeal-ownership-option-B": "Tystysgrif B – Tystiaf fod y mae’r apelydd (neu’r asiant) wedi rhoi’r hysbysiad gofynnol (gweler y daflen arweiniad) i bawb arall a oedd, ar y diwrnod 21 diwrnod cyn dyddiad yr apêl hon, yn berchennog (gweler y daflen arweiniad am ddiffiniad) unrhyw ran o y tir y mae'r apźl yn ymwneud ag ef, fel y'i rhestrir isod:",
|
||||
"new-appeal-ownership-option-CD": "Tystysgrifau C a D - Os nad ydych yn gwybod pwy sy'n berchen ar safle'r apźl i gyd neu ran ohono, cwblhewch naill ai Tystysgrif C neu Dystysgrif D yn Atodiad 1 ein canllaw a'i hatodi i'r ffurflen apelio",
|
||||
"new-appeal-agricultural-hint": "Mae angen inni wybod hefyd a yw safle'r apźl yn rhan o ddaliad amaethyddol. Dewiswch naill ai (a), (b)(i) neu (b)(ii)",
|
||||
"new-appeal-agricultural-holding-option-yes": "(a) Nid oes unrhyw ran o’r tir y mae’r apêl yn ymwneud ag ef yn ddaliad amaethyddol, neu’n rhan o ddaliad amaethyddol",
|
||||
"new-appeal-agricultural-holding-option-no": "(b) (i) Mae safle’r apêl yn ddaliad amaethyddol, neu’n rhan o ddaliad amaethyddol, a’r apelydd yw’r unig denant amaethyddol",
|
||||
"new-appeal-agricultural-holding-option-NA": "(b) (ii) Mae safle’r apêl yn ddaliad amaethyddol neu’n rhan o ddaliad amaethyddol ac mae’r apelydd (neu’r asiant) wedi rhoi’r hysbysiad gofynnol i bob person (ac eithrio’r apelydd) sydd, ar y diwrnod 21 diwrnod cyn y dyddiad o’r apêl, a oedd yn denant daliad amaethyddol ar y cyfan neu ran o’r tir y mae’r apêl yn ymwneud ag ef fel a restrir isod:",
|
||||
"new-appeal-procedure-option-virtual": "Rhith",
|
||||
"new-appeal-procedure-option-inperson": "Yn bersonol"
|
||||
}
|
||||
@@ -8,5 +8,34 @@
|
||||
"select-appeal-type-label-error-msg": "Appeal type is required",
|
||||
"select-default": "Select...",
|
||||
"change-link-label": "Change",
|
||||
"submit-appeal-button": "Submit appeal"
|
||||
"submit-appeal-button": "Submit appeal",
|
||||
"about-you-page-title": "About you",
|
||||
"about-you-on-behalf-label": "Appeal submitted on behalf of:",
|
||||
"about-you-who-are-you-label": "Are you the appellant or an agent acting on behalf of the appeallant?",
|
||||
"about-you-appellant-contact-details": "Contact details for Appellant",
|
||||
"about-you-appellant-contact-details-firstname-label": "First name",
|
||||
"about-you-appellant-contact-details-lastname-label": "Last name",
|
||||
"about-you-appellant-contact-details-email-label": "Email address",
|
||||
"about-you-appellant-contact-details-phone-label": "Telphone number",
|
||||
"about-you-agent-contact-details": "Contact details for Agent",
|
||||
"about-you-agent-contact-details-companyname-label": "Company name",
|
||||
"about-you-agent-contact-details-firstname-label": "First name",
|
||||
"about-you-agent-contact-details-lastname-label": "Last name",
|
||||
"about-you-agent-contact-details-email-label": "Email address",
|
||||
"about-you-agent-contact-details-phone-label": "Telephone number",
|
||||
"about-you-agent-contact-preferences-label": "Please indicate if you would prefer to be contacted by email or post",
|
||||
"new-appeal-progress-nav-label": "Progress",
|
||||
"new-appeal-documentlist-nav": "Documents needed",
|
||||
"new-appeal-introduction-paragraph": "Intro text to explain process. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare lobortis sollicitudin. Pellentesque ac libero auctor, efficitur urna faucibus, fringilla nisi. Fusce viverra pharetra tristique. In diam est, interdum sagittis tempus non, ultricies at ante. Nullam porta dolor sit amet.",
|
||||
"new-appeal-ownership-hint": "We need to know who owns the appeal site. If you do not own the appeal site or if you own only part of it, we need to know the name(s) of the owner(s) or part owner(s). We also need to be sure that the other owner(s) know that you have made an appeal. Please refer to the guidance notes on completing this section.",
|
||||
"new-appeal-ownership-option-NA": "Not applicable",
|
||||
"new-appeal-ownership-option-A": "Certificate A - (If you are the sole owner of the whole appeal site, certificate A applies). I certify that, on the day 21 days before the date of this appeal, nobody except the appellant, was the owner (see the guidance leaflet for a definition) of any part of the land to which the appeal relates",
|
||||
"new-appeal-ownership-option-B": "Certificate B - I certify that the appellant (or the agent) has given the requisite notice (see the guidance leaflet) to everyone else who, on the day 21 days before the date of this appeal, was the owner (see the guidance leaflet for a definition) of any part of the land to which the appeal relates, as listed below:",
|
||||
"new-appeal-ownership-option-CD": "Certificates C & D - If you do not know who owns all or part of the appeal site, complete either Certificate C or Certificate D at Annexe 1 of our guidance and attach it to the appeal form",
|
||||
"new-appeal-agricultural-hint": "We also need to know whether the appeal site forms part of an agricultural holding. Please select either (a), (b)(i) or (b)(ii)",
|
||||
"new-appeal-agricultural-holding-option-yes": "(a) None of the land to which the appeal relates is, or is part of, an agricultural holding",
|
||||
"new-appeal-agricultural-holding-option-no": "(b) (i) The appeal site is, or is part of an agricultural holding, and the appellant is the sole agricultural tenant",
|
||||
"new-appeal-agricultural-holding-option-NA": "(b) (ii) The appeal site is, or is part of, an agricultural holding and the appellant (or the agent) has given the requisite notice to every person (other than the appellant) who, on the day 21 days before the date of the appeal, was a tenant of anagricultural holding on all or part of the land to which the appeal relates as listed below:",
|
||||
"new-appeal-procedure-option-virtual": "Virtual",
|
||||
"new-appeal-procedure-option-inperson": "In person"
|
||||
}
|
||||
@@ -34,8 +34,9 @@ export default async function ApiProxy(req, res) {
|
||||
var token = await getToken();
|
||||
|
||||
var queryUrl =
|
||||
"stringmaps?$filter=objecttypecode eq 'incident' and attributename eq 'pinswg_appealcasetype' and value ne 'LDP' and value ne 'Misc Casework'&$count=true&$select=value,stringmapid,organizationid,attributevalue&$orderby=value asc";
|
||||
"stringmaps?$filter=objecttypecode eq 'incident' and attributename eq 'pinswg_appealcasetype' and value ne 'Developments of National Significance' and value ne 'LDP' and value ne 'Misc Casework'&$count=true&$select=value,stringmapid,organizationid,attributevalue&$orderby=value asc";
|
||||
|
||||
console.log(queryUrl);
|
||||
return axios
|
||||
.get(
|
||||
WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
|
||||
|
||||
@@ -29,6 +29,7 @@ export default async function ApiProxy(req, res) {
|
||||
whichForm +
|
||||
"')/Attributes?$count=true&$select=LogicalName,RequiredLevel";
|
||||
|
||||
console.log(WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
|
||||
return axios
|
||||
.get(
|
||||
WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
|
||||
|
||||
@@ -50,8 +50,8 @@ export default async function ApiProxy(req, res) {
|
||||
.then(({ data }) => {
|
||||
res.status(200).json(data);
|
||||
})
|
||||
.catch(({ err }) => {
|
||||
console.log(err);
|
||||
res.status(400).json(err);
|
||||
.catch((error) => {
|
||||
console.log("is it", error);
|
||||
res.status(400);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { connect } from "react-redux";
|
||||
import Breadcrumbs from "../../components/breadcrumbs";
|
||||
import CookieBanner from "../../components/cookieBanner";
|
||||
import Footer from "../../components/footer";
|
||||
import Header from "../../components/header";
|
||||
import Aboutyou from "../../components/newappeal/aboutyou";
|
||||
import CreateCase from "../../components/newappeal/createCase";
|
||||
import { wrapper } from "../../store/store";
|
||||
|
||||
const AboutYou = (props) => {
|
||||
const { footerLinks, pages, formData } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
const { appealType, LPAData } = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>
|
||||
{t("newappeal:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
<>
|
||||
<link
|
||||
rel="canonical"
|
||||
href={t("common:gov-wales-link") + router.asPath}
|
||||
/>
|
||||
<meta
|
||||
key="og:locale"
|
||||
property="og:locale"
|
||||
content={router.locale}
|
||||
/>
|
||||
{/* If they have a Twitter Handle, include the meta details below */}
|
||||
<meta
|
||||
key="og:site_name"
|
||||
property="og:site_name"
|
||||
content={t("common:service-name")}
|
||||
/>
|
||||
<meta
|
||||
key="twitter:site"
|
||||
property="twitter:site"
|
||||
content="@UKGovWales"
|
||||
/>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content={t("common:service-description")}
|
||||
/>
|
||||
<meta
|
||||
property="og:site_name"
|
||||
content={t("common:gov-wales-label")}
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content={t("newappeal:page-title")}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={t("common:service-description")}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
property="og:url"
|
||||
content={t("common:gov-wales-link")}
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
|
||||
/>
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={t("common:gov-wales-label")}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:url"
|
||||
content={t("common:gov-wales-link") + router.asPath}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
|
||||
/>
|
||||
</>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
|
||||
<div className="govuk-width-container">
|
||||
<Breadcrumbs slug={appealtypes} />
|
||||
<main
|
||||
className="govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<h1>{t("newappeal:about-you-page-title")}</h1>
|
||||
<Aboutyou />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps = wrapper.getServerSideProps(
|
||||
(store) => async (ctx) => {
|
||||
const { req, res } = ctx;
|
||||
const { cookies } = req;
|
||||
|
||||
console.log(cookies);
|
||||
|
||||
let loggedInUser = cookies.pinsUser;
|
||||
}
|
||||
);
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
LPAData: state.LPAData,
|
||||
form: state.form,
|
||||
accountDetails: state.accountDetails,
|
||||
govGateway: state.govGateway,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(AboutYou);
|
||||
@@ -8,6 +8,7 @@ export const appealTypeDataActionTypes = {
|
||||
SETAPPEALLPA: "SETAPPEALLPA",
|
||||
SETCASEREFERENCE: "SETCASEREFERENCE",
|
||||
SETFORMCOMPLETE: "SETFORMCOMPLETE",
|
||||
SETDOCUMENTLIST: "SETDOCUMENTLIST",
|
||||
};
|
||||
|
||||
export const getAppealTypeObj = () => (dispatch) => {
|
||||
@@ -62,3 +63,11 @@ export const setFormComplete = (formComplete) => (dispatch) => {
|
||||
formComplete: formComplete,
|
||||
});
|
||||
};
|
||||
|
||||
export const setDocumentsList = (documentList) => (dispatch) => {
|
||||
console.log("here", documentList);
|
||||
return dispatch({
|
||||
type: appealTypeDataActionTypes.SETDOCUMENTLIST,
|
||||
documentList: documentList,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ const appealTypeDataInitialState = {
|
||||
appealLPA: "",
|
||||
caseReference: {},
|
||||
formComplete: "false",
|
||||
documentList: {},
|
||||
};
|
||||
|
||||
export default function reducer(state = appealTypeDataInitialState, action) {
|
||||
@@ -47,6 +48,11 @@ export default function reducer(state = appealTypeDataInitialState, action) {
|
||||
...state,
|
||||
formComplete: action.formComplete,
|
||||
};
|
||||
case appealTypeDataActionTypes.SETDOCUMENTLIST:
|
||||
return {
|
||||
...state,
|
||||
documentList: action.documentList,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@@ -10,10 +10,12 @@ export default function reducer(state = formDataInitialState, action) {
|
||||
switch (action.type) {
|
||||
case formDataActionTypes.SETFORMDATA:
|
||||
return {
|
||||
...state,
|
||||
formData: action.formData,
|
||||
mandatoryFieldsData: action.mandatoryFieldsData,
|
||||
pickListData: action.pickListData,
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user