added login soon box and updated translations

This commit is contained in:
robert.bond@test.gov.wales
2021-09-20 13:32:24 +01:00
parent 219e6a4744
commit 7044497f08
18 changed files with 478 additions and 96 deletions
+50 -13
View File
@@ -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>
+13 -5
View File
@@ -110,11 +110,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
View File
@@ -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"}
+107 -62
View File
@@ -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)
);
+3 -6
View File
@@ -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>
+28
View File
@@ -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
View File
@@ -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>
+1 -1
View File
@@ -23,7 +23,7 @@ export default function SearchCases() {
// /searchresults
router.push({
pathname: "/searchresults",
pathname: "/myportal/searchresults",
query: { q: query },
});
}
+9
View File
@@ -17,6 +17,15 @@
"/myportal/viewall": [
"search"
],
"/myportal/advancedsearch": [
"search"
],
"/myportal/searchresults": [
"search"
],
"/myportal/case": [
"case"
],
"/advancedsearch": [
"search"
],
+1
View File
@@ -1,4 +1,5 @@
{
"page-title": "Cyfeirnod",
"case-card-title": "Reference: APP/B1415/W/20/3271702",
"summary-applicant-label": "Apelydd/Ymgeisydd",
"summary-agent-label": "Asiant",
+4 -1
View File
@@ -16,5 +16,8 @@
"signout-label": "Cofrestrwch allan",
"back-to-top-link": "Nôl i dop y dudalen",
"social-bar-share-link": "Rhannur dudalen hon",
"social-bar-share-via-link": "Rhannur dudalen hon ar"
"social-bar-share-via-link": "Rhannur dudalen hon ar",
"breadcrumb-search-results" : "Canlyniadau chwilio",
"breadcrumb-my-portal": "Fy mhorth",
"breadcrumb-case-reference": "Cyfeirnod Achos"
}
+9 -1
View File
@@ -1,4 +1,7 @@
{
"login-card-title-temp": "W-Log in or Register soon",
"login-comingsoon-temp-1": "W-First paragraph says something about being able to create accounts",
"login-comingsoon-temp-2": "W-Second paragraph content to go here to explaine something else.",
"login-card-title": "Mewngofnodi neu cofrestru",
"login-card-id-label": "Dynodydd Defnyddiwr (ID) Porth y Llywodraeth",
"login-card-id-hint": "Gallai hyn fod hyd at 12 o gymeriadau.",
@@ -13,9 +16,14 @@
"casesearch-card-search-example-label": "Enghraifft",
"casesearch-card-button": "Cyflwyno Chwiliad",
"casesearch-card-advanced-link": "Fel arall, gallwch chwilio gan ddefnyddio ein meini prawf eraill gyda'n chwiliad uwch",
"casesearch-search-validation-required": "Angenrheidiol",
"casesearch-search-validation-minlength": "Rhaid bod yn 4 nod neu fwy",
"casescomment-card-title": "Gwneud sylw ar achos",
"casescomment-card-paragraph-one": "Chwiliwch am eich achos a chliciwch y botwm 'Gwneud Sylw'. Y ffordd orau o roi sylwadau ar achos cyfredol yw trwy gofrestru gyda ni'n gyntaf gan fod hynny'n gwneud olrhain achosion a chyflwyno sylwadau yn haws.",
"casescomment-card-paragraph-two": "Yn achos apeliadau deiliaid tai ac apeliadau masnachol, nid yw partïon â buddiant yn gallu gwneud sylwadau yn y cam apelio. Caiff unrhyw sylwadau a wneir yn y cam ymgeisio eu darparu gan yr awdurdod cynllunio lleol ac fe'u hystyrir gan yr Arolygydd.",
"inspectorate-card-visit-label" : "Ymweld Yr Arolygiaeth Gynllunio",
"inspectorate-card-visit-link": "Hafan"
"inspectorate-card-visit-link": "Hafan",
"dns-card-title":"Datblygiadau o Arwyddocâd Cenedlaethol",
"dns-card-paragraph":"Mae Datblygiad o Arwyddocâd Cenedlaethol (DAC) yn fath o gais cynllunio ar gyfer prosiect seilwaith mawr sydd o bwysigrwydd cenedlaethol yng Nghymru. Yn y fan hon, gallwch gael gwybod am geisiadau DAC arfaethedig. Rheolir y safle hwn gan yr Arolygiaeth Gynllunio.",
"dns-card-button":"Gweld pob cais"
}
+1
View File
@@ -1,4 +1,5 @@
{
"page-title": "Reference",
"case-card-title": "Reference: APP/B1415/W/20/3271702",
"summary-applicant-label": "Appellant/Applicant",
"summary-agent-label": "Agent",
+4 -1
View File
@@ -16,5 +16,8 @@
"signout-label": "Sign out",
"back-to-top-link": "Back to top",
"social-bar-share-link": "Share this page",
"social-bar-share-via-link": "Share this page via"
"social-bar-share-via-link": "Share this page via",
"breadcrumb-search-results" : "Search results",
"breadcrumb-my-portal": "My portal",
"breadcrumb-case-reference": "Case Reference"
}
+10 -2
View File
@@ -1,4 +1,7 @@
{
"login-card-title-temp": "Log in or Register soon",
"login-comingsoon-temp-1": "First paragraph says something about being able to create accounts",
"login-comingsoon-temp-2": "Second paragraph content to go here to explaine something else.",
"login-card-title": "Log in or Register",
"login-card-id-label": "Government Gateway user ID",
"login-card-id-hint": "This could be up to 12 characters.",
@@ -9,13 +12,18 @@
"login-card-forgotten-label": "Forgotten your password or username?",
"login-card-forgotten-link": "Click here",
"casesearch-card-title": "Search for a case",
"casesearch-card-search-hint": "Search by entering the 7 digit case reference number:",
"casesearch-card-search-hint": "Search by entering the 7 digit case reference number",
"casesearch-card-search-example-label": "Example",
"casesearch-card-button": "Submit Search",
"casesearch-card-advanced-link": "Advanced Search",
"casesearch-search-validation-required": "Required",
"casesearch-search-validation-minlength": "Must be 4 characters or more",
"casescomment-card-title": "Comment on a case",
"casescomment-card-paragraph-one": "Simply search for your case and click on the 'Make Representation' button. The best way to comment on an existing case is to register with us first as that makes it easier to track cases and submit comments.",
"casescomment-card-paragraph-two": "For Householder and Commercial appeals, interested parties are unable to make representations at appeal stage. Any representations made at application stage will be provided by the local planning authority and considered by the Inspector.",
"inspectorate-card-visit-label" : "Visit the Planning Inspectorate",
"inspectorate-card-visit-link": "Home"
"inspectorate-card-visit-link": "Home",
"dns-card-title":"Developments of National Significance",
"dns-card-paragraph":"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. This site is managed by the Planning Inspectorate.",
"dns-card-button":"View all applications"
}
+3 -1
View File
@@ -27,7 +27,9 @@ const Home = (props) => {
<div>
<Head>
<title>
{t("case:page-title")} - {t("common:service-name")}
{t("case:page-title")}:{" "}
{props.currentView.caseReference.currentReference}{" "}
{t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
+85
View File
@@ -0,0 +1,85 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../../components/header";
import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import CaseSummary from "../../components/case";
import Footer from "../../components/footer";
import Errorpage from "../../components/errorpage";
import styles from "../../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Case from "../../components/case";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
<Head>
<title>
{t("case:page-title")} - {t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} props={props} />
<Case
myCases={props.myCases.myCases}
searchResultsObj={
props.searchResultsObj.searchResultsObj
}
searchDetailsObj={
props.searchResultsObj.searchDetailsObj
}
myRepresentations={
props.myRepresentations.myRepresentations
}
watchedCases={props.watchedCases.watchedCases}
awaitingSubmission={
props.awaitingSubmission.awaitingSubmission
}
caseReference={
props.currentView.caseReference.currentReference
}
currentType={
props.currentView.caseReference.currentType
}
/>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
const mapStateToProps = (state) => {
//console.log(state);
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
export default connect(mapStateToProps)(Home);
+129
View File
@@ -0,0 +1,129 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../../components/header";
import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import SearchResults from "../../components/searchresults";
import Footer from "../../components/footer";
import Errorpage from "../../components/errorpage";
import styles from "../../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import data from "../../data/collections.json";
import { setSearch, getSearchObj } from "../../store/search/action";
import {
setSearchResults,
setSearchDetails,
getSearchResultsObj,
} from "../../store/searchOutput/action";
import { getBasicSearch, getBasicSearchDetails } from "../../actions";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
<Head>
<title>
{t("search:page-title")} - {t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} />
<SearchResults
searchString={props.search.searchString}
searchResultsObj={props.searchResultsObj}
/>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ query, req, res }) => {
console.log("query-", query);
// const [searchResultsObj, searchDetailsObj] = await Promise.all(
// await getBasicSearch(query.q),
// await getBasicSearchDetails(query.d)
// );
const searchResultsObj = await getBasicSearch(query.q);
const searchDetailsObj = await getSearchDetails(searchResultsObj);
// console.log(searchDetailsObj);
store.dispatch(setSearchResults(searchResultsObj));
store.dispatch(setSearchDetails(searchDetailsObj));
store.dispatch(setSearch(query.q));
}
);
const getFormCollection = (formtype) => {
const collectionName = jsonpath.query(
data,
"$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName"
);
//console.log(collectionName[0]);
return collectionName[0];
};
const getSearchDetails = (searchResultsObj) => {
//console.log(searchResultsObj);
let detailsArr = [];
searchResultsObj = searchResultsObj.value;
const detailsObj = searchResultsObj.map((searchDetail, index) => {
if (searchDetail.pinswg_appealcasetype == null) {
console.log(searchDetail.ticketnumber);
} else {
detailsArr.push(
getBasicSearchDetails(
getFormCollection(
"pinswg_" +
searchDetail[
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
]
.replace(/[\s\-\+\(\)\,\&\.]/g, "")
.toLowerCase()
),
searchDetail.ticketnumber
)
);
}
});
//console.log(detailsArr);
return Promise.all(detailsArr);
};
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
export default connect(mapStateToProps)(Home);