Allow creating a budget in single or multiple mode

Co-Authored-By: decabeza <alberto@decabeza.es>

app/assets/stylesheets/admin.scss

@@ -665,7 +665,8 @@ code {
   display: flex;
   flex-wrap: wrap;
 
-  a {
+  a,
+  button {
     @include regular-button;
     margin-left: auto;
   }

app/assets/stylesheets/admin/budgets/heading_mode.scss

@@ -0,0 +1,77 @@
+.admin .heading-mode {
+  border-radius: rem-calc(12);
+  color: $admin-text;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: $global-width * 0.6;
+  width: 100%;
+
+  section {
+    @include grid-column-gutter;
+    display: flex;
+    flex-flow: column;
+    margin-bottom: $line-height;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: 50%;
+
+      &:last-of-type {
+        border-left: $admin-border;
+      }
+    }
+
+    &.single-heading-option h2::after {
+      content: image-url("budgets/budget_single_heading_icon.png");
+    }
+
+    &.multiple-heading-option h2::after {
+      content: image-url("budgets/budget_multiple_heading_icon.png");
+    }
+
+    h2::after {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  h1 {
+    margin-bottom: $line-height * 2;
+    margin-top: $line-height;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  h1,
+  h2 {
+    font-size: rem-calc(24);
+    text-align: center;
+  }
+
+  h2 {
+    font-weight: 500;
+    padding-top: $line-height;
+  }
+
+  p {
+    font-size: $small-font-size;
+    font-style: italic;
+    flex: 1;
+  }
+
+  a {
+    @include hollow-button;
+    margin: 0 auto;
+    max-width: max-content;
+  }
+
+  .close-button {
+    border: 3px solid $admin-text;
+    border-radius: 50%;
+    color: $admin-text;
+    font-size: rem-calc(23);
+    font-weight: bold;
+    height: rem-calc(30);
+    width: rem-calc(30);
+  }
+}

app/components/admin/budgets/form_component.html.erb

@@ -1,4 +1,6 @@
 <%= translatable_form_for [namespace, budget], html: { class: "budgets-form" } do |f| %>
+  <%= hidden_field_tag(:mode, helpers.budget_mode) if helpers.respond_to?(:budget_mode) %>
+
   <fieldset>
     <legend><%= t("admin.budgets.edit.info.budget_settings") %></legend>
     <%= render "shared/globalize_locales", resource: budget %>

app/components/admin/budgets/heading_mode_component.html.erb

@@ -0,0 +1,17 @@
+<section class="reveal heading-mode" id="heading_mode" data-reveal>
+  <h1><%= t("#{i18n_namespace}.title") %></h1>
+
+  <% modes.each do |mode| %>
+    <section class="<%= mode %>-heading-option">
+      <h2><%= sanitize(t("#{i18n_namespace}.#{mode}.title")) %></h2>
+      <p><%= t("#{i18n_namespace}.#{mode}.description") %></p>
+      <%= link_to t("#{i18n_namespace}.#{mode}.link"),
+                  new_admin_budgets_wizard_budget_path(mode: mode), data: { close: "" } %>
+    </section>
+  <% end %>
+
+  <button class="close-button" aria-label="<%= t("admin.shared.close_modal") %>"
+          type="button" data-close>
+    &times;
+  </button>
+</section>

app/components/admin/budgets/heading_mode_component.rb

@@ -0,0 +1,11 @@
+class Admin::Budgets::HeadingModeComponent < ApplicationComponent
+  private
+
+    def i18n_namespace
+      "admin.budgets_wizard.heading_mode"
+    end
+
+    def modes
+      %w[single multiple]
+    end
+end

app/components/admin/budgets/index_component.html.erb

@@ -1,7 +1,8 @@
 <%= header do %>
-  <%= link_to t("admin.budgets.index.new_link"), new_admin_budgets_wizard_budget_path %>
+  <button data-open="heading_mode"><%= t("admin.budgets.index.new_link") %></button>
 <% end %>
 
+<%= render Admin::Budgets::HeadingModeComponent.new %>
 <%= render Admin::Budgets::HelpComponent.new("budgets") %>
 <%= render "shared/filter_subnav", i18n_namespace: "admin.budgets.index" %>
 

app/components/admin/budgets_wizard/budgets/new_component.rb

@@ -1,12 +1,17 @@
 class Admin::BudgetsWizard::Budgets::NewComponent < ApplicationComponent
   include Header
   attr_reader :budget
+  delegate :single_heading?, to: :helpers
 
   def initialize(budget)
     @budget = budget
   end
 
   def title
-    t("admin.budgets.new.title")
+    if single_heading?
+      t("admin.budgets.new.title_single")
+    else
+      t("admin.budgets.new.title_multiple")
+    end
   end
 end

app/controllers/admin/budgets_wizard/budgets_controller.rb

@@ -6,6 +6,8 @@ class Admin::BudgetsWizard::BudgetsController < Admin::BaseController
 
   load_and_authorize_resource
 
+  helper_method :budget_mode, :single_heading?
+
   def new
   end
 
@@ -44,6 +46,18 @@ class Admin::BudgetsWizard::BudgetsController < Admin::BaseController
     end
 
     def groups_index
-      admin_budgets_wizard_budget_groups_path(@budget)
+      admin_budgets_wizard_budget_groups_path(@budget, url_params)
+    end
+
+    def budget_mode
+      params[:mode]
+    end
+
+    def single_heading?
+      budget_mode == "single"
+    end
+
+    def url_params
+      budget_mode.present? ? { mode: budget_mode } : {}
     end
 end

config/i18n-tasks.yml

@@ -151,6 +151,7 @@ ignore_unused:
   - "admin.budget_headings.index.*.help_block"
   - "admin.budget_phases.index.help_block"
   - "admin.budget_investments.index.filter*"
+  - "admin.budgets_wizard.heading_mode.*"
   - "admin.organizations.index.filter*"
   - "admin.hidden_users.index.filter*"
   - "admin.hidden_budget_investments.index.filter*"

config/locales/en/admin.yml

@@ -133,7 +133,8 @@ en:
         unable_notice: You cannot delete a budget that has associated investments
         unable_notice_polls: You cannot delete a budget that has an associated poll
       new:
-        title: New participatory budget
+        title_multiple: New multiple headings budget
+        title_single: New single heading budget
       winners:
         calculate: Calculate Winner Investments
         calculated: Winners being calculated, it may take a minute.
@@ -316,6 +317,16 @@ en:
         continue: "Continue to headings"
       headings:
         continue: "Continue to phases"
+      heading_mode:
+        multiple:
+          description: "Create a process with multiple groups, districts or topics. You have something like several bags of money. For example, 25,000€ for \"North District\", 30,000€ for \"Center District\", 28,000€ for \"South District\" and the whole city. Or for several themes like sport, culture or health."
+          link: "Create multiple headings budget"
+          title: "<strong>Multiple headings</strong> budget"
+        single:
+          description: "Create a process with a group, district or topic. You have something like a bag of money. For example, 25,000€ for the district, or 10,000€ for culture."
+          link: "Create single heading budget"
+          title: "<strong>Single heading</strong> budget"
+        title: "Participatory budget type"
       phases:
         back: "Go back to headings"
         continue: "Finish"
@@ -1357,6 +1368,7 @@ en:
       example_url: "https://consulproject.org"
       show_results_and_stats: "Show results and stats"
       results_and_stats_reminder: "Marking these checkboxes the results and/or stats will be publicly available and every user will see them."
+      close_modal: Close modal
       example_url: "https://consulproject.org"
     geozones:
       index:

config/locales/es/admin.yml

@@ -133,7 +133,8 @@ es:
         unable_notice: No se puede eliminar un presupuesto con proyectos asociados
         unable_notice_polls: No se puede eliminar un presupuesto con una votación asociada
       new:
-        title: Nuevo presupuesto ciudadano
+        title_multiple: Nuevo presupuesto de múltiples partidas
+        title_single: Nuevo presupuesto de partida única
       winners:
         calculate: Calcular proyectos ganadores
         calculated: Calculando ganadores, puede tardar un minuto.
@@ -316,6 +317,16 @@ es:
         continue: "Continuar a partidas"
       headings:
         continue: "Continuar a fases"
+      heading_mode:
+        multiple:
+          description: "Crea un proceso con múltiples grupos, distritos o temas. Tienes algo como varias bolsas de dinero. Por ejemplo, 25.000€ para \"Distrito norte\", 30.000€ para \"Distrito centro\", 28.000€ para \"Distrito sur\" y toda la ciudad. O para varios temas como deporte, cultura o salud."
+          link: "Crear presupuesto de múltiples partidas"
+          title: "Presupuesto de <strong>múltiples partidas</strong>"
+        single:
+          description: "Crea un proceso con un grupo, distrito o tema. Tienes algo como una bolsa de dinero. Por ejemplo, 25.000€ para un distrito, o 10.000€ para cultura."
+          link: "Crear presupuesto de partida única"
+          title: "Presupuesto de <strong>partida única</strong>"
+        title: Tipo de presupuesto participativo
       phases:
         back: "Volver a partidas"
         continue: "Finalizar"
@@ -1356,6 +1367,7 @@ es:
       example_url: "https://consulproject.org"
       show_results_and_stats: "Mostrar resultados y estadísticas"
       results_and_stats_reminder: "Si marcas estas casillas los resultados y/o estadísticas serán públicos y podrán verlos todos los usuarios."
+      close_modal: Cerrar ventana emergente
       example_url: "https://consulproject.org"
     geozones:
       index:

spec/system/admin/budgets_wizard/budgets_spec.rb

@@ -4,7 +4,8 @@ describe "Budgets wizard, first step", :admin do
   describe "New" do
     scenario "Create budget - Knapsack voting (default)" do
       visit admin_budgets_path
-      click_link "Create new budget"
+      click_button "Create new budget"
+      click_link "Create multiple headings budget"
 
       fill_in "Name", with: "M30 - Summer campaign"
       click_button "Continue to groups"
@@ -21,7 +22,8 @@ describe "Budgets wizard, first step", :admin do
       admin = Administrator.first
 
       visit admin_budgets_path
-      click_link "Create new budget"
+      click_button "Create new budget"
+      click_link "Create multiple headings budget"
 
       fill_in "Name", with: "M30 - Summer campaign"
       select "Approval", from: "Final voting style"
@@ -73,7 +75,8 @@ describe "Budgets wizard, first step", :admin do
   describe "Create" do
     scenario "A new budget is always created in draft mode" do
       visit admin_budgets_path
-      click_link "Create new budget"
+      click_button "Create new budget"
+      click_link "Create multiple headings budget"
 
       fill_in "Name", with: "M30 - Summer campaign"
 

spec/system/admin/budgets_wizard/wizard_spec.rb

@@ -0,0 +1,26 @@
+require "rails_helper"
+
+describe "Budgets creation wizard", :admin do
+  scenario "Creation of a single-heading budget by steps" do
+    visit admin_budgets_path
+    click_button "Create new budget"
+    click_link "Create single heading budget"
+
+    fill_in "Name", with: "Single heading budget"
+    click_button "Continue to groups"
+
+    expect(page).to have_content "New participatory budget created successfully!"
+  end
+
+  scenario "Creation of a multiple-headings budget by steps" do
+    visit admin_budgets_path
+    click_button "Create new budget"
+    click_link "Create multiple headings budget"
+
+    fill_in "Name", with: "Multiple headings budget"
+    click_button "Continue to groups"
+
+    expect(page).to have_content "New participatory budget created successfully!"
+    expect(page).to have_content "There are no groups."
+  end
+end