Merged PR 534: pagination for documents seo head meta refactor

pagination for documents seo head meta refactor Related work items: #6312, #6439
2021-10-22 12:24:45 +00:00
parent c388aec21f 346cefd1bb
commit 7d0ccf481d
31 changed files with 1478 additions and 533 deletions
@@ -137,9 +137,11 @@ export const getBasicSearch = (token, searchString) => {
    return axios
        .get(
            WEBAPI_URL +
-                "incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=contains(title, '" +
+                "incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=(contains(title, '" +
                searchString +
-                "') and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true",
+                "') or contains(ticketnumber, '" +
+                searchString +
+                "')) and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true",
            azureHeadersPaged(token)
        )
        .then((res) => {
@@ -163,9 +165,11 @@ export const getBasicSearchPaged = (searchString, pageNumber) => {
    console.log(typeof pageNumber != "undefined");
    return axios
        .get(
-            "/api/proxy/incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=contains(title, '" +
+            "/api/proxy/incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=(contains(title, '" +
                searchString +
-                "') and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" +
+                "') or contains(ticketnumber, '" +
+                searchString +
+                "')) and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" +
                (typeof pageNumber != "undefined"
                    ? "&$skiptoken=" +
                      encodeURI('<cookie pagenumber="' + pageNumber + '" />')
@@ -218,13 +222,17 @@ export const getBasicDNSSearchPaged = (pageNumber) => {
 };

 export const getAdvancedSearch = (token, searchString) => {
-    //console.log(searchString.caseReference);
+    console.log(searchString.caseReference);

    var queryString = "";

    queryString +=
        searchString.q != null
-            ? "contains(title, '" + searchString.q + "') "
+            ? "(contains(title, '" +
+              searchString.q +
+              "') or contains(ticketnumber,'" +
+              searchString.q +
+              "'))"
            : "";

    queryString +=
@@ -248,7 +256,7 @@ export const getAdvancedSearch = (token, searchString) => {
            WEBAPI_URL +
                "incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=" +
                queryString +
-                " and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true&$top=201",
+                " and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true",

            azureHeadersPaged(token)
        )
@@ -265,14 +273,18 @@ export const getAdvancedSearch = (token, searchString) => {
 };

 export const getAdvancedSearchPaged = (searchString, pageNumber) => {
-    console.log(searchString);
+    //console.log(searchString);
    var token = getSASToken();

    var queryString = "";

    queryString +=
        searchString.q != null
-            ? "contains(title, '" + searchString.q + "') "
+            ? "(contains(title, '" +
+              searchString.q +
+              "') or contains(ticketnumber,'" +
+              searchString.q +
+              "'))"
            : "";

    queryString +=
@@ -373,7 +385,7 @@ export const getSearchDocumentDetails = (token, incidentID) => {
                "pinswg_documents?$count=true&$filter=_pinswg_documentids_value eq " +
                incidentID +
                " and pinswg_publishtoweb eq true&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference",
-            azureHeaders(token)
+            azureHeadersPaged(token)
        )
        .then((res) => res.data)
        .catch((error) => {
@@ -387,7 +399,47 @@ export const getSearchDocumentHistory = (token, documentID) => {
            WEBAPI_URL +
                "pinswg_documenthistories?$count=true&$select=_pinswg_documentid_value,pinswg_createddate,pinswg_state,pinswg_fileexists,statecode,pinswg_publisheddate&$filter=_pinswg_documentid_value eq " +
                documentID,
-            azureHeaders(token)
+            azureHeadersPaged(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+export const getSearchDocumentDetailsPaged = (incidentID, pageNumber) => {
+    console.log(incidentID);
+    var token = getSASToken();
+
+    return axios
+        .get(
+            "/api/proxy/pinswg_documents?$count=true&$filter=_pinswg_documentids_value eq " +
+                incidentID +
+                " and pinswg_publishtoweb eq true&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference" +
+                (typeof pageNumber != "undefined"
+                    ? "&$skiptoken=" +
+                      encodeURI('<cookie pagenumber="' + pageNumber + '" />')
+                    : ""),
+            azureHeadersPaged(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+export const getSearchDocumentHistoryPaged = (documentID, pageNumber) => {
+    var token = getSASToken();
+
+    return axios
+        .get(
+            "/api/proxy/pinswg_documenthistories?$count=true&$select=_pinswg_documentid_value,pinswg_createddate,pinswg_state,pinswg_fileexists,statecode,pinswg_publisheddate&$filter=_pinswg_documentid_value eq " +
+                documentID +
+                (typeof pageNumber != "undefined"
+                    ? "&$skiptoken=" +
+                      encodeURI('<cookie pagenumber="' + pageNumber + '" />')
+                    : ""),
+            azureHeadersPaged(token)
        )
        .then((res) => res.data)
        .catch((error) => {
@@ -409,9 +461,27 @@ export const getSearchDocumentDetails1 = (incidentID) => {
            console.log("thiserror", error);
        });
 };
+export const getSearchDocumentDetails1Paged = (incidentID, pageNumber) => {
+    //console.log(incidentID);
+    var token = getSASToken();
+    return axios
+        .get(
+            "/api/proxy/pinswg_documents?$count=true&$filter=pinswg_publishtoweb eq true and _pinswg_documentids_value eq " +
+                incidentID +
+                "&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference" +
+                (typeof pageNumber != "undefined"
+                    ? "&$skiptoken=" +
+                      encodeURI('<cookie pagenumber="' + pageNumber + '" />')
+                    : "")
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};

 export const getSearchDocumentHistory1 = (documentID) => {
-    // console.log(documentID);
+    //console.log(documentID);
    var token = getSASToken();
    return axios
        .get(
@@ -426,6 +496,26 @@ export const getSearchDocumentHistory1 = (documentID) => {
        });
 };

+export const getSearchDocumentHistory1Paged = (documentID, pageNumber) => {
+    //console.log(documentID);
+    var token = getSASToken();
+    return axios
+        .get(
+            "/api/proxy/pinswg_documenthistories?$count=true&$select=_pinswg_documentid_value,pinswg_createddate,pinswg_state,pinswg_fileexists,statecode,pinswg_publisheddate&$filter=_pinswg_documentid_value eq " +
+                documentID +
+                (typeof pageNumber != "undefined"
+                    ? "&$skiptoken=" +
+                      encodeURI('<cookie pagenumber="' + pageNumber + '" />')
+                    : "")
+        )
+        .then((res) => {
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
 export const getBasicDNSSearchDetails = (token, appealType, caseReference) => {
    return axios
        .get(
@@ -5,12 +5,16 @@ import jsonpath from "jsonpath";
 import { useState, useEffect, useRef } from "react";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
+import PaginationControl from "./pagination";
+import LoadingOverlay from "react-loading-overlay";

 import {
    getBasicSearch,
    getBasicSearchDetails,
    getSearchDocumentDetails1,
    getSearchDocumentHistory1,
+    getSearchDocumentHistory1Paged,
+    getSearchDocumentDetails1Paged,
    getSASToken,
 } from "../../actions";

@@ -45,123 +49,141 @@ const DocumentDetails = (props) => {
        //console.log(documentDetailsArr);

        documentDetailsArr = documentDetailsArr.value;
-
        return (
-            <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
-                <div className="govuk-summary-list__row results-headings">
-                    <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
-                        {t("case:documents-name-label")}
-                    </dd>
-                    <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                        {t("case:documents-doc-type-label")}
-                    </dd>
-                    <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                        {t("case:documents-date-published-label")}
-                    </dd>
-                    {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
+            <>
+                <p>
+                    {t("case:documents-count-label-1")}{" "}
+                    {documentDetailsObj["@odata.count"]}{" "}
+                    {t("case:documents-count-label-2")}
+                </p>
+                <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
+                    <div className="govuk-summary-list__row results-headings">
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
+                            {t("case:documents-name-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {t("case:documents-doc-type-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {t("case:documents-date-published-label")}
+                        </dd>
+                        {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
                        {t("case:documents-size-label")}
                    </dd> */}
-                </div>
+                    </div>

-                {documentDetailsArr.map((item) => {
-                    let detailsObj = jsonpath.query(
-                        item,
-                        "$..[?(@._pinswg_documentids_value=='" +
-                            incidentid +
-                            "')]"
-                    );
-                    detailsObj = item;
+                    {documentDetailsArr.map((item) => {
+                        let detailsObj = jsonpath.query(
+                            item,
+                            "$..[?(@._pinswg_documentids_value=='" +
+                                incidentid +
+                                "')]"
+                        );
+                        detailsObj = item;

-                    if (typeof detailsObj != "undefined") {
-                        var documentHistoryArr = documentHistoryObj || [];
-                        return documentHistoryArr.map((historyItem, key) => {
-                            let historyObj = jsonpath.query(
-                                documentHistoryObj[key],
-                                "$..value[?(@._pinswg_documentid_value=='" +
-                                    detailsObj.pinswg_documentid +
-                                    "')]"
-                            );
+                        if (typeof detailsObj != "undefined") {
+                            var documentHistoryArr = documentHistoryObj || [];
+                            return documentHistoryArr.map(
+                                (historyItem, key) => {
+                                    let historyObj = jsonpath.query(
+                                        documentHistoryObj[key],
+                                        "$..value[?(@._pinswg_documentid_value=='" +
+                                            detailsObj.pinswg_documentid +
+                                            "')]"
+                                    );

-                            historyObj = historyObj[0];
-                            return !_.isEmpty(historyObj) ? (
-                                <div
-                                    className="govuk-summary-list__row"
-                                    key={key}
-                                >
-                                    <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
-                                        <a
-                                            href={
-                                                "/api/proxy/documents/download/" +
-                                                detailsObj.pinswg_isharedocumentreference
-                                            }
+                                    historyObj = historyObj[0];
+                                    return !_.isEmpty(historyObj) ? (
+                                        <div
+                                            className="govuk-summary-list__row"
+                                            key={key}
                                        >
-                                            <span className="results-visually-hidden">
-                                                {t("case:documents-name-label")}
-                                                :
-                                            </span>
-                                            {_.has(historyObj, [
-                                                "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
-                                            ])
-                                                ? historyObj[
-                                                      "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
-                                                  ]
-                                                : ""}
-                                        </a>
-                                    </dd>
-                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
-                                        <span className="results-visually-hidden">
-                                            {t("case:documents-doc-type-label")}
-                                            :
-                                        </span>
+                                            <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
+                                                <a
+                                                    href={
+                                                        "/api/proxy/documents/download/" +
+                                                        detailsObj.pinswg_isharedocumentreference
+                                                    }
+                                                >
+                                                    <span className="results-visually-hidden">
+                                                        {t(
+                                                            "case:documents-name-label"
+                                                        )}
+                                                        :
+                                                    </span>
+                                                    {_.has(historyObj, [
+                                                        "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
+                                                    ])
+                                                        ? historyObj[
+                                                              "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
+                                                          ]
+                                                        : ""}
+                                                </a>
+                                            </dd>
+                                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                                <span className="results-visually-hidden">
+                                                    {t(
+                                                        "case:documents-doc-type-label"
+                                                    )}
+                                                    :
+                                                </span>

-                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
+                                                {router.locale == "cy"
+                                                    ? jsonpath.query(
+                                                          transLookup,
+                                                          '$..[?(@.value=="' +
+                                                              detailsObj[
+                                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
+                                                              ] +
+                                                              '")].value_cy'
+                                                      )
+                                                    : detailsObj[
                                                          "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy'
-                                              )
-                                            : detailsObj[
-                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "case:documents-date-published-label"
-                                            )}
-                                            :
-                                        </span>
+                                                      ] ||
+                                                      t(
+                                                          "case:summary-no-date-entered-label"
+                                                      )}
+                                            </dd>
+                                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                                <span className="results-visually-hidden">
+                                                    {t(
+                                                        "case:documents-date-published-label"
+                                                    )}
+                                                    :
+                                                </span>

-                                        {_.has(historyObj, [
-                                            "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
-                                        ])
-                                            ? formatDates(
-                                                  historyObj[
-                                                      "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
-                                                  ]
-                                              )
-                                            : ""}
-                                    </dd>
-                                    {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                                {_.has(historyObj, [
+                                                    "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
+                                                ])
+                                                    ? formatDates(
+                                                          historyObj[
+                                                              "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
+                                                          ]
+                                                      )
+                                                    : ""}
+                                            </dd>
+                                            {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-size-label")}:
                                        </span>
                                        92
                                    </dd> */}
-                                </div>
-                            ) : (
-                                ""
+                                        </div>
+                                    ) : (
+                                        ""
+                                    );
+                                }
                            );
-                        });
-                    }
-                })}
-            </dl>
+                        }
+                    })}
+                </dl>
+                <PaginationControl
+                    currentPage={currentPage}
+                    searchResultsObj={documentDetailsObj}
+                    spinnerState={spinnerState}
+                    getDocumentResults={getDocumentResults}
+                />
+            </>
        );
    };

@@ -177,6 +199,8 @@ const DocumentDetails = (props) => {
                    let historyObj = getDocumentHistory(data.value).then(
                        (result) => {
                            setDocumentHistory(result);
+                            setDocumentSearchState(true);
+
                            return result;
                        }
                    );
@@ -206,10 +230,72 @@ const DocumentDetails = (props) => {
            );
            return Promise.all(historyArr);
        };
-
        const searchDocumentResultsObj = docDetailsObj();
    }, [incidentid, setDocumentHistory, setDocumentDetails]);

+    const getDocumentResults = (pageNumber) => {
+        //console.log(advancedSearch, searchString, pageNumber);
+        getSearchDocumentDetails1Paged(incidentid, pageNumber)
+            .then((data) => {
+                //console.log(data);
+                setDocumentDetails(data);
+                return data;
+            })
+            .then((data) => {
+                //console.log("getting details", data);
+                return getDocumentHistory(data.value).then((data) => {
+                    setDocumentHistory(data);
+                    setShowSpinnerState(false);
+                });
+            });
+    };
+
+    const getDocumentDetails = async () => {
+        let docObj = await getSearchDocumentDetails1Paged(
+            incidentid,
+            pageNumber
+        )
+            .then((data) => {
+                //console.log(data);
+                setDocumentDetails(data);
+                return data;
+            })
+            .then((data) => {
+                let historyObj = getDocumentHistory(
+                    data.value,
+                    pageNumber
+                ).then((result) => {
+                    setDocumentHistory(result);
+                    return result;
+                });
+
+                return data;
+            });
+
+        return docObj;
+    };
+
+    const getDocumentHistory = async (searchDocumentDetailsObj, pageNumber) => {
+        let historyArr = [];
+        searchDocumentDetailsObj = searchDocumentDetailsObj || [];
+
+        const detailsObj = searchDocumentDetailsObj.map(
+            (historyDetail, index) => {
+                if (historyDetail.pinswg_publishtoweb != true) {
+                    console.log(historyDetail.pinswg_documentid);
+                } else {
+                    historyArr.push(
+                        getSearchDocumentHistory1Paged(
+                            historyDetail.pinswg_documentid,
+                            pageNumber
+                        )
+                    );
+                }
+            }
+        );
+        return Promise.all(historyArr);
+    };
+
    function formatDates(dateObj) {
        var dateObj = new Date(dateObj);
        var dd = String(dateObj.getDate()).padStart(2, "0");
@@ -219,25 +305,73 @@ const DocumentDetails = (props) => {
        return dd + "/" + mm + "/" + yyyy;
    }

+    const pagesCount = Math.ceil(documentDetailsObj["@odata.count"] / 10);
+
+    let currentPage = 0;
+
+    currentPage = decodeURI(documentDetailsObj["@odata.nextLink"]).split(
+        "skiptoken="
+    )[1];
+    currentPage =
+        typeof currentPage != "undefined"
+            ? parseInt(
+                  decodeURI(currentPage)
+                      .split('pagenumber="')[1]
+                      .slice(
+                          0,
+                          decodeURI(currentPage)
+                              .split('pagenumber="')[1]
+                              .indexOf('"')
+                      ) - 1
+              )
+            : pagesCount;
+
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+
+    const [showDocumentSearchState, setDocumentSearchState] = useState(false);
+
+    let documentSearchState = () => {
+        showDocumentSearchState == true
+            ? setDocumentSearchState(false)
+            : setDocumentSearchState(true);
+    };
+
    return (
-        <div>
-            <div className="govuk-grid-row">
-                <div className="govuk-grid-column-full">
-                    <h2>{t("case:documents-heading-label")}</h2>
-                    {_.isEmpty(documentHistoryObj) ? (
-                        <div className="govuk-grid-row">
-                            <div className="govuk-grid-column-two-thirds">
-                                <h3>
-                                    {t("case:documents-non-available-label")}
-                                </h3>
+        <>
+            <div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <h2>{t("case:documents-heading-label")}</h2>
+                        {_.isEmpty(documentHistoryObj) ? (
+                            <div className="govuk-grid-row">
+                                <div className="govuk-grid-column-two-thirds">
+                                    <h3>
+                                        {showDocumentSearchState == false
+                                            ? t("case:documents-checking-label")
+                                            : t(
+                                                  "case:documents-non-available-label"
+                                              )}
+                                    </h3>
+                                </div>
                            </div>
-                        </div>
-                    ) : (
-                        DocumentView(documentDetailsArr)
-                    )}
+                        ) : (
+                            DocumentView(documentDetailsArr)
+                        )}
+                    </div>
                </div>
            </div>
-        </div>
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-searching")}
+            />
+        </>
    );
 };

@@ -0,0 +1,155 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const PaginationControl = (props) => {
+    const {
+        searchString,
+        searchResultsObj,
+        currentPage,
+        spinnerState,
+        getDocumentResults,
+    } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+
+    const getRange = (start, end) => {
+        //console.log(start, end);
+        return Array(end - start + 1)
+            .fill()
+            .map((v, i) => i + start);
+    };
+
+    const paginationNumbers = (currentPage, pageCount) => {
+        //console.log(currentPage);
+        let delta;
+        if (pageCount <= 10) {
+            // delta === 7: [1 2 3 4 5 6 7]
+            delta = 10;
+        } else {
+            // delta === 2: [1 ... 4 5 6 ... 10]
+            // delta === 4: [1 2 3 4 5 ... 10]
+            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6;
+        }
+
+        const range = {
+            start: Math.round(currentPage - delta / 2),
+            end: Math.round(currentPage + delta / 2),
+        };
+
+        if (range.start - 1 === 1 || range.end + 1 === pageCount) {
+            range.start += 1;
+            range.end += 1;
+        }
+
+        let pages =
+            currentPage > delta
+                ? getRange(
+                      Math.min(range.start, pageCount - delta),
+                      Math.min(range.end, pageCount)
+                  )
+                : getRange(1, Math.min(pageCount, delta + 1));
+
+        const withDots = (value, pair) =>
+            pages.length + 1 !== pageCount ? pair : [value];
+
+        if (pages[0] !== 1) {
+            pages = withDots(1, [1, "..."]).concat(pages);
+        }
+
+        if (pages[pages.length - 1] < pageCount) {
+            pages = pages.concat(withDots(pageCount, ["...", pageCount]));
+        }
+
+        //console.log(pages);
+        return pages;
+    };
+
+    const paginationArray = paginationNumbers(currentPage, pagesCount);
+
+    return (
+        <>
+            {" "}
+            <div className="govuk-!-margin-bottom-7 ">
+                <div className="govuk-grid-row paginationWrapper">
+                    <div className="govuk-grid-column-one-quarter paginationPrevious">
+                        {currentPage != 1 ? (
+                            <span
+                                className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
+                                onClick={() => {
+                                    spinnerState(),
+                                        getDocumentResults(currentPage - 1);
+                                }}
+                            >
+                                {t("common:previous-link-button")}
+                            </span>
+                        ) : (
+                            <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
+                                {t("common:previous-link-button")}
+                            </span>
+                        )}
+                    </div>
+                    <div className="govuk-grid-column-one-half paginationContainer">
+                        {paginationArray.map((e, i) =>
+                            currentPage == i + 1 ? (
+                                <span
+                                    key={i}
+                                    className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
+                                >
+                                    {e}
+                                </span>
+                            ) : e == "..." ? (
+                                <span
+                                    key={i}
+                                    className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
+                                >
+                                    {e}
+                                </span>
+                            ) : (
+                                <span
+                                    className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
+                                    key={i}
+                                    onClick={() => {
+                                        spinnerState();
+                                        console.log(i + 1);
+                                        getDocumentResults(i + 1);
+                                    }}
+                                >
+                                    {e}
+                                </span>
+                            )
+                        )}
+                    </div>
+                    <div className="govuk-grid-column-one-quarter paginationNext">
+                        {currentPage != pagesCount ? (
+                            <span
+                                className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
+                                onClick={() => {
+                                    spinnerState(),
+                                        getDocumentResults(currentPage + 1);
+                                }}
+                            >
+                                {t("common:next-link-button")}
+                            </span>
+                        ) : (
+                            <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
+                                {" "}
+                                {t("common:next-link-button")}
+                            </span>
+                        )}
+                    </div>
+                </div>
+                <div className="govuk-body-s mobilePageCount">
+                    {t("common:pages-label")} {currentPage}{" "}
+                    {t("common:of-label")} {pagesCount}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default PaginationControl;
@@ -198,7 +198,13 @@ let Login = (props) => {
                    <div className="govuk-form-group govuk-!-margin-top-4">
                        <p className="govuk-body-s">
                            {t("home:login-card-register-label")}{" "}
-                            <Link href="/account/register">
+                            <Link
+                                href={
+                                    router.locale == "cy"
+                                        ? "/cyfrif/cofrestr"
+                                        : "/account/register"
+                                }
+                            >
                                <a>{t("home:login-card-register-link")}</a>
                            </Link>
                        </p>
@@ -28,8 +28,8 @@ export default function Home({ children, pages }) {
                        <CaseSearch />
                        <CaseComment />
                        <Dns />
-                        {/*   <Login />
-                        <Inspectorate /> */}
+                        <Login />
+                        {/*} <Inspectorate /> */}
                    </div>
                </div>
            </div>
@@ -218,19 +218,6 @@ let AdvancedSearch = (props) => {

    const required = (value) => (value ? undefined : "Required");

-    const getFormCollection = (formtype) => {
-        formtype =
-            "pinswg_" +
-            (formtype.length > 39 ? formtype.slice(0, 39) : formtype);
-
-        const collectionName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')].UrlName"
-        );
-        //console.log(collectionName[0]);
-        return collectionName[0];
-    };
-
    const [showSpinnerState, setShowSpinnerState] = useState(false);

    let spinnerState = () => {
@@ -243,15 +230,6 @@ let AdvancedSearch = (props) => {
        event.preventDefault();
        spinnerState();

-        //console.log(values);
-        // var appTypeCollection = values.appealTypes.split(",")[1];
-
-        // appTypeCollection = getFormCollection(
-        //     appTypeCollection.length > 39
-        //         ? appTypeCollection.slice(0, 39)
-        //         : appTypeCollection
-        // );
-
        var searchString = "";

        searchString += values.caseRef != null ? "?q=" + values.caseRef : "";
@@ -19,6 +19,7 @@ import {
    setSearchResults,
    setSearchDetails,
 } from "../../store/searchOutput/action";
+import { getSearchDetailsPaged } from "../utils";

 const DNSSearchResults = (props) => {
    const {
@@ -250,66 +251,23 @@ const DNSSearchResults = (props) => {
            : pagesCount;

    const getSearchPageResults = (pageNumber) => {
-        console.log(advancedSearch, searchString, pageNumber);
+        //console.log(advancedSearch, searchString, pageNumber);

        getBasicDNSSearchPaged(pageNumber)
            .then((data) => {
-                console.log(data);
+                //console.log(data);
                setSearchResults(data);
                return data;
            })
            .then((data) => {
-                console.log("getting details", data);
-                return getSearchDetails(data).then((data) => {
+                //console.log("getting details", data);
+                return getSearchDetailsPaged(data).then((data) => {
                    setSearchDetails(data);
                    setShowSpinnerState(false);
                });
            });
    };

-    const getSearchDetails = (searchResultsObj) => {
-        //console.log(searchResultsObj);
-
-        let detailsArr = [];
-        //console.log("search results", searchResultsObj);
-        searchResultsObj = searchResultsObj.value;
-        const detailsObj = searchResultsObj.map((searchDetail, index) => {
-            //console.log(searchDetail);
-            if (searchDetail.pinswg_appealcasetype == null) {
-                console.log(searchDetail.title);
-            } else {
-                let formMeta = getFormCollection(
-                    "pinswg_" +
-                        searchDetail[
-                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                        ]
-                            .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                            .toLowerCase()
-                            .slice(0, 39)
-                );
-
-                detailsArr.push(
-                    getBasicSearchDetailsPaged(
-                        formMeta.LogicalCollectionName,
-                        searchDetail.title,
-                        formMeta.PrimaryIdAttribute,
-                        searchDetail.incidentid
-                    )
-                );
-            }
-        });
-        // console.log(detailsArr);
-        return Promise.all(detailsArr);
-    };
-
-    const getFormCollection = (formtype) => {
-        const collectionName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')]"
-        );
-        //console.log(collectionName[0]);
-        return collectionName[0];
-    };
    return (
        <>
            <div className="govuk-grid-row">
@@ -15,17 +15,17 @@ const PaginationControl = (props) => {
    const router = useRouter();
    const { locale } = router;

-    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 5);

    const getRange = (start, end) => {
-        console.log(start, end);
+        //console.log(start, end);
        return Array(end - start + 1)
            .fill()
            .map((v, i) => i + start);
    };

    const paginationNumbers = (currentPage, pageCount) => {
-        console.log(currentPage);
+        //console.log(currentPage);
        let delta;
        if (pageCount <= 10) {
            // delta === 7: [1 2 3 4 5 6 7]
@@ -65,7 +65,7 @@ const PaginationControl = (props) => {
            pages = pages.concat(withDots(pageCount, ["...", pageCount]));
        }

-        console.log(pages);
+        //console.log(pages);
        return pages;
    };

@@ -82,8 +82,7 @@ const PaginationControl = (props) => {
                                className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                onClick={() => {
                                    spinnerState(),
-                                        getSearchPageResults(currentPage - 1),
-                                        console.log(currentPage - 1);
+                                        getSearchPageResults(currentPage - 1);
                                }}
                            >
                                {t("common:previous-link-button")}
@@ -131,8 +130,7 @@ const PaginationControl = (props) => {
                                className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                onClick={() => {
                                    spinnerState(),
-                                        getSearchPageResults(currentPage + 1),
-                                        console.log(currentPage + 1);
+                                        getSearchPageResults(currentPage + 1);
                                }}
                            >
                                {t("common:next-link-button")}
@@ -26,6 +26,7 @@ import {
 import { useEffect } from "react";

 import PaginationControl from "./pagination";
+import { getSearchDetailsPaged } from "../utils";

 const SearchResults = (props) => {
    const {
@@ -296,7 +297,7 @@ const SearchResults = (props) => {
            : pagesCount;

    const getSearchPageResults = (pageNumber) => {
-        console.log(advancedSearch, searchString, pageNumber);
+        //console.log(advancedSearch, searchString, pageNumber);

        if (advancedSearch) {
            var searchoObj = Object.assign(
@@ -311,7 +312,7 @@ const SearchResults = (props) => {
                })
                .then((data) => {
                    //console.log("getting details", data);
-                    return getSearchDetails(data).then((data) => {
+                    return getSearchDetailsPaged(data).then((data) => {
                        setSearchDetails(data);
                        setShowSpinnerState(false);
                    });
@@ -325,7 +326,7 @@ const SearchResults = (props) => {
                })
                .then((data) => {
                    //console.log("getting details", data);
-                    return getSearchDetails(data).then((data) => {
+                    return getSearchDetailsPaged(data).then((data) => {
                        setSearchDetails(data);
                        setShowSpinnerState(false);
                    });
@@ -333,50 +334,6 @@ const SearchResults = (props) => {
        }
    };

-    const getSearchDetails = (searchResultsObj) => {
-        //console.log(searchResultsObj);
-
-        let detailsArr = [];
-        //console.log("search results", searchResultsObj);
-        searchResultsObj = searchResultsObj.value;
-        const detailsObj = searchResultsObj.map((searchDetail, index) => {
-            //console.log(searchDetail);
-            if (searchDetail.pinswg_appealcasetype == null) {
-                console.log(searchDetail.title);
-            } else {
-                let formMeta = getFormCollection(
-                    "pinswg_" +
-                        searchDetail[
-                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                        ]
-                            .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                            .toLowerCase()
-                            .slice(0, 39)
-                );
-
-                detailsArr.push(
-                    getBasicSearchDetailsPaged(
-                        formMeta.LogicalCollectionName,
-                        searchDetail.title,
-                        formMeta.PrimaryIdAttribute,
-                        searchDetail.incidentid
-                    )
-                );
-            }
-        });
-        // console.log(detailsArr);
-        return Promise.all(detailsArr);
-    };
-
-    const getFormCollection = (formtype) => {
-        const collectionName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')]"
-        );
-        //console.log(collectionName[0]);
-        return collectionName[0];
-    };
-
    return (
        <>
            <div className="govuk-grid-row">
@@ -0,0 +1,45 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+
+const GlobalMetaTags = () => {
+    let { t } = useTranslation();
+    return (
+        <>
+            {console.log(t("common:service-name"))}
+            {/* Language by default is EN, if multilingual site this will need updated */}
+            <meta key="og:locale" property="og:locale" content="en" />
+            {/* If they have a Twitter Handle, include the meta details below */}
+            <meta
+                key="og:site_name"
+                property="og:site_name"
+                content="Planning casework "
+            />
+            <meta
+                key="twitter:site"
+                property="twitter:site"
+                content="@UKGovWales"
+            />
+
+            <meta
+                name="description"
+                content="The Welsh Government is the devolved Government for Wales"
+            />
+            <meta property="og:site_name" content="GOV.WALES" />
+            <meta property="og:type" content="website" />
+            <meta property="og:url" content="https://gov.wales" />
+            <meta
+                property="og:image"
+                content="https://gov.wales//themes/custom/govwales/images/content/og-global-1200.png"
+            />
+            <meta name="twitter:card" content="summary" />
+            <meta name="twitter:title" content="gov.wales | gov.wales" />
+            <meta name="twitter:url" content="https://gov.wales" />
+            <meta
+                name="twitter:image"
+                content="https://gov.wales//themes/custom/govwales/images/content/og-global-120.png"
+            />
+        </>
+    );
+};
+
+export default GlobalMetaTags;
@@ -0,0 +1,119 @@
+import Head from "next/head";
+import { string } from "prop-types";
+
+// ALl options are conditional apart from title
+const PageMeta = ({
+    title,
+    imageWidth,
+    imageHeight,
+    ogImage,
+    ogUrl,
+    ogTitle,
+    ogType,
+    ogDescription,
+    canonicalURL,
+    description,
+    keywords,
+    createdAt,
+    updatedAt,
+    robots,
+    twitterDescription,
+    twitterTitle,
+    twitterImage,
+}) => {
+    const facebookPage = "https://www.facebook.com/IFPMA";
+
+    return (
+        <>
+            <Head>
+                {title && <title>{title}</title>}
+                <meta property="article:publisher" content={facebookPage} />
+                {createdAt && (
+                    <meta
+                        property="article:published_time"
+                        content={createdAt}
+                    />
+                )}
+                {updatedAt && (
+                    <meta
+                        property="article:modified_time"
+                        content={updatedAt}
+                    />
+                )}
+                {description && (
+                    <meta
+                        property="description"
+                        name="description"
+                        content={description}
+                    />
+                )}
+                {keywords && (
+                    <meta
+                        property="keywords"
+                        name="keywords"
+                        content={keywords}
+                    />
+                )}
+                <meta
+                    property="robots"
+                    name="robots"
+                    content={robots || "index,follow"}
+                />
+                {canonicalURL && <link rel="canonical" href={canonicalURL} />}
+                {ogUrl && <meta property="og:url" content={ogUrl} />}
+                {ogTitle && <meta property="og:title" content={ogTitle} />}
+                {ogType && <meta property="og:type" content={ogType} />}
+                {ogDescription && (
+                    <meta property="og:description" content={ogDescription} />
+                )}
+                {ogImage && <meta property="og:image" content={ogImage} />}
+                {imageWidth && (
+                    <meta property="og:image:width" content={imageWidth} />
+                )}
+                {imageHeight && (
+                    <meta property="og:image:height" content={imageHeight} />
+                )}
+                <meta property="twitter:card" content="summary_large_image" />
+                <meta
+                    key="twitter:site"
+                    property="twitter:site"
+                    content="@IFPMA"
+                />
+                {twitterDescription && (
+                    <meta
+                        property="twitter:description"
+                        content={twitterDescription}
+                    />
+                )}
+                {twitterTitle && (
+                    <meta property="twitter:title" content={twitterTitle} />
+                )}
+                {twitterImage && (
+                    <meta property="twitter:image" content={twitterImage} />
+                )}
+            </Head>
+        </>
+    );
+};
+
+PageMeta.propTypes = {
+    title: string,
+    createdAt: string,
+    updatedAt: string,
+    ogImage: string,
+    ogUrl: string,
+    ogTitle: string,
+    ogType: string,
+    ogDescription: string,
+    canonicalURL: string,
+    description: string,
+    keywords: string,
+    createdAt: string,
+    updatedAt: string,
+    robots: string,
+    twitterDescription: string,
+    twitterTitle: string,
+    twitterImage: string,
+};
+
+export default PageMeta;
@@ -0,0 +1,96 @@
+import jsonpath from "jsonpath";
+import data from "../../data/collections.json";
+import {
+    getBasicSearchDetails,
+    getBasicSearchDetailsPaged,
+} from "../../actions";
+
+/*
+ * Get the lookup collection by the appeal type entity
+ * @param String formtype - string from appeal entity name
+ */
+export const getFormCollection = (formtype) => {
+    const collectionName = jsonpath.query(
+        data,
+        "$..[?(@.LogicalName=='" + formtype + "')]"
+    );
+    return collectionName[0];
+};
+
+/*
+ * Get the details of a case from the appeal type
+ * @param String token
+ * @param object searchResultsObj
+ */
+export const getSearchDetails = (token, searchResultsObj) => {
+    //console.log(searchResultsObj);
+
+    let detailsArr = [];
+    searchResultsObj = searchResultsObj.value;
+    const detailsObj = searchResultsObj.map((searchDetail, index) => {
+        if (searchDetail.pinswg_appealcasetype == null) {
+            console.log(searchDetail.title);
+        } else {
+            let formMeta = getFormCollection(
+                "pinswg_" +
+                    searchDetail[
+                        "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                    ]
+                        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
+                        .toLowerCase()
+                        .slice(0, 39)
+            );
+
+            detailsArr.push(
+                getBasicSearchDetails(
+                    token,
+                    formMeta.LogicalCollectionName,
+                    searchDetail.title,
+                    formMeta.PrimaryIdAttribute,
+                    searchDetail.incidentid
+                )
+            );
+        }
+    });
+    //console.log(detailsArr);
+    return Promise.all(detailsArr);
+};
+
+/*
+ * Get the details of a case from the appeal type
+ * @param object searchResultsObj
+ */
+export const getSearchDetailsPaged = (searchResultsObj) => {
+    //console.log(searchResultsObj);
+
+    let detailsArr = [];
+    //console.log("search results", searchResultsObj);
+    searchResultsObj = searchResultsObj.value;
+    const detailsObj = searchResultsObj.map((searchDetail, index) => {
+        //console.log(searchDetail);
+        if (searchDetail.pinswg_appealcasetype == null) {
+            console.log(searchDetail.title);
+        } else {
+            let formMeta = getFormCollection(
+                "pinswg_" +
+                    searchDetail[
+                        "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                    ]
+                        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
+                        .toLowerCase()
+                        .slice(0, 39)
+            );
+
+            detailsArr.push(
+                getBasicSearchDetailsPaged(
+                    formMeta.LogicalCollectionName,
+                    searchDetail.title,
+                    formMeta.PrimaryIdAttribute,
+                    searchDetail.incidentid
+                )
+            );
+        }
+    });
+    // console.log(detailsArr);
+    return Promise.all(detailsArr);
+};
@@ -36,5 +36,8 @@
    "documents-date-published-label": "Dyddiad cyhoeddi",
    "documents-size-label": "Maint y ffeil (kb)",
    "documents-non-available-label": "Nid oes unrhyw ddogfennau ar gyfer yr apêl hon",
-    "documents-heading-label": "Dogfennau"
+    "documents-heading-label": "Dogfennau",
+    "documents-checking-label": "Gwirio am ddogfennau",
+    "documents-count-label-1": "Mae yna",
+    "documents-count-label-2": "dogfennau"
 }
@@ -3,6 +3,7 @@
  "enable-js-label": "Os gwelwch yn dda galluogi javascript",
  "gov-wales-link": "https://llyw.cymru",
  "gov-wales-label": "LLYW.CYMRU",
+  "service-description": "Mae'r gwasanaeth hwn yn cael ei ddatblygu i gefnogi apeliadau a cheisiadau ar-lein.",
  "service-name": "Cynllunio gwaith achos",
  "service-name-breadcrumb": "Hafan",
  "new-service-beta": "Mae hwn yn wasanaeth newydd",
@@ -36,5 +36,8 @@
    "documents-date-published-label": "Date published",
    "documents-size-label": "Size (KB)",
    "documents-non-available-label": "There are no documents for this appeal",
-    "documents-heading-label": "Documents"
+    "documents-heading-label": "Documents",
+    "documents-checking-label": "Checking for documents",
+    "documents-count-label-1": "There are",
+    "documents-count-label-2": "documents"
 }
@@ -3,6 +3,7 @@
  "enable-js-label": "Please enable javascript",
  "gov-wales-link": "https://www.gov.wales",
  "gov-wales-label": "GOV.WALES",
+  "service-description": "This service is being developed to support online appeals and applications.",
  "service-name": "Planning casework",
  "service-name-breadcrumb": "Home",
  "new-service-beta": "This is a new service",
@@ -73,6 +73,10 @@ module.exports = {
                source: "/apelnewydd/:path*",
                destination: "/newappeal/:path*",
            },
+            {
+                source: "/cyfrif/cofrestr",
+                destination: "/account/register",
+            },

            // {
            //     source: "/cy:path*",
@@ -53,6 +53,68 @@ const Home = (props) => {
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
+                {/* Language by default is EN, if multilingual site this will need updated */}
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -15,7 +15,7 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
 import data from "../data/collections.json";
-
+import { getSearchDetails } from "../components/utils";
 import { setSearch, getSearchObj } from "../store/search/action";
 import {
    setSearchResults,
@@ -42,6 +42,67 @@ const Home = (props) => {
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -80,50 +141,6 @@ export const getServerSideProps = wrapper.getServerSideProps(
        }
 );

-const getFormCollection = (formtype) => {
-    const collectionName = jsonpath.query(
-        data,
-        "$..[?(@.LogicalName=='" + formtype + "')]"
-    );
-    //console.log(collectionName[0]);
-    return collectionName[0];
-};
-
-const getSearchDetails = (token, searchResultsObj) => {
-    //console.log(searchResultsObj);
-
-    let detailsArr = [];
-    //console.log("searcg results", searchResultsObj);
-    searchResultsObj = searchResultsObj.value;
-    const detailsObj = searchResultsObj.map((searchDetail, index) => {
-        if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.ticketnumber);
-        } else {
-            let formMeta = getFormCollection(
-                "pinswg_" +
-                    searchDetail[
-                        "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                    ]
-                        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                        .toLowerCase()
-                        .slice(0, 39)
-            );
-
-            detailsArr.push(
-                getBasicSearchDetails(
-                    token,
-                    formMeta.LogicalCollectionName,
-                    searchDetail.title,
-                    formMeta.PrimaryIdAttribute,
-                    searchDetail.incidentid
-                )
-            );
-        }
-    });
-    //console.log(detailsArr);
-    return Promise.all(detailsArr);
-};
-
 const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
@@ -1,19 +1,19 @@
 import _ from "lodash";
 import Head from "next/head";
-import Header from "../components/header";
-import Banner from "../components/banner";
-import CookieBanner from "../components/cookieBanner";
-import Breadcrumbs from "../components/breadcrumbs";
-import CaseSummary from "../components/case";
-import Footer from "../components/footer";
-import Errorpage from "../components/errorpage";
-import styles from "../styles/Home.module.css";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import CaseSummary from "../../components/case";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
-import { wrapper } from "../store/store";
+import { wrapper } from "../../store/store";

 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import Case from "../components/case";
+import Case from "../../components/case";

 const Home = (props) => {
    const { footerLinks, pages } = props;
@@ -16,6 +16,8 @@ import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
 import data from "../data/collections.json";

+import { getSearchDetails } from "../components/utils";
+
 import { setSearch, getSearchObj } from "../store/search/action";
 import {
    setSearchResults,
@@ -42,6 +44,67 @@ const Home = (props) => {
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -87,49 +150,6 @@ export const getServerSideProps = wrapper.getServerSideProps(
        }
 );

-const getFormCollection = (formtype) => {
-    const collectionName = jsonpath.query(
-        data,
-        "$..[?(@.LogicalName=='" + formtype + "')]"
-    );
-    //console.log(collectionName[0]);
-    return collectionName[0];
-};
-
-const getSearchDetails = (token, searchResultsObj) => {
-    //console.log(searchResultsObj);
-
-    let detailsArr = [];
-    searchResultsObj = searchResultsObj.value;
-    const detailsObj = searchResultsObj.map((searchDetail, index) => {
-        if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.title);
-        } else {
-            let formMeta = getFormCollection(
-                "pinswg_" +
-                    searchDetail[
-                        "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                    ]
-                        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                        .toLowerCase()
-                        .slice(0, 39)
-            );
-
-            detailsArr.push(
-                getBasicSearchDetails(
-                    token,
-                    formMeta.LogicalCollectionName,
-                    searchDetail.title,
-                    formMeta.PrimaryIdAttribute,
-                    searchDetail.incidentid
-                )
-            );
-        }
-    });
-    //console.log(detailsArr);
-    return Promise.all(detailsArr);
-};
-
 const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
@@ -20,11 +20,57 @@ const Home = (props) => {

    const router = useRouter();
    const { locale } = router;
-
+    console.log(router);
    return (
        <div>
            <Head>
                <title>{t("common:service-name")}</title>
+                {console.log(router.pathname)}
+                {/* Language by default is EN, if multilingual site this will need updated */}
+                <meta
+                    key="og:locale"
+                    property="og:locale"
+                    content={router.locale}
+                />
+                {/* If they have a Twitter Handle, include the meta details below */}
+                <meta
+                    key="og:site_name"
+                    property="og:site_name"
+                    content={t("common:service-name")}
+                />
+                <meta
+                    key="twitter:site"
+                    property="twitter:site"
+                    content="@UKGovWales"
+                />
+
+                <meta
+                    name="description"
+                    content={t("common:service-description")}
+                />
+                <meta
+                    property="og:site_name"
+                    content={t("common:gov-wales-label")}
+                />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content={t("common:gov-wales-link")} />
+                <meta
+                    property="og:image"
+                    content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                />
+                <meta name="twitter:card" content="summary" />
+                <meta
+                    name="twitter:title"
+                    content={t("common:gov-wales-label")}
+                />
+                <meta
+                    name="twitter:url"
+                    content={t("common:gov-wales-link") + router.pathname}
+                />
+                <meta
+                    name="twitter:image"
+                    content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                />
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -26,6 +26,67 @@ const LogOut = (props) => {
        <div>
            <Head>
                <title>{t("common:service-name")}</title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -16,21 +16,13 @@ import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
 import data from "../../data/collections.json";

+import { getSearchDetails } from "../../components/utils";
 import { setSearch, getSearchObj } from "../../store/search/action";
 import {
    setSearchResults,
    setSearchDetails,
-    setDocumentDetails,
-    setDocumentHistory,
-    getSearchResultsObj,
 } from "../../store/searchOutput/action";
-import {
-    getAdvancedSearch,
-    getBasicSearchDetails,
-    getSearchDocumentDetails,
-    getSearchDocumentHistory,
-    getSASToken,
-} from "../../actions";
+import { getAdvancedSearch, getSASToken } from "../../actions";

 const Home = (props) => {
    const { footerLinks, pages } = props;
@@ -83,46 +75,6 @@ export const getServerSideProps = wrapper.getServerSideProps(
        }
 );

-const getFormCollection = (formtype) => {
-    const collectionName = jsonpath.query(
-        data,
-        "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName"
-    );
-    //console.log(collectionName[0]);
-    return collectionName[0];
-};
-
-const getSearchDetails = (token, searchResultsObj) => {
-    //console.log(searchResultsObj);
-
-    let detailsArr = [];
-    //console.log("searcg results", searchResultsObj);
-    searchResultsObj = searchResultsObj.value;
-    const detailsObj = searchResultsObj.map((searchDetail, index) => {
-        if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.ticketnumber);
-        } else {
-            detailsArr.push(
-                getBasicSearchDetails(
-                    token,
-                    getFormCollection(
-                        "pinswg_" +
-                            searchDetail[
-                                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                            ]
-                                .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                                .toLowerCase()
-                                .slice(0, 39)
-                    ),
-                    searchDetail.ticketnumber
-                )
-            );
-        }
-    });
-    //console.log(detailsArr);
-    return Promise.all(detailsArr);
-};
-
 const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
@@ -62,6 +62,67 @@ const Home = (props) => {
                <title>
                    {t("myportal:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("myportal:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -16,6 +16,7 @@ import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
 import data from "../../data/collections.json";

+import { getSearchDetails } from "../../components/utils";
 import { setSearch, getSearchObj } from "../../store/search/action";
 import {
    setSearchResults,
@@ -89,62 +90,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
                searchResultsObj
            );

-            // const searchDocumentResultsObj = await getDocumentDetails(
-            //     token,
-            //     searchResultsObj
-            // );
-
-            // const searchDocumentHistoryObj = await getDocumentHistory(
-            //     token,
-            //     searchDocumentResultsObj
-            // );
-            // console.log(searchDocumentHistoryObj);
-
            store.dispatch(setSearchResults(searchResultsObj));
            store.dispatch(setSearchDetails(searchDetailsObj));
            store.dispatch(setSearch(query.q));
        }
 );

-const getFormCollection = (formtype) => {
-    const collectionName = jsonpath.query(
-        data,
-        "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName"
-    );
-    //console.log(collectionName[0]);
-    return collectionName[0];
-};
-
-const getSearchDetails = (token, searchResultsObj) => {
-    //console.log(searchResultsObj);
-
-    let detailsArr = [];
-    searchResultsObj = searchResultsObj.value;
-    const detailsObj = searchResultsObj.map((searchDetail, index) => {
-        if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.ticketnumber);
-        } else {
-            detailsArr.push(
-                getBasicSearchDetails(
-                    token,
-                    getFormCollection(
-                        "pinswg_" +
-                            searchDetail[
-                                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                            ]
-                                .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                                .toLowerCase()
-                                .slice(0, 39)
-                    ),
-                    searchDetail.ticketnumber
-                )
-            );
-        }
-    });
-    //console.log(detailsArr);
-    return Promise.all(detailsArr);
-};
-
 const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
@@ -206,6 +206,67 @@ let Home = (props) => {
                <title>
                    {t("newappeal:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("newappeal:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -54,6 +54,67 @@ const Home = (props) => {
                <title>
                    {t("newappeal:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("newappeal:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -29,6 +29,64 @@ const Home = (props) => {
                <title>
                    {t("case:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta property="og:title" content={t("case:page-title")} />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -22,6 +22,7 @@ import {
    getSearchResultsObj,
 } from "../store/searchOutput/action";
 import { getBasicSearch, getBasicSearchDetails, getSASToken } from "../actions";
+import { getSearchDetails } from "../components/utils";

 const Home = (props) => {
    const { footerLinks, pages } = props;
@@ -37,6 +38,67 @@ const Home = (props) => {
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
@@ -85,82 +147,6 @@ export const getServerSideProps = wrapper.getServerSideProps(
        }
 );

-const getFormCollection = (formtype) => {
-    const collectionName = jsonpath.query(
-        data,
-        "$..[?(@.LogicalName=='" + formtype + "')]"
-    );
-    //console.log(collectionName[0]);
-    return collectionName[0];
-};
-
-const getSearchDetails = (token, searchResultsObj) => {
-    //console.log(searchResultsObj);
-
-    let detailsArr = [];
-    //console.log("search results", searchResultsObj);
-    searchResultsObj = searchResultsObj.value;
-    const detailsObj = searchResultsObj.map((searchDetail, index) => {
-        //console.log(searchDetail);
-
-        // console.log(
-        //     "the collect",
-        //     getFormCollection(
-        //         "pinswg_" +
-        //             searchDetail[
-        //                 "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-        //             ]
-        //                 .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-        //                 .toLowerCase()
-        //                 .slice(0, 39)
-        //     )
-        // );
-
-        if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.title);
-        } else {
-            // console.log(
-            //     "appealtype collection name",
-            //     searchDetail[
-            //         "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-            //     ],
-            //     "pinswg_" +
-            //         searchDetail[
-            //             "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-            //         ]
-            //             .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-            //             .toLowerCase()
-            //             .slice(0, 39),
-            //     searchDetail.title,
-            //     searchDetail.ticketnumber,
-            //     searchDetail.incidentid
-            // );
-
-            let formMeta = getFormCollection(
-                "pinswg_" +
-                    searchDetail[
-                        "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                    ]
-                        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                        .toLowerCase()
-                        .slice(0, 39)
-            );
-
-            detailsArr.push(
-                getBasicSearchDetails(
-                    token,
-                    formMeta.LogicalCollectionName,
-                    searchDetail.title,
-                    formMeta.PrimaryIdAttribute,
-                    searchDetail.incidentid
-                )
-            );
-        }
-    });
-    //console.log(detailsArr);
-    return Promise.all(detailsArr);
-};
-
 const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
@@ -35,6 +35,67 @@ const Home = (props) => {
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />