Merge pull request #2127 from NCCE/feature/primary-i-belong-release

Feature Release - I Belong Primary

app/components/aside_component.rb

@@ -10,18 +10,8 @@ def initialize(text: nil, title: nil, link: nil, **options)
     @link = link
     @image = options[:image]
     @use_button = options[:use_button]
-    @tracking_category = options[:tracking_category]
     @class_name = options[:class_name]
-  end
-
-  def tracking_data(label = nil)
-    return nil unless @tracking_category.present? && label.present?
-
-    {
-      event_action: "click",
-      event_category: @tracking_category,
-      event_label: label
-    }
+    @cms_content = options[:cms_content]
   end
 
   def aside_image_tag(file, *args, **kwargs)

app/components/aside_component/aside_component.html.erb

@@ -5,8 +5,7 @@
         @image[:url],
         class: 'ncce-link',
         role: 'button',
-        draggable: 'false',
-        data: tracking_data(@image[:tracking_label])
+        draggable: 'false'
       %>
     </div>
   <% end %>
@@ -23,6 +22,10 @@
     <%= content_tag :p, class: ['govuk-body-s', 'aside-component__text', { 'govuk-!-margin-top-3': @title.blank? }] do %>
       <%= @text %>
     <% end %>
+  <% elsif @cms_content %>
+    <div class="aside-component__cms-content">
+      <%= render @cms_content.render %>
+    </div>
   <% elsif body? %>
     <%= body %>
   <% end %>
@@ -32,8 +35,7 @@
         @link[:url],
         class: @link[:class] || (@use_button ? 'govuk-button button button--aside' : 'ncce-link'),
         role: 'button',
-        draggable: 'false',
-        data: tracking_data(@link[:tracking_label])
+        draggable: 'false'
       %>
     </p>
   <% end %>

app/components/aside_component/aside_component.scss

@@ -34,6 +34,12 @@
   }
 }
 
+.aside-component__cms-content {
+  p {
+    @include govuk-font($size: 16);
+  }
+}
+
 .aside-component__text {
   margin-bottom: 1rem;
 }

app/components/cms_dynamic_zone_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CmsDynamicZoneComponent < ViewComponent::Base
+  def initialize(cms_models)
+    @cms_models = cms_models
+  end
+
+  erb_template <<~ERB
+    <div class="cms-dynamic-zone">
+      <% @cms_models.each do |model| %>
+        <%= render model.render %>
+      <% end %>
+    </div>
+  ERB
+end

app/components/cms_file_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class CmsFileComponent < ViewComponent::Base
+  delegate :cms_url, to: :helpers
+
+  def initialize(file:)
+    @file = file
+  end
+end

app/components/cms_file_component/cms_file_component.html.erb

@@ -0,0 +1,11 @@
+<div class="cms-file">
+  <div class="cms-file__content">
+    <div>
+      <%= link_to(@file.filename, cms_url(@file.url)) %>
+    </div>
+    <div>
+      <span class="cms-file__details"><%= "(#{@file.extension}, #{@file.file_size})" %></span>
+      <span class="cms-file__updated">Updated: <%= @file.updated_at.strftime("%d %b %Y") %></span>
+    </div>
+  </div>
+</div>

app/components/cms_file_component/cms_file_component.scss

@@ -0,0 +1,13 @@
+
+.cms-file {
+  @include govuk-font($size: 16);
+  @include govuk-responsive-margin(2, "bottom");
+
+  background-image: url('../images/icons/resources-black.svg');
+  background-repeat: no-repeat;
+  background-size: 1.6rem;
+
+  &__content {
+    margin-left: 1.9rem;
+  }
+}

app/components/cms_rich_text_block_component.rb

@@ -2,7 +2,7 @@
 # SubClasses should not include any indentation and should make use of
 # `-` at the end of ERB tags
 class CmsRichTextBlockComponent < ViewComponent::Base
-  def build(blocks)
+  def build(blocks, **options)
     klass =
       case blocks
       in { type: "paragraph" } then Paragraph
@@ -15,35 +15,50 @@ def build(blocks)
       in { type: "quote"} then Quote
       end
 
-    klass.new(blocks: blocks)
+    klass.new(blocks: blocks, **options)
   end
 
   erb_template <<~ERB
-    <div class="govuk-width-container cms-rich-text-block-component">
-      <div class="govuk-main-wrapper">
-        <div class="govuk-grid-row">
-          <div class="govuk-grid-column-two-thirds">
-            <% @blocks.each do |child| -%>
-              <%= render build(child) -%>
-            <% end -%>
+    <% if @with_wrapper %>
+      <div class="govuk-width-container cms-rich-text-block-component">
+        <div class="govuk-main-wrapper">
+          <div class="govuk-grid-row">
+            <div class="govuk-grid-column-two-thirds">
+              <% @blocks.each do |child| -%>
+                <%= render build(child) -%>
+              <% end -%>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    <% else %>
+      <div class="cms-rich-text-block-component">
+        <% @blocks.each do |child| -%>
+          <%= render build(child, **@options) -%>
+        <% end -%>
+      </div>
+    <% end %>
   ERB
 
-  def initialize(blocks:)
+  def initialize(blocks:, with_wrapper: true, **options)
     @blocks = blocks
+    @with_wrapper = with_wrapper
+    @options = options
   end
 
   class Paragraph < CmsRichTextBlockComponent
     erb_template <<~ERB
-      <p class="govuk-body-m">
+      <p class="<%= paragraph_class %>">
       <% @blocks[:children].each do |child| -%>
       <%= render build(child) -%>
       <% end -%>
       </p>
     ERB
+
+    def paragraph_class
+      return @options[:paragraph_class] if @options[:paragraph_class]
+      "govuk-body-m"
+    end
   end
 
   class Heading < CmsRichTextBlockComponent

app/components/community_activity_component.rb

@@ -3,17 +3,18 @@
 class CommunityActivityComponent < ViewComponent::Base
   include ViewComponent::Translatable
 
-  def initialize(activity:, achievement: nil, class_name: nil, tracking_category: nil)
+  def initialize(activity:, achievement: nil, class_name: nil, button_class: nil)
     @activity = activity
     @achievement = achievement
     @class_name = class_name
-    @tracking_category = tracking_category
+    @button_class = button_class
   end
 
   def achievement_complete?
     return unless @achievement
 
-    @achievement.in_state? :complete
+    return false if @activity.public_copy_submission_options
+    @achievement.in_state?(:complete)
   end
 
   def achievement_rejected?
@@ -27,13 +28,17 @@ def reopen_button_text
     @achievement&.evidence.present? ? "Continue editing" : "Submit evidence"
   end
 
-  def tracking_data(label)
-    return nil unless @tracking_category.present? && label.present?
+  def check_submission_option slug
+    return false unless @achievement
 
-    {
-      event_action: "click",
-      event_category: @tracking_category,
-      event_label: label
-    }
+    return @achievement.submission_option == slug unless @achievement.submission_option.blank?
+    default_option = @activity.public_copy_submission_options.find { _1["default"] }
+
+    return default_option["slug"] == slug if default_option
+    false
+  end
+
+  def minimum_character_requirement
+    @activity.programmes.collect(&:minimum_character_required_community_evidence).max
   end
 end

app/components/community_activity_component/community_activity_component.html.erb

@@ -6,6 +6,7 @@
   data-community-activity-component-achievements-submit-path-value="<%= submit_achievements_path %>"
   data-community-activity-component-achievement-id-value="<%= @achievement&.id %>"
   data-community-activity-component-activity-id-value="<%= @activity.id %>"
+  data-community-activity-component-minimum-evidence-length-value="<%= minimum_character_requirement %>"
 >
   <% if achievement_rejected? %>
     <div class="community-activity-component__rejected">
@@ -18,14 +19,14 @@
 
   <div class="community-activity-component__content">
 
-    <span class="community-activity-component__objective">
-      <span class="community-activity-component__objective-text">
+    <div class="community-activity-component__objective">
+      <div class="community-activity-component__objective-text">
         <span><%= @activity.title %></span>
-      </span>
+      </div>
       <% if achievement_complete? %>
-        <span class="community_activity_component__completed_badge_container" >
-          <span class='community-activity-component__completed-badge'><%= t('.complete') %></span>
-        </span>
+        <div class="community_activity_component__completed_badge_container" >
+          <div class='community-activity-component__completed-badge'><%= t('.complete') %></div>
+        </div>
       <% elsif @activity.coming_soon? %>
         <%= button_to t('.coming_soon'),
           '#',
@@ -35,12 +36,38 @@
       <% elsif @activity.booking_programme_slug.present? %>
         <%= link_to t('.book_button_text'),
           courses_path(certificate: @activity.booking_programme_slug),
-          class: 'govuk-button button community-activity-component__objective-button',
-          data: tracking_data('Book a course')
+          class: 'govuk-button button community-activity-component__objective-button'
         %>
-      <% elsif @activity.self_verification_info.blank? %>
+      <% elsif @activity.evidence_not_required? %>
         <div class="community-activity-component__objective-button-container">
-          <button class="govuk-button button" data-action="click->community-activity-component#submit">Mark complete</button>
+          <% if @activity.public_copy_submission_options.present? %>
+            <% @activity.public_copy_submission_options.each do |option| %>
+              <% if check_submission_option(option["slug"]) %>
+                <div class="community_activity_component__completed_badge_container">
+                  <div class='community-activity-component__completed-badge'><%= t('.complete') %></div>
+                </div>
+                <% if option["redownload"] %>
+                  <a href="<%= option["redirect"] %>" rel="noopener"
+                    class="govuk-body-s" target="_blank">Re-download <%= option["title"].downcase %></a>
+                <% end %>
+              <% else %>
+                <% if @achievement&.complete? %>
+                  <a href="<%= option["redirect"] %>" rel="noopener"
+                    class="govuk-button button <%= @button_class %>" target="_blank"><%= option["title"] %></a>
+                <% else %>
+                  <button class="govuk-button button <%= @button_class %>"
+                    data-action="click->community-activity-component#submit"
+                    data-community-activity-component-slug-param="<%= option["slug"] %>"
+                    data-community-activity-component-redirect-param="<%= option["redirect"] %>"
+                    >
+                      <%= option["title"] %>
+                  </button>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% else %>
+            <button class="govuk-button button" data-action="click->community-activity-component#submit">Mark complete</button>
+          <% end %>
         </div>
       <% else %>
           <div class="community-activity-component__objective-button-container">
@@ -50,7 +77,7 @@
                 reopen_button_text: reopen_button_text,
                 show_corner_decoration: false,
                 class_name: 'community-activity-component--modal',
-                reopen_button_class: achievement_rejected? ? 'ncce-button--white_black_border green-chevron' : nil
+                reopen_button_class: achievement_rejected? ? 'ncce-button--white_black_border green-chevron' : "#{@button_class} ncce-button-chevron"
               ) do |component| %>
                 <%= component.with_confirmation do %>
                   <%= render ModalComponent.new(
@@ -96,17 +123,26 @@
                               <% end %>
                             </ul>
                           <% end %>
-                          <textarea class="govuk-textarea" placeholder="Please provide us with evidence of the activity you delivered." data-community-activity-component-target="textarea"><%= @achievement&.evidence&.[](index) %></textarea>
                         </p>
+                        <textarea class="govuk-textarea govuk-!-margin-bottom-2" placeholder="Please provide us with evidence of the activity you delivered." data-community-activity-component-target="textarea"><%= @achievement&.evidence&.[](index) %></textarea>
+                        <div class="community-activity-component__completion-count govuk-!-margin-bottom-1">
+                          <span class="govuk-body-s" data-community-activity-component-target="characterCountMessage"></span>
+                        </div>
                       <% end %>
                     <% end %>
 
+                    <%= progress.with_warning_step do %>
+                      <div class="comminity-activity-component__warning-text">
+                        <span class="govuk-body-m" data-community-activity-component-target="completionWarningMessage"></span>
+                      </div>
+                    <% end %>
+
                     <div class="community-activity-component__footer-actions">
                       <%= progress.with_back do %>
-                        Back
+                        Previous
                       <% end %>
                       <%= progress.with_continue do %>
-                        Continue
+                        Next
                       <% end %>
                       <%= render ModalComponent.new(
                         title: "Are you sure you want to submit this evidence?",
@@ -117,7 +153,7 @@
                         <%= modal.with_reopen_button do %>
                           <%= progress.with_submit do %>
                             <div class="progress-component__submit-button-wrapper">
-                              <button class="govuk-button button save-draft button--inverted govuk-!-margin-bottom-0" data-action="click->community-activity-component#saveAsDraft" data-community-activity-component-target="saveDraftButton">Save as draft</button>
+                              <button class="govuk-button button save-draft button--inverted govuk-!-margin-bottom-0" data-action="click->community-activity-component#saveAsDraft" data-community-activity-component-target="saveDraftButton">Save draft</button>
                               <button class="govuk-button button ncce-modal--reopen govuk-!-margin-bottom-0" data-community-activity-component-target="submitButton" data-action="modal#toggle">Submit</button>
                             </div>
                           <% end %>
@@ -142,9 +178,9 @@
             <% end %>
           </div>
       <% end %>
-    </span>
+    </div>
     <% if @activity.description.present? %>
-      <div class="community-activity-component__description light-blue-bg"><%= @activity.description.html_safe %></div>
+      <div class="community-activity-component__description"><%= @activity.description.html_safe %></div>
     <% end %>
   </div>