Merge pull request #146 from hmrc/VEIOSS-679

VEIOSS-679 | Make submit button disappear on submission of returns

app/assets/javascripts/app.js

@@ -106,3 +106,17 @@ if (typeof HMRCAccessibleAutocomplete != 'undefined' && document.querySelector('
  }
 }
 
+function showTheSpinner() {
+
+ const processingWheel = document.getElementById("processing-wheel");
+
+ //make the spinning wheel visible
+ processingWheel.removeAttribute("aria-hidden");
+ processingWheel.hidden = false;
+
+ //make the elements hidden
+ document.getElementById("processing-button-group").style.visibility = 'hidden';
+
+ return false;
+}
+

app/assets/stylesheets/import-one-stop-shop.css

@@ -85,4 +85,41 @@ html[data-useragent*='MSIE 10.0'] .flex-container .tile {
 .autocomplete__dropdown-arrow-down {
  z-index: 0;
  pointer-events: none;
-}
+}
+
+/* Dynamic spinner for please-wait page within file upload journey */
+.processing-wheel-loader {
+ border: 12px solid #DEE0E2;
+ border-radius: 50%;
+ border-top-color: #005EA5;
+ width: 50px;
+ height: 50px;
+ -webkit-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+}
+
+#processing-wheel {
+ margin-top: -75px;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* End of dynamic spinner */

app/views/CheckYourAnswersView.scala.html

@@ -14,14 +14,14 @@
  * limitations under the License.
  *@
 
-@import components.ButtonGroup
+@import components.ButtonGroupProcessing
 @import models.etmp.EtmpExclusion
 
 @this(
  layout: templates.Layout,
  formHelper: FormWithCSRF,
  govukSummaryList: GovukSummaryList,
- button: ButtonGroup,
+ button: ButtonGroupProcessing,
  govukButton: GovukButton,
  govukWarningText: GovukWarningText
 )
@@ -144,4 +144,13 @@ <h2 class="govuk-heading-m push--top">@messages("error.missing_answers_header")<
  )
  }
  }
+
+ <div id="processing-wheel" hidden>
+ <div id="processing" aria-live="polite" class="govuk-!-margin-bottom-9">
+ <h2 class="govuk-heading-m">
+ @messages("site.processing")
+ </h2>
+ <div class="processing-wheel-loader"></div>
+ </div>
+ </div>
  }

app/views/components/ButtonGroupProcessing.scala.html

@@ -0,0 +1,28 @@
+@*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *@
+
+@import uk.gov.hmrc.play.bootstrap.binders.RedirectUrl
+@this(govukButton: GovukButton)
+@(continueMessage: String, continueUrl: String, period: Period, waypoints: Waypoints)(implicit messages: Messages)
+<div class="govuk-button-group" id="processing-button-group">
+ @govukButton(
+ ButtonViewModel(messages(continueMessage)).withAttribute(("id", "continue")).withAttribute("onclick", "showTheSpinner()")
+ )
+
+ <a id="saveProgress" role="button" href="@routes.SavedProgressController.onPageLoad(period, RedirectUrl(continueUrl))" class="govuk-button govuk-button--secondary" data-module="govuk-button">
+ @messages("saveProgress.button")
+ </a>
+</div>

build.sbt

@@ -65,7 +65,7 @@ lazy val root = (project in file("."))
  // below line required to force asset pipeline to operate in dev rather than only prod
  Assets / pipelineStages := Seq(concat, uglify),
  // only compress files generated by concat
- uglify / includeFilter := GlobFilter("application.js")
+ uglify / includeFilter := GlobFilter("application*.js")
  )
 
 lazy val testSettings: Seq[Def.Setting[_]] = Seq(

conf/application.conf

@@ -22,8 +22,6 @@ play.http.router = prod.Routes
 
 play.http.errorHandler = "handlers.ErrorHandler"
 
-play.filters.headers.contentSecurityPolicy = "default-src 'self' 'unsafe-inline' localhost:9000 localhost:9032 localhost:9250 localhost:12345 www.google-analytics.com www.googletagmanager.com"
-
 play.filters.enabled += play.filters.csp.CSPFilter
 
 play.modules.enabled += "uk.gov.hmrc.play.bootstrap.HttpClientModule"

conf/messages.en

@@ -13,6 +13,7 @@ site.govuk = GOV.UK
 site.to = to
 site.submit = Submit
 site.warning = Warning
+site.processing = We are processing your return.
 
 date.day = Day
 date.month = Month