solidus_admin 0.0.2 → 0.1.0

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

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+import { useDebounce } from "stimulus-use"
+
+export default class extends Controller {
+  static values = { productsUrl: String }
+  static debounces = [{ name: "submitLineItems", wait: 500 }]
+
+  connect() {
+    useDebounce(this)
+    this.lineItemsToBeSubmitted = []
+  }
+
+  async search({ detail: { query, controller } }) {
+    controller.resultsValue = await (
+      await fetch(`${this.productsUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)
+    ).text()
+  }
+
+  updateLineItem(event) {
+    if (!this.lineItemsToBeSubmitted.includes(event.currentTarget)) {
+      this.lineItemsToBeSubmitted.push(event.currentTarget)
+    }
+
+    this.submitLineItems()
+  }
+
+  // This is a workaround to permit using debounce when needing to pass a parameter
+  submitLineItems() {
+    this.lineItemsToBeSubmitted.forEach((lineItem) => lineItem.form.requestSubmit())
+    this.lineItemsToBeSubmitted = []
+  }
+
+  selectResult(event) {
+    const form = event.detail.resultTarget.querySelector("form")
+    form.submit()
+  }
+}

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

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

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.html.erb

@@ -1,31 +1,35 @@
-<div class="<%= stimulus_id %> px-4">
-  <header class="py-6 flex items-center">
-    <h1 class="body-title">
-      <%= title %>
-    </h1>
-
-    <div class="ml-auto flex gap-2 items-center">
-      <%= render component("feedback").new %>
+<%= page do %>
+  <%= page_header do %>
+    <%= page_header_title title %>
+    <%= page_header_actions do %>
       <%= render component("ui/button").new(
         tag: :a,
         text: t('.create_order'),
         href: spree.new_admin_order_path,
         icon: "add-line",
       ) %>
-    </div>
-  </header>
+    <% end %>
+  <% end %>
 
   <%= render component('ui/table').new(
-    id: 'orders-list',
-    model_class: Spree::Order,
-    rows: @page.records,
-    fade_row_proc: fade_row_proc,
-    search_key: SolidusAdmin::Config[:order_search_key],
-    search_url: solidus_admin.orders_path,
-    batch_actions: batch_actions,
-    filters: filters,
-    columns: columns,
-    prev_page_link: prev_page_link,
-    next_page_link: next_page_link,
+    id: stimulus_id,
+    data: {
+      class: Spree::Order,
+      rows: @page.records,
+      fade: row_fade,
+      url: ->(order) { spree.edit_admin_order_path(order) },
+      batch_actions: batch_actions,
+      columns: columns,
+      prev: prev_page_path,
+      next: next_page_path,
+    },
+    search: {
+      name: :q,
+      value: params[:q],
+      searchbar_key: :number_or_shipments_number_or_bill_address_name_or_email_cont,
+      url: solidus_admin.orders_path(scope: params[:scope]),
+      scopes: scopes,
+      filters: filters,
+    },
   ) %>
-</div>
+<% end %>

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

@@ -1,34 +1,84 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
   def initialize(page:)
     @page = page
   end
 
-  class_attribute :fade_row_proc, default: ->(order) { order.paid? && order.shipped? }
+  class_attribute :row_fade, default: ->(order) { order.paid? && order.shipped? }
 
   def title
     Spree::Order.model_name.human.pluralize
   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 prev_page_path
+    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
   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 next_page_path
+    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
   end
 
   def batch_actions
     []
   end
 
+  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 +86,7 @@ class SolidusAdmin::Orders::Index::Component < SolidusAdmin::BaseComponent
   def columns
     [
       number_column,
+      state_column,
       date_column,
       customer_column,
       total_column,
@@ -49,17 +100,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.call(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 +135,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 +166,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 +175,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,5 +1,3 @@
-# Add your component translations here.
-# Use the translation in the example in your template with `t(".hello")`.
 en:
   create_order: 'Create Order'
   columns:
@@ -7,7 +5,16 @@ en:
       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