Merge pull request #6191 from chaimann/admin-update-address-component

Refactor `ui/forms/address` component

Author: tvdeyen

admin/app/components/solidus_admin/orders/show/address/component.html.erb

@@ -28,7 +28,7 @@
 
           <div class="w-full flex gap-4">
             <%= turbo_frame_tag address_frame_id do %>
-              <%= render component('ui/forms/address').new(address: @address, name: "order[#{@type}_address_attributes]") %>
+              <%= render component('ui/forms/address').new(addressable: @address, form_field_name: "order[#{@type}_address_attributes]") %>
             <% end %>
           </div>
 

admin/app/components/solidus_admin/ui/forms/address/component.html.erb

@@ -3,52 +3,52 @@
   <%= :disabled if @disabled %>
 >
   <div class="<%= stimulus_id %>--address-form flex flex-wrap gap-4 pb-4">
-    <%= render component("ui/forms/field").text_field(@name, :name, object: @address) %>
-    <%= render component("ui/forms/field").text_field(@name, :address1, object: @address) %>
-    <%= render component("ui/forms/field").text_field(@name, :address2, object: @address) %>
+    <%= render component("ui/forms/field").text_field(@form_field_name, :name, object: @addressable) if @include_name_field %>
+    <%= render component("ui/forms/field").text_field(@form_field_name, :address1, object: @addressable) %>
+    <%= render component("ui/forms/field").text_field(@form_field_name, :address2, object: @addressable) %>
     <div class="flex gap-4 w-full">
-      <%= render component("ui/forms/field").text_field(@name, :city, object: @address) %>
-      <%= render component("ui/forms/field").text_field(@name, :zipcode, object: @address) %>
+      <%= render component("ui/forms/field").text_field(@form_field_name, :city, object: @addressable) %>
+      <%= render component("ui/forms/field").text_field(@form_field_name, :zipcode, object: @addressable) %>
     </div>
 
     <%= render component("ui/forms/field").select(
-      @name,
+      @form_field_name,
       :country_id,
       Spree::Country.all.map { |c| [c.name, c.id] },
-      object: @address,
-      value: @address.try(:country_id),
+      object: @addressable,
+      value: @addressable.try(:country_id),
       "data-#{stimulus_id}-target": "country",
       "data-action": "change->#{stimulus_id}#loadStates"
     ) %>
 
     <%= content_tag(:div,
       data: { "#{stimulus_id}-target": "stateNameWrapper" },
-      class: (@address.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
+      class: (@addressable.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
         ) do %>
       <%= render component("ui/forms/field").text_field(
-        @name,
+        @form_field_name,
         :state_name,
-        object: @address,
-        value: @address.try(:state_name),
+        object: @addressable,
+        value: @addressable.try(:state_name),
         "data-#{stimulus_id}-target": "stateName"
       ) %>
     <% end %>
-    <input autocomplete="off" type="hidden" name=<%= "#{@name}[state_id]" %>>
+    <input autocomplete="off" type="hidden" name=<%= "#{@form_field_name}[state_id]" %>>
 
     <%= content_tag(:div,
       data: { "#{stimulus_id}-target": "stateWrapper" },
-      class: (@address.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
+      class: (@addressable.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
         ) do %>
       <%= render component("ui/forms/field").select(
-        @name,
+        @form_field_name,
         :state_id,
         state_options,
-        object: @address,
-        value: @address.try(:state_id),
+        object: @addressable,
+        value: @addressable.try(:state_id),
         "data-#{stimulus_id}-target": "state"
       ) %>
     <% end %>
 
-    <%= render component("ui/forms/field").text_field(@name, :phone,  object: @address) %>
+    <%= render component("ui/forms/field").text_field(@form_field_name, :phone,  object: @addressable) %>
   </div>
 </fieldset>

admin/app/components/solidus_admin/ui/forms/address/component.rb

@@ -1,14 +1,15 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Forms::Address::Component < SolidusAdmin::BaseComponent
-  def initialize(address:, name:, disabled: false)
-    @address = address
-    @name = name
+  def initialize(addressable:, form_field_name:, disabled: false, include_name_field: true)
+    @addressable = addressable
+    @form_field_name = form_field_name
     @disabled = disabled
+    @include_name_field = include_name_field
   end
 
   def state_options
-    return [] unless @address.country
-    @address.country.states.map { |s| [s.name, s.id] }
+    return [] unless @addressable.country
+    @addressable.country.states.map { |s| [s.name, s.id] }
   end
 end

admin/app/components/solidus_admin/users/addresses/component.html.erb

@@ -19,7 +19,7 @@
       <%= render component('ui/panel').new(title: t(".billing_address")) do %>
         <%= form_for @user, url: solidus_admin.update_addresses_user_path(@user), method: :put, html: { id: "#{form_id}_billing", autocomplete: "off", class: "bill_address" } do |f| %>
 
-          <%= render component('ui/forms/address').new(address: @bill_address, name: "user[bill_address_attributes]") %>
+          <%= render component('ui/forms/address').new(addressable: @bill_address, form_field_name: "user[bill_address_attributes]") %>
           <div class="py-1.5 text-center">
             <%= render component("ui/button").new(tag: :button, text: t(".update"), form: "#{form_id}_billing") %>
             <%= render component("ui/button").new(tag: :a, text: t(".cancel"), href: solidus_admin.addresses_user_path(@user), scheme: :secondary) %>
@@ -30,7 +30,7 @@
       <%= render component('ui/panel').new(title: t(".shipping_address")) do %>
         <%= form_for @user, url: solidus_admin.update_addresses_user_path(@user), method: :put, html: { id: "#{form_id}_shipping", autocomplete: "off", class: "ship_address"  } do |f| %>
 
-          <%= render component('ui/forms/address').new(address: @ship_address, name: "user[ship_address_attributes]") %>
+          <%= render component('ui/forms/address').new(addressable: @ship_address, form_field_name: "user[ship_address_attributes]") %>
           <div class="py-1.5 text-center">
             <%= render component("ui/button").new(tag: :button, text: t(".update"), form: "#{form_id}_shipping") %>
             <%= render component("ui/button").new(tag: :a, text: t(".cancel"), href: solidus_admin.addresses_user_path(@user), scheme: :secondary) %>

admin/spec/components/previews/solidus_admin/ui/forms/address/component_preview.rb

@@ -5,14 +5,14 @@ class SolidusAdmin::UI::Forms::Address::ComponentPreview < ViewComponent::Previe
   include SolidusAdmin::Preview
 
   def overview
-    render_with_template(locals: { address: fake_address })
+    render_with_template(locals: { addressable: fake_address })
   end
 
   # @param disabled toggle
   def playground(disabled: false)
     render component("ui/forms/address").new(
-      name: "",
-      address: fake_address,
+      form_field_name: "",
+      addressable: fake_address,
       disabled:
     )
   end

admin/spec/components/previews/solidus_admin/ui/forms/address/component_preview/overview.html.erb

@@ -1 +1 @@
-<%= render current_component.new(name: "", address: address) %>
+<%= render current_component.new(form_field_name: "", addressable:) %>

admin/spec/components/solidus_admin/ui/forms/address/component_spec.rb

@@ -6,4 +6,17 @@
   it "renders the overview preview" do
     render_preview(:overview)
   end
+
+  context "with include_name_field: false" do
+    it "does not render name field" do
+      component = described_class.new(
+        form_field_name: "",
+        addressable: Spree::Address.new(country: Spree::Country.find_or_initialize_by(iso: "US")),
+        include_name_field: false
+      )
+
+      render_inline(component)
+      expect(page).not_to have_content("Name")
+    end
+  end
 end