Add sections to routes wizard completed page (#4490)

* WIP routes wizard logic

* Completed matching logic for each route into teaching

* Lint and exclude from orphan variables check

* Ammend logic to support multiple answers to a question

* WIP move logic to routes class

* WIP adding tests

* WIP adding tests

* Add results box component

* Add basic layout to completed page and add results boxes

* Remove substitute values from most fields in results box

* Amend routes mapping

* Added not yet answers for routes mapping

* WIP adding page layout

* Added mailing list form component

* Change case-when to hash to satisfy rubocop

* Swap order of privacy policy and next step button

* Improve error messaging and spacing of results cards

* Add start page and extra spacing to bottom of mailer form submit button

* Linting

* Update app/views/routes_into_teaching/steps/completed.html.erb

Co-authored-by: Gemma Dallman <87642394+gemmadallmandfe@users.noreply.github.com>

* Stylelint fixes to results box css

* Added default heading tag to QuoteWithImageComponent and changed ResultsBoxComponent to render a h3

* Fix renaming of quote with image component attribute

---------

Co-authored-by: Gemma Dallman <87642394+gemmadallmandfe@users.noreply.github.com>

app/components/content/quote_with_image_component.html.erb

@@ -1,6 +1,10 @@
 <div class="quote-with-image">
   <div class="quote-with-image__content-container <%= background_color %>">
-    <div class="quote-with-image__title <%= heading_color %>"><%= title %></div>
+    <div class="quote-with-image__title <%= heading_color %>">
+      <%= content_tag heading_tag do %>
+        <%= title %>
+      <% end %>
+    </div>
     <div class="quote-with-image__content <%= "quote-with-image__content--with-quotes" if quotes %> <%= heading_color %>">
       <%== text %>
     </div>

app/components/content/quote_with_image_component.rb

@@ -1,14 +1,14 @@
 module Content
   class QuoteWithImageComponent < ViewComponent::Base
-    attr_reader :title, :text, :image_path, :heading, :heading_color, :quotes, :background_color
+    attr_reader :title, :text, :image_path, :heading_tag, :heading_color, :quotes, :background_color
 
-    def initialize(title:, text:, image_path: nil, heading: :m, heading_color: "pink", background_color: "blue", quotes: true)
+    def initialize(title:, text:, image_path: nil, heading_tag: "h3", heading_color: "pink", background_color: "blue", quotes: true)
       super
 
       @title = title
       @text = text
       @image_path = image_path
-      @heading = heading
+      @heading_tag = heading_tag
       @heading_color = heading_color
       @quotes = quotes
       @background_color = background_color

app/components/content/results_box_component.html.erb

@@ -5,9 +5,9 @@
     </div>
   <% end %>
   <section class="results-box results-box--<%= border_color %>">
-    <h2 class="results-box__heading">
+    <h3 class="results-box__heading">
       <%= heading %>
-    </h2>
+    </h3>
     <div class="results-box__course-info-container results-box__text">
       <div class="results-box__info-row">
         <div class="results-box__label">Course fee</div>

app/controllers/routes_into_teaching/steps_controller.rb

@@ -4,12 +4,25 @@ class StepsController < ApplicationController
     include GITWizard::Controller
     self.wizard_class = RoutesIntoTeaching::Wizard
 
+    before_action :set_page_title
     before_action :set_step_page_title, only: %i[show update]
     before_action :noindex, if: :noindex?
+    before_action :set_breadcrumb
 
     layout :resolve_layout
 
+    def index
+    end
+
     def completed
+      policy_id = params[:id]
+
+      @privacy_policy = if policy_id
+                          GetIntoTeachingApiClient::PrivacyPoliciesApi.new.get_privacy_policy(policy_id)
+                        else
+                          GetIntoTeachingApiClient::PrivacyPoliciesApi.new.get_latest_privacy_policy
+                        end
+
       @results = RoutesIntoTeaching::Routes.recommended(session[:routes_into_teaching])
     end
 
@@ -42,16 +55,22 @@ def crm_store
       session[:routes_into_teaching] ||= {}
     end
 
-    def set_step_page_title
-      @page_title = "Routes into Teaching"
+    def set_page_title
+      @page_title = "Find your route into teaching"
+    end
+
+    def set_breadcrumb
+      breadcrumb @page_title, request.path
+    end
 
+    def set_step_page_title
       if @current_step&.title
         @page_title += ", #{@current_step.title.downcase} step"
       end
     end
 
     def resolve_layout
-      action_name == "completed" ? "minimal" : "registration"
+      %w[completed index].include?(action_name) ? "minimal" : "registration"
     end
   end
 end

app/helpers/routes_into_teaching_helper.rb

@@ -0,0 +1,31 @@
+module RoutesIntoTeachingHelper
+  def answers
+    session[:routes_into_teaching]
+  end
+
+  def undergraduate_degree_summary
+    {
+      "Yes" => "have a degree",
+      "No" => "do not have a degree",
+      "Not yet" => "are studying for a degree",
+    }[answers["undergraduate_degree"]]
+  end
+
+  def unqualified_teacher_summary
+    {
+      "Yes" => "have previously worked in a school",
+      "No" => "haven't previously worked in a school",
+    }[answers["unqualified_teacher"]]
+  end
+
+  def location_summary
+    {
+      "Yes" => "live in England",
+      "No" => "do not live in England",
+    }[answers["location"]]
+  end
+
+  def non_uk?
+    answers["location"] == "No"
+  end
+end

app/models/routes_into_teaching/steps/location.rb

@@ -2,7 +2,7 @@ module RoutesIntoTeaching::Steps
   class Location < GITWizard::Step
     attribute :location
 
-    validates :location, presence: true
+    validates :location, presence: { message: RoutesIntoTeaching::Wizard::DEFAULT_ERROR_MESSAGE }
 
     def seen?
       false

app/models/routes_into_teaching/steps/undergraduate_degree.rb

@@ -2,7 +2,7 @@ module RoutesIntoTeaching::Steps
   class UndergraduateDegree < GITWizard::Step
     attribute :undergraduate_degree
 
-    validates :undergraduate_degree, presence: true
+    validates :undergraduate_degree, presence: { message: RoutesIntoTeaching::Wizard::DEFAULT_ERROR_MESSAGE }
 
     def options
       option_struct = Struct.new(:answer, :text, keyword_init: true)

app/models/routes_into_teaching/steps/unqualified_teacher.rb

@@ -2,7 +2,7 @@ module RoutesIntoTeaching::Steps
   class UnqualifiedTeacher < GITWizard::Step
     attribute :unqualified_teacher
 
-    validates :unqualified_teacher, presence: true
+    validates :unqualified_teacher, presence: { message: RoutesIntoTeaching::Wizard::DEFAULT_ERROR_MESSAGE }
 
     def seen?
       false

app/models/routes_into_teaching/wizard.rb

@@ -1,5 +1,7 @@
 module RoutesIntoTeaching
   class Wizard < ::GITWizard::Base
+    DEFAULT_ERROR_MESSAGE = "Choose an option from the list".freeze
+
     self.steps = [
       Steps::UndergraduateDegree,
       Steps::UnqualifiedTeacher,

app/views/routes_into_teaching/steps/completed.html.erb

@@ -1,28 +1,105 @@
 <%= render Content::LandingHeroComponent.new(
-  title: "Routes into teaching",
+  title: "Find your route into teaching",
   colour: "pastel yellow-yellow",
 ) %>
 
 <section class="container">
-  <div class="row">
-    <h2>You told us that you:</h2>
+  <div class="row inset">
+    <div class="col col-845">
+      <h2>You told us that you:</h2>
 
-    <p>You can <%= link_to "change your answers", routes_into_teaching_steps_path %> if you need to.</p>
+      <ul>
+        <li><%= undergraduate_degree_summary %></li>
+        <li><%= unqualified_teacher_summary %></li>
+        <li><%= location_summary %></li>
+      </ul>
+
+      <% if non_uk? %>
+        <%= render Content::ExpanderComponent.new(
+          title: "visa sponsorship",
+          text: "<p>If you do not have the right to study or work in the UK, you will need a visa. Your visa will need to be sponsored by a course provider.</p>
+          <p><a href=\"/non-uk-teachers/visas-for-non-uk-trainees\">Learn more about applying for your visa to train to teach in England</a>.</p>",
+        ) %>
+      <% end %>
+
+      <p>You can <%= link_to "change your answers", routes_into_teaching_steps_path %> if you need to.</p>
+    </div>
   </div>
 
-  <div class="row">
-    <% @results.each do |result| %>
-      <div class="col-space-s">
-        <%= render Content::ResultsBoxComponent.new(
+  <div class="row inset">
+    <div class="col col-845">
+      <h2 class="heading--box-blue">Your options</h2>
+      <p>Based on your answers, you may be eligible for the following teacher training options:</p>
+    </div>
+  </div>
+
+  <div class="row inset">
+    <div class="col col-845">
+      <% @results.each do |result| %>
+        <div class="col-space-s">
+          <%= render Content::ResultsBoxComponent.new(
           heading: result["title"],
           fee: result["course_fee"],
           course_length: result["course_length"],
           funding: result["funding"],
           text: result["description"],
-          link_text: "Find out more",
-          link_target: "/steps-to-become-a-teacher",
+          link_text: result["cta_text"],
+          link_target: result["cta_link"],
         ) %>
-      </div>
-    <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="row inset">
+    <div class="col col-845">
+      <h2 class="heading--box-blue">Next steps</h2>
+
+      <%= render CallsToAction::SimpleComponent.new(icon: "icon-arrow-black") do %>
+        <h3 class="call-to-action__heading">Get personalised guidance</h3>
+        <p>Everything you need to know to start a career in teaching sent straight into your inbox. Tailored to your own situation, you'll get all the latest information as well as advice and support.</p>
+
+        <div class="row col-space-m">
+          <%= form_with builder: GOVUKDesignSystemFormBuilder::FormBuilder, url: mailing_list_step_path(:name), scope: :mailing_list_steps_name, method: :put do |f| %>
+            <%= f.govuk_text_field :first_name, autocomplete: "given-name" %>
+            <%= f.govuk_text_field :last_name, autocomplete: "family-name" %>
+            <%= f.govuk_email_field :email, autocomplete: "email" %>
+            <%= f.hidden_field :channel_id, value: params[:channel] || f.object&.channel_id.presence %>
+            <%= f.hidden_field :sub_channel_id, value: params[:sub_channel] || f.object&.sub_channel_id.presence %>
+            <%= f.hidden_field :accepted_policy_id, value: @privacy_policy.id %>
+            <div class="row col-space-s col-space-s-top">
+              <small>
+                Your details are protected under the terms of our <%= link_to("privacy notice (opens in new tab)", "/privacy-policy", { class: "link--black", target: :blank }) %>. This explains how we use your personal data. It's important you read it before signing up to receive emails.
+              </small>
+            </div>
+            <%= f.button "Next step", class: "button", data: { "prevent-double-click": true, "disable-with": "Next step" } %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </section>
+
+<div class="row">
+  <div class="col-space-l-top">
+    <% if non_uk? %>
+      <%= render Content::QuoteWithImageComponent.new(
+        title: "Teaching as a non-uk...",
+        text: "<p>Visit the non-uk section...</p><p><a href=\"/non-uk-teachers\">Read about becoming a teacher as a non-uk citizen</a></p>",
+        quotes: false,
+        background_color: "pink",
+        heading_color: "green",
+        image_path: "static/images/content/hero-images/0034.jpg"
+      ) %>
+    <% else %>
+      <%= render Content::QuoteWithImageComponent.new(
+        title: "Teacher training stories",
+        text: "<p>\"My influence and decisions are ultimately impacting on our pupils' lives and the experience that they have at school.\"</p><p><a href=\"/life-as-a-teacher/teaching-as-a-career/abigails-career-progression-story\">Read Abigail's career progression story</a>.</p>",
+        quotes: true,
+        background_color: "blue",
+        heading_color: "pink",
+        image_path: "static/images/content/case-studies/abigail.jpg"
+      ) %>
+    <% end %>
+  </div>
+</div>

app/views/routes_into_teaching/steps/index.html.erb

@@ -0,0 +1,10 @@
+<%= render Content::LandingHeroComponent.new(
+  title: "Find your route into teaching",
+  colour: "pastel yellow-yellow",
+) %>
+
+<section class="container">
+  <div class="row">
+    <%= link_to "Find your route into teaching", routes_into_teaching_step_path(RoutesIntoTeaching::Wizard.steps.first.key) %>
+  </div>
+</section>

app/webpacker/styles/components/results-box.scss

@@ -1,6 +1,7 @@
 .results-box {
   background: $white;
   color: $white;
+  padding: 1em 0;
 
   &--yellow {
     border: 2px solid $yellow;
@@ -17,9 +18,9 @@
 
   &__title {
       background: $yellow;
-      color: $black; 
+      color: $black;
       font-weight: bolder;
-      display: inline-block; 
+      display: inline-block;
       padding: 0.25em 0.5em;
     }
 
@@ -43,18 +44,18 @@
 
   &__info-row {
     display: flex;
-    justify-content: flex-start; 
-    align-items: flex-start; 
+    justify-content: flex-start;
+    align-items: flex-start;
   }
 
   &__label {
-  flex: 1; 
+  flex: 1;
   text-align: left;
   font-weight: bold;
   }
 
   &__value {
-  flex: 2; 
+  flex: 2;
   text-align: left;
   }
 
@@ -84,17 +85,17 @@
   @include mq($until: tablet) {
     .results-box__info-row {
       flex-direction: column;
-      align-items: flex-start; 
+      align-items: flex-start;
     }
 
     .results-box__label,
     .results-box__value {
-      flex: none; 
-      width: 100%; 
+      flex: none;
+      width: 100%;
     }
-    
+
     .results-box__label {
-      margin-bottom: 0.25rem; 
+      margin-bottom: 0.25rem;
     }
   }
 }

app/webpacker/styles/layout.scss

@@ -185,10 +185,18 @@ section.container {
     margin-bottom: 1 * $indent-amount;
   }
 
+  .col-space-s-top {
+    margin-top: 1 * $indent-amount;
+  }
+
   .col-space-m {
     margin-bottom: 2 * $indent-amount;
   }
 
+  .col-space-m-top {
+    margin-top: 2 * $indent-amount;
+  }
+
   .col-space-l {
     margin-bottom: 3 * $indent-amount;
   }