From 20eea5b128aa6bb106d9c3900a640f43191d7eb1 Mon Sep 17 00:00:00 2001
From: Robert Bond <Robert.Bond@test.gov.wales>
Date: Mon, 13 Apr 2026 10:59:27 +0000
Subject: [PATCH] Merged PR 2238: refactor(newappeal): extract
 BuildCheckSection presentation components (Slice 5)

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

Related work items: #22586
---
 .../buildCheckSection/CheckSectionHeading.js  |   5 +
 .../ConfirmationCheckboxGroup.js              |  63 +++++++
 .../buildCheckSection/DocsOfflineNotice.js    |  19 ++
 .../buildCheckSection/FinalisingStatePanel.js |  11 ++
 .../buildCheckSection/SectionReviewList.js    |   5 +
 .../buildCheckSection/SubmitActionsPanel.js   |   5 +
 components/newappeal/buildchecksection.js     | 169 ++++++------------
 context/refactor-tracker.md                   |   4 +-
 8 files changed, 167 insertions(+), 114 deletions(-)
 create mode 100644 components/newappeal/buildCheckSection/CheckSectionHeading.js
 create mode 100644 components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js
 create mode 100644 components/newappeal/buildCheckSection/DocsOfflineNotice.js
 create mode 100644 components/newappeal/buildCheckSection/FinalisingStatePanel.js
 create mode 100644 components/newappeal/buildCheckSection/SectionReviewList.js
 create mode 100644 components/newappeal/buildCheckSection/SubmitActionsPanel.js

diff --git a/components/newappeal/buildCheckSection/CheckSectionHeading.js b/components/newappeal/buildCheckSection/CheckSectionHeading.js
new file mode 100644
index 00000000..7e79ef5c
--- /dev/null
+++ b/components/newappeal/buildCheckSection/CheckSectionHeading.js
@@ -0,0 +1,5 @@
+const CheckSectionHeading = ({ title }) => {
+    return <h1 className="govuk-heading-m">{title}</h1>;
+};
+
+export default CheckSectionHeading;
diff --git a/components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js b/components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js
new file mode 100644
index 00000000..1131649e
--- /dev/null
+++ b/components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js
@@ -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;
diff --git a/components/newappeal/buildCheckSection/DocsOfflineNotice.js b/components/newappeal/buildCheckSection/DocsOfflineNotice.js
new file mode 100644
index 00000000..b67d1d3c
--- /dev/null
+++ b/components/newappeal/buildCheckSection/DocsOfflineNotice.js
@@ -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;
diff --git a/components/newappeal/buildCheckSection/FinalisingStatePanel.js b/components/newappeal/buildCheckSection/FinalisingStatePanel.js
new file mode 100644
index 00000000..f64552bd
--- /dev/null
+++ b/components/newappeal/buildCheckSection/FinalisingStatePanel.js
@@ -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;
diff --git a/components/newappeal/buildCheckSection/SectionReviewList.js b/components/newappeal/buildCheckSection/SectionReviewList.js
new file mode 100644
index 00000000..a20e0dce
--- /dev/null
+++ b/components/newappeal/buildCheckSection/SectionReviewList.js
@@ -0,0 +1,5 @@
+const SectionReviewList = ({ children }) => {
+    return <dl className="govuk-summary-list ">{children}</dl>;
+};
+
+export default SectionReviewList;
diff --git a/components/newappeal/buildCheckSection/SubmitActionsPanel.js b/components/newappeal/buildCheckSection/SubmitActionsPanel.js
new file mode 100644
index 00000000..682e1221
--- /dev/null
+++ b/components/newappeal/buildCheckSection/SubmitActionsPanel.js
@@ -0,0 +1,5 @@
+const SubmitActionsPanel = ({ children }) => {
+    return <div className="govuk-button-group">{children}</div>;
+};
+
+export default SubmitActionsPanel;
diff --git a/components/newappeal/buildchecksection.js b/components/newappeal/buildchecksection.js
index ea49e687..ea90fe51 100644
--- a/components/newappeal/buildchecksection.js
+++ b/components/newappeal/buildchecksection.js
@@ -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>
diff --git a/context/refactor-tracker.md b/context/refactor-tracker.md
index 12a50e49..f69b2f94 100644
--- a/context/refactor-tracker.md
+++ b/context/refactor-tracker.md
@@ -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
 
 ---