updated api mocks and new appeal pages

components/myportal/makenewappeal.js

@@ -3,24 +3,30 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
 export default function MakeNewAppeal() {
-  let { t } = useTranslation();
+    let { t } = useTranslation();
 
-  const router = useRouter();
-  const { locale } = router;
-  return (
-    <div className="card card-3" id="casescomment-card">
-      <div className="card-body">
-        <h3 className="heading-small card-heading">
-          {t("myportal:makenewappeal-card-title")}
-        </h3>
-        <p className="govuk-body-s">{t("myportal:makenewappeal-card-paragraph-one")}</p>
-        <p className="govuk-body-s">{t("myportal:makenewappeal-card-paragraph-two")}</p>
-        <div>
-          <Link href="/">
-            <a className="govuk-button">{t("myportal:makenewappeal-card-button-label")}</a>
-          </Link>
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:makenewappeal-card-title")}
+                </h3>
+                <p className="govuk-body-s">
+                    {t("myportal:makenewappeal-card-paragraph-one")}
+                </p>
+                <p className="govuk-body-s">
+                    {t("myportal:makenewappeal-card-paragraph-two")}
+                </p>
+                <div>
+                    <Link href="/newappeal">
+                        <a className="govuk-button">
+                            {t("myportal:makenewappeal-card-button-label")}
+                        </a>
+                    </Link>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }

components/newappeal.js

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import PlanningAppeal from "./newappeal/planningappeal";
+import EnforcementNotice from "./newappeal/enforcementnotice";
+import LDC from "./newappeal/ldc";
+import AdvertApplication from "./newappeal/advertapplication";
+
+export default function NewAppeal({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="flex-container grid-row govuk-body ">
+                        <PlanningAppeal />
+                        <EnforcementNotice />
+                        <LDC />
+                        <AdvertApplication />
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

components/newappeal/advertapplication.js

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeAdvertApplication() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    An appeal relating to an advertisement application or a
+                    discontinuance notice.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal">
+                        <a className="govuk-button">
+                            An advert application/Discontinuance Notice (DN)
+                        </a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/enforcementnotice.js

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeEnforcementNotice() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    Including an enforcement listed building notice.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal">
+                        <a className="govuk-button">A enforcement notice</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/ldc.js

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeLDC() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    An appeal relating to an application for a certificate of
+                    lawful use or development.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal">
+                        <a className="govuk-button">
+                            A Lawful Development Certificate (LDC)
+                        </a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/planningappeal.js

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeNewAppeal() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    This includes all householder applications, full planning
+                    applications, outline planning applications, planning listed
+                    building (LB) applications.
+                </p>
+                <div className="appealCTA">
+                    <Link href="./newappeal/appealtypes/planningappeals78">
+                        <a className="govuk-button">A planning application</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/skiplink.js

@@ -0,0 +1,11 @@
+export default function SkipLink(props) {
+    return (
+        <div id="skiplink-container">
+            <div>
+                <a href="#main-content" className="skiplink govuk-link">
+                    Skip to main content
+                </a>
+            </div>
+        </div>
+    );
+}