[Admin] Handle states_required? in admin address component

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

@@ -21,15 +21,33 @@
       "data-action": "change->#{stimulus_id}#loadStates"
     ) %>
 
-    <%= render component("ui/forms/field").select(
-      @name,
-      :state_id,
-      state_options,
-      object: @address,
-      value: @address.try(:state_id),
-      disabled: @address.country&.states&.empty?,
-      "data-#{stimulus_id}-target": "state"
-    ) %>
+    <%= 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")
+        ) do %>
+      <%= render component("ui/forms/field").text_field(
+        @name,
+        :state_name,
+        object: @address,
+        value: @address.try(:state_name),
+        "data-#{stimulus_id}-target": "stateName"
+      ) %>
+    <% end %>
+    <input autocomplete="off" type="hidden" name=<%= "#{@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")
+        ) do %>
+      <%= render component("ui/forms/field").select(
+        @name,
+        :state_id,
+        state_options,
+        object: @address,
+        value: @address.try(:state_id),
+        "data-#{stimulus_id}-target": "state"
+      ) %>
+    <% end %>
 
     <%= render component("ui/forms/field").text_field(@name, :phone,  object: @address) %>
   </div>

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

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["country", "state"]
+  static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
 
   loadStates() {
     const countryId = this.countryTarget.value
@@ -13,22 +13,47 @@ export default class extends Controller {
       })
   }
 
-  updateStateOptions(data) {
+  updateStateOptions(states) {
+    if (states.length === 0) {
+      // Show state name text input if no states to choose from.
+      this.toggleStateFields(false)
+    } else {
+      // Show state select dropdown.
+      this.toggleStateFields(true)
+      this.populateStateSelect(states)
+    }
+  }
+
+  toggleStateFields(showSelect) {
+    const stateWrapper = this.stateWrapperTarget
+    const stateNameWrapper = this.stateNameWrapperTarget
     const stateSelect = this.stateTarget
+    const stateName = this.stateNameTarget
 
-    stateSelect.innerHTML = ""
 
-    if (data.length === 0) {
-      stateSelect.disabled = true
-    } else {
+    if (showSelect) {
+      // Show state select dropdown.
       stateSelect.disabled = false
-
-      data.forEach((state) => {
-        const option = document.createElement("option")
-        option.value = state.id
-        option.innerText = state.name
-        stateSelect.appendChild(option)
-      })
+      stateName.value = ""
+      stateWrapper.classList.remove('hidden')
+      stateNameWrapper.classList.add('hidden')
+    } else {
+      // Show state name text input if no states to choose from.
+      stateSelect.disabled = true
+      stateWrapper.classList.add("hidden")
+      stateNameWrapper.classList.remove("hidden")
     }
   }
+
+  populateStateSelect(states) {
+    const stateSelect = this.stateTarget
+    stateSelect.innerHTML = ""
+
+    states.forEach((state) => {
+      const option = document.createElement("option")
+      option.value = state.id
+      option.innerText = state.name
+      stateSelect.appendChild(option)
+    })
+  }
 }