feat: [#5777] Add navigation buttons for steps in case contact form

app/components/form/step_navigation_component.html.erb

@@ -0,0 +1,34 @@
+<div>
+    <%# Back navigation %>
+    <%= button_tag type: :submit,
+        name: :nav_step,
+        value: @nav_back,
+        class: "btn btn-link #{@nav_back.nil? ? 'disabled' : 'enabled'}",
+        title: "Back step",
+        aria: { label: "Back step" },
+        disabled: !@nav_back do %>
+        <% if @nav_back.present? %>
+            <%= link_to @nav_back, title: "Back step", aria: { label: "Back step" } do %>
+                <i class="lni lni-chevron-left" alt="Chevron icon left"></i>
+            <% end %>
+        <% elsif %>
+            <i class="lni lni-chevron-left" alt="Chevron icon left"></i>
+        <% end %>
+    <% end %>
+    <%# Next navigation %>
+    <%= button_tag type: :submit,
+        name: :nav_step,
+        value: @nav_forward,
+        class: "btn btn-link #{@nav_next.nil? ? 'disabled' : 'enabled'}",
+        title: "Next step",
+        aria: { label: "Next step" },
+        disabled: !@nav_next do %>
+        <% if @nav_next.present? %>
+            <%= link_to @nav_next, title: "Next step", aria: { label: "Next step" } do %>
+                <i class="lni lni-chevron-right" alt="Chevron icon right"></i>
+            <% end %>
+        <% elsif %>
+            <i class="lni lni-chevron-right" alt="Chevron icon right"></i>
+        <% end %>
+    <% end %>
+</div>

app/components/form/step_navigation_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Form::StepNavigationComponent < ViewComponent::Base
+  def initialize(nav_back: nil, nav_next: nil)
+    @nav_back = nav_back
+    @nav_next = nav_next
+  end
+end

app/components/form/title_component.html.erb

@@ -11,15 +11,18 @@
       <h2 class="col-12 col-md-6 case-contacts-form-subtitle"><%= @subtitle %></h2>
       <% if @progress %>
         <div class="col-12 col-md-6 align-items-center d-flex gap-2 mt-2 mt-md-0">
-          <p class="col-auto">
-            <%= @steps_in_text %>
-          </p>
-          <div class="col">
-            <div class="progress">
-              <div class="progress-bar primary-bg" role="progressbar" style="width: <%= @progress %>%" aria-valuenow="<%= @progress %>" aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
+        <% if navigable %>
+          <%= navigable %>
+        <% end %>
+        <p class="col-auto">
+          <%= @steps_in_text %>
+        </p>
+        <div class="col">
+          <div class="progress">
+            <div class="progress-bar primary-bg" role="progressbar" style="width: <%= @progress %>%" aria-valuenow="<%= @progress %>" aria-valuemin="0" aria-valuemax="100"></div>
           </div>
         </div>
+        </div>
       <% end %>
     </div>
 

app/components/form/title_component.rb

@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
 class Form::TitleComponent < ViewComponent::Base
+  # `Form::StepNavigationComponent` is defined in another file, so we can refer to it by class name.
+  renders_one :navigable, Form::StepNavigationComponent
+
   def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false)
     @title = title
     @subtitle = subtitle

app/controllers/case_contacts/form_controller.rb

@@ -9,29 +9,21 @@ class CaseContacts::FormController < ApplicationController
 
   # wizard_path
   def show
-    authorize @case_contact
+    manage_form_step
     get_cases_and_contact_types
-    @page = wizard_steps.index(step) + 1
-    @total_pages = steps.count
-
     render_wizard
     wizard_path
   end
 
   def update
-    authorize @case_contact
+    manage_form_step(step_navigation: true)
     params[:case_contact][:status] = step.to_s if !@case_contact.active?
     remove_unwanted_contact_types
     remove_nil_draft_ids
-
     if CaseContactUpdateService.new(@case_contact).update_attrs(case_contact_params)
       respond_to do |format|
         format.html {
-          if step == steps.last
-            finish_editing
-          else
-            render_wizard @case_contact, {}, {case_contact_id: @case_contact.id}
-          end
+          manage_navigation
         }
         format.json { head :ok }
       end
@@ -52,6 +44,13 @@ def set_case_contact
     @case_contact = CaseContact.find(params[:case_contact_id])
   end
 
+  def manage_form_step(step_navigation: false)
+    authorize @case_contact
+    @page = wizard_steps.index(step) + 1
+    @total_pages = steps.count
+    @nav_step = params[:nav_step] if step_navigation
+  end
+
   def get_cases_and_contact_types
     @casa_cases = policy_scope(current_organization.casa_cases)
     @casa_cases = @casa_cases.where(id: @case_contact.casa_case_id) if @case_contact.active?
@@ -65,6 +64,17 @@ def get_cases_and_contact_types
     @selected_contact_type_ids = @case_contact.contact_type_ids
   end
 
+  def manage_navigation
+    if @nav_step.present?
+      jump_to(@nav_step.split("/").last.to_sym)
+      render_wizard @case_contact, {}, {case_contact_id: @case_contact.id}
+    elsif step == steps.last
+      finish_editing
+    else
+      render_wizard @case_contact, {}, {case_contact_id: @case_contact.id}
+    end
+  end
+
   def finish_editing
     message = ""
     send_reimbursement_email(@case_contact)

app/views/case_contacts/form/details.html.erb

@@ -1,7 +1,8 @@
-<%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact details", step: @page, total_steps: @total_pages)) %>
-
 <div>
   <%= form_with(model: @case_contact, url: wizard_path(nil, case_contact_id: @case_contact.id), local: true, id: "casa-contact-form", class: "component-validated-form") do |form| %>
+    <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact details", step: @page, total_steps: @total_pages)) do |component| %>
+      <% component.with_navigable(nav_back: nil, nav_next: next_wizard_path) %>
+    <% end %>
     <%= render "/shared/error_messages", resource: @case_contact %>
 
     <div class="card-style-1 pl-25 mb-10">

app/views/case_contacts/form/expenses.html.erb

@@ -1,7 +1,7 @@
-<%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact expenses", step: @page, total_steps: @total_pages)) %>
 
 <div>
   <%= form_with(model: @case_contact, url: wizard_path(nil, case_contact_id: @case_contact.id), local: true, id: "casa-contact-form", class: "component-validated-form") do |form| %>
+    <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact expenses", step: @page, total_steps: @total_pages, navigable: Form::StepNavigationComponent.new(nav_back: previous_wizard_path, nav_next: nil))) %>
     <%= render "/shared/error_messages", resource: @case_contact %>
 
     <div class="card-style-1 pl-25 mb-10 pr-50">

app/views/case_contacts/form/notes.html.erb

@@ -1,8 +1,8 @@
 <div data-controller="autosave" data-autosave-good-alert-class="text-muted" data-autosave-bad-alert-class="text-danger">
-  <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact notes", step: @page, total_steps: @total_pages, notes: @case_contact.decorate.form_page_notes[:notes], autosave: true)) %>
 
   <div>
     <%= form_with(model: @case_contact, url: wizard_path(nil, case_contact_id: @case_contact.id), id: "casa-contact-form", class: "component-validated-form", data: { "turbo-action": "advance", "autosave-target": "form" }) do |form| %>
+      <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact notes", step: @page, total_steps: @total_pages, notes: @case_contact.decorate.form_page_notes[:notes], autosave: true, navigable: Form::StepNavigationComponent.new(nav_back: previous_wizard_path, nav_next: @case_contact.casa_org_any_expenses_enabled? ? next_wizard_path : nil))) %>
       <%= render "contact_topic_notes", form: %>
       <div class="card-style-1 pl-25 pr-25 mb-10">
         <div class="d-flex justify-content-between mb-3"

spec/components/form/step_navigation_component_spec.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Form::StepNavigationComponent, type: :component do
+  context "can handle enabled button" do
+    it "enables button if value exists" do
+      render_inline(described_class.new(nav_back: "/details"))
+      expect(page).to have_selector(:link_or_button, "Back step")
+    end
+  end
+
+  context "can handle disabled button" do
+    it "disables buttons if value is nil" do
+      render_inline(described_class.new)
+      expect(page).not_to have_selector(:link_or_button, "Next step")
+    end
+  end
+end

spec/components/form/title_component_spec.rb

@@ -9,6 +9,7 @@
   let(:total_steps) { nil }
   let(:notes) { nil }
   let(:autosave) { nil }
+  let(:navigable) { nil }
 
   before(:each) do
     render_inline(described_class.new(title: title, subtitle: subtitle, step: step, total_steps: total_steps, notes: notes, autosave: autosave))