Add supports info section on budgets index page

app/assets/stylesheets/participation.scss

@@ -2111,6 +2111,55 @@
   }
 }
 
+.supports-info {
+
+  @include breakpoint(medium) {
+
+    h2 {
+      font-size: rem-calc(48);
+    }
+
+    h3 {
+      font-size: rem-calc(36);
+    }
+  }
+
+  h2,
+  h3 {
+    font-weight: normal;
+  }
+
+  .callout {
+    border: 6px solid #f4f4f4;
+    border-radius: rem-calc(12);
+    padding: $line-height;
+
+    @include breakpoint(medium) {
+      padding: $line-height * 2 0 $line-height;
+    }
+  }
+
+  .fa-thumbs-up {
+    color: $brand;
+    font-size: rem-calc(100);
+    padding: $line-height * 2 0;
+  }
+
+  .fa-angle-double-down {
+    font-size: rem-calc(24);
+  }
+
+  a {
+
+    &.keep-scrolling {
+      color: $brand;
+      position: relative;
+      text-decoration: none;
+      text-transform: uppercase;
+    }
+  }
+}
+
 // 07. Proposals successful
 // -------------------------
 

app/helpers/budgets_helper.rb

@@ -132,4 +132,8 @@ def class_for_form(resource)
       "hide"
     end
   end
+
+  def budget_investments_total_supports(user)
+    Vote.where(votable_type: "Budget::Investment", voter_id: user.id).count
+  end
 end

app/views/budgets/_budget.html.erb

@@ -71,6 +71,8 @@
         <%= render "groups_and_headings", budget: budget %>
       <% end %>
 
+      <%= render "supports_info", budget: budget %>
+
       <% unless budget.informing? %>
         <div class="map inline">
           <h2><%= t("budgets.index.map") %></h2>

app/views/budgets/_investments_list.html.erb

@@ -1,6 +1,6 @@
 <% if @investments.any? %>
   <div class="row">
-    <div class="budget-investment-index-list">
+    <div id="budget_investment_index_list" class="budget-investment-index-list">
       <div class="small-12 column margin-top">
         <h2><%= t("budgets.show.investments_list") %></h2>
       </div>

app/views/budgets/_supports_info.html.erb

@@ -0,0 +1,42 @@
+<% if budget.selecting? %>
+  <div class="supports-info text-center">
+    <div class="callout">
+      <h2><%= sanitize(t("budgets.index.supports_info.title")) %></h2>
+
+      <span class="far fa-thumbs-up"></span>
+
+      <p><%= t("budgets.index.supports_info.next") %></p>
+      <p><%= sanitize(t("budgets.index.supports_info.remember")) %></p>
+      <p><%= t("budgets.index.supports_info.different") %></p>
+    </div>
+
+    <div class="callout">
+      <h3>
+        <% if current_user %>
+          <% if budget_investments_total_supports(current_user) == 1 %>
+            <%= sanitize(t("budgets.index.supports_info.supported_one")) %>
+          <% else %>
+            <%= sanitize(t("budgets.index.supports_info.supported",
+                            count: budget_investments_total_supports(current_user))) %>
+          <% end %>
+        <% else %>
+          <%= sanitize(t("budgets.index.supports_info.supported_not_logged_in")) %>
+        <% end %>
+      </h3>
+
+      <div class="small-12 medium-6 small-centered">
+        <p><%= t("budgets.index.supports_info.time",
+                  phase_end_date: l(budget.current_phase.ends_at.to_date, format: :long)) %></p>
+
+        <p class="margin-top"><%= t("budgets.index.supports_info.share") %></p>
+
+        <p class="margin-top">
+          <a href="#budget_investment_index_list" class="keep-scrolling" data-smooth-scroll>
+            <%= t("budgets.index.supports_info.scrolling") %><br>
+            <span class="fas fa-angle-double-down"></span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+<% end %>

config/locales/en/budgets.yml

@@ -75,6 +75,17 @@ en:
         title: Help with participatory budgets
         description: With the participatory budgets the citizens decide to which projects is destined a part of the budget.
       milestones: Milestones
+      supports_info:
+        title: "It's time to <strong>support</strong> projects!"
+        next: "Support the projects you would like to see move on to the next phase."
+        remember: "<strong>Remember!</strong> You can only cast your support <strong>once</strong> for each project and each support is <strong>irreversible</strong>."
+        different: "You may support on as many different projects as you would like."
+        supported: "So far you supported <strong>%{count} projects</strong>."
+        supported_one: "So far you supported <strong>1 project</strong>."
+        supported_not_logged_in: "Log in to start <strong>supporting projects</strong>."
+        time: "There's still time until %{phase_end_date} to support projects."
+        share: "You can share the projects you have supported on through social media and attract more attention and support to them!"
+        scrolling: "Keep scrolling to see all ideas"
     investments:
       form:
         title: "Create a budget investment"

config/locales/es/budgets.yml

@@ -75,6 +75,17 @@ es:
         title: Ayuda sobre presupuestos participativos
         description: Con los presupuestos participativos la ciudadanía decide a qué proyectos va destinada una parte del presupuesto.
       milestones: Seguimiento de proyectos
+      supports_info:
+        title: "¡Es hora de <strong>apoyar</strong> proyectos!"
+        next: "Apoya proyectos que te gustaría ver en la siguiente fase."
+        remember: "<strong>¡Recuerda!</strong> Solo puedes emitir tu apoyo <strong>una vez</strong> por cada proyecto y cada apoyo es <strong>irreversible</strong>."
+        different: "Puedes apoyar tantos proyectos diferentes como quieras."
+        supported: "Hasta ahora has apoyado <strong>%{count} proyectos</strong>."
+        supported_one: "Hasta ahora has apoyado <strong>1 proyecto</strong>."
+        supported_not_logged_in: "Entra y empieza a <strong>apoyar proyectos</strong>."
+        time: "Hay tiempo hasta el %{phase_end_date} para apoyar proyectos."
+        share: "Puedes compartir los proyectos que has apoyado en las redes sociales y ¡atraer más atención y apoyos para ellos!"
+        scrolling: "Sigue desplazándote para ver todas las ideas"
     investments:
       form:
         title: "Crear nuevo proyecto"

spec/system/budgets/budgets_spec.rb

@@ -469,6 +469,67 @@
         end
       end
     end
+
+    scenario "Show support info on selecting phase" do
+      budget = create(:budget)
+      group = create(:budget_group, budget: budget)
+      heading = create(:budget_heading, group: group)
+
+      voter = create(:user, :level_two)
+
+      %w[informing accepting reviewing valuating publishing_prices balloting reviewing_ballots
+        finished].each do |phase_name|
+        budget.update!(phase: phase_name)
+
+        visit budget_path(budget)
+
+        expect(page).not_to have_content "It's time to support projects!"
+        expect(page).not_to have_content "Support the projects you would like to see move on "\
+                                         "to the next phase."
+        expect(page).not_to have_content "Remember! You can only cast your support once for each project "\
+                                         "and each support is irreversible."
+        expect(page).not_to have_content "You may support on as many different projects as you would like."
+        expect(page).not_to have_content "So far you supported 0 projects."
+        expect(page).not_to have_content "Log in to start supporting projects."
+        expect(page).not_to have_content "There's still time until"
+        expect(page).not_to have_content "You can share the projects you have supported on through social "\
+                                         "media and attract more attention and support to them!"
+        expect(page).not_to have_link    "Keep scrolling to see all ideas"
+      end
+
+      budget.update!(phase: "selecting")
+      visit budget_path(budget)
+
+      expect(page).to have_content "It's time to support projects!"
+      expect(page).to have_content "Support the projects you would like to see move on "\
+                                   "to the next phase."
+      expect(page).to have_content "Remember! You can only cast your support once for each project "\
+                                   "and each support is irreversible."
+      expect(page).to have_content "You may support on as many different projects as you would like."
+      expect(page).to have_content "Log in to start supporting projects"
+      expect(page).to have_content "There's still time until"
+      expect(page).to have_content "You can share the projects you have supported on through social "\
+                                   "media and attract more attention and support to them!"
+      expect(page).to have_link    "Keep scrolling to see all ideas"
+
+      login_as(voter)
+
+      visit budget_path(budget)
+
+      expect(page).to have_content "So far you supported 0 projects."
+
+      create(:budget_investment, :selected, heading: heading, voters: [voter])
+
+      visit budget_path(budget)
+
+      expect(page).to have_content "So far you supported 1 project."
+
+      create_list(:budget_investment, 3, :selected, heading: heading, voters: [voter])
+
+      visit budget_path(budget)
+
+      expect(page).to have_content "So far you supported 4 projects."
+    end
   end
 
   context "In Drafting phase" do