[wip] Add orders/show/shipment component

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

@@ -12,6 +12,12 @@
     <%= page_with_sidebar_main do %>
       <%= render component("orders/cart").new(order: @order) %>
       <%= render component("orders/show/summary").new(order: @order) %>
+
+      <%= render component('ui/panel').new(title: t('.shipments')) do %>
+        <% @order.shipments.each do |shipment| %>
+          <%= render component("orders/show/shipment").new(shipment: @shipment) %>
+        <% end %>
+      <% end %>
     <% end %>
 
     <%= page_with_sidebar_aside do %>

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

@@ -9,6 +9,7 @@ en:
   order_email: Order contact email
   back: Back to orders
   same_as_shipping: Same as shipping address
+  shipments: Shipments
 
   edit_email: "Edit order email"
   add_email: "Add order email"

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

@@ -0,0 +1,87 @@
+<div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
+  <div class="rounded p-2">
+    <%= render component('ui/panel').new(title: @shipment.number) do |panel| %>
+      <% panel.with_section(wide: true, high: true) do %>
+        <div class="rounded-b-lg overflow-hidden">
+          <table class="table-auto w-full">
+            <thead>
+              <tr>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16 whitespace-nowrap">Total Price</th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <%
+                shipment_manifest = Spree::ShippingManifest.new(
+                  inventory_units: @shipment.last.inventory_units.where(carton_id: nil),
+                ).items.sort_by { |item| item.line_item.created_at }
+              %>
+
+              <% shipment_manifest.each do |item| %>
+                <tr class="border-gray-100 border-t">
+                  <td class="px-6 py-4">
+                    <div class="flex gap-2 grow">
+                      <% variant = item.variant %>
+                      <%= render component("ui/thumbnail").new(
+                        src: (variant.images.first || variant.product.gallery.images.first)&.url(:small),
+                        alt: variant.name
+                      ) %>
+                      <div class="flex-col">
+                        <div class="leading-5 text-black body-small-bold"><%= variant.name %></div>
+                        <div class="leading-5 text-gray-500 body-small">
+                          SKU: <%= variant.sku %>
+                          <%= variant.options_text.presence&.prepend("- ") %>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <span class="text-gray-500 body-small whitespace-nowrap">
+                      <% item.states.each do |state, count| %>
+                        <%= count %> x <%= t(state, scope: '.inventory_states') %>
+                      <% end %>
+                    </span>
+                  </td>
+                  <td class="px-6 py-4">
+                    <span class="text-gray-500 body-small"><%= item.line_item.display_amount %></span>
+                  </td>
+                  <td class="px-6 py-4 text-right">
+                    <%= form_for(item.line_item, url: '#', method: :delete) do |f| %>
+                      <%= render component('ui/button').new(
+                        scheme: :ghost,
+                        size: :s,
+                        title: t("spree.delete"),
+                        icon: 'close-line',
+                        "data-controller": "confirm",
+                        "data-confirm-text-value": t("spree.are_you_sure"),
+                      ) %>
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+              <tr class="border-gray-100 border-t">
+                <td colspan="4" class="px-6 py-4">
+                  <%= form_for(@shipment, url: '#') do |f| %>
+                    <%= render component("ui/forms/field").select(
+                      f,
+                      :shipping_method,
+                      Spree::ShippingMethod.order(:name).pluck(:name, :id),
+                      class: "mb-4"
+                    ) %>
+
+                    <%= render component("ui/forms/field").text_field(
+                      f,
+                      :tracking
+                    ) %>
+                  <% end %>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['output']
+
+  typed(event) {
+    this.text = event.currentTarget.value
+    this.render()
+  }
+
+  render() {
+    this.outputTarget.innerText = this.text
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+en:
+  inventory_states:
+    backordered: Backordered
+    canceled: Canceled
+    on_hand: On hand
+    returned: Returned
+    shipped: Shipped

admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview.rb

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

admin/spec/components/previews/solidus_admin/orders/show/shipment/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(shipment: "shipment") %>
+</div>

admin/spec/components/solidus_admin/orders/show/shipment/component_spec.rb

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