FLS-1409: change mark as a complete component to a standard component to use with gov-uk macro and added error summary change (#203)

Author: nuwan-samarasinghe

runner/src/server/views/summary.html

@@ -1,5 +1,7 @@
 {% from "partials/summary-detail.html" import summaryDetail %}
 {% from "components/checkboxes/macro.njk" import govukCheckboxes %}
+{% from "components/radios/macro.njk" import govukRadios %}
+{% from "components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "button/macro.njk" import govukButton %}
 {% extends 'layout.html' %}
 
@@ -30,6 +32,14 @@
                 {% if not hasMultipleSections and not details[0].hideTitle %}
                 <span class="govuk-caption-l">{{ details[0].title }}</span>
                 {% endif %}
+
+                {% if markAsCompleteComponent and markAsCompleteError %}
+                    {{ govukErrorSummary({
+                        titleText: "There is a problem",
+                        errorList: [{ text: markAsCompleteError, href: "#markAsComplete-error" }]
+                    }) }}
+                {% endif %}
+
                 <h1 class="govuk-heading-l">
                     {% if callback and callback.title %}
                         {{ callback.title }}
@@ -98,40 +108,39 @@ <h2 class="govuk-heading-m" id="declaration">Declaration</h2>
                         {% endif %}
 
                         {% if markAsCompleteComponent %}
-                            <div class="govuk-!-margin-top-9 govuk-form-group {{ 'govuk-form-group--error' if markAsCompleteError }}">
-                                {% if markAsCompleteError %}
-                                    <span id="nationality-error" class="govuk-error-message">
-                                    <span class="govuk-visually-hidden">Error:</span> {{ markAsCompleteError }}</span>
-                                {% endif %}
-                                <fieldset class="govuk-fieldset">
-                                    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-                                        <h1 class="govuk-fieldset__heading">
-                                            {{ i18nGetTranslation("markAsComplete") }}
-                                        </h1>
-                                    </legend>
-                                    <div class="govuk-radios" data-module="govuk-radios">
-                                        <div class="govuk-radios__item">
-                                            <input class="govuk-radios__input" id="markAsComplete-yes"
-                                                   name="markAsComplete" type="radio" value="true"
-                                                   {% if markAsComplete %}checked{% endif %}>
-                                            <label class="govuk-label govuk-radios__label" for="markAsComplete-yes">
-                                                {{ i18nGetTranslation("components.sectionCompletedField.yes") }}
-                                            </label>
-                                            <div class="govuk-hint govuk-radios__hint">
-                                                {{ i18nGetTranslation("components.sectionCompletedField.hint") }}
-                                            </div>
-                                        </div>
-                                        <div class="govuk-radios__item">
-                                            <input class="govuk-radios__input" id="markAsComplete-no"
-                                                   name="markAsComplete" type="radio" value="false"
-                                                   {% if markAsComplete == false %}checked{% endif %}>
-                                            <label class="govuk-label govuk-radios__label" for="markAsComplete-no">
-                                                {{ i18nGetTranslation("components.sectionCompletedField.no") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </fieldset>
-                            </div>
+                            {% if markAsCompleteError %}
+                                {% set errorMessageObj = { text: markAsCompleteError } %}
+                            {% else %}
+                                {% set errorMessageObj = null %}
+                            {% endif %}
+                            {{ govukRadios({
+                                name: "markAsComplete",
+                                fieldset: {
+                                    legend: {
+                                        text: i18nGetTranslation("markAsComplete"),
+                                        isPageHeading: false,
+                                        classes: "govuk-fieldset__legend--m"
+                                    }
+                                },
+                                items: [
+                                    {
+                                        value: true,
+                                        text: i18nGetTranslation("components.sectionCompletedField.yes"),
+                                        id: "markAsComplete-yes",
+                                        checked: (markAsComplete === true),
+                                        hint: {
+                                            text: i18nGetTranslation("components.sectionCompletedField.hint")
+                                        }
+                                    },
+                                    {
+                                        value: false,
+                                        checked: (markAsComplete === false),
+                                        id: "markAsComplete-no",
+                                        text: i18nGetTranslation("components.sectionCompletedField.no")
+                                    }
+                                ],
+                                errorMessage: errorMessageObj
+                            }) }}
                         {% endif %}
 
                         {% if fees and fees.details|length %}