Add a customer picker for the order page

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

@@ -27,6 +27,8 @@
               <div class="body-small"><%= customer_name(@order.user) || tag.span(t('.no_name'), class: "text-gray-500") %></div>
               <div class="body-small body-link"><%= link_to @order.user.email, spree.admin_user_path(@order.user) %></div>
               <div class="body-small text-gray-500"><%= t(".orders_count", count: @order.user.orders.complete.count) %></div>
+            <% else %>
+              <%= render component('orders/show/customer_search').new(order: @order) %>
             <% end %>
           </div>
 

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

@@ -0,0 +1,14 @@
+<div
+  class="w-full relative overflow-visible"
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-customers-url-value="<%= solidus_admin.customers_for_order_path(@order) %>"
+  data-action="
+    <%= component('ui/forms/search').stimulus_id %>:search-><%= stimulus_id %>#search
+    <%= component('ui/forms/search').stimulus_id %>:submit-><%= stimulus_id %>#submit
+  "
+>
+  <%= render component("ui/forms/search").new(
+    placeholder: t(".placeholder"),
+    id: :order_customer
+  ) %>
+</div>

admin/app/components/solidus_admin/orders/show/customer_search/component.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { customersUrl: String }
+
+  async search({ detail: { query, controller } }) {
+    controller.resultsValue =
+      (await (await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)).text())
+  }
+
+  submit(event) {
+    event.detail.resultTarget.querySelector('form').submit()
+  }
+}

admin/app/components/solidus_admin/orders/show/customer_search/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::CustomerSearch::Component < SolidusAdmin::BaseComponent
+  def initialize(order:)
+    @order = order
+  end
+end

admin/app/components/solidus_admin/orders/show/customer_search/component.yml

@@ -0,0 +1,2 @@
+en:
+  placeholder: "Search customer"

admin/app/components/solidus_admin/orders/show/customer_search/result/component.html.erb

@@ -0,0 +1,17 @@
+<%= render component('ui/forms/search/result').new do %>
+  <% if @customer %>
+    <%= form_for(@order, url: solidus_admin.order_path(@order), html: {
+      "data-controller": "readonly-when-submitting",
+      class: "flex items-center",
+    }) do |f| %>
+      <%= hidden_field_tag("#{f.object_name}[user_id]", @customer.id) %>
+      <button type="submit" class="flex gap-2 grow items-center">
+        <%= render component("ui/icon").new(name: "user-line", class: 'w-5 h-5 m-2') %>
+        <div  class="flex-col text-left">
+          <div class="leading-5 text-black body-small-bold"><%= @name %></div>
+          <div class="leading-5 text-gray-500 body-small"><%= @customer.email %></div>
+        </div>
+      </button>
+    <% end %>
+  <% end %>
+<% end %>

admin/app/components/solidus_admin/orders/show/customer_search/result/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::CustomerSearch::Result::Component < SolidusAdmin::BaseComponent
+  with_collection_parameter :customer
+
+  def initialize(order:, customer:)
+    @order = order
+    @customer = customer
+    @name = (customer.default_user_bill_address || customer.default_user_ship_address)&.address&.name if customer
+  end
+end

admin/app/controllers/solidus_admin/orders_controller.rb

@@ -74,6 +74,22 @@ def variants_for
       end
     end
 
+    def customers_for
+      load_order
+
+      @users = Spree.user_class
+        .where.not(id: @order.user_id)
+        .order(created_at: :desc, id: :desc)
+        .ransack(params[:q])
+        .result(distinct: true)
+        .includes(:default_user_bill_address, :default_user_ship_address)
+        .limit(10)
+
+      respond_to do |format|
+        format.html { render component('orders/show/customer_search/result').with_collection(@users, order: @order), layout: false }
+      end
+    end
+
     private
 
     def load_order

admin/config/routes.rb

@@ -26,6 +26,7 @@
 
     member do
       get :variants_for
+      get :customers_for
     end
   end
 end