initial commit for welsh government planning appeals application
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
import _ from "lodash";
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import {
|
||||
Field,
|
||||
reduxForm,
|
||||
formValueSelector,
|
||||
getFormSubmitErrors,
|
||||
} from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
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={name}
|
||||
id={id}
|
||||
type={type}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ChangePassword = (props) => {
|
||||
const { footerLinks, pages, handleSubmit, value } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
let errorsobj = {};
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
const matchInput = (input, allInputs) => {
|
||||
return input === allInputs.password
|
||||
? undefined
|
||||
: "Passwords do not match";
|
||||
};
|
||||
|
||||
const email = (value) =>
|
||||
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.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 [hasErrors, setHasErrors] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {hasErrors == true ? (
|
||||
<ShowErrorHeader
|
||||
hasErrors={hasErrors}
|
||||
props={props.props.form}
|
||||
formXML={formXML}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)} */}
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<Field
|
||||
name="newpassword"
|
||||
id="newpassword"
|
||||
component={RenderTextfield}
|
||||
type="password"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="New password"
|
||||
/>
|
||||
<Field
|
||||
name="confirmpassword"
|
||||
id="confirmpassword"
|
||||
component={RenderTextfield}
|
||||
type="password"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[matchInput]}
|
||||
label="Confirm new password"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div className="govuk-button-group">
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("changepasswordForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "changepasswordForm",
|
||||
destroyOnUnmount: false,
|
||||
})(ChangePassword)
|
||||
);
|
||||
@@ -0,0 +1,314 @@
|
||||
import _ from "lodash";
|
||||
import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import {
|
||||
Field,
|
||||
reduxForm,
|
||||
formValueSelector,
|
||||
getFormSubmitErrors,
|
||||
} from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
import BuildCheckPersonalDetails from "./personaldetailsCheck";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PersonalDetails = (props) => {
|
||||
const { footerLinks, pages, handleSubmit, value } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
let errorsobj = {};
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
const email = (value) =>
|
||||
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.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 [hasErrors, setHasErrors] = useState("");
|
||||
|
||||
const [personalDetailsComplete, setPersonalDetailsComplete] =
|
||||
useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {hasErrors == true ? (
|
||||
<ShowErrorHeader
|
||||
hasErrors={hasErrors}
|
||||
props={props.props.form}
|
||||
formXML={formXML}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)} */}
|
||||
|
||||
{personalDetailsComplete == false ? (
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<h2 className="govuk-fieldset__heading">
|
||||
About you
|
||||
</h2>
|
||||
</legend>
|
||||
<Field
|
||||
name="firstname"
|
||||
id="firstname"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="First name"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="lastname"
|
||||
id="lastname"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="Last name"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="email"
|
||||
id="email"
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label="Email address"
|
||||
/>
|
||||
<Field
|
||||
name="telephone"
|
||||
id="telephone"
|
||||
component={RenderTextfield}
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label="Telephone"
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="companygroup"
|
||||
id="companygroup"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Company/Group"
|
||||
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?
|
||||
</h2>
|
||||
</legend>
|
||||
|
||||
<Field
|
||||
name="addressline1"
|
||||
id="addressline1"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 1"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="addressline2"
|
||||
id="addressline2"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 2"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="towncity"
|
||||
id="towncity"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="Town/City"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="county"
|
||||
id="county"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="County"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="postcode"
|
||||
id="postcode"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-5"
|
||||
label="Postcode"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="govuk-button-group">
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(true);
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<>
|
||||
<BuildCheckPersonalDetails
|
||||
props={props}
|
||||
setPersonalDetailsComplete={setPersonalDetailsComplete}
|
||||
/>
|
||||
<div className="govuk-button-group">
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
|
||||
<Link href="">
|
||||
<a
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
className="govuk-link"
|
||||
>
|
||||
Go back
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
accountDetails: state.accountDetails,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps, (state) => ({
|
||||
initialValues: state.accountDetails.accountDetails.data,
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
accountDetails: state.accountDetails,
|
||||
form: state.form,
|
||||
// pull initial values from account reducer
|
||||
}))(
|
||||
reduxForm({
|
||||
form: "personalDetailsForm",
|
||||
enableReinitialize: true, // this is needed!!
|
||||
destroyOnUnmount: false,
|
||||
})(PersonalDetails)
|
||||
);
|
||||
@@ -0,0 +1,311 @@
|
||||
import _ from "lodash";
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import {
|
||||
Field,
|
||||
reduxForm,
|
||||
formValueSelector,
|
||||
getFormSubmitErrors,
|
||||
} from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
|
||||
const BuildCheckPersonalDetails = (props) => {
|
||||
const {
|
||||
footerLinks,
|
||||
pages,
|
||||
handleSubmit,
|
||||
value,
|
||||
setPersonalDetailsComplete,
|
||||
} = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="govuk-heading-m">About you</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>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
first name
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Last name</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
last name
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Email address</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
email address
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Telephone</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
telephone
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Company/Group</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
company/group
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<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>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
address line 1
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Address line 2</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
address line 2
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Town/City</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
town/city
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">County</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
county
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">Postcode</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{/* {console.log(
|
||||
props.props.form["personalDetailsForm"].values[
|
||||
"firstname"
|
||||
]
|
||||
)} */}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setPersonalDetailsComplete(false);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
postcode
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
accountDetails: state.accountDetails,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(BuildCheckPersonalDetails);
|
||||
@@ -0,0 +1,264 @@
|
||||
import _ from "lodash";
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import {
|
||||
Field,
|
||||
reduxForm,
|
||||
formValueSelector,
|
||||
getFormSubmitErrors,
|
||||
} from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
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={name}
|
||||
id={id}
|
||||
type={type}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RegisterForm = (props) => {
|
||||
const { footerLinks, pages, handleSubmit, value } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
let errorsobj = {};
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
const email = (value) =>
|
||||
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.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 [hasErrors, setHasErrors] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {hasErrors == true ? (
|
||||
<ShowErrorHeader
|
||||
hasErrors={hasErrors}
|
||||
props={props.props.form}
|
||||
formXML={formXML}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)} */}
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<h2 className="govuk-fieldset__heading">About you</h2>
|
||||
</legend>
|
||||
<Field
|
||||
name="firstname"
|
||||
id="firstname"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="First name"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="lastname"
|
||||
id="lastname"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label="Last name"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="email"
|
||||
id="email"
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label="Email address"
|
||||
/>
|
||||
<Field
|
||||
name="telephone"
|
||||
id="telephone"
|
||||
component={RenderTextfield}
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label="Telephone"
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="companygroup"
|
||||
id="companygroup"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Company/Group"
|
||||
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?
|
||||
</h2>
|
||||
</legend>
|
||||
|
||||
<Field
|
||||
name="addressline1"
|
||||
id="addressline1"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 1"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="addressline2"
|
||||
id="addressline2"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
label="Address line 2"
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="towncity"
|
||||
id="towncity"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="Town/City"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="county"
|
||||
id="county"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
label="County"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<Field
|
||||
name="postcode"
|
||||
id="postcode"
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-5"
|
||||
label="Postcode"
|
||||
validate={[required]}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div className="govuk-button-group">
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("accountRegisterForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "accountRegisterForm",
|
||||
destroyOnUnmount: false,
|
||||
})(RegisterForm)
|
||||
);
|
||||
@@ -0,0 +1,12 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Banner() {
|
||||
return (
|
||||
<div className="govuk-phase-banner">
|
||||
<p className="govuk-phase-banner__content">
|
||||
<span className="govuk-tag govuk-phase-banner__content__tag">beta</span>
|
||||
<span className="govuk-phase-banner__text">This is a new service</span>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
import Link from "next/link";
|
||||
import jsonpath from "jsonpath";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
const Breadcrumbs = (props) => {
|
||||
const {
|
||||
courseContent,
|
||||
slug,
|
||||
formTitle,
|
||||
activitysub,
|
||||
activity,
|
||||
applicant_id,
|
||||
course_id,
|
||||
applicant_ref,
|
||||
} = props;
|
||||
const router = useRouter();
|
||||
const { appealType, section } = router.query;
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
function Breadcrumb() {
|
||||
if (slug) {
|
||||
var coursePageURL = appealType + "/" + slug;
|
||||
if (_.isEmpty(courseContent)) {
|
||||
return null;
|
||||
} else {
|
||||
var sectionObj = jsonpath.query(
|
||||
courseContent,
|
||||
'$..sections[?(@.path=="/' + coursePageURL + '")]'
|
||||
);
|
||||
var breadcrumb = sectionObj[0].chapter.title; //sectionObj[0].chapter
|
||||
return (
|
||||
<li
|
||||
className="govuk-breadcrumbs__list-item"
|
||||
aria-current="page"
|
||||
>
|
||||
{breadcrumb}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label={"Breadcrumb for " + _.startCase(_.toLower(appealType))}
|
||||
role="navigation"
|
||||
data-module="track-click"
|
||||
>
|
||||
<div className="govuk-breadcrumbs ">
|
||||
<ol className="govuk-breadcrumbs__list">
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="http://www.gov.wales">
|
||||
<a className="govuk-breadcrumbs__link">GOV.WALES</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("common:service-name")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{router.pathname == "/myportal" ? (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("myportal:page-title")}
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/searchresults" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Search results
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/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 == "/newappeal/selectappeal" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:parent-page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Select Appeal
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/viewall" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Your cases
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/case" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/viewall">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
Your cases{" "}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Case Reference: CAS-00010-J9W6L5
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/account/personaldetails" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Your account
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/account/changepassword" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Update your password
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{!_.isEmpty(slug) ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/newappeal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
New Appeal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{props.formTitle}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Breadcrumb />
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
export default Breadcrumbs;
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import Summary from "./case/summary";
|
||||
import Documents from "./case/documents";
|
||||
|
||||
export default function CaseSummary({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<Summary />
|
||||
<Documents />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function CaseSummary() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h2>Documents</h2>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
{t("case:documents-name-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("case:documents-doc-type-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("case:documents-date-published-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("case:documents-size-label")}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
{t("case:documents-name-label")}:
|
||||
</span>
|
||||
3272770 Appeal Decision.pdf
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
{t("case:documents-doc-type-label")}:
|
||||
</span>
|
||||
Outcome / Decision
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
{t("case:documents-date-published-label")}:
|
||||
</span>
|
||||
15/06/2021
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
{t("case:documents-size-label")}:
|
||||
</span>
|
||||
92
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function CaseSummary() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
Reference: CAS-00010-J9W6L5
|
||||
</h1>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-applicant-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-agent-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Mr Cos Polito
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-site-address-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
72 Guild Street
|
||||
<br />
|
||||
London
|
||||
<br />
|
||||
SE23 6FH
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button">
|
||||
{t("case:summary-make-representation-label")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button govuk-button--secondary">
|
||||
{t("case:summary-back-button-label")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="flex-container grid-row govuk-body case">
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h2 className="govuk-heading-m govuk-!-margin-bottom-7">
|
||||
{t("case:summary-case-details-label")}
|
||||
</h2>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-case-type-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Planning Appeal (W){" "}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-lpa-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Hastings Borough Council
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-case-summary-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Erection of a two-storey chalet
|
||||
style detached dwelling
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-case-officer-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{" "}
|
||||
Neale Oliver
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-procedure-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Written representations
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-status-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
In Progress
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-decision-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Allowed
|
||||
<Link href="/">
|
||||
<a>
|
||||
3272770 Appeal Decision.pdf
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-case-link-status-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Not Linked
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-linked-cases-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
0
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h3 className="govuk-heading-m govuk-!-margin-bottom-7">
|
||||
{t("case:summary-dates-label")}
|
||||
</h3>
|
||||
<dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-start-date-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
26-May-21
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-questionnaire-due-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
02-Jun-21
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-statement-due-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
30-Jun-21
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-interested-party-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
30-Jun-21
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-applicant-final-comments-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
14-Jul-21
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-inquiry-evidence-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
N/A
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:summary-event-date-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Date arranged
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:summary-decision-date-label"
|
||||
)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
Not yet decided
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button">
|
||||
{t("case:summary-documents-button-label")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import SearchForCase from "./search/searchforcase";
|
||||
import SearchResults from "./search/searchresults";
|
||||
|
||||
export default function Search({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<SearchResults />
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button">
|
||||
{t("search:searchresults-search-button-label")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button govuk-button--secondary">
|
||||
{t(
|
||||
"search:searchresults-new-search-button-label"
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import BuildCheckSection from "./newappeal/buildchecksection";
|
||||
|
||||
const CheckAnswers = (props) => {
|
||||
const { formXML, formTitle, rowXML, whichSection, sectionCount, onSubmit } =
|
||||
props;
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
sss
|
||||
<BuildCheckSection
|
||||
formXML={formXML}
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckAnswers;
|
||||
@@ -0,0 +1,58 @@
|
||||
import CookieConsent from "react-cookie-consent";
|
||||
import Link from "next/link";
|
||||
|
||||
const CookieBanner = () => {
|
||||
return (
|
||||
<CookieConsent
|
||||
style={{
|
||||
position: "inherit",
|
||||
background: "#f3f2f1",
|
||||
display: "block",
|
||||
}}
|
||||
containerClasses="app-cookie-banner"
|
||||
buttonClasses="govuk-button"
|
||||
buttonWrapperClasses="govuk-width-container consentBanner"
|
||||
declineButtonClasses="govuk-button"
|
||||
buttonText="Accept all cookies"
|
||||
disableStyles={true}
|
||||
enableDeclineButton={true}
|
||||
flipButtons={true}
|
||||
hideOnAccept={true}
|
||||
cookieName="planning_casework"
|
||||
>
|
||||
<div className="app-cookie-banner">
|
||||
<div
|
||||
id="global-cookie-message"
|
||||
className="govuk-clearfix"
|
||||
data-module="cookie-banner"
|
||||
role="region"
|
||||
aria-label="cookie banner"
|
||||
data-nosnippet=""
|
||||
>
|
||||
<div className="govuk-width-container">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="">
|
||||
<h2 className="govuk-heading-m">
|
||||
Tell us whether you accept cookies
|
||||
</h2>
|
||||
<p className="govuk-body">
|
||||
GOV.UK uses cookies which are essential
|
||||
for the site to work. We also use
|
||||
non-essential cookies to help us improve
|
||||
government digital services. Any data
|
||||
collected is anonymised. By continuing
|
||||
to use this site, you agree to our use
|
||||
of cookies.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CookieConsent>
|
||||
);
|
||||
};
|
||||
|
||||
export default CookieBanner;
|
||||
@@ -0,0 +1,496 @@
|
||||
import useSWR from "swr";
|
||||
import { Field, reduxForm } from "redux-form";
|
||||
import router from "next/router";
|
||||
import DatePicker from "react-datepicker";
|
||||
import React, { useState } from "react";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import moment from "moment";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
errorMsg,
|
||||
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>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<input {...input} className={className} name={name} id={id} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function Textfield(props) {
|
||||
const { name, label, validate } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderMultiline = ({
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<textarea {...input} rows={rows} className={className}></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function MultiLinefield(props) {
|
||||
const { name, label } = props;
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor="more-detail">
|
||||
{props.label}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id="more-detail-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>
|
||||
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby="more-detail-hint"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderDatePicker = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
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"
|
||||
role="group"
|
||||
aria-describedby="dob-hint"
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label
|
||||
className="govuk-fieldset__heading"
|
||||
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>
|
||||
)}
|
||||
<DatePicker
|
||||
{...custom}
|
||||
autoOk={true}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={value || null}
|
||||
|
||||
// value={!value ? null : new Date(value)}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function DateFieldPicker(props) {
|
||||
const { name, label } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
//validate={[required]}
|
||||
errorMsg="Select a date"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DateField(props) {
|
||||
const { name, label } = props;
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="dob-hint"
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label className="govuk-fieldset__heading">
|
||||
{props.label}
|
||||
</label>
|
||||
</legend>
|
||||
<div className="govuk-date-input" id="dob">
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
|
||||
htmlFor={props.name + "-day"}
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<Field
|
||||
name={props.name + "-day"}
|
||||
id={props.name + "-day"}
|
||||
component="input"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
|
||||
htmlFor={props.name + "-month"}
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<Field
|
||||
name={props.name + "-month"}
|
||||
id={props.name + "-month"}
|
||||
component="input"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
|
||||
htmlFor={props.name + "-year"}
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<Field
|
||||
name={props.name + "-year"}
|
||||
id={props.name + "-year"}
|
||||
component="input"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function YesNofield(props) {
|
||||
const { name, label } = props;
|
||||
const yesNo = ["Yes", "No"];
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
datafieldname={props.name}
|
||||
label={props.label}
|
||||
options={yesNo}
|
||||
id={props.name}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select and option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderPickList = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
meta: { touched, errorStr },
|
||||
}) => {
|
||||
const fetcher = (url) => fetch(url).then((res) => res.json());
|
||||
|
||||
const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
|
||||
if (error)
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label govuk-body-m" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<select className="govuk-select" id={name} name={name}>
|
||||
<option value="">empty</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
if (!data)
|
||||
return (
|
||||
<div>
|
||||
<div className="govuk-form-group">{label} loading...</div>
|
||||
</div>
|
||||
);
|
||||
//console.log(JSON.stringify(data.GlobalOptionSet.Options));
|
||||
|
||||
const dropdownObj = data.GlobalOptionSet.Options;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<select {...input} className="govuk-select" id={name} name={name}>
|
||||
<option>Select...</option>
|
||||
{Object.keys(dropdownObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={
|
||||
dropdownObj[key].Label.LocalizedLabels[0].value
|
||||
}
|
||||
// value={dropdownObj[key].Label.LocalizedLabels[0].MetadataId}
|
||||
>
|
||||
{dropdownObj[key].Label.LocalizedLabels[0].Label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
|
||||
{touched && errorStr && <span>{errorStr}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function PickList(props) {
|
||||
const { name, label, datafieldname } = props;
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label govuk-body-m" htmlFor={props.name}>
|
||||
{props.label}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
component={RenderPickList}
|
||||
datafieldname={datafieldname}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NumericField(props) {
|
||||
const { name, label } = props;
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{props.label}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
spellCheck="false"
|
||||
aria-describedby="account-number-hint"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DecimalField(props) {
|
||||
const { name, label } = props;
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{props.label}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
spellCheck="false"
|
||||
aria-describedby="account-number-hint"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderCaseID = {};
|
||||
|
||||
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}>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import Link from "next/link";
|
||||
import Header from "./header";
|
||||
import Banner from "./breadcrumbs";
|
||||
import Breadcrumbs from "./banner";
|
||||
import Footer from "./footer";
|
||||
|
||||
const Errorpage = () => {
|
||||
var m = new Date();
|
||||
var dateString =
|
||||
m.getUTCDate() +
|
||||
"/" +
|
||||
(m.getUTCMonth() + 1) +
|
||||
"/" +
|
||||
m.getUTCFullYear() +
|
||||
" " +
|
||||
m.getUTCHours() +
|
||||
":" +
|
||||
m.getUTCMinutes() +
|
||||
":" +
|
||||
m.getUTCSeconds();
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<Header courseName="An error has occured" />
|
||||
<div className="govuk-width-container">
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-xl">There has been a problem</h1>
|
||||
<p className="govuk-body">
|
||||
Unfortunately something has gone wrong!
|
||||
</p>
|
||||
<p className="govuk-body govuk-!-margin-top-9">{dateString}</p>
|
||||
<Link href="/">
|
||||
<a
|
||||
role="button"
|
||||
draggable="false"
|
||||
className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Try again
|
||||
</a>
|
||||
</Link>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<Footer footerLinks="" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Errorpage;
|
||||
@@ -0,0 +1,119 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function Footer(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
var linksArr = props.footerLinks || [{}];
|
||||
|
||||
const linksBlock = Object.keys(linksArr).map((key) => (
|
||||
<li className="govuk-footer__inline-list-item" key={key}>
|
||||
<Link href={linksArr[key].path || "/"}>
|
||||
<a className="govuk-footer__link">{linksArr[key].title}</a>
|
||||
</Link>
|
||||
</li>
|
||||
));
|
||||
|
||||
return (
|
||||
<footer className="govuk-footer " role="contentinfo">
|
||||
<div className="sharebar" id="sharebar">
|
||||
<div className="sharebar__components container-fluid">
|
||||
<div className="main__sharebar">
|
||||
<div
|
||||
id="sharebar__backtotop"
|
||||
className="btn--outlined btn--arrow-up"
|
||||
>
|
||||
<a href="#page_wrapper">Back to top</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-width-container ">
|
||||
<div className="govuk-footer__meta">
|
||||
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
||||
<h2 className="govuk-visually-hidden">Support links</h2>
|
||||
<nav role="navigation" aria-labelledby="footer_links">
|
||||
<ul
|
||||
className="govuk-footer__inline-list"
|
||||
id="footer_links"
|
||||
>
|
||||
<li className="govuk-footer__inline-list-item">
|
||||
<a
|
||||
href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
|
||||
id="aTermsConds"
|
||||
className="govuk-footer__link"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t(
|
||||
"common:footer-terms-conditions-link"
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li className="govuk-footer__inline-list-item">
|
||||
<a
|
||||
href="https://www.gov.uk/government/publications/planning-inspectorate-privacy-notices"
|
||||
id="aPrivacy"
|
||||
className="govuk-footer__link"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t("common:footer-privacy-link")}
|
||||
</a>
|
||||
</li>
|
||||
<li className="govuk-footer__inline-list-item">
|
||||
<a
|
||||
href="https://www.gov.uk/guidance/appeals-casework-portal-privacy-cookies"
|
||||
id="aCookies"
|
||||
className="govuk-footer__link"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t("common:footer-cookies-link")}
|
||||
</a>
|
||||
</li>
|
||||
<li className="govuk-footer__inline-list-item">
|
||||
<a
|
||||
href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
|
||||
className="govuk-footer__link"
|
||||
id="aAccess"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t("common:footer-accessibility-link")}
|
||||
</a>
|
||||
</li>
|
||||
<li className="govuk-footer__inline-list-item">
|
||||
<a
|
||||
href="http://www.gov.uk/guidance/feedback"
|
||||
id="feedback"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t("common:footer-feedback-link")}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="footer_logo container-fluid"
|
||||
id="footer_logo"
|
||||
>
|
||||
<a
|
||||
href="https://gov.wales/"
|
||||
className="footer__logo"
|
||||
id="footerlogo"
|
||||
>
|
||||
<span className="visually-hidden">Home</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function CaseComment() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:casescomment-card-title")}
|
||||
</h3>
|
||||
<p className="govuk-body-s">{t("home:casescomment-card-paragraph-one")}</p>
|
||||
<p className="govuk-body-s">{t("home:casescomment-card-paragraph-two")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function CaseSearch() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const [query, setQuery] = useState("");
|
||||
const [validationError, setValidationError] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (query == "" || query == null) {
|
||||
setValidationError(true);
|
||||
} else {
|
||||
setValidationError(false);
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" id="casesearch-card">
|
||||
<form onSubmit={basicSearch}>
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:casesearch-card-title")}
|
||||
</h3>
|
||||
<div
|
||||
className={
|
||||
validationError
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<div id="basicSearch-hint" className="govuk-hint ">
|
||||
{t("home:casesearch-card-search-hint")}:
|
||||
<br />
|
||||
<span className="govuk-body-s">
|
||||
{" "}
|
||||
<span className="govuk-!-font-weight-bold">
|
||||
{t(
|
||||
"home:casesearch-card-search-example-label"
|
||||
)}
|
||||
:
|
||||
</span>{" "}
|
||||
CAS-00009-W8N6W4
|
||||
</span>
|
||||
</div>
|
||||
{validationError && (
|
||||
<span
|
||||
id="basicSearch-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
Case reference is required
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="basicSearch"
|
||||
name="basicSearch"
|
||||
type="text"
|
||||
aria-describedby="basicSearch-hint"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<button type="submit" className="govuk-button">
|
||||
{t("home:casesearch-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
<Link href="/advancedsearch">
|
||||
<a>{t("home:casesearch-card-advanced-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function Inspectorate() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card clear" id="inspectorate-card">
|
||||
<div className="card-body">
|
||||
<Image
|
||||
alt="Planning Inspectorate"
|
||||
src="/assets/images/PINS_dual_logo_400.png"
|
||||
width="380px"
|
||||
height="58px"
|
||||
layout="responsive"
|
||||
/>
|
||||
<p className="govuk-body-s">
|
||||
{t("home:inspectorate-card-visit-label")}:{" "}
|
||||
<Link href="/">
|
||||
<a>{t("home:inspectorate-card-visit-link")}</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function Login() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="login-card">
|
||||
<div className="card-body active">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:login-card-title")}
|
||||
</h3>
|
||||
|
||||
<form action="/myportal" method="POST" id="loginForm">
|
||||
<div className="govuk-form-group">
|
||||
{" "}
|
||||
<label
|
||||
htmlFor="user_id"
|
||||
className="govuk-label"
|
||||
aria-describedby="user_id-hint"
|
||||
>
|
||||
{t("home:login-card-id-label")}
|
||||
</label>
|
||||
<div className="govuk-hint" id="user_id-hint">
|
||||
{t("home:login-card-id-hint")}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="user_id"
|
||||
id="user_id"
|
||||
className="govuk-input govuk-!-width-one-half"
|
||||
maxLength="22"
|
||||
aria-describedby="user_id-hint"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
{" "}
|
||||
<label htmlFor="password" className="govuk-label">
|
||||
{t("home:login-card-password-label")}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
className="govuk-input govuk-!-width-three-quarters"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
{/* <button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
id="continue"
|
||||
formnovalidate=""
|
||||
>
|
||||
{t("home:login-card-button")}
|
||||
</button> */}
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-button">
|
||||
{t("home:login-card-button")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-card-register-label")}{" "}
|
||||
<Link href="/account/register">
|
||||
<a>{t("home:login-card-register-link")}</a>
|
||||
</Link>
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-card-forgotten-label")}{" "}
|
||||
<Link href="/">
|
||||
<a>{t("home:login-card-forgotten-link")}</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import Head from "next/head";
|
||||
import Banner from "../components/banner";
|
||||
import Footer from "../components/footer";
|
||||
import Header from "../components/header";
|
||||
|
||||
export default function SkipLink(props) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Appeals Casework Portal</title>
|
||||
</Head>
|
||||
|
||||
<div className="">
|
||||
<Header courseName="Appeals Casework Portal" />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<noscript>
|
||||
<h1 className="govuk-heading-l">
|
||||
Please enable javascript
|
||||
</h1>
|
||||
</noscript>
|
||||
<h1 className="govuk-heading-m">Loading...</h1>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import Login from "./homepage/login";
|
||||
import CaseSearch from "./homepage/casesearch";
|
||||
import Inspectorate from "./homepage/inspectorate";
|
||||
import CaseComment from "./homepage/casecomment";
|
||||
|
||||
|
||||
export default function Home({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<Login />
|
||||
<CaseSearch/>
|
||||
<CaseComment/>
|
||||
<Inspectorate/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import MakeNewAppeal from "./myportal/makenewappeal";
|
||||
import MyCases from "./myportal/mycases";
|
||||
import SearchCases from "./myportal/searchcases";
|
||||
import AwaitingSubmission from "./myportal/awaitingsubmission";
|
||||
import MyRepresentations from "./myportal/myrepresentations";
|
||||
import WatchedCases from "./myportal/watchedcases";
|
||||
import YourAccount from "./myportal/youraccount";
|
||||
|
||||
export default function MyPortal({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<MakeNewAppeal />
|
||||
<MyCases />
|
||||
<SearchCases />
|
||||
<AwaitingSubmission />
|
||||
<MyRepresentations />
|
||||
<WatchedCases />
|
||||
</div>
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<YourAccount />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import TopThree from "./topthree";
|
||||
|
||||
export default function AwaitingSubmission() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:awatitingsubmission-card-title")}
|
||||
</h3>
|
||||
<div className="cardModuleContainer">
|
||||
<TopThree />
|
||||
</div>
|
||||
<div className="cardVieAll">
|
||||
<Link href="/viewall">
|
||||
<a>{t("myportal:viewall-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeNewAppeal() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:makenewappeal-card-title")}
|
||||
</h3>
|
||||
<p className="govuk-body-s">
|
||||
{t("myportal:makenewappeal-card-paragraph-one")}
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
{t("myportal:makenewappeal-card-paragraph-two")}
|
||||
</p>
|
||||
<div>
|
||||
<Link href="/newappeal">
|
||||
<a className="govuk-button">
|
||||
{t("myportal:makenewappeal-card-button-label")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import TopThree from "./topthree";
|
||||
export default function MyCases() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:mycases-card-title")}
|
||||
</h3>
|
||||
<div className="cardModuleContainer">
|
||||
<TopThree />
|
||||
</div>
|
||||
|
||||
<div className="cardVieAll">
|
||||
<Link href="/viewall">
|
||||
<a>{t("myportal:viewall-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import TopThree from "./topthree";
|
||||
export default function MyRepresentations() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:myrepresentations-card-title")}
|
||||
</h3>
|
||||
<div className="cardModuleContainer">
|
||||
<TopThree />{" "}
|
||||
</div>
|
||||
|
||||
<div className="cardVieAll">
|
||||
<Link href="/viewall">
|
||||
<a>{t("myportal:viewall-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function SearchCases() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const [query, setQuery] = useState("");
|
||||
const [validationError, setValidationError] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (query == "" || query == null) {
|
||||
setValidationError(true);
|
||||
} else {
|
||||
setValidationError(false);
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<form onSubmit={basicSearch}>
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:searchcases-card-title")}
|
||||
</h3>
|
||||
<div
|
||||
className={
|
||||
validationError
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<div id="event-name-hint" className="govuk-hint ">
|
||||
{t("myportal:searchcases-card-search-hint")}:
|
||||
<br />
|
||||
<span className="govuk-body-s">
|
||||
{" "}
|
||||
<span className="govuk-!-font-weight-bold">
|
||||
{t(
|
||||
"myportal:searchcases-card-search-example-label"
|
||||
)}
|
||||
:
|
||||
</span>{" "}
|
||||
CAS-00009-W8N6W4
|
||||
</span>
|
||||
</div>
|
||||
{validationError && (
|
||||
<span
|
||||
id="basicSearch-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
Case reference is required
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="event-name"
|
||||
name="event-name"
|
||||
type="text"
|
||||
aria-describedby="event-name-hint"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<button
|
||||
type="submit"
|
||||
name="search"
|
||||
className="govuk-button"
|
||||
>
|
||||
{t("myportal:searchcases-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
<Link href="/advancedsearch">
|
||||
<a>{t("myportal:searchcases-card-advanced-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function TopThree() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<>
|
||||
<div className="cardModuleItem">
|
||||
<div className="cardModuleDetails">
|
||||
<div className="cardModuleReference">
|
||||
<b>Case reference:</b>{" "}
|
||||
<Link href="/case">
|
||||
<a>CAS-00010-J9W6L5</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="carModuleAddress">
|
||||
<b>Address: </b> Beggars Lane
|
||||
</div>
|
||||
</div>
|
||||
<div className="cardModuleRemoveCase"> —</div>
|
||||
</div>
|
||||
<div className="cardModuleItem">
|
||||
<div className="cardModuleDetails">
|
||||
<div className="cardModuleReference">
|
||||
<b>Case reference:</b>{" "}
|
||||
<Link href="/case">
|
||||
<a>CAS-00010-J9W6L5</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="carModuleAddress">
|
||||
<b>Address: </b> Beggars Lane
|
||||
</div>
|
||||
</div>
|
||||
<div className="cardModuleRemoveCase"> —</div>
|
||||
</div>
|
||||
<div className="cardModuleItem">
|
||||
<div className="cardModuleDetails">
|
||||
<div className="cardModuleReference">
|
||||
<b>Case reference:</b>{" "}
|
||||
<Link href="/case">
|
||||
<a>CAS-00010-J9W6L5</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="carModuleAddress">
|
||||
<b>Address: </b> Beggars Lane
|
||||
</div>
|
||||
</div>
|
||||
<div className="cardModuleRemoveCase"> —</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import TopThree from "./topthree";
|
||||
export default function WatchedCases() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card card-3" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:watchedcases-card-title")}
|
||||
</h3>
|
||||
<div className="cardModuleContainer">
|
||||
<TopThree />
|
||||
</div>
|
||||
|
||||
<div className="cardVieAll">
|
||||
<Link href="/viewall">
|
||||
<a>{t("myportal:viewall-link")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function YourAccount() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<>
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">Your details</h3>
|
||||
<p className="govuk-body-s">
|
||||
You can change your address and contact details
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<Link href="/account/personaldetails">
|
||||
<a className="govuk-button-secondary">
|
||||
Edit your account details
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
Change your password
|
||||
</h3>
|
||||
<p className="govuk-body-s">You can change your password</p>
|
||||
|
||||
<div>
|
||||
<Link href="/account/changepassword">
|
||||
<a className="govuk-button-secondary">
|
||||
Update your password
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import PlanningAppeal from "./newappeal/planningappeal";
|
||||
import EnforcementNotice from "./newappeal/enforcementnotice";
|
||||
import LDC from "./newappeal/ldc";
|
||||
import AdvertApplication from "./newappeal/advertapplication";
|
||||
|
||||
export default function NewAppeal({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<PlanningAppeal />
|
||||
<EnforcementNotice />
|
||||
<LDC />
|
||||
<AdvertApplication />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeAdvertApplication() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
An appeal relating to an advertisement application or a
|
||||
discontinuance notice.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">
|
||||
An advert application/Discontinuance Notice (DN)
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
import moment from "moment";
|
||||
|
||||
export default function BuildField(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { fieldType, label, datafieldname, fieldValue } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<>
|
||||
<span>hello</span>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
default:
|
||||
return <>{fieldValue}</>;
|
||||
}
|
||||
};
|
||||
|
||||
return <>{whichFieldType(props.fieldType)}</>;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildCheckField from "./buildCheckfield";
|
||||
import { useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
setFormComplete,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
let BuildCheckRow = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
whichSection,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
updateCurrentSection,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
whichSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(
|
||||
rowXML[key].outerHTML,
|
||||
"text/xml"
|
||||
);
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{rows[0].value}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
updateCurrentSection(whichSection);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
name
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
updateCurrentSection: (whichSection) => {
|
||||
dispatch(setCurrentSection(whichSection));
|
||||
dispatch(setFormComplete("true"));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
count: state.count,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);
|
||||
@@ -0,0 +1,125 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useState, useEffect } from "react";
|
||||
import xpath from "xpath";
|
||||
import BuildCheckRow from "./buildcheckrow";
|
||||
import { reduxForm, formValueSelector } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCurrentSection,
|
||||
setFormComplete,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
let BuildCheckSection = (props) => {
|
||||
useEffect(() => {
|
||||
setFormComplete();
|
||||
}, []);
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[*]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div>
|
||||
<h1 className="govuk-heading-m">
|
||||
Are these answers correct?
|
||||
</h1>
|
||||
{Object.keys(titles).map((key) => (
|
||||
<>
|
||||
<h2 className="govuk-heading-m">
|
||||
{titles[key].value}
|
||||
</h2>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
|
||||
<BuildCheckRow
|
||||
formXML={formXML}
|
||||
whichSection={parseInt(key) + 1}
|
||||
sectionCount={key}
|
||||
props={props}
|
||||
key={key}
|
||||
/>
|
||||
</dl>
|
||||
</>
|
||||
))}
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
|
||||
</div>
|
||||
<div className="govuk-button-group">
|
||||
<a
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => setCurrentSection(9999)}
|
||||
>
|
||||
Submit appeal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// BuildCheckSection = reduxForm({
|
||||
// // a unique name for the form
|
||||
// form: "sssappealForm",
|
||||
// destroyOnUnmount: false,
|
||||
// })(BuildCheckSection);
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckSection);
|
||||
@@ -0,0 +1,102 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { fieldType, label, datafieldname } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return (
|
||||
<ReadOnlyfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
value={props.props.props.appealType.caseReference}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<PickList
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<YesNofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
);
|
||||
break;
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<DateFieldPicker
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return (
|
||||
<MultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
|
||||
return (
|
||||
<NumericField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
|
||||
return (
|
||||
<DecimalField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildField from "./buildfield";
|
||||
|
||||
export default function BuildRow(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { rowXML, whichSection, sectionCount, onSubmit } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-column-full">
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(
|
||||
rowXML[key].outerHTML,
|
||||
"text/xml"
|
||||
);
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
key={key}
|
||||
props={props}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
import Link from "next/link";
|
||||
import _, { has } from "lodash";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useState, useEffect } from "react";
|
||||
import xpath from "xpath";
|
||||
import BuildRow from "./buildrow";
|
||||
import { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
} from "../../store/appealType/action";
|
||||
import { query } from "jsonpath";
|
||||
|
||||
let BuildSection = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
// });
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
refno,
|
||||
gotoSection,
|
||||
} = props;
|
||||
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
};
|
||||
|
||||
const [hasErrors, setHasErrors] = useState("");
|
||||
|
||||
const getErrors = () => {
|
||||
let errorsobj = props.props.form["appealForm"];
|
||||
setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
let errorsobj = {};
|
||||
const ShowErrorHeader = (props) => {
|
||||
errorsobj = props.props.appealForm.syncErrors;
|
||||
errorsobj = _.keys(errorsobj);
|
||||
|
||||
const getErrorLabel = (whichField) => {
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var errorFieldLabel = xpath.select(
|
||||
"//*[control/@id='" + whichField + "']//@description",
|
||||
doc
|
||||
);
|
||||
|
||||
return errorFieldLabel[0].value;
|
||||
};
|
||||
|
||||
const ShowErrors = () => {
|
||||
let errorList = [];
|
||||
for (let i = 0; i < errorsobj.length; ++i) {
|
||||
//get label from error key - search rowxml for id = errorobj
|
||||
|
||||
errorList.push(
|
||||
<li>
|
||||
<a href={"#" + errorsobj[i] + "_label"}>
|
||||
{" "}
|
||||
{getErrorLabel(errorsobj[i])}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return errorList;
|
||||
};
|
||||
|
||||
return !_.isEmpty(errorsobj) ? (
|
||||
<div
|
||||
className="govuk-error-summary"
|
||||
aria-labelledby="error-summary-title"
|
||||
role="alert"
|
||||
tabIndex="-1"
|
||||
data-module="govuk-error-summary"
|
||||
>
|
||||
<h2
|
||||
className="govuk-error-summary__title"
|
||||
id="error-summary-title"
|
||||
>
|
||||
The following fields have a problem :
|
||||
</h2>
|
||||
<div className="govuk-error-summary__body">
|
||||
<ul className="govuk-list govuk-error-summary__list">
|
||||
<ShowErrors />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
{titles[0].value}{" "}
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{hasErrors == true ? (
|
||||
<ShowErrorHeader
|
||||
hasErrors={hasErrors}
|
||||
props={props.props.form}
|
||||
formXML={formXML}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<BuildRow
|
||||
rowXML={rowXML}
|
||||
whichSection={props.whichSection}
|
||||
sectionCount={props.sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
props={props}
|
||||
/>
|
||||
{}
|
||||
<div className="govuk-button-group">
|
||||
{props.sectionCount != currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => getErrors()}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.sectionCount == currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{currentSection > 1 ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() =>
|
||||
setCurrentSection(currentSection - 1)
|
||||
}
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third">
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
className="at-nav"
|
||||
>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
Progress:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
<ol className="govuk-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list">
|
||||
{Object.keys(titleList).map((key) =>
|
||||
parseInt(key) + 1 == currentSection ? (
|
||||
<li key={key}>
|
||||
<b>{titleList[key].value} </b>
|
||||
</li>
|
||||
) : (
|
||||
<li key={key}>
|
||||
{props.appealType
|
||||
.formComplete == "true" ||
|
||||
parseInt(key) + 1 <
|
||||
currentSection ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) +
|
||||
1
|
||||
);
|
||||
}}
|
||||
>
|
||||
{titleList[key].value}
|
||||
</a>
|
||||
) : (
|
||||
titleList[key].value
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "appealForm",
|
||||
destroyOnUnmount: false,
|
||||
})(BuildSection)
|
||||
);
|
||||
@@ -0,0 +1,124 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useState, useEffect } from "react";
|
||||
import xpath from "xpath";
|
||||
import BuildRow from "./buildrow";
|
||||
import { reduxForm, formValueSelector } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import { setCurrentSection } from "../../store/appealType/action";
|
||||
|
||||
let CompleteAppeal = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
// });
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="govuk-panel govuk-panel--confirmation">
|
||||
<h1 className="govuk-panel__title">Appeal complete</h1>
|
||||
<div className="govuk-panel__body">
|
||||
Your reference number
|
||||
<br />
|
||||
<strong>{props.appealType.caseReference}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="govuk-body">
|
||||
We have sent you a confirmation email.
|
||||
</p>
|
||||
|
||||
<h2 className="govuk-heading-m">What happens next</h2>
|
||||
|
||||
<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">
|
||||
Sed imperdiet dignissim ipsum. Orci varius natoque penatibus
|
||||
et magnis dis parturient montes, nascetur ridiculus mus. In
|
||||
id leo in turpis aliquam venenatis ut non erat. Ut est arcu,
|
||||
luctus sit amet pretium sed, iaculis non purus. Etiam dictum
|
||||
tortor commodo luctus rhoncus.
|
||||
</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-link">Back to My Portal</a>
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
<a href="#" className="govuk-link">
|
||||
What did you think of this service?
|
||||
</a>
|
||||
(takes 30 seconds)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(CompleteAppeal);
|
||||
@@ -0,0 +1,257 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useState, useEffect } from "react";
|
||||
import xpath from "xpath";
|
||||
import BuildRow from "./buildrow";
|
||||
import { reduxForm, formValueSelector, Field } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import jsonpath from "jsonpath";
|
||||
import {
|
||||
setAppealType,
|
||||
setAppealTypeTitle,
|
||||
setAppealTypeID,
|
||||
setAppealLPA,
|
||||
getAppealTypeObj,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
let CreateCase = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
// });
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { LPAData, onSubmit, handleSubmit } = props;
|
||||
|
||||
const appealOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet.Options)
|
||||
? [{}]
|
||||
: props.appealType.appealTypeOptions.GlobalOptionSet.Options;
|
||||
|
||||
let lpaOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: jsonpath.query(props.LPAData.LPAData, "$..name");
|
||||
|
||||
const RenderLPAList = ({
|
||||
name,
|
||||
input,
|
||||
optionsObj,
|
||||
meta: { touched, error },
|
||||
label,
|
||||
errorMsg,
|
||||
}) => {
|
||||
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 govuk-input--error"
|
||||
id="lpatypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectLPA(e)}
|
||||
>
|
||||
<option value="" disabled defaultValue>
|
||||
Select...
|
||||
</option>
|
||||
{_.isEmpty(optionsObj)
|
||||
? ""
|
||||
: Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsObj[key]}
|
||||
>
|
||||
{optionsObj[key]}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderAppealTypeList = ({
|
||||
name,
|
||||
input,
|
||||
optionsObj,
|
||||
meta: { touched, error },
|
||||
label,
|
||||
errorMsg,
|
||||
}) => {
|
||||
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="appealTypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectAppealType(e)}
|
||||
>
|
||||
<option value="" disabled defaultValue>
|
||||
Select...
|
||||
</option>
|
||||
{_.isEmpty(optionsObj)
|
||||
? ""
|
||||
: Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsObj[
|
||||
key
|
||||
].Label.LocalizedLabels[0].Label.replace(
|
||||
/[\s\-\+\(\)\,]/g,
|
||||
""
|
||||
).toLowerCase()}
|
||||
>
|
||||
{
|
||||
optionsObj[key].Label
|
||||
.LocalizedLabels[0].Label
|
||||
}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
event.preventDefault();
|
||||
router.replace("/newappeal/" + values.appealTypes, null, {
|
||||
shallow: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<Field
|
||||
name="lpaTypes"
|
||||
component={RenderLPAList}
|
||||
optionsObj={lpaOptionsObj}
|
||||
validate={[required]}
|
||||
label="Select your local planning authority"
|
||||
errorMsg="Local authority is required"
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="appealTypes"
|
||||
component={RenderAppealTypeList}
|
||||
optionsObj={appealOptionsObj}
|
||||
validate={[required]}
|
||||
label="Select an appeal type"
|
||||
errorMsg="Appeal type is required"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
</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 {
|
||||
onChangeSelectAppealType: (event) => {
|
||||
dispatch(
|
||||
setAppealTypeTitle(
|
||||
event.target.options[event.target.selectedIndex].text
|
||||
)
|
||||
);
|
||||
dispatch(setAppealTypeID(event.target.value));
|
||||
},
|
||||
onChangeSelectLPA: (event) => {
|
||||
dispatch(setAppealLPA(event.target.value));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("caseForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "caseForm",
|
||||
destroyOnUnmount: false,
|
||||
})(CreateCase)
|
||||
);
|
||||
@@ -0,0 +1,24 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeEnforcementNotice() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
Including an enforcement listed building notice.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">A enforcement notice</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeLDC() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
An appeal relating to an application for a certificate of
|
||||
lawful use or development.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">
|
||||
A Lawful Development Certificate (LDC)
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeNewAppeal() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
This includes all householder applications, full planning
|
||||
applications, outline planning applications, planning listed
|
||||
building (LB) applications.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="./newappeal/selectappeal">
|
||||
<a className="govuk-button">A planning application</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import SearchForCase from "./search/searchforcase";
|
||||
import AdvancedSearch from "./search/advancedsearch";
|
||||
|
||||
export default function Search({ children, pages }) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<AdvancedSearch />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,922 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function AdvancedSearch(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const advancedSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={advancedSearch}>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="card" id="searchforcase-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h1 className="govuk-fieldset__heading govuk-heading-m">
|
||||
{t("search:search-title-label")}
|
||||
</h1>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-county"
|
||||
>
|
||||
{t("search:casereference-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t(
|
||||
"search:sitelocation-legend"
|
||||
)}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-line-1"
|
||||
>
|
||||
{t(
|
||||
"search:address-line-one-label"
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-town"
|
||||
>
|
||||
{t("search:town-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-county"
|
||||
>
|
||||
{t("search:county-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:postcode-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:lpa-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:lpa-reference-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:case-type-label")}{" "}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t("search:case-type-option-1")}
|
||||
</option>
|
||||
<option value="Any/All">
|
||||
{t("search:case-type-option-2")}
|
||||
</option>
|
||||
<option value="Advertisement Appeals">
|
||||
{t("search:case-type-option-3")}
|
||||
</option>
|
||||
<option value="Called in Planning Applications">
|
||||
{t("search:case-type-option-4")}
|
||||
</option>
|
||||
<option value="Discontinuance Notice Appeals">
|
||||
{t("search:case-type-option-5")}
|
||||
</option>
|
||||
<option value="Enforcement Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-6")}
|
||||
</option>
|
||||
<option value="Enforcement Appeals">
|
||||
{t("search:case-type-option-7")}
|
||||
</option>
|
||||
<option value="Householder Appeals">
|
||||
{t("search:case-type-option-8")}
|
||||
</option>
|
||||
<option value="Lawful Development Certificate Appeals">
|
||||
{t("search:case-type-option-9")}
|
||||
</option>
|
||||
<option value="Planning Appeals">
|
||||
{t(
|
||||
"search:case-type-option-10"
|
||||
)}
|
||||
</option>
|
||||
<option value="Planning Obligation Appeals">
|
||||
{t(
|
||||
"search:case-type-option-11"
|
||||
)}
|
||||
</option>
|
||||
<option value="Planning Listed Building and Conservation Area Appeals">
|
||||
{t(
|
||||
"search:case-type-option-12"
|
||||
)}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="card" id="advancedsearch-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t(
|
||||
"search:advanced-search-title-label"
|
||||
)}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-line-1"
|
||||
>
|
||||
{t("search:applicant-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-town"
|
||||
>
|
||||
{t("search:other-party-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:hearing-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:site-visit-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:callin-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t("search:date-received")}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:start-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:decision-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group ">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:procedure-type-label")}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t(
|
||||
"search:procedure-type-option-1"
|
||||
)}
|
||||
</option>
|
||||
<option value="Hearing">
|
||||
{t(
|
||||
"search:procedure-type-option-2"
|
||||
)}
|
||||
</option>
|
||||
<option value="Inquiry">
|
||||
{t(
|
||||
"search:procedure-type-option-3"
|
||||
)}
|
||||
</option>
|
||||
<option value="Written representations">
|
||||
{t(
|
||||
"search:procedure-type-option-4"
|
||||
)}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:status-label")}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t("search:status-option-1")}
|
||||
</option>
|
||||
<option value="Any">
|
||||
{t("search:status-option-2")}
|
||||
</option>
|
||||
<option value="In progress">
|
||||
{t("search:status-option-3")}
|
||||
</option>
|
||||
<option value="Complete">
|
||||
{t("search:status-option-4")}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-form-group">
|
||||
<button
|
||||
type="submit"
|
||||
name="search"
|
||||
className="govuk-button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function SearchForCase() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="searchforcase-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h1 className="govuk-fieldset__heading govuk-heading-m">
|
||||
{t("search:search-title-label")}
|
||||
</h1>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-county">
|
||||
{t("search:casereference-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t("search:sitelocation-legend")}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-line-1">
|
||||
{t("search:address-line-one-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-town">
|
||||
{t("search:town-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-county">
|
||||
{t("search:county-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:postcode-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:lpa-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:lpa-reference-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{t("search:case-type-label")}{" "}
|
||||
</label>
|
||||
<select className="govuk-select" id="sort" name="sort">
|
||||
<option value="">
|
||||
{t("search:case-type-option-1")}
|
||||
</option>
|
||||
<option value="Any/All">
|
||||
{t("search:case-type-option-2")}
|
||||
</option>
|
||||
<option value="Advertisement Appeals">
|
||||
{t("search:case-type-option-3")}
|
||||
</option>
|
||||
<option value="Called in Planning Applications">
|
||||
{t("search:case-type-option-4")}
|
||||
</option>
|
||||
<option value="Discontinuance Notice Appeals">
|
||||
{t("search:case-type-option-5")}
|
||||
</option>
|
||||
<option value="Enforcement Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-6")}
|
||||
</option>
|
||||
<option value="Enforcement Appeals">
|
||||
{t("search:case-type-option-7")}
|
||||
</option>
|
||||
<option value="Householder Appeals">
|
||||
{t("search:case-type-option-8")}
|
||||
</option>
|
||||
<option value="Lawful Development Certificate Appeals">
|
||||
{t("search:case-type-option-9")}
|
||||
</option>
|
||||
<option value="Planning Appeals">
|
||||
{t("search:case-type-option-10")}
|
||||
</option>
|
||||
<option value="Planning Obligation Appeals">
|
||||
{t("search:case-type-option-11")}
|
||||
</option>
|
||||
<option value="Planning Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-12")}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function SearchResults(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
|
||||
const resultRow = Object.keys(resultsArr).map((key, index) => {
|
||||
<div className="govuk-summary-list__row">
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
wwwwwwwCase Reference:
|
||||
</span>
|
||||
{resultsArr[key].title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Site Address: </span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Authority:</span>
|
||||
Hastings Borough Council{" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Case Type:</span>
|
||||
Planning (W){" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Status:</span>
|
||||
In Progress
|
||||
</dd>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
{t("search:searchresults-title-label")}
|
||||
</h1>
|
||||
<p className="govuk-body">
|
||||
{t("search:searchresults-count-label", {
|
||||
count: props.searchResultsObj.searchResultsObj[
|
||||
"@odata.count"
|
||||
].toString(),
|
||||
})}
|
||||
. You searched for <em>"{searchString}"</em>
|
||||
</p>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
|
||||
{t("search:searchresults-case-reference-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-site-address-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-applicant-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-authority-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-case-type-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-status-label")}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{resultsArr.map((item, key) => {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{item.title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Site Address:{" "}
|
||||
</span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Authority:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"_customerid_value@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Case Type:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Status:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"statuscode@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function ViewAllResults(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
|
||||
const resultRow = Object.keys(resultsArr).map((key, index) => {
|
||||
<div className="govuk-summary-list__row">
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{resultsArr[key].title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Site Address: </span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Authority:</span>
|
||||
Hastings Borough Council{" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Case Type:</span>
|
||||
Planning (W){" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Status:</span>
|
||||
In Progress
|
||||
</dd>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
Your cases
|
||||
</h1>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
|
||||
{t("search:searchresults-case-reference-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-site-address-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-applicant-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-authority-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-case-type-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-status-label")}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{resultsArr.map((item, key) => {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{item.title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Site Address:{" "}
|
||||
</span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Authority:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"_customerid_value@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Case Type:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Status:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"statuscode@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import SearchForCase from "./search/searchforcase";
|
||||
import SearchResults from "./search/searchresults";
|
||||
|
||||
export default function Search(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<SearchResults searchString={searchString} searchResultsObj={searchResultsObj}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button">
|
||||
{t("search:searchresults-search-button-label")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/advancedsearch">
|
||||
<a className="govuk-button govuk-button--secondary">
|
||||
{t(
|
||||
"search:searchresults-new-search-button-label"
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export default function SkipLink(props) {
|
||||
return (
|
||||
<div id="skiplink-container">
|
||||
<div>
|
||||
<a href="#main-content" className="skiplink govuk-link">
|
||||
Skip to main content
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import SearchForCase from "./search/searchforcase";
|
||||
import ViewAllResults from "./search/viewall";
|
||||
|
||||
export default function ViewAll(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<ViewAllResults
|
||||
searchString={searchString}
|
||||
searchResultsObj={searchResultsObj}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-button">Back</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user