From 744d82f8342fea886926a0afcd7071a3f354c638 Mon Sep 17 00:00:00 2001
From: Priya Power <49959312+priyapower@users.noreply.github.com>
Date: Mon, 22 Jul 2024 14:58:22 -0500
Subject: [PATCH] [#5777] Refactor with slot

---
 app/components/form/title_component.html.erb  | 4 ++--
 app/components/form/title_component.rb        | 8 +++++---
 app/views/case_contacts/form/details.html.erb | 4 +++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/form/title_component.html.erb b/app/components/form/title_component.html.erb
index f9f2131d3f..26873dd92b 100644
--- a/app/components/form/title_component.html.erb
+++ b/app/components/form/title_component.html.erb
@@ -11,8 +11,8 @@
       <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">
-        <% if @navigable %>
-          <%= render(@navigable) %>
+        <% if navigable %>
+          <%= navigable %>
         <% end %>
         <p class="col-auto">
           <%= @steps_in_text %>
diff --git a/app/components/form/title_component.rb b/app/components/form/title_component.rb
index 7229dd4910..33cad6ee16 100644
--- a/app/components/form/title_component.rb
+++ b/app/components/form/title_component.rb
@@ -1,16 +1,18 @@
 # frozen_string_literal: true
 
 class Form::TitleComponent < ViewComponent::Base
-  def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false, navigable: nil)
+  # `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
     @notes = notes
     @autosave = autosave
-    @navigable = navigable
 
     if step && total_steps
       @steps_in_text = "Step #{step} of #{total_steps}"
       @progress = (step.to_d / total_steps.to_d) * 100
     end
   end
-end
+end
\ No newline at end of file
diff --git a/app/views/case_contacts/form/details.html.erb b/app/views/case_contacts/form/details.html.erb
index c6ce860b53..c9850302c8 100644
--- a/app/views/case_contacts/form/details.html.erb
+++ b/app/views/case_contacts/form/details.html.erb
@@ -1,6 +1,8 @@
 <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, navigable: Form::StepNavigationComponent.new(nav_back: nil, nav_next: next_wizard_path))) %>
+    <%= 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">