initial commit for welsh government planning appeals application

components/myportal/awaitingsubmission.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+
+export default function AwaitingSubmission() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:awatitingsubmission-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/makenewappeal.js

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

components/myportal/mycases.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function MyCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:mycases-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/myrepresentations.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function MyRepresentations() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:myrepresentations-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />{" "}
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/searchcases.js

@@ -0,0 +1,96 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function SearchCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
+            console.log(query);
+            // /searchresults
+
+            router.push({
+                pathname: "/searchresults",
+                query: { q: query },
+            });
+        }
+    };
+
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <form onSubmit={basicSearch}>
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">
+                        {t("myportal:searchcases-card-title")}
+                    </h3>
+                    <div
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
+                        <div id="event-name-hint" className="govuk-hint ">
+                            {t("myportal:searchcases-card-search-hint")}:
+                            <br />
+                            <span className="govuk-body-s">
+                                {" "}
+                                <span className="govuk-!-font-weight-bold">
+                                    {t(
+                                        "myportal:searchcases-card-search-example-label"
+                                    )}
+                                    :
+                                </span>{" "}
+                                CAS-00009-W8N6W4
+                            </span>
+                        </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
+                        <input
+                            className="govuk-input"
+                            id="event-name"
+                            name="event-name"
+                            type="text"
+                            aria-describedby="event-name-hint"
+                            onChange={handleParam(setQuery)}
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <button
+                            type="submit"
+                            name="search"
+                            className="govuk-button"
+                        >
+                            {t("myportal:searchcases-card-button")}
+                        </button>
+                    </div>
+                    <Link href="/advancedsearch">
+                        <a>{t("myportal:searchcases-card-advanced-link")}</a>
+                    </Link>
+                </div>
+            </form>
+        </div>
+    );
+}

components/myportal/topthree.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function TopThree() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+        </>
+    );
+}

components/myportal/watchedcases.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function WatchedCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:watchedcases-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/youraccount.js

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function YourAccount() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <>
+            <div className="card" id="casescomment-card">
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">Your details</h3>
+                    <p className="govuk-body-s">
+                        You can change your address and contact details
+                    </p>
+
+                    <div>
+                        <Link href="/account/personaldetails">
+                            <a className="govuk-button-secondary">
+                                Edit your account details
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <div className="card" id="casescomment-card">
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">
+                        Change your password
+                    </h3>
+                    <p className="govuk-body-s">You can change your password</p>
+
+                    <div>
+                        <Link href="/account/changepassword">
+                            <a className="govuk-button-secondary">
+                                Update your password
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}