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

Merged PR 2238: refactor(newappeal): extract BuildCheckSection presentation components (Slice 5)

Browse Source 
refactor(newappeal): extract BuildCheckSection presentation components (Slice 5)

Related work items: #22586
This commit is contained in:
Robert Bond
2026-04-13 10:59:27 +00:00
parent 869264b7fa
commit 20eea5b128
8 changed files with 167 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/newappeal/buildCheckSection/CheckSectionHeading.js
+5
View File
@@ -0,0 +1,5 @@
const CheckSectionHeading = ({ title }) => {
return <h1 className="govuk-heading-m">{title}</h1>;
};
export default CheckSectionHeading;
components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js
+63
View File
@@ -0,0 +1,63 @@
const ConfirmationCheckboxGroup = ({
downloadAppealForm,
onDownloadChange,
onConfirmChange,
downloadLabel,
confirmLabel,
paragraphOne,
paragraphTwo,
paragraphTwoLink
}) => {
return (
<div className="govuk-form-group ">
<fieldset className="govuk-fieldset">
<div className="govuk-checkboxes govuk-checkboxes--small">
<div className="govuk-checkboxes__item">
<input
name="pinswg_downloadAppealForm"
id="pinswg_downloadAppealForm"
type="checkbox"
className="govuk-checkboxes__input"
checked={downloadAppealForm}
onChange={onDownloadChange}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="pinswg_downloadAppealForm"
>
{downloadLabel}
</label>
</div>
</div>
<div className="govuk-checkboxes govuk-checkboxes--small">
<div className="govuk-checkboxes__item">
<input
name="pinswg_checkconfirmation"
id="pinswg_checkconfirmation"
type="checkbox"
className="govuk-checkboxes__input"
value=""
onChange={onConfirmChange}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="pinswg_checkconfirmation"
>
{confirmLabel}
</label>
</div>
</div>
</fieldset>
<div>
<p className="govuk-body">{paragraphOne}</p>
</div>
<div>
<p className="govuk-body">
{paragraphTwo} {paragraphTwoLink}
</p>
</div>
</div>
);
};
export default ConfirmationCheckboxGroup;
components/newappeal/buildCheckSection/DocsOfflineNotice.js
+19
View File
@@ -0,0 +1,19 @@
const DocsOfflineNotice = ({ noticeText, returnLink }) => {
return (
<>
<div className="govuk-warning-text ">
<span className="govuk-warning-text__icon" aria-hidden="true">
!
</span>
<strong className="govuk-warning-text__text govuk-!-margin-top-2">
<span className="govuk-visually-hidden">Notice</span>
{noticeText}
{" "}
</strong>
</div>{" "}
{returnLink}
</>
);
};
export default DocsOfflineNotice;
components/newappeal/buildCheckSection/FinalisingStatePanel.js
+11
View File
@@ -0,0 +1,11 @@
const FinalisingStatePanel = ({ heading, label, waitLabel }) => {
return (
<div className="">
<h3 className="govuk-heading-m govuk-!-margin-top-9">{heading}</h3>
<p className="govuk-body">{label}</p>
<p className="govuk-body textloading">{waitLabel}</p>
</div>
);
};
export default FinalisingStatePanel;
components/newappeal/buildCheckSection/SectionReviewList.js
+5
View File
@@ -0,0 +1,5 @@
const SectionReviewList = ({ children }) => {
return <dl className="govuk-summary-list ">{children}</dl>;
};
export default SectionReviewList;
components/newappeal/buildCheckSection/SubmitActionsPanel.js
+5
View File
@@ -0,0 +1,5 @@
const SubmitActionsPanel = ({ children }) => {
return <div className="govuk-button-group">{children}</div>;
};
export default SubmitActionsPanel;
components/newappeal/buildchecksection.js
+57 -112
View File
@@ -26,6 +26,12 @@ import {
generateAppealPDFEffect, generateAppealPDFEffect,
sendCaseCompleteMessageEffect sendCaseCompleteMessageEffect
} from "../../lib/newappeal/journeyEffects"; } from "../../lib/newappeal/journeyEffects";
import CheckSectionHeading from "./buildCheckSection/CheckSectionHeading";
import ConfirmationCheckboxGroup from "./buildCheckSection/ConfirmationCheckboxGroup";
import DocsOfflineNotice from "./buildCheckSection/DocsOfflineNotice";
import FinalisingStatePanel from "./buildCheckSection/FinalisingStatePanel";
import SectionReviewList from "./buildCheckSection/SectionReviewList";
import SubmitActionsPanel from "./buildCheckSection/SubmitActionsPanel";
let BuildCheckSection = (props) => { let BuildCheckSection = (props) => {
useEffect(() => { useEffect(() => {
@@ -242,10 +248,8 @@ let BuildCheckSection = (props) => {
<div className="govuk-grid-row" key={1222}> <div className="govuk-grid-row" key={1222}>
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<div> <div>
<h1 className="govuk-heading-m"> <CheckSectionHeading title="Are these answers correct?" />
Are these answers correct? <SectionReviewList>
</h1>
<dl className="govuk-summary-list ">
{Object.keys(titles).map((key) => ( {Object.keys(titles).map((key) => (
<div key={key}> <div key={key}>
<h2 className="govuk-heading-m govuk-!-margin-top-9"> <h2 className="govuk-heading-m govuk-!-margin-top-9">
@@ -263,7 +267,7 @@ let BuildCheckSection = (props) => {
/> />
</div> </div>
))} ))}
</dl> </SectionReviewList>
{/* <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"> {/* <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list">
{buildAppealFilesArray.length > 0 {buildAppealFilesArray.length > 0
? buildAppealFilesArray.map((blob, i) => { ? buildAppealFilesArray.map((blob, i) => {
@@ -318,120 +322,61 @@ let BuildCheckSection = (props) => {
</dl> */} </dl> */}
</div> </div>
{finaliseAppealProcess ? ( {finaliseAppealProcess ? (
<div className=""> <FinalisingStatePanel
<h3 className="govuk-heading-m govuk-!-margin-top-9"> heading={t("newappeal:new-appeal-finalising-heading")}
{t("newappeal:new-appeal-finalising-heading")} label={t("newappeal:new-appeal-finalising-label")}
</h3> waitLabel={t("newappeal:new-appeal-wait-label")}
<p className="govuk-body"> />
{t("newappeal:new-appeal-finalising-label")}
</p>
<p className="govuk-body textloading">
{t("newappeal:new-appeal-wait-label")}
</p>
</div>
) : ( ) : (
<> <>
<div className="govuk-form-group "> <ConfirmationCheckboxGroup
<fieldset className="govuk-fieldset"> downloadAppealForm={downloadAppealForm}
<div className="govuk-checkboxes govuk-checkboxes--small"> onDownloadChange={(e) => {
<div className="govuk-checkboxes__item"> setDownloadAppealForm(e.target.checked);
<input }}
name="pinswg_downloadAppealForm" onConfirmChange={(e) => {
id="pinswg_downloadAppealForm" setConfirmSections(!confirmSections);
type="checkbox" }}
className="govuk-checkboxes__input" downloadLabel={t(
checked={downloadAppealForm} "newappeal:new-appeal-check-download-label"
onChange={(e) => { )}
setDownloadAppealForm( confirmLabel={t(
e.target.checked "newappeal:new-appeal-check-confirm-label"
); )}
}} paragraphOne={t(
/> "newappeal:new-appeal-check-confirm-paragraph-one"
<label )}
className="govuk-label govuk-checkboxes__label" paragraphTwo={t(
htmlFor="pinswg_downloadAppealForm" "newappeal:new-appeal-check-confirm-paragraph-two"
> )}
{t( paragraphTwoLink={
"newappeal:new-appeal-check-download-label" <Link
)} target="_blank"
</label> href={t(
</div> "newappeal:new-appeal-check-confirm-paragraph-two-link"
</div>
<div className="govuk-checkboxes govuk-checkboxes--small">
<div className="govuk-checkboxes__item">
<input
name="pinswg_checkconfirmation"
id="pinswg_checkconfirmation"
type="checkbox"
className="govuk-checkboxes__input"
value=""
onChange={(e) => {
setConfirmSections(
!confirmSections
);
}}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="pinswg_checkconfirmation"
>
{t(
"newappeal:new-appeal-check-confirm-label"
)}
</label>
</div>
</div>
</fieldset>
<div>
<p className="govuk-body">
{t(
"newappeal:new-appeal-check-confirm-paragraph-one"
)} )}
</p> >
</div>
<div>
<p className="govuk-body">
{t( {t(
"newappeal:new-appeal-check-confirm-paragraph-two" "newappeal:new-appeal-check-confirm-paragraph-two-link"
)}{" "} )}
<Link </Link>
target="_blank" }
href={t( />
"newappeal:new-appeal-check-confirm-paragraph-two-link"
)}
>
{t(
"newappeal:new-appeal-check-confirm-paragraph-two-link"
)}
</Link>
</p>
</div>
</div>
<div className="govuk-button-group"> <SubmitActionsPanel>
{ShowDocLinks ? ( {ShowDocLinks ? (
<> <DocsOfflineNotice
<div className="govuk-warning-text "> noticeText={t(
<span "myportal:docsoffline-newappeal-label"
className="govuk-warning-text__icon" )}
aria-hidden="true" returnLink={
> <Link className="govuk-link" href="/">
!
</span>
<strong className="govuk-warning-text__text govuk-!-margin-top-2">
<span className="govuk-visually-hidden">
Notice
</span>
{t( {t(
"myportal:docsoffline-newappeal-label" "newappeal:return-to-myportal-link"
)} )}
{" "} </Link>
</strong> }
</div>{" "} />
<Link className="govuk-link" href="/">
{t("newappeal:return-to-myportal-link")}
</Link>
</>
) : ( ) : (
<> <>
<button <button
@@ -457,7 +402,7 @@ let BuildCheckSection = (props) => {
</a> </a>
</> </>
)} )}
</div> </SubmitActionsPanel>
</> </>
)} )}
</div> </div>
context/refactor-tracker.md
+2 -2
View File
@@ -4,7 +4,7 @@ Base branch for this tracker: `refactor`
## Status ## Status
Current slice: Slice 5 — BuildCheckSection UI Extraction Current slice: Slice 6 — BuildCheckRow Formatter Map
Status: READY TO START Status: READY TO START
--- ---
@@ -56,7 +56,7 @@ Status: COMPLETE
### Slice 5 — BuildCheckSection UI Extraction ### Slice 5 — BuildCheckSection UI Extraction
Status: NOT STARTED Status: COMPLETE
--- ---