Merge pull request #3959 from nhsuk/consent-cards-redesign

Update design of consent responses

Author: thomasleese

app/assets/stylesheets/_card.scss

@@ -49,6 +49,10 @@
     }
   }
 
+  &--offset {
+    background-color: rgba($color_nhsuk-grey-5, 0.5);
+  }
+
   &--data {
     display: flex;
 
@@ -132,3 +136,22 @@
     color: $nhsuk-link-active-color;
   }
 }
+
+.app-card--compact {
+  @include nhsuk-responsive-margin(3, "bottom");
+
+  .app-button-group {
+    gap: nhsuk-spacing(2);
+    margin-bottom: nhsuk-spacing(1);
+    margin-top: nhsuk-spacing(-4);
+  }
+
+  .nhsuk-card__heading {
+    @include nhsuk-responsive-margin(1, "bottom");
+  }
+
+  .nhsuk-card__content {
+    @include nhsuk-responsive-padding(4);
+    @include nhsuk-responsive-padding(3, "bottom");
+  }
+}

app/components/app_card_component.rb

@@ -34,6 +34,7 @@ def initialize(
     secondary: false,
     data: false,
     patient: false,
+    compact: false,
     filters: false,
     section: false
   )
@@ -44,10 +45,11 @@ def initialize(
     @secondary = secondary
     @data = data
     @patient = patient
+    @compact = compact
     @filters = filters
     @section = section
 
-    @feature = (colour.present? && !data) || filters
+    @feature = (colour.present? && !data && !compact) || filters
   end
 
   private
@@ -64,6 +66,7 @@ def card_classes
       ("nhsuk-card--secondary" if @secondary),
       ("app-card--data" if @data),
       ("app-card--patient" if @patient),
+      ("app-card--compact" if @compact),
       ("app-filters" if @filters)
     ].compact.join(" ")
   end
@@ -80,7 +83,7 @@ def content_classes
   def heading_size
     if @data
       "xs"
-    elsif @feature || @secondary || @patient
+    elsif @feature || @secondary || @patient || @compact
       "s"
     else
       "m"

app/components/app_consent_card_component.rb

@@ -1,57 +1,64 @@
 # frozen_string_literal: true
 
 class AppConsentCardComponent < ViewComponent::Base
-  def initialize(patient_session:, programme:)
+  def initialize(consent, session:)
     super
 
-    @patient_session = patient_session
-    @programme = programme
+    @consent = consent
+    @session = session
   end
 
-  attr_reader :patient_session, :programme
-
-  delegate :patient, :session, to: :patient_session
-
-  def colour
-    I18n.t(status, scope: %i[status consent colour])
-  end
-
-  def heading
-    "#{programme.name}: #{I18n.t(status, scope: %i[status consent label])}"
+  def call
+    render AppCardComponent.new(**card_options) do |card|
+      card.with_heading { heading }
+      govuk_summary_list(rows:)
+    end
   end
 
-  def latest_consent_request
-    @latest_consent_request ||=
-      patient
-        .consent_notifications
-        .request
-        .has_programme(programme)
-        .order(sent_at: :desc)
-        .first
-  end
+  private
 
-  def consent_status
-    @consent_status ||= patient.consent_status(programme:)
-  end
+  attr_reader :consent, :session
 
-  def vaccination_status
-    @vaccination_status ||= patient.vaccination_status(programme:)
-  end
+  delegate :patient, :programme, to: :consent
 
-  def can_send_consent_request?
-    consent_status.no_response? && patient.send_notifications? &&
-      session.open_for_consent? && patient.parents.any?
+  def link_to
+    session_patient_programme_consent_path(session, patient, programme, consent)
   end
 
-  def who_refused
-    consents =
-      patient.consents.where(programme:).not_invalidated.includes(:parent)
+  def card_options = { link_to:, colour: "offset", compact: true }
 
-    ConsentGrouper
-      .call(consents, programme:)
-      .find(&:response_refused?)
-      &.who_responded
+  def heading
+    if consent.via_self_consent?
+      consent.who_responded
+    else
+      "#{consent.name} (#{consent.who_responded})"
+    end
   end
 
-  delegate :status, to: :consent_status
+  def rows
+    [
+      if (phone = consent.parent&.phone).present?
+        { key: { text: "Phone number" }, value: { text: phone } }
+      end,
+      if (email = consent.parent&.email).present?
+        { key: { text: "Email address" }, value: { text: email } }
+      end,
+      {
+        key: {
+          text: "Date"
+        },
+        value: {
+          text: consent.responded_at.to_fs(:long)
+        }
+      },
+      {
+        key: {
+          text: "Decision"
+        },
+        value: {
+          text: helpers.consent_status_tag(consent)
+        }
+      }
+    ].compact
+  end
 end

app/components/app_consent_table_component.html.erb

@@ -1,39 +1,21 @@
 # frozen_string_literal: true
 
 class AppHealthAnswersCardComponent < ViewComponent::Base
-  erb_template <<-ERB
-    <%= render AppCardComponent.new do |card| %>
-      <% card.with_heading { @heading } %>
-      <dl class="nhsuk-summary-list app-summary-list--full-width">
-        <% health_answers.each do |question, answers| %>
-          <div class="nhsuk-summary-list__row">
-            <dt class="nhsuk-summary-list__key">
-              <%= question %>
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              <% answers.each do |answer| %>
-                <p>
-                  <%= answer[:responder] %> responded: <%= answer[:answer].humanize %><% if answer[:notes].present? %>:<% end %>
-                </p>
-                <% if answer[:notes].present? %>
-                  <blockquote><%= answer[:notes] %></blockquote>
-                <% end %>
-              <% end %>
-            </dd>
-          </div>
-        <% end %>
-      </dl>
-    <% end %>
-  ERB
-
   def initialize(objects, heading: "Answers to health questions")
     super
 
     @objects = objects.is_a?(Array) ? objects : [objects]
     @heading = heading
   end
 
-  def health_answers
-    ConsolidatedHealthAnswers.new(@objects).to_h
+  def call
+    render AppCardComponent.new do |card|
+      card.with_heading { heading }
+      render AppHealthAnswersSummaryComponent.new(objects)
+    end
   end
+
+  private
+
+  attr_reader :objects, :heading
 end

app/components/app_consent_table_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class AppHealthAnswersSummaryComponent < ViewComponent::Base
+  erb_template <<-ERB
+    <dl class="nhsuk-summary-list app-summary-list--full-width">
+      <% health_answers.each do |question, answers| %>
+        <div class="nhsuk-summary-list__row">
+          <dt class="nhsuk-summary-list__key">
+            <%= question %>
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            <% answers.each do |answer| %>
+              <p>
+                <%= answer[:responder] %> responded: <%= answer[:answer].humanize %><% if answer[:notes].present? %>:<% end %>
+              </p>
+              <% if answer[:notes].present? %>
+                <blockquote><%= answer[:notes] %></blockquote>
+              <% end %>
+            <% end %>
+          </dd>
+        </div>
+      <% end %>
+    </dl>
+  ERB
+
+  def initialize(objects)
+    super
+
+    @objects = objects.is_a?(Array) ? objects : [objects]
+  end
+
+  private
+
+  attr_reader :objects
+
+  def health_answers
+    ConsolidatedHealthAnswers.new(objects).to_h
+  end
+end

app/components/app_health_answers_card_component.rb

@@ -1,3 +1,5 @@
+<h2 class="nhsuk-heading-m">Consent</h2>
+
 <%= render AppCardComponent.new(colour:) do |card| %>
   <% card.with_heading { heading } %>
 
@@ -36,5 +38,19 @@
     <%= render AppGillickAssessmentComponent.new(patient_session:, programme:) %>
   <% end %>
 
-  <%= render AppConsentTableComponent.new(patient_session:, programme:) %>
+  <% if consents.any? %>
+    <h3 class="nhsuk-heading-s">Consent responses</h3>
+
+    <% consents.each do |consent| %>
+      <%= render AppConsentCardComponent.new(consent, session:) %>
+    <% end %>
+  <% end %>
+
+  <% if show_health_answers? %>
+    <hr class="nhsuk-section-break nhsuk-section-break--visible nhsuk-section-break--l">
+
+    <h3 class="nhsuk-heading-s">All answers to health questions</h3>
+
+    <%= render AppHealthAnswersSummaryComponent.new(grouped_consents) %>
+  <% end %>
 <% end %>