Merged PR 450: added login soon box and updated translations
added login soon box and updated translations Related work items: #6208
This commit is contained in:
Robert Bond
+50
-13
@@ -69,17 +69,26 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/searchresults" ? (
|
||||
{router.pathname == "/myportal/searchresults" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Search results
|
||||
{t("common:breadcrumb-search-results")}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/searchresults" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-search-results")}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
@@ -129,7 +138,7 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -145,7 +154,7 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -156,12 +165,12 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/case" ? (
|
||||
{router.pathname == "/myportal/case" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -173,7 +182,7 @@ const Breadcrumbs = (props) => {
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Case Reference:{" "}
|
||||
{t("common:breadcrumb-case-reference")}:{" "}
|
||||
{
|
||||
props.props.currentView.caseReference
|
||||
.currentReference
|
||||
@@ -183,12 +192,40 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/representation" ? (
|
||||
{router.pathname == "/case" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
"/searchresults?q=" +
|
||||
props.props.search.searchString
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={() => router.back()}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-search-results")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-case-reference")}:{" "}
|
||||
{
|
||||
props.props.currentView.caseReference
|
||||
.currentReference
|
||||
}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/myportal/representation" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -208,7 +245,7 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -233,7 +270,7 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -316,7 +353,7 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -114,11 +114,19 @@ const CaseSummary = (props) => {
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-button-group">
|
||||
<Link href="/representation">
|
||||
<a className="govuk-button">
|
||||
{t("case:summary-make-representation-label")}
|
||||
</a>
|
||||
</Link>
|
||||
{router.pathname != "/case" ? (
|
||||
<>
|
||||
<Link href="/representation">
|
||||
<a className="govuk-button">
|
||||
{t(
|
||||
"case:summary-make-representation-label"
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<a
|
||||
onClick={() => router.back()}
|
||||
className="govuk-button govuk-button--secondary"
|
||||
|
||||
+18
-2
@@ -18,6 +18,8 @@ const Header = (props) => {
|
||||
"/dns/contact-us",
|
||||
"/dns/applications",
|
||||
"/dns/application-view",
|
||||
"/searchresults",
|
||||
"/case",
|
||||
];
|
||||
const hasContactLink = [
|
||||
"/dns",
|
||||
@@ -150,7 +152,15 @@ const Header = (props) => {
|
||||
<Link
|
||||
href={
|
||||
locale == "en"
|
||||
? router.pathname
|
||||
? router.query.q != null
|
||||
? router.pathname +
|
||||
"?q=" +
|
||||
router.query.q
|
||||
: router.pathname
|
||||
: router.query.q != null
|
||||
? router.pathname +
|
||||
"?q=" +
|
||||
router.query.q
|
||||
: router.pathname
|
||||
}
|
||||
locale={
|
||||
@@ -213,7 +223,13 @@ const Header = (props) => {
|
||||
<Link
|
||||
href={
|
||||
locale == "en"
|
||||
? router.pathname
|
||||
? router.query.q != null
|
||||
? router.pathname +
|
||||
"?q=" +
|
||||
router.query.q
|
||||
: router.pathname
|
||||
: router.query.q != null
|
||||
? router.pathname + "?q=" + router.query.q
|
||||
: router.pathname
|
||||
}
|
||||
locale={locale == "en" ? "cy" : "en"}
|
||||
|
||||
@@ -2,81 +2,106 @@ import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { connect } from "react-redux";
|
||||
import { Field, reduxForm } from "redux-form";
|
||||
|
||||
export default function CaseSearch() {
|
||||
const required = (errorMsg) => (value) =>
|
||||
value || typeof value === "number" ? undefined : errorMsg;
|
||||
|
||||
export const minLength = (errorMsg) => (value) =>
|
||||
value && value.length < 4
|
||||
? errorMsg //`Must be ${min} characters or more`
|
||||
: undefined;
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
hint1,
|
||||
hint2,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<div id="basicSearch-hint" className="govuk-hint ">
|
||||
{hint1}
|
||||
<br />
|
||||
<span className="govuk-body-s">
|
||||
<span className="govuk-!-font-weight-bold">
|
||||
{hint2}
|
||||
</span>{" "}
|
||||
CAS-00009-W8N6W4
|
||||
</span>
|
||||
</div>
|
||||
<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>{" "}
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
<input {...input} className={className} name={name} id={id} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
let CaseSearch = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const { handleSubmit, pristine, reset, submitting } = props;
|
||||
|
||||
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 },
|
||||
});
|
||||
}
|
||||
const onHandleSubmit = (values) => {
|
||||
router.replace({
|
||||
pathname: "/searchresults",
|
||||
query: { q: values.basicSearch },
|
||||
shallow: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" id="casesearch-card">
|
||||
<form onSubmit={basicSearch}>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<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>
|
||||
|
||||
<Field
|
||||
validate={[
|
||||
required(
|
||||
t("home:casesearch-search-validation-required")
|
||||
),
|
||||
minLength(
|
||||
t("home:casesearch-search-validation-minlength")
|
||||
),
|
||||
]}
|
||||
className="govuk-input"
|
||||
component={RenderTextfield}
|
||||
id="basicSearch"
|
||||
name="basicSearch"
|
||||
type="text"
|
||||
aria-describedby="basicSearch-hint"
|
||||
hint1={t("home:casesearch-card-search-hint")}
|
||||
hint2={t("home:casesearch-card-search-example-label")}
|
||||
/>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<button type="submit" className="govuk-button">
|
||||
{t("home:casesearch-card-button")}
|
||||
@@ -89,4 +114,24 @@ export default function CaseSearch() {
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
...state,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "basicSearchForm",
|
||||
destroyOnUnmount: false,
|
||||
})(CaseSearch)
|
||||
);
|
||||
|
||||
@@ -9,19 +9,16 @@ export default function Dns() {
|
||||
<div className="card" id="casesearch-card">
|
||||
<div className="card-body">
|
||||
<h3 className="heading-small card-heading">
|
||||
Developments of National Significance
|
||||
{t("home:dns-card-title")}
|
||||
</h3>
|
||||
<div className="govuk-form-group">
|
||||
<p className="govuk-body-s">
|
||||
A Development of National Significance (DNS) is a type
|
||||
of planning application for a large infrastructure
|
||||
project of national importance in Wales. Here you can
|
||||
find out about proposed DNS applications.
|
||||
{t("home:dns-card-paragraph")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<button type="submit" className="govuk-button">
|
||||
View all Applications
|
||||
{t("home:dns-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function LoginSoon() {
|
||||
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-temp")}
|
||||
</h3>
|
||||
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-comingsoon-temp-1")}
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-comingsoon-temp-2")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+3
-1
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { useContext } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import Login from "./homepage/login";
|
||||
import LoginSoon from "./homepage/loginSoon";
|
||||
import CaseSearch from "./homepage/casesearch";
|
||||
import Inspectorate from "./homepage/inspectorate";
|
||||
import CaseComment from "./homepage/casecomment";
|
||||
@@ -23,10 +24,11 @@ export default function Home({ children, pages }) {
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<Login />
|
||||
<LoginSoon />
|
||||
<CaseSearch />
|
||||
<CaseComment />
|
||||
<Dns />
|
||||
{/* <Login /> */}
|
||||
<Inspectorate />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function SearchCases() {
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
pathname: "/myportal/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user