From 662f3e84b18770e7b1989bd2cf7f52af35b00d8e Mon Sep 17 00:00:00 2001
From: Joshua Hawxwell <m@hawx.me>
Date: Fri, 20 Oct 2023 10:57:25 +0100
Subject: [PATCH] MLPAB-1189 Use summary card for signing boxes (#786)

---
 .../confirm-your-identity-and-sign.cy.js      |  2 +-
 web/template/attorney_sign.gohtml             | 15 +++++----
 web/template/provide_certificate.gohtml       | 31 +++++++++----------
 web/template/sign_the_lpa_on_behalf.gohtml    | 12 +++----
 web/template/sign_your_lpa.gohtml             | 17 +++++-----
 5 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/cypress/e2e/donor/confirm-your-identity-and-sign.cy.js b/cypress/e2e/donor/confirm-your-identity-and-sign.cy.js
index 0d8ddd629e..66345f2c7e 100644
--- a/cypress/e2e/donor/confirm-your-identity-and-sign.cy.js
+++ b/cypress/e2e/donor/confirm-your-identity-and-sign.cy.js
@@ -81,7 +81,7 @@ describe('Confirm your identity and sign', () => {
             cy.contains('Select both boxes to sign and apply to register your LPA');
         });
 
-        cy.contains('.moj-ticket-panel  .govuk-error-message', 'Select both boxes to sign and apply to register your LPA');
+        cy.contains('.govuk-error-message', 'Select both boxes to sign and apply to register your LPA');
     });
 
     it('errors when not witnessed', () => {
diff --git a/web/template/attorney_sign.gohtml b/web/template/attorney_sign.gohtml
index c225dc5914..737aa80dd5 100644
--- a/web/template/attorney_sign.gohtml
+++ b/web/template/attorney_sign.gohtml
@@ -75,16 +75,15 @@
           {{ trHtml .App "asReplacementAttorneyAlsoConfirmThat" }}
         {{ end }}
 
-        <div class="moj-ticket-panel">
-          <div class="moj-ticket-panel__content moj-ticket-panel__content--blue">
-            <p class="govuk-body govuk-!-font-weight-bold">
-              {{ tr .App "yourSignature" }}
-            </p>
-
-            <div class="govuk-form-group {{ if .Errors.Has "confirm" }}govuk-form-group--error{{ end }}">
+        <div class="govuk-summary-card">
+          <div class="govuk-summary-card__title-wrapper">
+            <span class="govuk-summary-card__title">{{ tr .App "yourSignature" }}</span>
+          </div>
+          <div class="govuk-summary-card__content">
+            <div class="govuk-form-group  govuk-!-margin-bottom-0 {{ if .Errors.Has "confirm" }}govuk-form-group--error{{ end }}">
               {{ template "error-message" (errorMessage . "confirm") }}
 
-              <div class="govuk-checkboxes {{ if .Errors.Has "confirm" }}govuk-checkboxes--error{{ end }}">
+              <div class="govuk-checkboxes">
                 <div class="govuk-checkboxes__item">
                   <input class="govuk-checkboxes__input" id="f-confirm" name="confirm" type="checkbox" value="1" {{ if .Form.Confirm }}checked{{ end }}>
                   <label class="govuk-label govuk-checkboxes__label" for="f-confirm">
diff --git a/web/template/provide_certificate.gohtml b/web/template/provide_certificate.gohtml
index f67d22b648..1ac0fd3fdb 100644
--- a/web/template/provide_certificate.gohtml
+++ b/web/template/provide_certificate.gohtml
@@ -10,25 +10,22 @@
       {{ trFormatHtml .App "provideTheCertificateForThisLpaContent" "DonorFullName" .Lpa.Donor.FullName }}
 
       <form novalidate method="post">
-        <div class="moj-ticket-panel">
-          <div class="moj-ticket-panel__content moj-ticket-panel__content--blue">
-            <div class="govuk-form-group  {{ if .Errors.Has "agree-to-statement" }}govuk-form-group--error{{ end }}">
-              <fieldset class="govuk-fieldset">
-                <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-                  {{ tr .App "yourSignature" }}
-                </legend>
-
-                {{ template "error-message" (errorMessage . "agree-to-statement") }}
+        <div class="govuk-summary-card">
+          <div class="govuk-summary-card__title-wrapper">
+            <span class="govuk-summary-card__title">{{ tr .App "yourSignature" }}</span>
+          </div>
+          <div class="govuk-summary-card__content">
+            <div class="govuk-form-group govuk-!-margin-bottom-0 {{ if .Errors.Has "agree-to-statement" }}govuk-form-group--error{{ end }}">
+              {{ template "error-message" (errorMessage . "agree-to-statement") }}
 
-                <div class="govuk-checkboxes" data-module="govuk-checkboxes">
-                  <div class="govuk-checkboxes__item">
-                    <input class="govuk-checkboxes__input" id="f-agree-to-statement" name="agree-to-statement" type="checkbox" value="1" {{ if .Form.AgreeToStatement }}checked{{ end }}>
-                    <label class="govuk-label govuk-checkboxes__label" for="f-agree-to-statement">
-                      {{ trFormat .App "iAgreeToTheseStatements" "FullName" .Lpa.CertificateProvider.FullName }}
-                    </label>
-                  </div>
+              <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+                <div class="govuk-checkboxes__item">
+                  <input class="govuk-checkboxes__input" id="f-agree-to-statement" name="agree-to-statement" type="checkbox" value="1" {{ if .Form.AgreeToStatement }}checked{{ end }}>
+                  <label class="govuk-label govuk-checkboxes__label" for="f-agree-to-statement">
+                    {{ trFormat .App "iAgreeToTheseStatements" "FullName" .Lpa.CertificateProvider.FullName }}
+                  </label>
                 </div>
-              </fieldset>
+              </div>
             </div>
           </div>
         </div>
diff --git a/web/template/sign_the_lpa_on_behalf.gohtml b/web/template/sign_the_lpa_on_behalf.gohtml
index ed3f29fb47..bb93c6f4bb 100644
--- a/web/template/sign_the_lpa_on_behalf.gohtml
+++ b/web/template/sign_the_lpa_on_behalf.gohtml
@@ -56,26 +56,24 @@
             <div class="govuk-form-group {{ if .Errors.Has "sign-lpa" }}govuk-form-group--error{{ end }}">
               {{ template "error-message" (errorMessage . "sign-lpa") }}
 
-              <div class="govuk-checkboxes {{ if .Errors.Has "sign-lpa" }}govuk-checkboxes--error{{ end }}">
+              <div class="govuk-checkboxes">
                 <div class="govuk-checkboxes__item">
-                  <input class="govuk-checkboxes__input" id="f-sign-lpa" name="sign-lpa" type="checkbox" value="{{ .WantToSignFormValue }}" {{ if eq .Lpa.WantToSignLpa true }}checked{{ end }}>
+                  <input class="govuk-checkboxes__input" id="f-sign-lpa" name="sign-lpa" type="checkbox" value="{{ .WantToSignFormValue }}" {{ if .Lpa.WantToSignLpa }}checked{{ end }}>
                   <label class="govuk-label govuk-checkboxes__label" for="f-sign-lpa">
                     {{ trFormat .App "donorWantsToSignThisLpa" "DonorFullName" .Lpa.Donor.FullName }}
                   </label>
                 </div>
 
                 <div class="govuk-checkboxes__item">
-                  <input class="govuk-checkboxes__input" id="f-sign-lpa-2" name="sign-lpa" type="checkbox" value="{{ .WantToApplyFormValue }}" {{ if eq .Lpa.WantToApplyForLpa true }}checked{{ end }}>
+                  <input class="govuk-checkboxes__input" id="f-sign-lpa-2" name="sign-lpa" type="checkbox" value="{{ .WantToApplyFormValue }}" {{ if .Lpa.WantToApplyForLpa }}checked{{ end }}>
                   <label class="govuk-label govuk-checkboxes__label" for="f-sign-lpa-2">
                     {{ trFormat .App "donorWantsToApply" "DonorFullName" .Lpa.Donor.FullName }}
                   </label>
                 </div>
-
-                <div class="govuk-body">
-                  {{ tr .App "whenYouTickAsAuthorisedSignatory" }}
-                </div>
               </div>
             </div>
+
+            <div class="govuk-body">{{ tr .App "whenYouTickAsAuthorisedSignatory" }}</div>
           </div>
         </div>
 
diff --git a/web/template/sign_your_lpa.gohtml b/web/template/sign_your_lpa.gohtml
index 777ab5836e..06c9ee5dab 100644
--- a/web/template/sign_your_lpa.gohtml
+++ b/web/template/sign_your_lpa.gohtml
@@ -44,8 +44,11 @@
       </ul>
 
       <form novalidate method="post">
-        <div class="moj-ticket-panel">
-          <div class="moj-ticket-panel__content moj-ticket-panel__content--blue">
+        <div class="govuk-summary-card">
+          <div class="govuk-summary-card__title-wrapper">
+            <span class="govuk-summary-card__title">{{ tr .App "yourSignature" }}</span>
+          </div>
+          <div class="govuk-summary-card__content">
             <p class="govuk-body govuk-!-font-weight-bold">
               {{ trFormat .App "iConfirmThat" "DonorFullName" .Lpa.Donor.FullName }}
             </p>
@@ -55,24 +58,22 @@
 
               <div class="govuk-checkboxes {{ if .Errors.Has "sign-lpa" }}govuk-checkboxes--error{{ end }}">
                 <div class="govuk-checkboxes__item">
-                  <input class="govuk-checkboxes__input" id="f-sign-lpa" name="sign-lpa" type="checkbox" value="{{ .WantToSignFormValue }}" {{ if eq .Lpa.WantToSignLpa true }}checked{{ end }}>
+                  <input class="govuk-checkboxes__input" id="f-sign-lpa" name="sign-lpa" type="checkbox" value="{{ .WantToSignFormValue }}" {{ if .Lpa.WantToSignLpa }}checked{{ end }}>
                   <label class="govuk-label govuk-checkboxes__label" for="f-sign-lpa">
                     {{ tr .App "iWantToSignThisLpa" }}
                   </label>
                 </div>
 
                 <div class="govuk-checkboxes__item">
-                  <input class="govuk-checkboxes__input" id="f-sign-lpa-2" name="sign-lpa" type="checkbox" value="{{ .WantToApplyFormValue }}" {{ if eq .Lpa.WantToApplyForLpa true }}checked{{ end }}>
+                  <input class="govuk-checkboxes__input" id="f-sign-lpa-2" name="sign-lpa" type="checkbox" value="{{ .WantToApplyFormValue }}" {{ if .Lpa.WantToApplyForLpa }}checked{{ end }}>
                   <label class="govuk-label govuk-checkboxes__label" for="f-sign-lpa-2">
                     {{ tr .App "wantToApply" }}
                   </label>
                 </div>
-
-                <div class="govuk-body">
-                  {{ tr .App "whenYouTickAndClick" }}
-                </div>
               </div>
             </div>
+
+            <p class="govuk-body">{{ tr .App "whenYouTickAndClick" }}</p>
           </div>
         </div>