diff --git a/app/assets/images/budgets/budgets_support.png b/app/assets/images/budgets/budgets_support.png new file mode 100644 index 000000000..55a5e4a19 Binary files /dev/null and b/app/assets/images/budgets/budgets_support.png differ diff --git a/app/assets/stylesheets/budgets/supports_info.scss b/app/assets/stylesheets/budgets/supports_info.scss new file mode 100644 index 000000000..2779adfca --- /dev/null +++ b/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; + } + } +} diff --git a/app/components/budgets/budget_component.html.erb b/app/components/budgets/budget_component.html.erb index 6b1fd55e2..7ba34034a 100644 --- a/app/components/budgets/budget_component.html.erb +++ b/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? %>

<%= t("budgets.index.map") %>

diff --git a/app/components/budgets/investments_list_component.html.erb b/app/components/budgets/investments_list_component.html.erb index 6fbdb4d94..622f175dc 100644 --- a/app/components/budgets/investments_list_component.html.erb +++ b/app/components/budgets/investments_list_component.html.erb @@ -1,5 +1,5 @@ <% if investments.any? %> -
+

<%= t("budgets.investments_list.title") %>

diff --git a/app/components/budgets/supports_info_component.html.erb b/app/components/budgets/supports_info_component.html.erb new file mode 100644 index 000000000..e9c55e837 --- /dev/null +++ b/app/components/budgets/supports_info_component.html.erb @@ -0,0 +1,30 @@ + diff --git a/app/components/budgets/supports_info_component.rb b/app/components/budgets/supports_info_component.rb new file mode 100644 index 000000000..6c55970ef --- /dev/null +++ b/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 diff --git a/config/locales/en/budgets.yml b/config/locales/en/budgets.yml index 228dad939..5b143a513 100644 --- a/config/locales/en/budgets.yml +++ b/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: "Remember! You can only cast your support once for each project and each support is irreversible." + 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 1 project." + other: "So far you've supported %{count} projects." + supported_not_logged_in: "Log in to start supporting projects." + time: "There's still time until %{phase_end_date} to support projects." + title: "It's time to support projects!" results: link: Results page_title: "%{budget} - Results" diff --git a/config/locales/es/budgets.yml b/config/locales/es/budgets.yml index 15ba86b17..1921ddb88 100644 --- a/config/locales/es/budgets.yml +++ b/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: "¡Recuerda! Solo puedes emitir tu apoyo una vez por cada proyecto y cada apoyo es irreversible." + 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 1 proyecto." + other: "Hasta ahora has apoyado %{count} proyectos." + supported_not_logged_in: "Entra y empieza a apoyar proyectos." + time: "Hay tiempo hasta el %{phase_end_date} para apoyar proyectos." + title: "¡Es hora de apoyar proyectos!" results: link: Resultados page_title: "%{budget} - Resultados" diff --git a/spec/components/budgets/supports_info_component_spec.rb b/spec/components/budgets/supports_info_component_spec.rb new file mode 100644 index 000000000..e4e07a545 --- /dev/null +++ b/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 diff --git a/spec/system/budgets/budgets_spec.rb b/spec/system/budgets/budgets_spec.rb index 1f7cbbddd..9aa52b13e 100644 --- a/spec/system/budgets/budgets_spec.rb +++ b/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