solidus_admin 0.0.2 → 0.2.0

data/app/components/solidus_admin/orders/cart/component.yml

@@ -0,0 +1,3 @@
+en:
+  title: "Cart"
+  search_placeholder: "Find a variant by name or SKU"

data/app/components/solidus_admin/orders/cart/result/component.html.erb

@@ -0,0 +1,26 @@
+<%= render component('ui/forms/search/result').new do %>
+  <%= form_for(@order.line_items.build(variant: @variant), url: solidus_admin.order_line_items_path(@order), method: :post, html: {
+    "data-controller": "readonly-when-submitting",
+    class: "flex items-center",
+  }) do |f| %>
+    <%= hidden_field_tag("#{f.object_name}[variant_id]", @variant.id) %>
+    <div class="flex gap-2 grow">
+      <%= render component("ui/thumbnail").new(
+        src: @image&.url(:small),
+        alt: @variant.name
+      ) %>
+      <div class="flex-col">
+        <div class="leading-5 text-black font-semibold text-sm"><%= @variant.name %></div>
+        <div class="leading-5 text-gray-500 font-normal text-sm">
+          SKU:
+          <%= @variant.sku %>
+          <%= @variant.options_text.presence&.prepend("- ") %>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-2 items-center">
+      <span class="text-gray-500 font-normal text-sm"><%= render component("products/stock").from_variant(@variant) %></span>
+      <span class="text-black font-normal text-sm"><%= @variant.display_price.to_html %></span>
+    </div>
+  <% end %>
+<% end %>

data/app/components/solidus_admin/orders/cart/result/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Cart::Result::Component < SolidusAdmin::BaseComponent
+  with_collection_parameter :variant
+
+  def initialize(order:, variant:)
+    @order = order
+    @variant = variant
+    @image = @variant.images.first || @variant.product.gallery.images.first
+  end
+end

data/app/components/solidus_admin/orders/index/component.rb

@@ -1,34 +1,89 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
-  def initialize(page:)
-    @page = page
+class SolidusAdmin::Orders::Index::Component < SolidusAdmin::UI::Pages::Index::Component
+  def model_class
+    Spree::Order
   end
 
-  class_attribute :fade_row_proc, default: ->(order) { order.paid? && order.shipped? }
+  def search_key
+    :number_or_shipments_number_or_bill_address_name_or_email_cont
+  end
+
+  def search_url
+    solidus_admin.orders_path(scope: params[:scope])
+  end
 
-  def title
-    Spree::Order.model_name.human.pluralize
+  def row_url(order)
+    spree.edit_admin_order_path(order)
   end
 
-  def prev_page_link
-    @page.first? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.number - 1)
+  def row_fade(order)
+    order.paid? && order.shipped?
   end
 
-  def next_page_link
-    @page.last? ? nil : solidus_admin.url_for(host: request.host, port: request.port, **request.params, page: @page.next_param)
+  def page_actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: spree.new_admin_order_path,
+      icon: "add-line",
+    )
   end
 
-  def batch_actions
-    []
+  def scopes
+    [
+      { label: t('.scopes.complete'), name: 'completed', default: true },
+      { label: t('.scopes.in_progress'), name: 'in_progress' },
+      { label: t('.scopes.returned'), name: 'returned' },
+      { label: t('.scopes.canceled'), name: 'canceled' },
+      { label: t('.scopes.all_orders'), name: 'all' },
+    ]
   end
 
   def filters
     [
       {
-        name: 'q[completed_at_not_null]',
-        value: 1,
-        label: t('.filters.only_show_complete_orders'),
+        presentation: t('.filters.status'),
+        combinator: 'or',
+        attribute: "state",
+        predicate: "eq",
+        options: Spree::Order.state_machines[:state].states.map do |state|
+          [
+            state.value.titleize,
+            state.value
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.shipment_state'),
+        combinator: 'or',
+        attribute: "shipment_state",
+        predicate: "eq",
+        options: %i[backorder canceled partial pending ready shipped].map do |option|
+          [
+            option.to_s.capitalize,
+            option
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.payment_state'),
+        combinator: 'or',
+        attribute: "payment_state",
+        predicate: "eq",
+        options: %i[balance_due checkout completed credit_owed invalid paid pending processing void].map do |option|
+          [
+            option.to_s.titleize,
+            option
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.promotions'),
+        combinator: 'or',
+        attribute: "promotions_id",
+        predicate: "in",
+        options: Spree::Promotion.all.pluck(:name, :id),
       },
     ]
   end
@@ -36,6 +91,7 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
   def columns
     [
       number_column,
+      state_column,
       date_column,
       customer_column,
       total_column,
@@ -49,17 +105,30 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
     {
       header: :order,
       data: ->(order) do
-        order_path = spree.edit_admin_order_path(order)
-
-        if !fade_row_proc.call(order)
-          link_to order.number, order_path, class: 'font-semibold'
+        if !row_fade(order)
+          content_tag :div, order.number, class: 'font-semibold'
         else
-          link_to order.number, order_path
+          content_tag :div, order.number
         end
       end
     }
   end
 
+  def state_column
+    {
+      header: :state,
+      data: ->(order) do
+        color = {
+          'complete' => :green,
+          'returned' => :red,
+          'canceled' => :blue,
+          'cart' => :graphite_light,
+        }[order.state] || :yellow
+        component('ui/badge').new(name: order.state.humanize, color: color)
+      end
+    }
+  end
+
   def date_column
     {
       header: :date,
@@ -71,7 +140,7 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
 
   def customer_column
     {
-      class_name: "w-[400px]",
+      col: { class: "w-[400px]" },
       header: :customer,
       data: ->(order) do
         customer_email = order.user&.email
@@ -102,7 +171,7 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
     {
       header: :payment,
       data: ->(order) do
-        component('ui/badge').new(name: order.payment_state&.humanize, color: order.paid? ? :green : :yellow)
+        component('ui/badge').new(name: order.payment_state.humanize, color: order.paid? ? :green : :yellow) if order.payment_state?
       end
     }
   end
@@ -111,7 +180,7 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
     {
       header: :shipment,
       data: ->(order) do
-        component('ui/badge').new(name: order.shipment_state&.humanize, color: order.shipped? ? :green : :yellow)
+        component('ui/badge').new(name: order.shipment_state.humanize, color: order.shipped? ? :green : :yellow) if order.shipment_state?
       end
     }
   end

data/app/components/solidus_admin/orders/index/component.yml

@@ -1,13 +1,19 @@
-# Add your component translations here.
-# Use the translation in the example in your template with `t(".hello")`.
 en:
-  create_order: 'Create Order'
   columns:
     items:
       one: 1 Item
       other: '%{count} Items'
   filters:
-    only_show_complete_orders: Only show complete orders
+    status: Status
+    shipment_state: Shipment State
+    payment_state: Payment State
+    promotions: Promotions
   date:
     formats:
       short: '%d %b %y'
+  scopes:
+    all_orders: All
+    canceled: Canceled
+    complete: Complete
+    returned: Returned
+    in_progress: In Progress

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

@@ -0,0 +1,67 @@
+<div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
+  <%= render component("orders/show").new(order: @order) %>
+
+  <%= render component("ui/modal").new(title: t(".title.#{@type}"), close_path: solidus_admin.order_path(@order)) do |modal| %>
+    <%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
+      <div class="w-full flex flex-col mb-4">
+        <div class="flex justify-between items-center mb-4 relative">
+          <h2 class="text-sm font-semibold">
+            <%= t(".subtitle.#{@type}") %>
+          </h2>
+
+          <% if @addresses.present? %>
+            <%= render component('ui/dropdown').new(
+              text: t(".select_address"),
+              "data-#{stimulus_id}-target": "addresses",
+              class: "max-h-[26rem] overflow-y-auto"
+            ) do %>
+              <% @addresses.each do |address| %>
+                <%= tag.a(
+                  format_address(address),
+                  href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
+                  'data-turbo-frame': address_frame_id,
+                  'data-action': "#{component('ui/dropdown').stimulus_id}#close",
+                ) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <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]") %>
+          <% end %>
+        </div>
+
+        <label class="flex gap-2 items-center">
+          <%= form.hidden_field use_attribute, value: '0', id: false %>
+
+          <%= render component("ui/forms/checkbox").new(
+            name: "#{form.object_name}[#{use_attribute}]",
+            checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
+            value: '1'
+          ) %>
+
+          <span class="font-normal text-xs">
+            <%= t(".use_this_address.#{@type}") %>
+          </span>
+        </label>
+      </div>
+    <% end %>
+
+    <% modal.with_actions do %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        scheme: :secondary,
+        text: t(".cancel"),
+        href: solidus_admin.order_path(@order)
+      ) %>
+
+      <%= render component("ui/button").new(
+        tag: :button,
+        text: t(".save"),
+        form: form_id
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/solidus_admin/orders/show/address/component.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["addresses"]
+
+  close() {
+    this.addressesTarget.removeAttribute('open')
+  }
+}

data/app/components/solidus_admin/orders/show/address/component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::Address::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
+  VALID_TYPES = ['ship', 'bill'].freeze
+
+  def initialize(order:, address:, user: nil, type: 'ship')
+    @order = order
+    @user = user
+    @address = address
+    @addresses = user&.addresses.to_a.reject(&:new_record?)
+    @type = validate_address_type(type)
+  end
+
+  def form_id
+    @form_id ||= "#{stimulus_id}--form-#{@type}-#{@order.id}"
+  end
+
+  def address_frame_id
+    @table_frame_id ||= "#{stimulus_id}--#{@type}-address-frame-#{@order.id}"
+  end
+
+  def use_attribute
+    case @type
+    when 'ship'
+      'use_shipping'
+    when 'bill'
+      'use_billing'
+    end
+  end
+
+  def format_address(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 validate_address_type(type)
+    VALID_TYPES.include?(type) ? type : raise(ArgumentError, "Invalid address type: #{type}")
+  end
+end

data/app/components/solidus_admin/orders/show/address/component.yml

@@ -0,0 +1,14 @@
+en:
+  save: Save
+  cancel: Cancel
+  back: Back
+  select_address: Select address
+  title:
+    ship: Edit Shipping Address
+    bill: Edit Billing Address
+  subtitle:
+    ship: Shipping Address
+    bill: Billing Address
+  use_this_address:
+    ship: Use this address also for Billing
+    bill: Use this address also for Shipping

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

@@ -0,0 +1,76 @@
+<%= 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)) %>
+    <%= page_header_actions do %>
+      <%= render component("ui/button").new(tag: :button, scheme: :secondary, text: t(".discard"), form: form_id) %>
+      <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
+    <% end %>
+  <% end %>
+
+  <%= page_with_sidebar do %>
+    <%= page_with_sidebar_main do %>
+      <%= render component("orders/cart").new(order: @order) %>
+      <%= render component("orders/show/summary").new(order: @order) %>
+    <% end %>
+
+    <%= page_with_sidebar_aside do %>
+      <%= render component('ui/panel').new do |panel| %>
+        <% panel.with_menu t(".edit_email"), solidus_admin.order_customer_path(@order) %>
+        <% panel.with_menu t(".edit_shipping"), solidus_admin.edit_order_ship_address_path(@order) %>
+        <% panel.with_menu t(".edit_billing"), solidus_admin.edit_order_bill_address_path(@order) %>
+        <% panel.with_menu t(".remove_customer"), solidus_admin.order_customer_path(@order), method: :delete, class: "text-red-500" if @order.user %>
+
+        <% panel.with_section(class: 'flex flex-col gap-6') do %>
+          <div class="flex flex-col gap-2">
+            <span class="font-semibold text-sm"><%= t(".customer") %></span>
+            <% if @order.user %>
+              <div class="font-normal text-sm"><%= customer_name(@order.user) || tag.span(t('.no_name'), class: "text-gray-500") %></div>
+              <div class="font-normal text-sm body-link"><%= link_to @order.user.email, spree.admin_user_path(@order.user) %></div>
+              <div class="font-normal text-sm 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>
+
+          <div class="flex flex-col gap-2">
+            <span class="font-semibold text-sm"><%= t('.order_email') %></span>
+            <div class="font-normal text-sm">
+              <% if @order.email? %>
+                <%= @order.email %>
+              <% else %>
+                <%= link_to(t(".add_email"), solidus_admin.order_customer_path(@order), class: "body-link") %>
+              <% end %>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <span class="font-semibold text-sm"><%= @order.class.human_attribute_name(:ship_address) %></span>
+            <div class="font-normal text-sm">
+              <% if @order.ship_address %>
+                <%= format_address @order.ship_address %>
+              <% else %>
+                <%= link_to t(".add_shipping"), solidus_admin.edit_order_ship_address_path(@order), class: 'body-link' %>
+              <% end %>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <span class="font-semibold text-sm"><%= @order.class.human_attribute_name(:bill_address) %></span>
+            <div class="font-normal text-sm">
+              <% if @order.bill_address.blank? %>
+                <%= link_to t(".add_billing"), solidus_admin.edit_order_bill_address_path(@order), class: 'body-link' %>
+              <% elsif @order.bill_address == @order.ship_address %>
+                <span class="text-gray-500"><%= t('.same_as_shipping') %></span>
+              <% else %>
+                <%= format_address @order.bill_address %>
+              <% end %>
+            </div>
+          </div>
+
+        <% end %>
+      <% end %>
+
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
+  def initialize(order:)
+    @order = order
+  end
+
+  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 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

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

@@ -0,0 +1,21 @@
+en:
+  save: Save
+  discard: Discard
+  title: "Order %{number}"
+  customer: Customer
+  no_name: No name available
+  order_email: Order contact email
+  back: Back to orders
+  same_as_shipping: Same as shipping address
+
+  edit_email: "Edit order email"
+  add_email: "Add order email"
+  edit_shipping: "Edit shipping address"
+  add_shipping: "Add shipping address"
+  edit_billing: "Edit billing address"
+  add_billing: "Add billing address"
+  remove_customer: "Remove customer"
+
+  orders_count:
+    one: "%{count} order"
+    other: "%{count} orders"

data/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>

data/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()
+  }
+}

data/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

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

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

data/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 font-semibold text-sm"><%= @name %></div>
+          <div class="leading-5 text-gray-500 font-normal text-sm"><%= @customer.email %></div>
+        </div>
+      </button>
+    <% end %>
+  <% end %>
+<% end %>

data/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

data/app/components/solidus_admin/orders/show/email/component.html.erb

@@ -0,0 +1,18 @@
+<div class="<%= stimulus_id %>">
+  <%= render component("orders/show").new(order: @order) %>
+  <%= render component("ui/modal").new(title: t(".title"), close_path: close_path) do |modal| %>
+    <%= form_for @order, url: close_path, html: { id: form_id} do |f| %>
+      <%= render component("ui/forms/field").text_field(f, :email) %>
+      <label class="font-normal text-sm mt-4 block">
+        <%= t('.guest_checkout') %>:
+        <output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
+        <%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
+      </label>
+    <% end %>
+
+    <% modal.with_actions do %>
+      <%= render component("ui/button").new(tag: :a, scheme: :secondary, href: close_path, type: :submit, text: t('.cancel')) %>
+      <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/solidus_admin/orders/show/email/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::Email::Component < SolidusAdmin::BaseComponent
+  def initialize(order:)
+    @order = order
+  end
+
+  def form_id
+    dom_id(@order, "#{stimulus_id}_email_form")
+  end
+
+  def close_path
+    @close_path ||= solidus_admin.order_path(@order)
+  end
+end

data/app/components/solidus_admin/orders/show/email/component.yml

@@ -0,0 +1,8 @@
+en:
+  title: "Edit order email"
+  submit: "Save"
+  cancel: "Cancel"
+  guest_checkout: "Guest checkout"
+  guest_checkout_tip: "An order without an associated user account is considered a guest checkout."
+  "yes": "Yes"
+  "no": "No"