Merged PR 2254: refactor(representations): normalise shared type-selector and action-row frag...

refactor(representations): normalise shared type-selector and action-row fragments in main representation variants (Slice R5, behaviour-preserving) Related work items: #22441
2026-04-17 09:22:36 +00:00
parent d05e54c020
commit 8e21ec1dd7
6 changed files with 272 additions and 353 deletions
@@ -0,0 +1,42 @@
+const RepresentationActionButtons = ({
+    t,
+    locale,
+    isSaving,
+    isContinueDisabled,
+    onSaveExit
+}) => {
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-button-group">
+                <button
+                    type="submit"
+                    className="govuk-button"
+                    data-module="govuk-button"
+                    disabled={isContinueDisabled}
+                >
+                    {t("common:continue-button")}
+                </button>
+
+                {isSaving ? (
+                    <span className=" progress-save-active">
+                        {locale == "cy" ? "Nôl data" : "Saving data"}
+                        <img
+                            className="data-loading-icon"
+                            src="/assets/images/loading.gif"
+                            alt={locale == "cy" ? "Nôl data" : "Saving data"}
+                        />
+                    </span>
+                ) : (
+                    <button
+                        className="govuk-button progress-save "
+                        onClick={onSaveExit}
+                    >
+                        {t("common:save-exit-button")}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RepresentationActionButtons;
@@ -0,0 +1,49 @@
+import { Field } from "redux-form";
+
+import { RenderPickList } from "../representationElements";
+
+const RepresentationTypeSelectorBlock = ({
+    t,
+    headingText,
+    kindLabelText,
+    isTypeSelected,
+    selectedTypeDisplay,
+    optionsArr,
+    validate,
+    errorMsg
+}) => {
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-form-group">
+                {!isTypeSelected ? (
+                    <>
+                        <h2 className="govuk-heading-m ">{headingText}</h2>
+
+                        <label
+                            className="govuk-label govuk-body-m"
+                            htmlFor="representationType"
+                        >
+                            {kindLabelText}
+                        </label>
+
+                        <Field
+                            name="representationType"
+                            component={RenderPickList}
+                            datafieldname="representationType"
+                            validate={validate}
+                            optionsArr={optionsArr}
+                            errorMsg={errorMsg}
+                        />
+                    </>
+                ) : (
+                    <label className="govuk-label govuk-body-m">
+                        {t("myrepresentations:representation-type")}:{" "}
+                        {selectedTypeDisplay}
+                    </label>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RepresentationTypeSelectorBlock;