Merge pull request solidusio#5499 from solidusio/elia/admin/orders-cu…

…stomer-sidebar

[admin] Add the customer sidebar to the orders page

admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb

@@ -3,6 +3,17 @@
 @tailwind utilities;
 
 @layer base {
+  summary {
+    &::marker,
+    &::-webkit-details-marker {
+      @apply hidden;
+    }
+
+    list-style: none;
+  }
+}
+
+@layer components {
   .body-tiny {
     @apply font-sans font-normal text-xs;
   }

admin/app/components/solidus_admin/layout/page_helpers.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module SolidusAdmin::Layout::PageHelpers
-  def page(&block)
-    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id)
+  def page(**attrs, &block)
+    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id, **attrs)
   end
 
   def page_header_actions(&block)

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

@@ -1,4 +1,4 @@
-<%= page do %>
+<%= page("data-action": "turbo:before-cache@window->#{stimulus_id}#closeMenus") do %>
   <%= page_header do %>
     <%= page_header_back(solidus_admin.orders_path) %>
     <%= page_header_title(t('.title', number: @order.number)) %>
@@ -8,5 +8,68 @@
     <% end %>
   <% end %>
 
-  <%= render component('orders/cart').new(order: @order) %>
+  <%= page_with_sidebar do %>
+    <%= page_with_sidebar_main do %>
+      <%= render component("orders/cart").new(order: @order) %>
+    <% end %>
+
+    <%= page_with_sidebar_aside do %>
+      <%= render component('ui/panel').new(title: panel_title_with_more_links(t(".customer"), [
+        link_to(t(".edit_email"), "#", class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
+        link_to(t(".edit_shipping"), "#", class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
+        link_to(t(".edit_billing"), "#", class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
+        link_to(t(".remove_customer"), "#", 'data-turbo-method': :delete, class: "p-2 hover:bg-gray-25 rounded-sm text-red-500"),
+      ])) do %>
+        <div class="flex flex-col -m-6 p-6 gap-6 border-t border-gray-100 mt-0">
+          <%# CUSTOMER %>
+          <% if @order.user %>
+            <div class="flex flex-col gap-2">
+              <div class="body-small-bold"><%= 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.count) %></div>
+            </div>
+          <% end %>
+
+          <%# EMAIL %>
+          <% if @order.email %>
+            <div class="flex flex-col gap-2">
+              <span class="body-small-bold"><%= t('.order_email') %></span>
+              <div class="body-small"><%= @order.email %></div>
+            </div>
+          <% end %>
+
+          <%# SHIPPING %>
+          <div class="flex flex-col gap-2">
+            <span class="body-small-bold"><%= @order.class.human_attribute_name(:ship_address) %></span>
+            <div class="body-small">
+              <% if @order.ship_address %>
+                <%= format_address @order.ship_address %>
+              <% else %>
+                <span class="italic text-gray-500"><%= t('.no_shipping_address') %></span>
+              <% end %>
+            </div>
+          </div>
+
+          <%# BILLING %>
+          <div class="flex flex-col gap-2">
+            <span class="body-small-bold"><%= @order.class.human_attribute_name(:bill_address) %></span>
+            <div class="body-small">
+              <% if @order.bill_address %>
+                <% if @order.bill_address == @order.ship_address %>
+                  <span class="text-gray-500"><%= t('.same_as_shipping') %></span>
+                <% else %>
+                  <%= format_address @order.bill_address %>
+                <% end %>
+              <% else %>
+                <span class="italic text-gray-500"><%= t('.no_billing_address') %></span>
+              <% end %>
+            </div>
+          </div>
+
+        </div>
+
+      <% end %>
+
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -1,5 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-
+  closeMenus() {
+    this.event.querySelectorAll('details').forEach(details => details.removeAttribute('open'));
+  }
 }

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

@@ -10,4 +10,52 @@ def initialize(order:)
   def form_id
     @form_id ||= "#{stimulus_id}--form-#{@order.id}"
   end
+
+  def format_address(address)
+    return unless address
+    safe_join([
+      address.name,
+      tag.br,
+      address.address1,
+      tag.br,
+      address.address2,
+      address.city,
+      address.zipcode,
+      address.state.name,
+      tag.br,
+      address.country.name,
+      tag.br,
+      address.phone,
+    ], " ")
+  end
+
+  def panel_title_with_more_links(title, links)
+    tag.details(
+      tag.summary(
+        tag.div(
+          safe_join([
+            title,
+            component("ui/button").new(
+              icon: "more-line",
+              scheme: :ghost,
+              tag: :div,
+              alt: t("spree.edit"),
+              class: "cursor-pointer"
+            ).render_in(self),
+          ]),
+          class: 'flex items-center justify-between text-black',
+        )
+      ) + tag.div(safe_join(links, " "), class: "body-small absolute border border-gray-100 mt-0.5 right-0 flex min-w-[10rem] flex-col p-2 rounded-sm shadow-lg bg-white z-10"),
+      class: 'relative',
+    )
+  end
+
+  def customer_name(user)
+    (
+      user.default_user_bill_address ||
+      user.default_user_ship_address ||
+      user.user_addresses.where(default: true).first ||
+      user.user_addresses.first
+    )&.address&.name
+  end
 end

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

@@ -4,3 +4,18 @@ en:
   save: Save
   discard: Discard
   title: "Order %{number}"
+  customer: Customer
+  no_name: No name available
+  order_email: Order contact email
+  no_billing_address: No billing address
+  no_shipping_address: No shipping address
+  same_as_shipping: Same as shipping address
+
+  edit_email: "Edit order email"
+  edit_shipping: "Edit shipping address"
+  edit_billing: "Edit billing address"
+  remove_customer: "Remove customer"
+
+  orders_count:
+    one: "%{count} order"
+    other: "%{count} orders"

admin/app/components/solidus_admin/sidebar/account_nav/component.html.erb

@@ -6,8 +6,6 @@
       body-small-bold text-gray-500
       hover:bg-gray-25 [[open]_>_&]:bg-gray-25
       cursor-pointer
-      [&::marker]:hidden
-      [&::-webkit-details-marker]:hidden
     ">
     <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] body-small fill-yellow bg-black") %>
     <span class="overflow-hidden whitespace-nowrap text-ellipsis">

admin/app/components/solidus_admin/ui/modal/component.html.erb

@@ -6,7 +6,7 @@
     **@attributes
   ) %>
 >
-  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-gray-100/30 backdrop-blur-sm overflow-y-auto"></a>
+  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto"></a>
   <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
     <div class="pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
 

admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb

@@ -12,8 +12,6 @@
       text-sm font-medium text-gray-700
       hover:bg-gray-50
       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
-      [&::marker]:hidden
-      [&::-webkit-details-marker]:hidden
       cursor-default
     " data-<%= stimulus_id %>-target="summary">
       <%= @presentation %>

admin/app/controllers/solidus_admin/line_items_controller.rb

@@ -8,7 +8,7 @@ def destroy
 
       @line_item.destroy!
 
-      redirect_to cart_order_path(@order), status: :see_other, notice: t('.success')
+      redirect_to order_path(@order), status: :see_other, notice: t('.success')
     end
 
     def create
@@ -17,7 +17,7 @@ def create
       @variant = Spree::Variant.find(variant_id)
       @line_item = @order.contents.add(@variant)
 
-      redirect_to cart_order_path(@order), status: :see_other, notice: t('.success')
+      redirect_to order_path(@order), status: :see_other, notice: t('.success')
     end
 
     def update
@@ -28,7 +28,7 @@ def update
 
       @line_item = @order.contents.add(@line_item.variant, desired_quantity - @line_item.quantity)
 
-      redirect_to cart_order_path(@order), status: :see_other, notice: t('.success')
+      redirect_to order_path(@order), status: :see_other, notice: t('.success')
     end
 
     private

admin/app/controllers/solidus_admin/orders_controller.rb

@@ -26,6 +26,10 @@ def show
       end
     end
 
+    def edit
+      redirect_to action: :show
+    end
+
     def variants_for
       load_order
 

admin/config/routes.rb

@@ -18,11 +18,10 @@
     get 'states', to: 'countries#states'
   end
 
-  resources :orders, only: [:index] do
+  resources :orders, only: [:index, :show, :edit] do
     resources :line_items, only: [:destroy, :create, :update]
 
     member do
-      get :cart, to: "orders#show"
       get :variants_for
     end
   end

admin/spec/features/order_spec.rb

@@ -11,7 +11,8 @@
       create(:product, name: "Just another product", slug: 'just-another-prod', price: 29.99)
       create(:order, number: "R123456789", total: 19.99, state: "cart")
 
-      visit "/admin/orders/R123456789/cart"
+      visit "/admin/orders/R123456789/edit"
+      expect(page).to have_current_path("/admin/orders/R123456789")
 
       expect(page).to have_content("Order R123456789")
 

core/config/locales/en.yml

@@ -104,6 +104,7 @@ en:
         additional_tax_total: Tax
         approved_at: Approved at
         approver_id: Approver
+        bill_address: Billing Address
         canceled_at: Canceled at
         canceler_id: Canceler
         checkout_complete: Checkout Complete
@@ -117,6 +118,7 @@ en:
         item_total: Item Total
         number: Number
         payment_state: Payment State
+        ship_address: Shipping Address
         shipment_state: Shipment State
         shipment_total: Ship Total
         special_instructions: Special Instructions