robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor appeal for new and resume

Browse Source
This commit is contained in:
robbond
2026-01-15 13:21:11 +00:00
parent 9241fe0b84
commit 83dc4e12e3
11 changed files with 533 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/newappeal/buildfield.js
+1 -1
View File
@@ -204,7 +204,7 @@ export default function BuildField(props) {
uploadCount={uploadCount} uploadCount={uploadCount}
setFileCount={setFileCount} setFileCount={setFileCount}
setUploadCount={setUploadCount} setUploadCount={setUploadCount}
props={props?.props?.props} props={props?.props?.props?.props}
/> />
</div> </div>
), ),
components/newappeal/constants.js
+2
View File
@@ -0,0 +1,2 @@
// components/newappeal/constants.js
export const SECTION_COMPLETE = 9999;
components/newappeal/newAppealFlow.js
+48
View File
@@ -0,0 +1,48 @@
// components/newappeal/NewAppealFlow.js
import React from "react";
import BuildCheckSection from "./buildchecksection";
import BuildSection from "./buildsection";
import CompleteAppeal from "./complete";
import { SECTION_COMPLETE } from "./constants";
export default function NewAppealFlow({
formXML,
sectionCount,
currentSection,
onSubmit,
formTitle,
mandatoryFieldsData,
propsForChildren,
docsOffline,
}) {
if (currentSection === SECTION_COMPLETE) {
return <CompleteAppeal props={propsForChildren} />;
}
if (currentSection === sectionCount + 1) {
return (
<BuildCheckSection
formXML={formXML}
sectionCount={sectionCount}
onSubmit={onSubmit}
formTitle={formTitle}
appealType={propsForChildren.appealType}
props={propsForChildren}
key={1}
mandatoryFieldsData={mandatoryFieldsData}
docsOffline={docsOffline}
/>
);
}
return (
<BuildSection
formXML={formXML}
sectionCount={sectionCount}
onSubmit={onSubmit}
formTitle={formTitle}
mandatoryFieldsData={mandatoryFieldsData}
props={propsForChildren}
/>
);
}
components/newappeal/newAppealPageShell.js
+112
View File
@@ -0,0 +1,112 @@
// components/newappeal/NewAppealPageShell.js
import React from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Breadcrumbs from "../breadcrumbs";
import CookieBanner from "../cookieBanner";
import Footer from "../footer";
import Header from "../header";
import TimeOut from "../timeout";
import ServiceBanner from "../myportal/servicebanner";
export default function NewAppealPageShell({
appealtypes,
formTitle,
footerLinks,
children,
propsForFooter,
propsForServiceBanner,
}) {
const router = useRouter();
const { t } = useTranslation();
return (
<div>
<Head>
<title>
{t("newappeal:page-title")} - {t("common:service-name")}
</title>
{/* Keep your existing meta structure */}
<link
rel="canonical"
href={t("common:gov-wales-link") + router.asPath}
/>
<meta
key="og:locale"
property="og:locale"
content={router.locale}
/>
<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 />
<Header />
<div className="govuk-width-container">
<Breadcrumbs slug={appealtypes} formTitle={formTitle} />
<ServiceBanner props={propsForServiceBanner} />
<main
className="govuk-main-wrapper--auto-spacing"
id="main-content"
role="main"
>
{children}
</main>
</div>
<Footer
footerLinks={footerLinks}
ticketnumber={propsForFooter}
/>
</div>
<TimeOut />
</div>
);
}
lib/forms/parseFormXml.js
+35
View File
@@ -0,0 +1,35 @@
// lib/forms/parseFormXml.js
import xpath from "xpath";
/**
* NOTE: Your current page uses DOMParser, which is available in the browser.
* For SSR parsing you'd usually use xmldom or a similar package.
*
* This module supports BOTH:
* - Browser: pass DOMParser output doc
* - Server: if you later add xmldom, pass its doc here
*/
export function getSectionCount(doc) {
const tabs = xpath.select("/form/tabs/tab[*]", doc);
return Array.isArray(tabs) ? tabs.length : 0;
}
export function getTabTitles(doc) {
// same XPath you had
const titleAttrs = xpath.select(
"//form/tabs/tab[*]/labels/label[@description]/@description",
doc
);
if (!Array.isArray(titleAttrs)) return [];
// Attribute nodes differ by parser; be defensive:
return titleAttrs
.map((n) => (typeof n?.value === "string" ? n.value : n?.toString?.()))
.filter(Boolean);
}
export function getTabs(doc) {
const tabs = xpath.select("//form/tabs/tab[*]", doc);
return Array.isArray(tabs) ? tabs : [];
}
lib/forms/readFormXml.js
+24
View File
@@ -0,0 +1,24 @@
// lib/forms/readFormXml.js
import fs from "fs";
import path from "path";
/**
* Reads /data/formsxml/{appealtypes}.xml and normalises it.
* Returns { xmlStr } or throws on missing file.
*/
export function readFormXml(appealtypes) {
if (!appealtypes) throw new Error("readFormXml: appealtypes is required");
const configDirectory = path.resolve(process.cwd(), "data/formsxml");
const filePath = path.join(configDirectory, `${appealtypes}.xml`);
let xmlStr = fs.readFileSync(filePath, "utf8");
// Keep existing normalisation behaviour
xmlStr = xmlStr.replace(/\t/g, "");
xmlStr = xmlStr.replace(/\n/g, "");
xmlStr = xmlStr.replace(/> <"/g, "><");
xmlStr = xmlStr.toString();
return { xmlStr, filePath };
}
lib/myportal/hydrateMyPortalAppealStore.js
+82
View File
@@ -0,0 +1,82 @@
// lib/myportal/hydrateMyPortalAppealStore.js
import {
setContainerID,
setLoggedInUserEmail,
setLoggedInUserId,
setAccountDetails,
} from "../../store/accountDetails/action";
import {
setAppealLPA,
setAppealType,
setAppealTypeID,
setCaseReference as setCaseReferenceAction,
setFilesForAppeal,
} from "../../store/appealType/action";
import {
setAwaitingSubmissionDetails,
setAwaitingSubmissionFromBlob,
} from "../../store/awaitingSubmission/action";
import { setCurrentView, setLocale } from "../../store/currentView/action";
import { setForm } from "../../store/formData/action";
/**
* Hydrates Redux store for resume flow in /myportal/[appealtypes]
*/
export function hydrateMyPortalAppealStore(store, ctx, data) {
const { query, locale } = ctx;
const {
session,
loggedInUser,
loggedInUserEmail,
appealTypeData,
mandatoryFieldsData,
pickListData,
blobList,
blobProgress,
accountDetails,
awaitingSubmissionFromBlob,
xmlStr,
} = data;
// Keep existing behaviour: write locale into store
store.dispatch(setLocale(locale));
// Build caseReference in the same shape you already use
const caseReference = {
ticketnumber: query.casereference,
incidentid: query.inid, // as per your file
caseDetails: blobProgress,
};
// Optional awaiting submission state setup
if (awaitingSubmissionFromBlob) {
store.dispatch(
setAwaitingSubmissionFromBlob(awaitingSubmissionFromBlob)
);
store.dispatch(
setAwaitingSubmissionDetails(awaitingSubmissionFromBlob)
);
store.dispatch(
setCurrentView({
viewName: "Awaiting Submission",
viewKey: "awaitingSubmissionDetails",
})
);
}
store.dispatch(setLoggedInUserId(loggedInUser));
store.dispatch(setLoggedInUserEmail(loggedInUserEmail));
store.dispatch(setAppealLPA(query.lpa));
store.dispatch(setAppealTypeID(query.apt));
store.dispatch(setCaseReferenceAction(caseReference));
store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
store.dispatch(setAppealType(appealTypeData));
store.dispatch(setContainerID(session.user.id));
store.dispatch(setAccountDetails(accountDetails));
store.dispatch(setFilesForAppeal(blobList));
}
lib/myportal/loadMyPortalAppealPage.js
+91
View File
@@ -0,0 +1,91 @@
// lib/myportal/loadMyPortalAppealPage.js
import { getSession } from "next-auth/react";
import {
getAppealsTypesForNewAppeal,
getAwaitingSubmissionFromBlob,
getFilesFromBlob,
getIP,
getMandatoryFields,
getPickLists,
getProgressFromBlob,
getPersonalAccount,
} from "../../actions";
import { readFormXml } from "../forms/readFormXml";
import { requireQueryParams } from "../routing/requireQueryParams";
/**
* Loader for "resume appeal" in /myportal/[appealtypes]
*/
export async function loadMyPortalAppealPage(ctx) {
const { query, req } = ctx;
getIP(req);
// Required params for resume flow (adjust if your routes always provide them)
// casereference is the main identifier here
const required = requireQueryParams(query, [
"appealtypes",
"apt",
"casereference",
]);
if (!required.ok) {
return { redirect: required.redirect };
}
const session = await getSession(ctx);
if (!session) {
return {
redirect: {
destination: "/auth/signin",
permanent: false,
},
};
}
const { cookies } = req;
const loggedInUser = cookies?.pinsUser;
const loggedInUserIdent = session.user.id;
const loggedInUserEmail = session.user.email;
const accountDetails = await getPersonalAccount(loggedInUser);
// Fetch config + blob assets in parallel
const [appealTypeData, mandatoryFieldsData, pickListData, blobList] =
await Promise.all([
getAppealsTypesForNewAppeal(),
getMandatoryFields(query.appealtypes),
getPickLists(query.appealtypes),
getFilesFromBlob(loggedInUserIdent, query.casereference),
]);
const blobProgress = await getProgressFromBlob(
loggedInUserIdent,
query.casereference
);
// Optional: awaiting-submission view setup when query.key exists
let awaitingSubmissionFromBlob = null;
if (Object.prototype.hasOwnProperty.call(query, "key")) {
awaitingSubmissionFromBlob = await getAwaitingSubmissionFromBlob(
session.user.id
);
}
const { xmlStr } = readFormXml(query.appealtypes);
return {
session,
loggedInUser,
loggedInUserIdent,
loggedInUserEmail,
appealTypeData,
mandatoryFieldsData,
pickListData,
blobList,
blobProgress,
accountDetails,
awaitingSubmissionFromBlob,
xmlStr,
};
}
lib/newappeal/hydrateNewAppealStore.js
+48
View File
@@ -0,0 +1,48 @@
// lib/newappeal/hydrateNewAppealStore.js
import {
setContainerID,
setLoggedInUserEmail,
setLoggedInUserId,
setAccountDetails,
} from "../../store/accountDetails/action";
import {
setAppealLPA,
setAppealType,
setAppealTypeID,
// IMPORTANT: avoid name collision in your page by importing as Action
setCaseReference as setCaseReferenceAction,
} from "../../store/appealType/action";
import { setForm } from "../../store/formData/action";
/**
* Dispatches all actions needed to hydrate Redux store for the page.
*/
export function hydrateNewAppealStore(store, query, data) {
const {
session,
loggedInUser,
loggedInUserEmail,
appealTypeData,
mandatoryFieldsData,
pickListData,
blobProgress,
accountDetails,
xmlStr,
} = data;
const caseReference = {
ticketnumber: query.id,
incidentid: query.id,
caseDetails: blobProgress,
};
store.dispatch(setLoggedInUserId(loggedInUser));
store.dispatch(setLoggedInUserEmail(loggedInUserEmail));
store.dispatch(setAppealLPA(query.lpa));
store.dispatch(setAppealTypeID(query.apt));
store.dispatch(setCaseReferenceAction(caseReference));
store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
store.dispatch(setAppealType(appealTypeData));
store.dispatch(setContainerID(session.user.id));
store.dispatch(setAccountDetails(accountDetails));
}
lib/newappeal/loadNewAppealPage.js
+69
View File
@@ -0,0 +1,69 @@
// lib/newappeal/loadNewAppealPage.js
import { getSession } from "next-auth/react";
import {
getAppealsTypesForNewAppeal,
getIP,
getMandatoryFields,
getPickLists,
getProgressFromBlob,
getPersonalAccount,
} from "../../actions";
import { readFormXml } from "../forms/readFormXml";
import { requireQueryParams } from "../routing/requireQueryParams";
/**
* Loads everything needed for New Appeal SSR.
* Returns { redirect } on auth/query issues, otherwise returns a data object.
*/
export async function loadNewAppealPage(ctx) {
const { query, req } = ctx;
// Preserve existing behaviour
getIP(req);
// Validate required params early (adjust keys if needed)
const required = requireQueryParams(query, ["appealtypes", "apt", "id"]);
if (!required.ok) {
return { redirect: required.redirect };
}
const session = await getSession(ctx);
if (!session) {
return {
redirect: {
destination: "/auth/signin",
permanent: false,
},
};
}
const { cookies } = req;
const loggedInUser = cookies?.pinsUser; // existing cookie usage
const loggedInUserIdent = session.user.id;
const loggedInUserEmail = session.user.email;
const [appealTypeData, mandatoryFieldsData, pickListData] =
await Promise.all([
getAppealsTypesForNewAppeal(),
getMandatoryFields(query.appealtypes),
getPickLists(query.appealtypes),
]);
const blobProgress = await getProgressFromBlob(loggedInUserIdent, query.id);
const accountDetails = await getPersonalAccount(loggedInUser);
const { xmlStr } = readFormXml(query.appealtypes);
return {
session,
loggedInUser,
loggedInUserIdent,
loggedInUserEmail,
appealTypeData,
mandatoryFieldsData,
pickListData,
blobProgress,
accountDetails,
xmlStr,
};
}
lib/routing/requireQueryParams.js
+21
View File
@@ -0,0 +1,21 @@
// lib/routing/requireQueryParams.js
// Simple query validator for getServerSideProps
export function requireQueryParams(query, requiredKeys = []) {
const missing = requiredKeys.filter((k) => !query?.[k]);
if (missing.length === 0) return { ok: true };
// Redirect to a generic error page you already have
// (you can swap this destination later)
const destination = `/error?missing=${encodeURIComponent(
missing.join(",")
)}`;
return {
ok: false,
redirect: {
destination,
permanent: false,
},
missing,
};
}