From 869264b7fac4789890ee2e4c0e148969e0ccb96d Mon Sep 17 00:00:00 2001
From: Robert Bond <Robert.Bond@test.gov.wales>
Date: Mon, 13 Apr 2026 10:15:56 +0000
Subject: [PATCH] Merged PR 2237: refactor(newappeal): extract BuildSection
 presentation components (Slice 4)

refactor(newappeal): extract BuildSection presentation components (Slice 4)

Related work items: #22583
---
 .../newappeal/buildSection/ErrorSummary.js    |  31 ++++
 .../buildSection/PrimaryActionButtons.js      |   5 +
 .../buildSection/SaveStatusIndicator.js       |  14 ++
 .../newappeal/buildSection/SectionHeader.js   |   5 +
 .../buildSection/SidebarProgressPanel.js      |  12 ++
 components/newappeal/buildsection.js          | 161 ++++++------------
 context/refactor-tracker.md                   |   4 +-
 7 files changed, 123 insertions(+), 109 deletions(-)
 create mode 100644 components/newappeal/buildSection/ErrorSummary.js
 create mode 100644 components/newappeal/buildSection/PrimaryActionButtons.js
 create mode 100644 components/newappeal/buildSection/SaveStatusIndicator.js
 create mode 100644 components/newappeal/buildSection/SectionHeader.js
 create mode 100644 components/newappeal/buildSection/SidebarProgressPanel.js

diff --git a/components/newappeal/buildSection/ErrorSummary.js b/components/newappeal/buildSection/ErrorSummary.js
new file mode 100644
index 00000000..f2bf9bfb
--- /dev/null
+++ b/components/newappeal/buildSection/ErrorSummary.js
@@ -0,0 +1,31 @@
+const ErrorSummary = ({ hasErrors, errorItems }) => {
+    return hasErrors ? (
+        <div
+            className="govuk-error-summary"
+            aria-labelledby="error-summary-title"
+            role="alert"
+            tabIndex="-1"
+            data-module="govuk-error-summary"
+        >
+            <h2 className="govuk-error-summary__title" id="error-summary-title">
+                The following fields have a problem :
+            </h2>
+            <div className="govuk-error-summary__body">
+                <ul className="govuk-list govuk-error-summary__list">
+                    {errorItems.map((item, i) => (
+                        <li key={i}>
+                            <a href={"#" + item.field + "_label"}>
+                                {" "}
+                                {item.label}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    ) : (
+        ""
+    );
+};
+
+export default ErrorSummary;
diff --git a/components/newappeal/buildSection/PrimaryActionButtons.js b/components/newappeal/buildSection/PrimaryActionButtons.js
new file mode 100644
index 00000000..84741b8c
--- /dev/null
+++ b/components/newappeal/buildSection/PrimaryActionButtons.js
@@ -0,0 +1,5 @@
+const PrimaryActionButtons = ({ children }) => {
+    return <div className="govuk-button-group">{children}</div>;
+};
+
+export default PrimaryActionButtons;
diff --git a/components/newappeal/buildSection/SaveStatusIndicator.js b/components/newappeal/buildSection/SaveStatusIndicator.js
new file mode 100644
index 00000000..86d23003
--- /dev/null
+++ b/components/newappeal/buildSection/SaveStatusIndicator.js
@@ -0,0 +1,14 @@
+const SaveStatusIndicator = ({ text }) => {
+    return (
+        <span className=" progress-save-active">
+            {text}
+            <img
+                className="data-loading-icon"
+                src="/assets/images/loading.gif"
+                alt={text}
+            />
+        </span>
+    );
+};
+
+export default SaveStatusIndicator;
diff --git a/components/newappeal/buildSection/SectionHeader.js b/components/newappeal/buildSection/SectionHeader.js
new file mode 100644
index 00000000..6d9c09ca
--- /dev/null
+++ b/components/newappeal/buildSection/SectionHeader.js
@@ -0,0 +1,5 @@
+const SectionHeader = ({ title }) => {
+    return <h1 className="govuk-heading-m  ">{title}</h1>;
+};
+
+export default SectionHeader;
diff --git a/components/newappeal/buildSection/SidebarProgressPanel.js b/components/newappeal/buildSection/SidebarProgressPanel.js
new file mode 100644
index 00000000..5c6903d5
--- /dev/null
+++ b/components/newappeal/buildSection/SidebarProgressPanel.js
@@ -0,0 +1,12 @@
+const SidebarProgressPanel = ({ children }) => {
+    return (
+        <div className="govuk-grid-column-one-third">
+            <div className="at-nav-container">
+                {children}
+                <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
+            </div>
+        </div>
+    );
+};
+
+export default SidebarProgressPanel;
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
index e4355406..9b8ed214 100644
--- a/components/newappeal/buildsection.js
+++ b/components/newappeal/buildsection.js
@@ -34,6 +34,11 @@ import {
 
 import { FieldsTranslations } from "../elements";
 import BuildProgress from "./buildprogress";
+import ErrorSummary from "./buildSection/ErrorSummary";
+import PrimaryActionButtons from "./buildSection/PrimaryActionButtons";
+import SaveStatusIndicator from "./buildSection/SaveStatusIndicator";
+import SectionHeader from "./buildSection/SectionHeader";
+import SidebarProgressPanel from "./buildSection/SidebarProgressPanel";
 
 let BuildSection = (props) => {
     const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
@@ -354,11 +359,10 @@ let BuildSection = (props) => {
         window.scrollTo(0, 0);
     };
 
-    let errorsobj = {};
-    const ShowErrorHeader = (props) => {
-        errorsobj = props.props.appealForm.syncErrors;
-        errorsobj = _.keys(errorsobj);
-
+    const getErrorItems = () => {
+        let errorsobj = _.keys(
+            _.get(props, "props.form.appealForm.syncErrors", {})
+        );
         const getErrorLabel = (whichField) => {
             var doc = parseXml(props.formXML);
             var errorFieldLabel = selectErrorFieldLabelDescription(
@@ -369,47 +373,15 @@ let BuildSection = (props) => {
             return errorFieldLabel[0].value;
         };
 
-        const ShowErrors = () => {
-            let errorList = [];
-            for (let i = 0; i < errorsobj.length; ++i) {
-                //get label from error key - search rowxml for id = errorobj
+        let errorItems = [];
+        for (let i = 0; i < errorsobj.length; ++i) {
+            errorItems.push({
+                "field": errorsobj[i],
+                "label": getErrorLabel(errorsobj[i])
+            });
+        }
 
-                errorList.push(
-                    <li key={i}>
-                        <a href={"#" + errorsobj[i] + "_label"}>
-                            {" "}
-                            {getErrorLabel(errorsobj[i])}
-                        </a>
-                    </li>
-                );
-            }
-
-            return errorList;
-        };
-
-        return !_.isEmpty(errorsobj) ? (
-            <div
-                className="govuk-error-summary"
-                aria-labelledby="error-summary-title"
-                role="alert"
-                tabIndex="-1"
-                data-module="govuk-error-summary"
-            >
-                <h2
-                    className="govuk-error-summary__title"
-                    id="error-summary-title"
-                >
-                    The following fields have a problem :
-                </h2>
-                <div className="govuk-error-summary__body">
-                    <ul className="govuk-list govuk-error-summary__list">
-                        <ShowErrors />
-                    </ul>
-                </div>
-            </div>
-        ) : (
-            ""
-        );
+        return errorItems;
     };
 
     const hasUploadFiles = () => {
@@ -425,19 +397,12 @@ let BuildSection = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds wgForm ">
-                <h1 className="govuk-heading-m  ">
-                    {FieldsTranslations(titles[0].value)}
-                </h1>
+                <SectionHeader title={FieldsTranslations(titles[0].value)} />
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
-                    {hasErrors == true ? (
-                        <ShowErrorHeader
-                            hasErrors={hasErrors}
-                            props={props.props.form}
-                            formXML={formXML}
-                        />
-                    ) : (
-                        ""
-                    )}
+                    <ErrorSummary
+                        hasErrors={hasErrors == true}
+                        errorItems={getErrorItems()}
+                    />
                     <BuildRow
                         rowXML={rowXML}
                         whichSection={props.whichSection}
@@ -456,7 +421,7 @@ let BuildSection = (props) => {
                         }
                     />
 
-                    <div className="govuk-button-group">
+                    <PrimaryActionButtons>
                         {props.sectionCount != currentSection ? (
                             <>
                                 <button
@@ -493,20 +458,13 @@ let BuildSection = (props) => {
                                 </button>
                                 {currentSection > 1 &&
                                     (savingStatus ? (
-                                        <span className=" progress-save-active">
-                                            {router.locale == "cy"
-                                                ? "Nôl data"
-                                                : "Saving data"}
-                                            <img
-                                                className="data-loading-icon"
-                                                src="/assets/images/loading.gif"
-                                                alt={
-                                                    router.locale == "cy"
-                                                        ? "Nôl data"
-                                                        : "Saving data"
-                                                }
-                                            />
-                                        </span>
+                                        <SaveStatusIndicator
+                                            text={
+                                                router.locale == "cy"
+                                                    ? "Nôl data"
+                                                    : "Saving data"
+                                            }
+                                        />
                                     ) : (
                                         <button
                                             className="govuk-button  progress-save "
@@ -562,20 +520,13 @@ let BuildSection = (props) => {
                                     {t("common:submit-button")}{" "}
                                 </button>
                                 {savingStatus ? (
-                                    <span className=" progress-save-active">
-                                        {router.locale == "cy"
-                                            ? "Nôl data"
-                                            : "Saving data"}
-                                        <img
-                                            className="data-loading-icon"
-                                            src="/assets/images/loading.gif"
-                                            alt={
-                                                router.locale == "cy"
-                                                    ? "Nôl data"
-                                                    : "Saving data"
-                                            }
-                                        />
-                                    </span>
+                                    <SaveStatusIndicator
+                                        text={
+                                            router.locale == "cy"
+                                                ? "Nôl data"
+                                                : "Saving data"
+                                        }
+                                    />
                                 ) : (
                                     <button
                                         className="govuk-button  progress-save "
@@ -621,29 +572,25 @@ let BuildSection = (props) => {
                         ) : (
                             ""
                         )} */}
-                    </div>
+                    </PrimaryActionButtons>
                 </form>
             </div>
-            <div className="govuk-grid-column-one-third">
-                <div className="at-nav-container">
-                    {/* <span>
-                        Last section is {lastIndex} - {currentSection}
-                    </span> */}
-                    <BuildProgress
-                        progObj={progObj}
-                        props={props}
-                        titleList={titleList}
-                        documentListObj={documentListObj}
-                        formObjXML={formXML}
-                        mandatoryFieldsData={mandatoryFieldsData}
-                        currentSection={currentSection}
-                        initialValues={props.initialValues}
-                        setCurrentSection={setCurrentSection}
-                    />
-
-                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
-                </div>
-            </div>
+            <SidebarProgressPanel>
+                {/* <span>
+                    Last section is {lastIndex} - {currentSection}
+                </span> */}
+                <BuildProgress
+                    progObj={progObj}
+                    props={props}
+                    titleList={titleList}
+                    documentListObj={documentListObj}
+                    formObjXML={formXML}
+                    mandatoryFieldsData={mandatoryFieldsData}
+                    currentSection={currentSection}
+                    initialValues={props.initialValues}
+                    setCurrentSection={setCurrentSection}
+                />
+            </SidebarProgressPanel>
         </div>
     );
 };
diff --git a/context/refactor-tracker.md b/context/refactor-tracker.md
index 94612953..12a50e49 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 4 — BuildSection UI Extraction  
+Current slice: Slice 5 — BuildCheckSection UI Extraction  
 Status: READY TO START
 
 ---
@@ -50,7 +50,7 @@ Status: COMPLETE
 
 ### Slice 4 — BuildSection UI Extraction
 
-Status: NOT STARTED
+Status: COMPLETE
 
 ---