Merge pull request #4508 from consul/budgets-info-section

Add info section to budgets in the selecting phase

app/assets/stylesheets/budgets/supports_info.scss

@@ -0,0 +1,60 @@
+.budget-info .supports-info {
+  text-align: center;
+
+  @include breakpoint(medium) {
+
+    h2 {
+      font-size: rem-calc(48);
+    }
+
+    h3 {
+      font-size: rem-calc(36);
+    }
+  }
+
+  h2,
+  h3 {
+    font-weight: normal;
+  }
+
+  section {
+    @include grid-column-gutter;
+    border: 6px solid #f4f4f4;
+    border-radius: rem-calc(12);
+    margin-bottom: $line-height;
+    margin-top: $line-height;
+    padding-bottom: $line-height;
+    padding-top: $line-height;
+
+    @include breakpoint(medium) {
+      padding-top: $line-height * 2;
+    }
+  }
+
+  > section:first-child h2::after {
+    content: image-url("budgets/budgets_support.png");
+    display: block;
+    margin-top: $line-height;
+  }
+
+  section + section p {
+    margin-left: auto;
+    margin-right: auto;
+
+    @include breakpoint(medium) {
+      width: 50%;
+    }
+  }
+
+  .keep-scrolling {
+    @include has-fa-icon(angle-double-down, solid, after);
+    color: $brand;
+    font-weight: bold;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &::after {
+      font-size: 1.3em;
+    }
+  }
+}

app/components/budgets/budget_component.html.erb

@@ -32,6 +32,8 @@
         <%= render Budgets::GroupsAndHeadingsComponent.new(budget) %>
       <% end %>
 
+      <%= render Budgets::SupportsInfoComponent.new(budget) %>
+
       <% unless budget.informing? %>
         <div class="map inline">
           <h2><%= t("budgets.index.map") %></h2>

app/components/budgets/investments_list_component.html.erb

@@ -1,5 +1,5 @@
 <% if investments.any? %>
-  <section class="investments-list">
+  <section id="investments_list" class="investments-list">
     <header>
       <h2><%= t("budgets.investments_list.title") %></h2>
     </header>

app/components/budgets/supports_info_component.html.erb

@@ -0,0 +1,30 @@
+<aside class="supports-info">
+  <section>
+    <header>
+      <h2><%= sanitize(t("budgets.supports_info.title")) %></h2>
+    </header>
+
+    <p><%= t("budgets.supports_info.next") %></p>
+    <p><%= sanitize(t("budgets.supports_info.remember")) %></p>
+    <p><%= t("budgets.supports_info.different") %></p>
+  </section>
+
+  <section>
+    <header>
+      <h3><%= support_info_heading %></h3>
+    </header>
+
+    <p><%= t("budgets.supports_info.time",
+              phase_end_date: l(budget.current_phase.ends_at.to_date, format: :long)) %></p>
+
+    <p><%= t("budgets.supports_info.share") %></p>
+
+    <% if budget.single_heading? %>
+      <p>
+        <a href="#investments_list" class="keep-scrolling" data-smooth-scroll>
+          <%= t("budgets.supports_info.scrolling") %><br>
+        </a>
+      </p>
+    <% end %>
+  </section>
+</aside>

app/components/budgets/supports_info_component.rb

@@ -0,0 +1,26 @@
+class Budgets::SupportsInfoComponent < ApplicationComponent
+  delegate :current_user, to: :helpers
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+
+  def render?
+    budget.selecting?
+  end
+
+  private
+
+    def support_info_heading
+      if current_user
+        sanitize(t("budgets.supports_info.supported", count: total_supports))
+      else
+        sanitize(t("budgets.supports_info.supported_not_logged_in"))
+      end
+    end
+
+    def total_supports
+      Vote.where(votable: budget.investments, voter: current_user).count
+    end
+end

config/locales/en/budgets.yml

@@ -182,6 +182,18 @@ en:
       title: "List of investments"
     show:
       see_results: See results
+    supports_info:
+      different: "You may support on as many different projects as you would like."
+      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>."
+      scrolling: "Keep scrolling to see all ideas"
+      share: "You can share the projects you have supported on through social media and attract more attention and support to them!"
+      supported:
+        one: "So far you've supported <strong>1 project</strong>."
+        other: "So far you've supported <strong>%{count} projects</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."
+      title: "It's time to <strong>support</strong> projects!"
     results:
       link: Results
       page_title: "%{budget} - Results"

config/locales/es/budgets.yml

@@ -182,6 +182,18 @@ es:
       title: "Lista de proyectos"
     show:
       see_results: Ver resultados
+    supports_info:
+      different: "Puedes apoyar tantos proyectos diferentes como quieras."
+      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>."
+      scrolling: "Sigue desplazándote para ver todas las ideas"
+      share: "Puedes compartir los proyectos que has apoyado en las redes sociales y ¡atraer más atención y apoyos para ellos!"
+      supported:
+        one: "Hasta ahora has apoyado <strong>1 proyecto</strong>."
+        other: "Hasta ahora has apoyado <strong>%{count} proyectos</strong>."
+      supported_not_logged_in: "Entra y empieza a <strong>apoyar proyectos</strong>."
+      time: "Hay tiempo hasta el %{phase_end_date} para apoyar proyectos."
+      title: "¡Es hora de <strong>apoyar</strong> proyectos!"
     results:
       link: Resultados
       page_title: "%{budget} - Resultados"

spec/components/budgets/supports_info_component_spec.rb

@@ -0,0 +1,85 @@
+require "rails_helper"
+
+describe Budgets::SupportsInfoComponent, type: :component do
+  let(:budget) { create(:budget, :selecting) }
+  let(:group) { create(:budget_group, budget: budget) }
+  let(:component) { Budgets::SupportsInfoComponent.new(budget) }
+  before { allow(component).to receive(:current_user).and_return(nil) }
+
+  it "renders when the budget is selecting" do
+    create(:budget_heading, group: group)
+
+    render_inline component
+
+    expect(page).to have_selector ".supports-info"
+    expect(page).to have_content "It's time to support projects!"
+    expect(page).to have_link "Keep scrolling to see all ideas"
+  end
+
+  it "when budget has multiple headings the link to see all ideas is not rendered" do
+    create_list(:budget_heading, 2, group: group)
+
+    render_inline component
+
+    expect(page).not_to have_link "Keep scrolling to see all ideas"
+  end
+
+  it "does not render anything when the budget is not selecting" do
+    budget.update!(phase: (Budget::Phase::PHASE_KINDS - ["selecting"]).sample)
+
+    render_inline component
+
+    expect(page).not_to have_selector ".supports-info"
+    expect(page.text).to be_empty
+  end
+
+  describe "#total_supports" do
+    it "does not show supports when users are not logged in" do
+      render_inline component
+
+      expect(page).not_to have_content "So far you've supported"
+    end
+
+    context "logged users" do
+      let(:user) { create(:user, :level_two) }
+      before { allow(component).to receive(:current_user).and_return(user) }
+
+      it "shows supported investments" do
+        heading = create(:budget_heading, budget: budget)
+
+        render_inline component
+
+        expect(page).to have_content "So far you've supported 0 projects."
+
+        create(:budget_investment, :selected, heading: heading, voters: [user])
+
+        render_inline component
+
+        expect(page).to have_content "So far you've supported 1 project."
+
+        create_list(:budget_investment, 3, :selected, heading: heading, voters: [user])
+
+        render_inline component
+
+        expect(page).to have_content "So far you've supported 4 projects."
+      end
+
+      it "does not show supports for another budget" do
+        second_budget = create(:budget, phase: "selecting")
+        second_component = Budgets::SupportsInfoComponent.new(second_budget)
+        allow(second_component).to receive(:current_user).and_return(user)
+
+        create_list(:budget_investment, 2, :selected, budget: budget, voters: [user])
+        create_list(:budget_investment, 3, :selected, budget: second_budget, voters: [user])
+
+        render_inline component
+
+        expect(page).to have_content "So far you've supported 2 projects."
+
+        render_inline second_component
+
+        expect(page).to have_content "So far you've supported 3 projects."
+      end
+    end
+  end
+end

spec/system/budgets/budgets_spec.rb

@@ -417,6 +417,21 @@ describe "Budgets" do
         expect(page).not_to have_css ".investments-list"
       end
     end
+
+    scenario "Show supports info on selecting phase" do
+      budget = create(:budget, :selecting)
+      group = create(:budget_group, budget: budget)
+      heading = create(:budget_heading, group: group)
+      voter = create(:user, :level_two)
+
+      create_list(:budget_investment, 3, :selected, heading: heading, voters: [voter])
+
+      login_as(voter)
+      visit budget_path(budget)
+
+      expect(page).to have_content "It's time to support projects!"
+      expect(page).to have_content "So far you've supported 3 projects."
+    end
   end
 
   context "In Drafting phase" do