elia/admin/customer-picker: [wip]

admin/app/components/solidus_admin/orders/customer/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/customer/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/customer/component.rb

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

admin/app/components/solidus_admin/orders/customer/component.yml

@@ -0,0 +1,4 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  placeholder: "Search customer"

admin/app/components/solidus_admin/orders/customer/result/component.html.erb

@@ -0,0 +1,19 @@
+<%= 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",
+        ) %>
+        <div  class="flex-col">
+          <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/customer/result/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Customer::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)&.name if customer
+  end
+end

admin/app/components/solidus_admin/orders/customer/result/component.yml

@@ -0,0 +1,2 @@
+en:
+  add: Create a new customer

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/customer/result').with_collection(@users, order: @order), layout: false }
+      end
+    end
+
     private
 
     def load_order

admin/config/locales/orders.en.yml

@@ -4,3 +4,4 @@ en:
       title: "Orders"
       update:
         success: "Order was updated successfully"
+        error: "Order could not be updated"

admin/config/routes.rb

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

admin/spec/components/previews/solidus_admin/orders/customer/component_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# @component "orders/customer"
+class SolidusAdmin::Orders::Customer::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param order text
+  def playground(order: "order")
+    render component("orders/customer").new(order: order)
+  end
+end

admin/spec/components/previews/solidus_admin/orders/customer/component_preview/overview.html.erb

@@ -0,0 +1,7 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Scenario 1
+  </h6>
+
+  <%= render current_component.new(order: "order") %>
+</div>

admin/spec/components/solidus_admin/orders/customer/component_spec.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::Orders::Customer::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+
+  # it "renders something useful" do
+  #   render_inline(described_class.new(order: "order"))
+  #
+  #   expect(page).to have_text "Hello, components!"
+  #   expect(page).to have_css '.value'
+  # end
+end

admin/spec/components/solidus_admin/orders/customer/new/component_spec.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::Orders::Customer::New::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+
+  # it "renders something useful" do
+  #   render_inline(described_class.new(order: "order"))
+  #
+  #   expect(page).to have_text "Hello, components!"
+  #   expect(page).to have_css '.value'
+  # end
+end