NFDIV-4177: Update hub page, update layout of progress bar for pre request for information

src/main/assets/scss/main.scss

@@ -13,6 +13,7 @@
 @import './webchat';
 @import './review-pages';
 @import './timeout-modal';
+@import './progress-bar';
 
 .hmcts-button-link,
 .uppy-FileInput-btn {
@@ -44,3 +45,12 @@ section {
 .red-text {
   color: govuk-colour('red');
 }
+
+.govuk-panel--confirmation {
+  background-color: #00703C; }
+
+.govuk-panel--outstanding {
+  background-color: #F3F2F1;
+  text-align: left;
+  padding: 20px;
+}

src/main/assets/scss/progress-bar.scss

@@ -0,0 +1,150 @@
+.hmcts-progress-bar-vertical {
+  margin: 40px 0;
+}
+
+.hmcts-progress-bar__icon {
+  position: relative;
+  background-color: govuk-colour('white');
+  border: 4px solid govuk-colour('mid-grey');
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+  height: 44px;
+  margin: 0 auto;
+  width: 44px;
+
+  &--complete {
+    background-color: govuk-colour('blue');
+    border: 4px solid govuk-colour('blue');
+    background-image: url('/hmcts-assets/images/icon-progress-tick.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 23px;
+
+    @include govuk-if-ie8 {
+      background-image: url(#{$hmcts-images-path}icon-progress-tick.png);
+    }
+  }
+
+  &--active {
+    background-color: govuk-colour('blue');
+    border: 4px solid govuk-colour('blue');
+    font-weight: 700;
+  }
+}
+
+.hmcts-progress-bar__label {
+  @include govuk-font(16);
+  word-wrap: normal;
+  display: block;
+  font-weight: inherit;
+  margin-top: 10px;
+  position: relative;
+}
+
+.hmcts-progress-bar__list {
+  font-size: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-align: justify;
+  vertical-align: top;
+
+  @include govuk-if-ie8 {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  &::after {
+    content: "";
+    display: inline-block;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 4px solid govuk-colour('mid-grey');
+    content: "";
+    left: 30px;
+    position: absolute;
+    top: 20px;
+    bottom: 0;
+    width: 90%;
+  }
+}
+
+.hmcts-progress-bar__list-item {
+  @include govuk-font(19);
+  display: inline-block;
+  max-width: 20%;
+  position: relative;
+  text-align: center;
+  vertical-align: top;
+  width:100px;
+
+  // IE8 does not support the text justify approach for spacing
+  @include govuk-if-ie8 {
+    display: table-cell;
+  }
+
+  &:first-child, &:last-child {
+    &::before {
+      border-top: 6px solid govuk-colour("white");
+      content: "";
+      position: absolute;
+      top: 13px; left: 0;
+      width: 50%;
+    }
+  }
+
+  &:first-child::before {
+    left: 0;
+  }
+
+  &:last-child::before {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media screen and (max-width: map-get($govuk-breakpoints, desktop)) {
+  .hmcts-progress-bar-vertical {
+    margin: 21px 0;
+
+    .hmcts-progress-bar {
+      &__list-item {
+        max-width:45px; display:block; margin-top: 10px;
+        margin-top: 19px;
+      }
+
+      &__icon {
+        height: 37px;
+        width: 37px;
+
+        &--complete {
+          background-size: 19px;
+        }
+      }
+
+      &__list::before {
+        border-top:none;
+        position:absolute;
+        top: 0px;
+        border-left: 6px solid govuk-colour('mid-grey');
+        height: 100%;
+        position:absolute;
+        left:20px;
+        top:0;
+      }
+
+      &__label {
+        margin-top:-29px;
+        margin-left:50px;
+        width:350px;
+        text-align:left;
+        font-size: 1.1rem;
+      }
+    }
+  }
+}

src/main/modules/state-redirect/index.ts

@@ -10,6 +10,7 @@ import {
   APPLICANT_2,
   APPLICATION_SUBMITTED,
   APP_REPRESENTED,
+  HUB_PAGE,
   JOINT_APPLICATION_SUBMITTED,
   NO_RESPONSE_YET,
   PAYMENT_CALLBACK_URL,
@@ -106,15 +107,19 @@ export class StateRedirectMiddleware {
   private getApplicationSubmittedRedirectPath(req: AppRequest): string | null {
     const userCase = req.session.userCase;
 
-    if (userCase?.applicationType === ApplicationType.SOLE_APPLICATION && req.path !== APPLICATION_SUBMITTED) {
-      return APPLICATION_SUBMITTED;
+    if (
+      userCase?.applicationType === ApplicationType.SOLE_APPLICATION &&
+      req.path !== APPLICATION_SUBMITTED &&
+      req.path !== HUB_PAGE
+    ) {
+      return HUB_PAGE;
     }
 
     if (
       userCase?.applicationType === ApplicationType.JOINT_APPLICATION &&
-      ![JOINT_APPLICATION_SUBMITTED, APPLICANT_2 + JOINT_APPLICATION_SUBMITTED].includes(req.path)
+      ![JOINT_APPLICATION_SUBMITTED, HUB_PAGE, APPLICANT_2 + HUB_PAGE].includes(req.path)
     ) {
-      return req.session.isApplicant2 ? APPLICANT_2 + JOINT_APPLICATION_SUBMITTED : JOINT_APPLICATION_SUBMITTED;
+      return req.session.isApplicant2 ? APPLICANT_2 + HUB_PAGE : HUB_PAGE;
     }
 
     return null;

src/main/steps/applicant1/app-represented/content.ts

@@ -85,7 +85,7 @@ const cy: typeof en = (
     link: config.get('govukUrls.domesticAbuse'),
   },
   feedback: "Helpwch ni i wella'r gwasanaeth hwn",
-  feedbackLine1: 'Complete this short, 5-minute survey to help improve our services for you and others.',
+  feedbackLine1: 'Cwblhewch yr arolwg 5 munud hwn i helpu i wella ein gwasanaethau i chi ac eraill.',
   feedbackLine2: {
     part1: 'Mae hwn yn wasanaeth newydd.',
     link: feedbackLink,

src/main/steps/applicant1/app-represented/template.njk

@@ -1,5 +1,4 @@
 {% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "components/hmcts-progress-bar/macro.njk" import hmctsProgressBar %}
 {% from "common/macros/service-address.njk" import serviceAddressMacro %}
 
 {% extends "common/page.njk" %}
@@ -18,7 +17,8 @@
     <p><strong>{{ appRepresentedText }}</strong></p>
   </div>
 
-  {% include "./progress-bar.njk" %}
+  {% include "../../common/progress-bar.njk" %}
+
   <h3 class="govuk-heading-m">{{ subHeading6 }}</h3>
   <p class="govuk-body">{{ line16.part1 }}<a class="govuk-link" href={{ line16.link }}>{{ line16.linkText }}</a></p>
   <h3 class="govuk-heading-m">{{ webChat }}</h3>