Merged PR 388: Case view from mock api

Related work items: #5281

components/breadcrumbs.js

@@ -167,7 +167,11 @@ const Breadcrumbs = (props) => {
                                 </Link>
                             </li>
                             <li className="govuk-breadcrumbs__list-item">
-                                Case Reference: CAS-00010-J9W6L5
+                                Case Reference:{" "}
+                                {
+                                    props.props.currentView.caseReference
+                                        .currentReference
+                                }
                             </li>
                         </>
                     ) : (

components/case.js

@@ -5,7 +5,7 @@ import useTranslation from "next-translate/useTranslation";
 import Summary from "./case/summary";
 import Documents from "./case/documents";
 
-export default function CaseSummary({ children, pages }) {
+const CaseSummary = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -19,10 +19,19 @@ export default function CaseSummary({ children, pages }) {
         >
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
-                    <Summary />
+                    <Summary
+                        myCases={props.myCases}
+                        myRepresentations={props.myRepresentations}
+                        watchedCases={props.watchedCases}
+                        awaitingSubmission={props.awaitingSubmission}
+                        caseReference={props.caseReference}
+                        currentType={props.currentType}
+                    />
                     <Documents />
                 </div>
             </div>
         </main>
     );
-}
+};
+
+export default CaseSummary;

components/case/summary.js

@@ -1,18 +1,38 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
 
-export default function CaseSummary() {
+const CaseSummary = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const {
+        caseReference,
+        myCases,
+        myRepresentations,
+        watchedCases,
+        awaitingSubmission,
+        currentType,
+    } = props;
+
+    let setCaseQueryObj = props[currentType];
+
+    var casesObj = jsonpath.query(
+        setCaseQueryObj,
+        '$..[?(@.reference=="' + caseReference + '")]'
+    );
+
+    casesObj = Object.assign({}, ...casesObj);
+
     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
+                        Reference: {casesObj.reference}
                     </h1>
 
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9">
@@ -21,7 +41,7 @@ export default function CaseSummary() {
                                 {t("case:summary-applicant-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
-                                Mr J Pocknell
+                                {casesObj.appellantApplicant}
                             </dd>
                         </div>
                         <div className="govuk-summary-list__row">
@@ -29,7 +49,7 @@ export default function CaseSummary() {
                                 {t("case:summary-agent-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
-                                Mr Cos Polito
+                                Mr A Agent
                             </dd>
                         </div>
                         <div className="govuk-summary-list__row">
@@ -37,11 +57,12 @@ export default function CaseSummary() {
                                 {t("case:summary-site-address-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
-                                72 Guild Street
+                                {casesObj.address1}
                                 <br />
-                                London
+                                {casesObj.town}
+
                                 <br />
-                                SE23 6FH
+                                {casesObj.postcode}
                             </dd>
                         </div>
                     </dl>
@@ -55,11 +76,12 @@ export default function CaseSummary() {
                                 {t("case:summary-make-representation-label")}
                             </a>
                         </Link>
-                        <Link href="/advancedsearch">
+                        <a
-                            <a className="govuk-button govuk-button--secondary">
+                            onClick={() => router.back()}
-                                {t("case:summary-back-button-label")}
+                            className="govuk-button govuk-button--secondary"
-                            </a>
+                        >
-                        </Link>
+                            {t("case:summary-back-button-label")}
+                        </a>
                     </div>
                 </div>
             </div>
@@ -78,7 +100,9 @@ export default function CaseSummary() {
                                             {t("case:summary-case-type-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Planning Appeal (W){" "}
+                                            {casesObj[
+                                                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                            ] || "N/A"}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -86,7 +110,7 @@ export default function CaseSummary() {
                                             {t("case:summary-lpa-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Hastings Borough Council
+                                            {casesObj.lpaname}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -96,8 +120,7 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Erection of a two-storey chalet
+                                            {casesObj.caseDetails.caseSummary}
-                                            style detached dwelling
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -108,7 +131,7 @@ export default function CaseSummary() {
                                         </dt>
                                         <dd className="govuk-summary-list__value">
                                             {" "}
-                                            Neale Oliver
+                                            {casesObj.caseDetails.caseOfficer}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -116,7 +139,7 @@ export default function CaseSummary() {
                                             {t("case:summary-procedure-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Written representations
+                                            {casesObj.caseDetails.procedure}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -124,7 +147,11 @@ export default function CaseSummary() {
                                             {t("case:summary-status-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            In Progress
+                                            {
+                                                casesObj[
+                                                    "statuscode@OData.Community.Display.V1.FormattedValue"
+                                                ]
+                                            }
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -132,10 +159,14 @@ export default function CaseSummary() {
                                             {t("case:summary-decision-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Allowed
+                                            {casesObj.caseDetails.decision}
+                                            <br />
                                             <Link href="/">
                                                 <a>
-                                                    3272770 Appeal Decision.pdf
+                                                    {
+                                                        casesObj.caseDetails
+                                                            .outcome_document
+                                                    }
                                                 </a>
                                             </Link>
                                         </dd>
@@ -147,7 +178,10 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Not Linked
+                                            {
+                                                casesObj.caseDetails
+                                                    .caseLinkStatus
+                                            }
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -157,7 +191,7 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            0
+                                            {casesObj.caseDetails.linkedCases}
                                         </dd>
                                     </div>
                                 </dl>
@@ -176,7 +210,8 @@ export default function CaseSummary() {
                                             {t("case:summary-start-date-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            26-May-21
+                                            {casesObj.caseDates.start_date ||
+                                                "N/A"}
                                         </dd>
                                     </div>
 
@@ -187,7 +222,8 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            02-Jun-21
+                                            {casesObj.caseDates
+                                                .questionnaireDue || "N/A"}
                                         </dd>
                                     </div>
 
@@ -198,7 +234,8 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            30-Jun-21
+                                            {casesObj.caseDates.statementsDue ||
+                                                "N/A"}
                                         </dd>
                                     </div>
 
@@ -209,7 +246,9 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            30-Jun-21
+                                            {casesObj.caseDates
+                                                .interestedPartyCommentsdue ||
+                                                "N/A"}
                                         </dd>
                                     </div>
 
@@ -220,7 +259,9 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            14-Jul-21
+                                            {casesObj.caseDates
+                                                .appellantLPAFinalCommentsdue ||
+                                                "N/A"}
                                         </dd>
                                     </div>
 
@@ -231,7 +272,8 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            N/A
+                                            {casesObj.caseDates
+                                                .inquiryEvidenceDue || "N/A"}
                                         </dd>
                                     </div>
 
@@ -240,7 +282,8 @@ export default function CaseSummary() {
                                             {t("case:summary-event-date-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Date arranged
+                                            {casesObj.caseDates.eventDate ||
+                                                "N/A"}
                                         </dd>
                                     </div>
 
@@ -251,7 +294,8 @@ export default function CaseSummary() {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            Not yet decided
+                                            {casesObj.caseDates.decisionDate ||
+                                                "N/A"}
                                         </dd>
                                     </div>
                                 </dl>
@@ -273,4 +317,6 @@ export default function CaseSummary() {
             </div> */}
         </div>
     );
-}
+};
+
+export default CaseSummary;

components/footer.js

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState } from "react";
 
 export default function Footer(props) {
     let { t } = useTranslation();
@@ -18,11 +19,80 @@ export default function Footer(props) {
         </li>
     ));
 
+    const [showShareState, setShowShareState] = useState(false);
+
+    let shareState = () => {
+        showShareState == true
+            ? setShowShareState(false)
+            : setShowShareState(true);
+    };
+
     return (
-        <footer className="govuk-footer " role="contentinfo">
+        <>
             <div className="sharebar" id="sharebar">
                 <div className="sharebar__components container-fluid">
                     <div className="main__sharebar">
+                        <div
+                            className={
+                                showShareState
+                                    ? "block-share active"
+                                    : "block-share"
+                            }
+                        >
+                            <button
+                                id="sharePage"
+                                aria-controls="sharePageLinks"
+                                aria-expanded="true"
+                                onClick={() => {
+                                    shareState();
+                                }}
+                            >
+                                Share this page
+                            </button>
+                            <ul
+                                className={
+                                    showShareState
+                                        ? "block-share active"
+                                        : "block-share"
+                                }
+                                id="sharePageLinks"
+                                aria-labelledby="sharePage"
+                            >
+                                <li>
+                                    <a
+                                        href="https://twitter.com/intent/tweet?url=https%3A//gov.wales/"
+                                        className="twitter"
+                                    >
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Twitter
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href="https://www.facebook.com/sharer/sharer.php?u=https%3A//gov.wales/"
+                                        className="facebook"
+                                    >
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Facebook
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href="mailto:?body=https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
+                                        className="email"
+                                    >
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Email
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
                         <div
                             id="sharebar__backtotop"
                             className="btn--outlined btn--arrow-up"
@@ -32,88 +102,99 @@ export default function Footer(props) {
                     </div>
                 </div>
             </div>
-            <div className="govuk-width-container ">
+            <footer className="govuk-footer " role="contentinfo">
-                <div className="govuk-footer__meta">
+                <div className="govuk-width-container ">
-                    <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
+                    <div className="govuk-footer__meta">
-                        <h2 className="govuk-visually-hidden">Support links</h2>
+                        <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
-                        <nav role="navigation" aria-labelledby="footer_links">
+                            <h2 className="govuk-visually-hidden">
-                            <ul
+                                Support links
-                                className="govuk-footer__inline-list"
+                            </h2>
-                                id="footer_links"
+                            <nav
+                                role="navigation"
+                                aria-labelledby="footer_links"
                             >
-                                <li className="govuk-footer__inline-list-item">
+                                <ul
-                                    <a
+                                    className="govuk-footer__inline-list"
-                                        href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
+                                    id="footer_links"
-                                        id="aTermsConds"
+                                >
-                                        className="govuk-footer__link"
+                                    <li className="govuk-footer__inline-list-item">
-                                        target="_blank"
+                                        <a
-                                        rel="noreferrer"
+                                            href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
-                                    >
+                                            id="aTermsConds"
-                                        {t(
+                                            className="govuk-footer__link"
-                                            "common:footer-terms-conditions-link"
+                                            target="_blank"
-                                        )}
+                                            rel="noreferrer"
-                                    </a>
+                                        >
-                                </li>
+                                            {t(
-                                <li className="govuk-footer__inline-list-item">
+                                                "common:footer-terms-conditions-link"
-                                    <a
+                                            )}
-                                        href="https://www.gov.uk/government/publications/planning-inspectorate-privacy-notices"
+                                        </a>
-                                        id="aPrivacy"
+                                    </li>
-                                        className="govuk-footer__link"
+                                    <li className="govuk-footer__inline-list-item">
-                                        target="_blank"
+                                        <a
-                                        rel="noreferrer"
+                                            href="https://www.gov.uk/government/publications/planning-inspectorate-privacy-notices"
-                                    >
+                                            id="aPrivacy"
-                                        {t("common:footer-privacy-link")}
+                                            className="govuk-footer__link"
-                                    </a>
+                                            target="_blank"
-                                </li>
+                                            rel="noreferrer"
-                                <li className="govuk-footer__inline-list-item">
+                                        >
-                                    <a
+                                            {t("common:footer-privacy-link")}
-                                        href="https://www.gov.uk/guidance/appeals-casework-portal-privacy-cookies"
+                                        </a>
-                                        id="aCookies"
+                                    </li>
-                                        className="govuk-footer__link"
+                                    <li className="govuk-footer__inline-list-item">
-                                        target="_blank"
+                                        <a
-                                        rel="noreferrer"
+                                            href="https://www.gov.uk/guidance/appeals-casework-portal-privacy-cookies"
-                                    >
+                                            id="aCookies"
-                                        {t("common:footer-cookies-link")}
+                                            className="govuk-footer__link"
-                                    </a>
+                                            target="_blank"
-                                </li>
+                                            rel="noreferrer"
-                                <li className="govuk-footer__inline-list-item">
+                                        >
-                                    <a
+                                            {t("common:footer-cookies-link")}
-                                        href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
+                                        </a>
-                                        className="govuk-footer__link"
+                                    </li>
-                                        id="aAccess"
+                                    <li className="govuk-footer__inline-list-item">
-                                        target="_blank"
+                                        <a
-                                        rel="noreferrer"
+                                            href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
-                                    >
+                                            className="govuk-footer__link"
-                                        {t("common:footer-accessibility-link")}
+                                            id="aAccess"
-                                    </a>
+                                            target="_blank"
-                                </li>
+                                            rel="noreferrer"
-                                <li className="govuk-footer__inline-list-item">
+                                        >
-                                    <a
+                                            {t(
-                                        href="http://www.gov.uk/guidance/feedback"
+                                                "common:footer-accessibility-link"
-                                        id="feedback"
+                                            )}
-                                        target="_blank"
+                                        </a>
-                                        rel="noreferrer"
+                                    </li>
-                                    >
+                                    <li className="govuk-footer__inline-list-item">
-                                        {t("common:footer-feedback-link")}
+                                        <a
-                                    </a>
+                                            href="http://www.gov.uk/guidance/feedback"
-                                </li>
+                                            id="feedback"
-                            </ul>
+                                            target="_blank"
-                        </nav>
+                                            rel="noreferrer"
-                        <div
+                                        >
-                            className="footer_logo container-fluid"
+                                            {t("common:footer-feedback-link")}
-                            id="footer_logo"
+                                        </a>
-                        >
+                                    </li>
-                            <a
+                                </ul>
-                                href="https://gov.wales/"
+                            </nav>
-                                className="footer__logo"
+                            <div
-                                id="footerlogo"
+                                className="footer_logo container-fluid"
+                                id="footer_logo"
                             >
-                                <span className="visually-hidden">Home</span>
+                                <a
-                            </a>
+                                    href="https://gov.wales/"
+                                    className="footer__logo"
+                                    id="footerlogo"
+                                >
+                                    <span className="visually-hidden">
+                                        Home
+                                    </span>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </footer>
-        </footer>
+        </>
     );
 }

components/loading.js

@@ -11,7 +11,7 @@ export default function SkipLink(props) {
             </Head>
 
             <div className="">
-                <Header courseName="Appeals Casework Portal" />
+                <Header courseName="Planning Casework Portal" />
                 <div className="govuk-width-container">
                     <Banner />
                     <main

components/myportal/awaitingsubmission.js

@@ -23,6 +23,7 @@ const AwaitingSubmission = (props) => {
                         showTopThree={
                             props.awaitingSubmission.awaitingSubmission
                         }
+                        topThreeType={"awaitingSubmission"}
                     />
                 </div>
                 <div className="cardVieAll">

components/myportal/mycases.js

@@ -18,7 +18,10 @@ const MyCases = (props) => {
                     {t("myportal:mycases-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree showTopThree={props.myCases.myCases} />
+                    <TopThree
+                        showTopThree={props.myCases.myCases}
+                        topThreeType={"myCases"}
+                    />
                 </div>
 
                 <div className="cardVieAll">

components/myportal/myrepresentations.js

@@ -21,6 +21,7 @@ const MyRepresentations = (props) => {
                 <div className="cardModuleContainer">
                     <TopThree
                         showTopThree={props.myRepresentations.myRepresentations}
+                        topThreeType={"myRepresentations"}
                     />
                 </div>
 

components/myportal/topthree.js

@@ -1,35 +1,73 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { setCurrentReference } from "../../store/currentView/action";
+import { connect } from "react-redux";
 
 const TopThree = (props) => {
     let { t } = useTranslation();
-    const { showTopThree } = props;
+    const { showTopThree, setCurrentReference, topThreeType } = props;
 
     const router = useRouter();
     const { locale } = router;
 
     let topthreeRow = [];
 
-    for (var i = 0; i < 3; i++)
+    for (var i = 0; i < 3; i++) {
-        topthreeRow.push(
+        (function (i) {
-            <div className="cardModuleItem" key={i}>
+            topthreeRow.push(
-                <div className="cardModuleDetails">
+                <div className="cardModuleItem" key={i}>
-                    <div className="cardModuleReference">
+                    <div className="cardModuleDetails">
-                        <b>Case reference:</b>{" "}
+                        <div className="cardModuleReference">
-                        <Link href="/case">
+                            <b>Case reference:</b>{" "}
-                            <a>{props.showTopThree.value[i].reference}</a>
+                            <Link href="/case">
-                        </Link>
+                                <a
-                    </div>
+                                    data-id={i}
-                    <div className="carModuleAddress">
+                                    onClick={() => {
-                        <b>Address: </b> {props.showTopThree.value[i].address}
+                                        setCurrentReference({
+                                            "currentReference":
+                                                showTopThree.value[i].reference,
+                                            "currentType": topThreeType,
+                                        });
+                                    }}
+                                >
+                                    {showTopThree.value[i].reference}
+                                </a>
+                            </Link>
+                        </div>
+                        {topThreeType != "awaitingSubmission" ? (
+                            <div className="carModuleAddress">
+                                <b>Address: </b>
+                                {showTopThree.value[i].address1}
+                            </div>
+                        ) : (
+                            ""
+                        )}
+
+                        {topThreeType == "awaitingSubmission" ? (
+                            <div className="carModuleAddress">
+                                Make Representation on Case Incomplete, not
+                                submitted
+                            </div>
+                        ) : (
+                            ""
+                        )}
                     </div>
+                    <div className="cardModuleRemoveCase"> &mdash;</div>
                 </div>
-                <div className="cardModuleRemoveCase"> &mdash;</div>
+            );
-            </div>
+        })(i);
-        );
+    }
 
     return <>{topthreeRow}</>;
 };
 
-export default TopThree;
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentReference: (currentReference) => {
+            dispatch(setCurrentReference(currentReference));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(TopThree);

components/myportal/watchedcases.js

@@ -19,7 +19,10 @@ const WatchedCases = (props) => {
                     {t("myportal:watchedcases-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree showTopThree={props.watchedCases.watchedCases} />
+                    <TopThree
+                        showTopThree={props.watchedCases.watchedCases}
+                        topThreeType={"watchedCases"}
+                    />
                 </div>
 
                 <div className="cardVieAll">

components/searchresults.js

@@ -20,7 +20,10 @@ export default function Search(props) {
         >
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
-                    <SearchResults searchString={searchString} searchResultsObj={searchResultsObj}/>
+                    <SearchResults
+                        searchString={searchString}
+                        searchResultsObj={searchResultsObj}
+                    />
                 </div>
             </div>
             <div className="govuk-grid-row">
@@ -31,13 +34,12 @@ export default function Search(props) {
                                 {t("search:searchresults-search-button-label")}
                             </a>
                         </Link>
-                        <Link href="/advancedsearch">
+                        <a
-                            <a className="govuk-button govuk-button--secondary">
+                            onClick={() => router.back()}
-                                {t(
+                            className="govuk-button govuk-button--secondary"
-                                    "search:searchresults-new-search-button-label"
+                        >
-                                )}
+                            {t("search:searchresults-new-search-button-label")}
-                            </a>
+                        </a>
-                        </Link>
                     </div>
                 </div>
             </div>

pages/404.js

@@ -1,13 +1,42 @@
 // 404.js
 import Link from "next/link";
+import Head from "next/head";
+import Header from "../components/header";
+import Banner from "../components/banner";
+import CookieBanner from "../components/cookieBanner";
+import useTranslation from "next-translate/useTranslation";
+import Footer from "../components/footer";
+
+const FourOhFour = (props) => {
+    let { t, lang } = useTranslation();
+    const { footerLinks, pages } = props;
 
-export default function FourOhFour() {
     return (
-        <>
+        <div>
-            <h1>404 - Page Not Found</h1>
+            <Head>
-            <Link href="/">
+                <title>
-                <a>Go back home</a>
+                    {t("case:page-title")} - {t("common:service-name")}
-            </Link>
+                </title>
-        </>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container govuk-!-padding-bottom-9">
+                    <main class="govuk-main-wrapper govuk-!-padding-top-9 govuk-!-padding-bottom-9">
+                        <div class="govuk-grid-row">
+                            <div class="govuk-grid-column-two-thirds ">
+                                <h1>404 - Page Not Found</h1>
+                                <Link href="/">
+                                    <a>Go back home</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
     );
-}
+};
+
+export default FourOhFour;

pages/api/lookups/awaitingSubmission.js

@@ -11,6 +11,33 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00017-B8X7N0",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue": "",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary": "",
+                    "caseOfficer": "",
+                    "procedure": "",
+                    "status": "",
+                    "decision": "",
+                    "outcome_document": "",
+                    "caseLinkStatus": "",
+                    "linkedCases": "",
+                },
+                "caseDates": {
+                    "start_date": "",
+                    "questionnaireDue": "",
+                    "statementsDue": "",
+                    "interestedPartyCommentsdue": "",
+                    "appellantLPAFinalCommentsdue": "",
+                    "inquiryEvidenceDue": "",
+                    "eventDate": "",
+                    "decisionDate": "",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -21,6 +48,34 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00016-Y9K9Q0",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary": "",
+                    "caseOfficer": "",
+                    "procedure": "",
+                    "status": "",
+                    "decision": "",
+                    "outcome_document": "",
+                    "caseLinkStatus": "",
+                    "linkedCases": "",
+                },
+                "caseDates": {
+                    "start_date": "",
+                    "questionnaireDue": "",
+                    "statementsDue": "",
+                    "interestedPartyCommentsdue": "",
+                    "appellantLPAFinalCommentsdue": "",
+                    "inquiryEvidenceDue": "",
+                    "eventDate": "",
+                    "decisionDate": "",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -31,6 +86,34 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00011-K1N0J8",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary": "",
+                    "caseOfficer": "",
+                    "procedure": "",
+                    "status": "",
+                    "decision": "",
+                    "outcome_document": "",
+                    "caseLinkStatus": "",
+                    "linkedCases": "",
+                },
+                "caseDates": {
+                    "start_date": "",
+                    "questionnaireDue": "",
+                    "statementsDue": "",
+                    "interestedPartyCommentsdue": "",
+                    "appellantLPAFinalCommentsdue": "",
+                    "inquiryEvidenceDue": "",
+                    "eventDate": "",
+                    "decisionDate": "",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -41,6 +124,34 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00015-L7J9H1",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary": "",
+                    "caseOfficer": "",
+                    "procedure": "",
+                    "status": "",
+                    "decision": "",
+                    "outcome_document": "",
+                    "caseLinkStatus": "",
+                    "linkedCases": "",
+                },
+                "caseDates": {
+                    "start_date": "",
+                    "questionnaireDue": "",
+                    "statementsDue": "",
+                    "interestedPartyCommentsdue": "",
+                    "appellantLPAFinalCommentsdue": "",
+                    "inquiryEvidenceDue": "",
+                    "eventDate": "",
+                    "decisionDate": "",
+                },
             },
         ],
     });

pages/api/lookups/myCases.js

@@ -3,7 +3,7 @@ const ApiResponse = (req, res) => {
     res.json({
         "value": [
             {
-                "@odata.etag": 'W/"547952"',
+                "@odata.etag": "W547952",
                 "lpaname": "Vale of Glamorgan Council",
                 "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
                 "address1": "21 Courtenay Road",
@@ -17,9 +17,32 @@ const ApiResponse = (req, res) => {
                 "statuscode@OData.Community.Display.V1.FormattedValue":
                     "In Progress",
                 "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
-                "@odata.etag": 'W/"547952"',
+                "@odata.etag": "W547952",
                 "lpaname": "Bridgend CBC",
                 "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
                 "address1": "17 Colin Way",
@@ -33,10 +56,33 @@ const ApiResponse = (req, res) => {
                 "statuscode@OData.Community.Display.V1.FormattedValue":
                     "In Progress",
                 "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
-                "@odata.etag": 'W/"547952"',
+                "@odata.etag": "W547952",
-                "lpaname": "Cardiff County Council	Planning (A)",
+                "lpaname": "Cardiff County Council Planning (A)",
                 "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
                 "address1": "120 Severn Grove",
                 "town": "Cardiff",
@@ -49,10 +95,33 @@ const ApiResponse = (req, res) => {
                 "statuscode@OData.Community.Display.V1.FormattedValue":
                     "In Progress",
                 "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
-                "@odata.etag": 'W/"547952"',
+                "@odata.etag": "W547952",
-                "lpaname": "Cardiff County Council	Planning",
+                "lpaname": "Cardiff County Council Planning",
                 "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
                 "address1": "25 Merches Gardens",
                 "town": "Cardiff",
@@ -65,6 +134,29 @@ const ApiResponse = (req, res) => {
                 "statuscode@OData.Community.Display.V1.FormattedValue":
                     "In Progress",
                 "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
         ],
     });

pages/api/lookups/myRepresentations.js

@@ -11,6 +11,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00009-W8N6W4",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -21,6 +50,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00010-J9W6L5",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -31,6 +89,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00011-K1N0J8",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -41,6 +128,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00012-D9W6S8",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
         ],
     });

pages/api/lookups/watchedCases.js

@@ -11,6 +11,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00009-W8N6W4",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -21,6 +50,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00010-J9W6L5",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -31,6 +89,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00011-K1N0J8",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
             {
                 "@odata.etag": 'W/"547952"',
@@ -41,6 +128,35 @@ const ApiResponse = (req, res) => {
                 "postcode": "CF24 0JL",
                 "reference": "CAS-00012-D9W6S8",
                 "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+                "caseDetails": {
+                    "casetype": "",
+                    "lpa": "",
+                    "caseSummary":
+                        "Erection of a two-storey chalet style detached dwelling",
+                    "caseOfficer": "Neale Oliver",
+                    "procedure": "Written representations",
+                    "status": "In progress",
+                    "decision": "Allowed",
+                    "outcome_document": "23424Appeal Decision.pdf",
+                    "caseLinkStatus": "not linked",
+                    "linkedCases": "none",
+                },
+                "caseDates": {
+                    "start_date": "26-May-21",
+                    "questionnaireDue": "02-Jun-21",
+                    "statementsDue": "30-Jun-21",
+                    "interestedPartyCommentsdue": "30-Jun-21",
+                    "appellantLPAFinalCommentsdue": "4-Jul-21",
+                    "inquiryEvidenceDue": "N/A",
+                    "eventDate": "Date arranged",
+                    "decisionDate": "Not yet decided",
+                },
             },
         ],
     });

pages/case.js

@@ -35,8 +35,23 @@ const Home = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
                     <Banner />
-                    <Breadcrumbs slug={appealtypes} />
+                    <Breadcrumbs slug={appealtypes} props={props} />
-                    <Case />
+                    <Case
+                        myCases={props.myCases.myCases}
+                        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>
@@ -44,38 +59,21 @@ const Home = (props) => {
     );
 };
 
-// export const getServerSideProps = wrapper.getServerSideProps(
+const mapStateToProps = (state) => {
-//   async ({ locale, store, req, res }) => {
+    //console.log(state);
-//     const token = await getToken();
-//     let accessToken = token.access_token;
 
-//     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
+    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,
+    };
+};
 
-//     const [pages, footerLinks, courseListContent] = await Promise.all([
+export default connect(mapStateToProps)(Home);
-//       await getPages(accessToken, locale),
-//       await getFooterLinks(accessToken, locale),
-//       await getCourseList(accessToken, locale),
-//     ]);
-//     //const courseID = await getCourseID
-//     store.dispatch(setApiRoot(apiRoot));
-//     store.dispatch(setPages(pages));
-//     store.dispatch(setFooterLinks(footerLinks));
-//     store.dispatch(setCourseListContent(courseListContent));
-//   }
-// );
-
-// const mapStateToProps = (state) => {
-//   //console.log(state);
-
-//   return {
-//     apiroot: state.apiroot,
-//     courseListContent: state.courseListContent.courseListContent,
-//     pages: state.pages.pages,
-//     footerLinks: state.footerLinks.footerLinks,
-//     regions: state.regions,
-//     sectors: state.sectors,
-//     form: state.form,
-//   };
-// };
-
-export default Home; //connect(mapStateToProps)(Home);

pages/index.js

@@ -40,27 +40,4 @@ const Home = (props) => {
     );
 };
 
-// export const getServerSideProps = wrapper.getServerSideProps(
-//     (store) =>
-//         async ({ query, req, res }) => {
-//             const incidents = await getIncidents;
-//             console.log(incidents);
-//         }
-// );
-
-
-// const mapStateToProps = (state) => {
-//   //console.log(state);
-
-//   return {
-//     apiroot: state.apiroot,
-//     courseListContent: state.courseListContent.courseListContent,
-//     pages: state.pages.pages,
-//     footerLinks: state.footerLinks.footerLinks,
-//     regions: state.regions,
-//     sectors: state.sectors,
-//     form: state.form,
-//   };
-// };
-
 export default Home; //connect(mapStateToProps)(Home);

pages/myportal/index.js

@@ -93,6 +93,7 @@ const mapStateToProps = (state) => {
     //console.log(state);
 
     return {
+        currentView: state.currentView,
         search: state.search,
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,

pages/searchresults.js

@@ -63,39 +63,10 @@ export const getServerSideProps = wrapper.getServerSideProps(
         }
 );
 
-// export const getServerSideProps = wrapper.getServerSideProps(
-//     async ({ locale, store, query, req, res }) => {
-//         //     const token = await getToken();
-//         //     let accessToken = token.access_token;
-
-//         //     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
-
-//         //     const [pages, footerLinks, courseListContent] = await Promise.all([
-//         //       await getPages(accessToken, locale),
-//         //       await getFooterLinks(accessToken, locale),
-//         //       await getCourseList(accessToken, locale),
-//         //     ]);
-//         //     //const courseID = await getCourseID
-//         //     store.dispatch(setApiRoot(apiRoot));
-//         //     store.dispatch(setPages(pages));
-//         //     store.dispatch(setFooterLinks(footerLinks));
-//         //     store.dispatch(setCourseListContent(courseListContent));
-//         console.log(query);
-//         //store.dispatch(setSearch(query.search));
-//     }
-// );
-
 const mapStateToProps = (state) => {
     return {
         search: state.search,
         searchResultsObj: state.searchResultsObj,
-        //         //     apiroot: state.apiroot,
-        //         //     courseListContent: state.courseListContent.courseListContent,
-        //         //     pages: state.pages.pages,
-        //         //     footerLinks: state.footerLinks.footerLinks,
-        //         //     regions: state.regions,
-        //         //     sectors: state.sectors,
-        //         //     form: state.form,
     };
 };
 

pages/viewall.js

@@ -63,28 +63,6 @@ export const getServerSideProps = wrapper.getServerSideProps(
         }
 );
 
-// export const getServerSideProps = wrapper.getServerSideProps(
-//     async ({ locale, store, query, req, res }) => {
-//         //     const token = await getToken();
-//         //     let accessToken = token.access_token;
-
-//         //     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
-
-//         //     const [pages, footerLinks, courseListContent] = await Promise.all([
-//         //       await getPages(accessToken, locale),
-//         //       await getFooterLinks(accessToken, locale),
-//         //       await getCourseList(accessToken, locale),
-//         //     ]);
-//         //     //const courseID = await getCourseID
-//         //     store.dispatch(setApiRoot(apiRoot));
-//         //     store.dispatch(setPages(pages));
-//         //     store.dispatch(setFooterLinks(footerLinks));
-//         //     store.dispatch(setCourseListContent(courseListContent));
-//         console.log(query);
-//         //store.dispatch(setSearch(query.search));
-//     }
-// );
-
 const mapStateToProps = (state) => {
     return {
         search: state.search,

store/currentView/action.js

@@ -1,6 +1,7 @@
 export const currentViewActionTypes = {
     GETCURRENTVIEW: "GETCURRENTVIEW",
     SETCURRENTVIEW: "SETCURRENTVIEW",
+    SETCURRENTREFERENCE: "SETCURRENTREFERENCE",
 };
 
 export const getCurrentViewObj = () => (dispatch) => {
@@ -15,3 +16,10 @@ export const setCurrentView = (currentView) => (dispatch) => {
         currentView: currentView,
     });
 };
+
+export const setCurrentReference = (caseReference) => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.SETCURRENTREFERENCE,
+        caseReference: caseReference,
+    });
+};

store/currentView/reducer.js

@@ -2,6 +2,7 @@ import { currentViewActionTypes } from "./action";
 
 const currentViewInitialState = {
     currentView: {},
+    caseReference: {},
 };
 
 export default function reducer(state = currentViewInitialState, action) {
@@ -11,6 +12,11 @@ export default function reducer(state = currentViewInitialState, action) {
                 ...state,
                 currentView: action.currentView,
             };
+        case currentViewActionTypes.SETCURRENTREFERENCE:
+            return {
+                ...state,
+                caseReference: action.caseReference,
+            };
         default:
             return state;
     }

styles/sass/welshgov/_application.scss

@@ -6,10 +6,11 @@ html {
 .govuk-body,
 .govuk-body-s,
 .govuk-body-m,
+.govuk-footer,
 .govuk-heading-xl,
 .govuk-heading-l,
 .govuk-heading-m,
-s .govuk-header-l,
+.govuk-header-l,
 .govuk-header-m,
 .govuk-header__link,
 .govuk-button,
@@ -30,6 +31,14 @@ a {
     background-color: #323232;
 }
 
+.govuk-breadcrumbs__link:link,
+.govuk-breadcrumbs__link:visited {
+    color: #0360a6;
+    font-weight: bold;
+    text-decoration: none;
+    font-size: 16px;
+}
+
 .govuk-grid-row {
     @media screen and (max-width: 900px) {
         // margin-right: 0px;
@@ -69,6 +78,14 @@ a {
     margin-right: auto;
     padding-left: 60px;
     padding-right: 20px;
+
+    @media screen and (max-width: 1024px) {
+        padding-left: 20px;
+    }
+    @media screen and (max-width: 376px) {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
 }
 
 .btn--arrow-up a {
@@ -243,6 +260,8 @@ a {
 
 .govuk-footer {
     padding-top: 0px;
+    padding: 70px 0 0 0;
+    border: none;
 }
 
 #footer_logo {
@@ -377,3 +396,261 @@ a {
     font-size: 1.1875rem;
     line-height: 1.3157894737;
 }
+
+//sharebar
+
+.btn--arrow-up a {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
+    background-size: 18px 13px;
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    padding-left: 36px;
+    margin-top: 1px;
+}
+
+.btn--arrow-hero a:hover {
+    color: #fff !important;
+}
+
+ul#sharePageLinks {
+    display: none;
+}
+
+ul#sharePageLinks.active {
+    display: block;
+    border: none;
+}
+
+.block-share button,
+.block-share h2 {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    padding: 12px 12px 12px 36px;
+    margin: 0;
+    color: #323232;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 17px;
+    line-height: 1.0625rem;
+    letter-spacing: -0.0208333333rem;
+    font-weight: bold;
+    float: left;
+    z-index: 2;
+    position: relative;
+    background-color: inherit;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 10px 10px;
+    background-size: 20px 20px;
+}
+
+.vo_hidden,
+.page-node-type-global-keyword-search
+    .main__body-content
+    #block-govwales-content
+    .components__form
+    form
+    .form-item
+    label,
+.header__components .components__form form .form-item label {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    width: 1px;
+    position: absolute;
+}
+
+.block-share {
+    position: relative;
+    float: left;
+    margin-right: 20px;
+    border: 1px solid #999999;
+}
+
+@media screen and (min-width: 480px) {
+    .main__sharebar > div {
+        margin-bottom: 0;
+    }
+}
+.block-share.active {
+    border: 1px solid #999999;
+    background-color: #cccccc;
+    @media screen and (max-width: 376px) {
+        margin-right: 0px;
+        margin-bottom: 20px;
+    }
+}
+
+.block-share ul {
+    margin: 0;
+    padding: 0;
+    float: left;
+    z-index: 1;
+    position: relative;
+}
+
+.block-share ul li {
+    display: inline-block;
+    margin: 10px 15px;
+    padding: 0;
+}
+
+.block-share ul li a {
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 20px;
+    line-height: 1.25rem;
+    display: block;
+    padding-top: 2px;
+    padding-left: 25px;
+    height: 24px;
+    color: #0360a6;
+}
+
+.block-share ul li a {
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 20px;
+    line-height: 1.25rem;
+    display: block;
+    padding-top: 2px;
+    padding-left: 25px;
+    height: 24px;
+    background-color: inherit;
+    color: #0360a6;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+@media (min-width: 480px) {
+    .block-share ul li a {
+        background-size: 20px 20px;
+        background-position: 0 2px;
+    }
+}
+.block-share ul li a,
+.block-share-top ul li a,
+.page-header__block-share__list ul li a,
+.page-header__block-share ul li a {
+    background-size: 20px 20px;
+    background-position: 0 6px;
+    height: 22px;
+    display: block;
+    @media (max-width: 376px) {
+        background-position: 0 2px;
+    }
+}
+
+.block-share ul li a:hover,
+.block-share-top ul li a:hover,
+.page-header__block-share__list ul li a:hover,
+.page-header__block-share ul li a:hover {
+    background-size: 20px 20px;
+    background-position: 0 6px;
+    @media (max-width: 376px) {
+        background-position: 0 2px;
+    }
+}
+
+@media all and (min-width: 480px) {
+    .block-share ul li a,
+    .block-share-top ul li a,
+    .page-header__block-share__list ul li a,
+    .page-header__block-share ul li a {
+        background-size: 20px 20px;
+        background-position: 0 2px;
+    }
+
+    .block-share ul li a:hover,
+    .block-share-top ul li a:hover,
+    .page-header__block-share__list ul li a:hover,
+    .page-header__block-share ul li a:hover {
+        background-size: 20px 20px;
+        background-position: 0px 2px;
+    }
+}
+
+.block-share ul li a:focus,
+.block-share-top ul li a:focus,
+.page-header__block-share__list ul li a:focus,
+.page-header__block-share ul li a:focus {
+    -webkit-box-shadow: 0 0 #ffd530, 0 2px #1f1f1f;
+    box-shadow: 0 0 #ffd530, 0 2px #1f1f1f;
+}
+
+.block-share ul li a.twitter,
+.block-share-top ul li a.twitter,
+.page-header__block-share__list ul li a.twitter,
+.page-header__block-share ul li a.twitter {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM16,6.9v.4a8.79,8.79,0,0,1-8.7,8.8,9,9,0,0,1-4.8-1.4h.7A6.46,6.46,0,0,0,7,13.4a3.13,3.13,0,0,1-2.9-2.1c.2,0,.4.1.6.1a2.2,2.2,0,0,0,.8-.1A3.1,3.1,0,0,1,3,8.3H3a4,4,0,0,0,1.5.3,3.05,3.05,0,0,1-1-4.1A8.86,8.86,0,0,0,9.9,7.7,3,3,0,0,1,12.2,4a3.06,3.06,0,0,1,2.9.9,5,5,0,0,0,2-.8,2.91,2.91,0,0,1-1.4,1.7,6.07,6.07,0,0,0,1.8-.5A4.63,4.63,0,0,1,16,6.9Z%22 style=%22fill:%230360a6%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.twitter:hover,
+.block-share-top ul li a.twitter:hover,
+.page-header__block-share__list ul li a.twitter:hover,
+.page-header__block-share ul li a.twitter:hover {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM16,6.9v.4a8.79,8.79,0,0,1-8.7,8.8,9,9,0,0,1-4.8-1.4h.7A6.46,6.46,0,0,0,7,13.4a3.13,3.13,0,0,1-2.9-2.1c.2,0,.4.1.6.1a2.2,2.2,0,0,0,.8-.1A3.1,3.1,0,0,1,3,8.3H3a4,4,0,0,0,1.5.3,3.05,3.05,0,0,1-1-4.1A8.86,8.86,0,0,0,9.9,7.7,3,3,0,0,1,12.2,4a3.06,3.06,0,0,1,2.9.9,5,5,0,0,0,2-.8,2.91,2.91,0,0,1-1.4,1.7,6.07,6.07,0,0,0,1.8-.5A4.63,4.63,0,0,1,16,6.9Z%22 style=%22fill:%233b7dc5%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.twitter:focus,
+.block-share-top ul li a.twitter:focus,
+.page-header__block-share__list ul li a.twitter:focus,
+.page-header__block-share ul li a.twitter:focus {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM16,6.9v.4a8.79,8.79,0,0,1-8.7,8.8,9,9,0,0,1-4.8-1.4h.7A6.46,6.46,0,0,0,7,13.4a3.13,3.13,0,0,1-2.9-2.1c.2,0,.4.1.6.1a2.2,2.2,0,0,0,.8-.1A3.1,3.1,0,0,1,3,8.3H3a4,4,0,0,0,1.5.3,3.05,3.05,0,0,1-1-4.1A8.86,8.86,0,0,0,9.9,7.7,3,3,0,0,1,12.2,4a3.06,3.06,0,0,1,2.9.9,5,5,0,0,0,2-.8,2.91,2.91,0,0,1-1.4,1.7,6.07,6.07,0,0,0,1.8-.5A4.63,4.63,0,0,1,16,6.9Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E ");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.facebook,
+.block-share-top ul li a.facebook,
+.page-header__block-share__list ul li a.facebook,
+.page-header__block-share ul li a.facebook {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Efacebook%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM15.6,5.1a.27.27,0,0,1-.3.3H14c-.9,0-1.1.3-1.1,1V7.9h2.3a.27.27,0,0,1,.3.3h0v2.5a.27.27,0,0,1-.3.3H12.9v6.2a.27.27,0,0,1-.3.3H10a.27.27,0,0,1-.3-.3V11h-2a.27.27,0,0,1-.3-.3h0V8.2a.27.27,0,0,1,.3-.3h2V6.2a3.45,3.45,0,0,1,3.1-3.7h2.4a.27.27,0,0,1,.3.3h0Z%22 style=%22fill:%230360a6%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.facebook:hover,
+.block-share-top ul li a.facebook:hover,
+.page-header__block-share__list ul li a.facebook:hover,
+.page-header__block-share ul li a.facebook:hover {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Efacebook_on%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM15.6,5.1a.27.27,0,0,1-.3.3H14c-.9,0-1.1.3-1.1,1V7.9h2.3a.27.27,0,0,1,.3.3h0v2.5a.27.27,0,0,1-.3.3H12.9v6.2a.27.27,0,0,1-.3.3H10a.27.27,0,0,1-.3-.3V11h-2a.27.27,0,0,1-.3-.3h0V8.2a.27.27,0,0,1,.3-.3h2V6.2a3.45,3.45,0,0,1,3.1-3.7h2.4a.27.27,0,0,1,.3.3h0Z%22 style=%22fill:%233b7dc5%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.facebook:focus,
+.block-share-top ul li a.facebook:focus,
+.page-header__block-share__list ul li a.facebook:focus,
+.page-header__block-share ul li a.facebook:focus {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Efacebook%3C/title%3E%3Cpath d=%22M0,0V20H20V0ZM15.6,5.1a.27.27,0,0,1-.3.3H14c-.9,0-1.1.3-1.1,1V7.9h2.3a.27.27,0,0,1,.3.3h0v2.5a.27.27,0,0,1-.3.3H12.9v6.2a.27.27,0,0,1-.3.3H10a.27.27,0,0,1-.3-.3V11h-2a.27.27,0,0,1-.3-.3h0V8.2a.27.27,0,0,1,.3-.3h2V6.2a3.45,3.45,0,0,1,3.1-3.7h2.4a.27.27,0,0,1,.3.3h0Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E ");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.email,
+.block-share-top ul li a.email,
+.page-header__block-share__list ul li a.email,
+.page-header__block-share ul li a.email {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%230360a6%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%230360a6%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.email:hover,
+.block-share-top ul li a.email:hover,
+.page-header__block-share__list ul li a.email:hover,
+.page-header__block-share ul li a.email:hover {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat_on%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%233b7dc5%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%233b7dc5%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.email:focus,
+.block-share-top ul li a.email:focus,
+.page-header__block-share__list ul li a.email:focus,
+.page-header__block-share ul li a.email:focus {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%23111%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E ");
+    background-repeat: no-repeat;
+}