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,
sendCaseCompleteMessageEffect
} 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) => {
useEffect(() => {
@@ -242,10 +248,8 @@ let BuildCheckSection = (props) => {
<div className="govuk-grid-row" key={1222}>
<div className="govuk-grid-column-full">
<div>
<h1 className="govuk-heading-m">
Are these answers correct?
</h1>
<dl className="govuk-summary-list ">
<CheckSectionHeading title="Are these answers correct?" />
<SectionReviewList>
{Object.keys(titles).map((key) => (
<div key={key}>
<h2 className="govuk-heading-m govuk-!-margin-top-9">
@@ -263,7 +267,7 @@ let BuildCheckSection = (props) => {
/>
</div>
))}
</dl>
</SectionReviewList>
{/* <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list">
{buildAppealFilesArray.length > 0
? buildAppealFilesArray.map((blob, i) => {
@@ -318,120 +322,61 @@ let BuildCheckSection = (props) => {
</dl> */}
</div>
{finaliseAppealProcess ? (
<div className="">
<h3 className="govuk-heading-m govuk-!-margin-top-9">
{t("newappeal:new-appeal-finalising-heading")}
</h3>
<p className="govuk-body">
{t("newappeal:new-appeal-finalising-label")}
</p>
<p className="govuk-body textloading">
{t("newappeal:new-appeal-wait-label")}
</p>
</div>
<FinalisingStatePanel
heading={t("newappeal:new-appeal-finalising-heading")}
label={t("newappeal:new-appeal-finalising-label")}
waitLabel={t("newappeal:new-appeal-wait-label")}
/>
) : (
<>
<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={(e) => {
setDownloadAppealForm(
e.target.checked
);
}}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="pinswg_downloadAppealForm"
>
{t(
"newappeal:new-appeal-check-download-label"
)}
</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={(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"
<ConfirmationCheckboxGroup
downloadAppealForm={downloadAppealForm}
onDownloadChange={(e) => {
setDownloadAppealForm(e.target.checked);
}}
onConfirmChange={(e) => {
setConfirmSections(!confirmSections);
}}
downloadLabel={t(
"newappeal:new-appeal-check-download-label"
)}
confirmLabel={t(
"newappeal:new-appeal-check-confirm-label"
)}
paragraphOne={t(
"newappeal:new-appeal-check-confirm-paragraph-one"
)}
paragraphTwo={t(
"newappeal:new-appeal-check-confirm-paragraph-two"
)}
paragraphTwoLink={
<Link
target="_blank"
href={t(
"newappeal:new-appeal-check-confirm-paragraph-two-link"
)}
</p>
</div>
<div>
<p className="govuk-body">
>
{t(
"newappeal:new-appeal-check-confirm-paragraph-two"
)}{" "}
<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>
"newappeal:new-appeal-check-confirm-paragraph-two-link"
)}
</Link>
}
/>
<div className="govuk-button-group">
<SubmitActionsPanel>
{ShowDocLinks ? (
<>
<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>
<DocsOfflineNotice
noticeText={t(
"myportal:docsoffline-newappeal-label"
)}
returnLink={
<Link className="govuk-link" href="/">
{t(
"myportal:docsoffline-newappeal-label"
"newappeal:return-to-myportal-link"
)}
{" "}
</strong>
</div>{" "}
<Link className="govuk-link" href="/">
{t("newappeal:return-to-myportal-link")}
</Link>
</>
</Link>
}
/>
) : (
<>
<button
@@ -457,7 +402,7 @@ let BuildCheckSection = (props) => {
</a>
</>
)}
</div>
</SubmitActionsPanel>
</>
)}
</div>
context/refactor-tracker.md
+2 -2
View File
@@ -4,7 +4,7 @@ Base branch for this tracker: `refactor`
## Status
Current slice: Slice 5 — BuildCheckSection UI Extraction
Current slice: Slice 6 — BuildCheckRow Formatter Map
Status: READY TO START
---
@@ -56,7 +56,7 @@ Status: COMPLETE
### Slice 5 — BuildCheckSection UI Extraction
Status: NOT STARTED
Status: COMPLETE
---