From 7b0888fbad970b948177d88c062ab319e69b2639 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Tue, 21 Nov 2023 19:15:18 +0100
Subject: [PATCH] [wip] Add `orders/show/shipment` component

---
 .../orders/show/component.html.erb            |  6 ++
 .../solidus_admin/orders/show/component.yml   |  1 +
 .../orders/show/shipment/component.html.erb   | 87 +++++++++++++++++++
 .../orders/show/shipment/component.js         | 14 +++
 .../orders/show/shipment/component.rb         |  7 ++
 .../orders/show/shipment/component.yml        |  7 ++
 .../orders/show/shipment/component_preview.rb | 15 ++++
 .../component_preview/overview.html.erb       |  7 ++
 .../orders/show/shipment/component_spec.rb    | 16 ++++
 9 files changed, 160 insertions(+)
 create mode 100644 admin/app/components/solidus_admin/orders/show/shipment/component.html.erb
 create mode 100644 admin/app/components/solidus_admin/orders/show/shipment/component.js
 create mode 100644 admin/app/components/solidus_admin/orders/show/shipment/component.rb
 create mode 100644 admin/app/components/solidus_admin/orders/show/shipment/component.yml
 create mode 100644 admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview/overview.html.erb
 create mode 100644 admin/spec/components/solidus_admin/orders/show/shipment/component_spec.rb

diff --git a/admin/app/components/solidus_admin/orders/show/component.html.erb b/admin/app/components/solidus_admin/orders/show/component.html.erb
index f2e8cbbee8b..844bb9ed130 100644
--- a/admin/app/components/solidus_admin/orders/show/component.html.erb
+++ b/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 %>
diff --git a/admin/app/components/solidus_admin/orders/show/component.yml b/admin/app/components/solidus_admin/orders/show/component.yml
index 497a0186ab2..5398a69640f 100644
--- a/admin/app/components/solidus_admin/orders/show/component.yml
+++ b/admin/app/components/solidus_admin/orders/show/component.yml
@@ -7,6 +7,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"
diff --git a/admin/app/components/solidus_admin/orders/show/shipment/component.html.erb b/admin/app/components/solidus_admin/orders/show/shipment/component.html.erb
new file mode 100644
index 00000000000..677b84cb05e
--- /dev/null
+++ b/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>
diff --git a/admin/app/components/solidus_admin/orders/show/shipment/component.js b/admin/app/components/solidus_admin/orders/show/shipment/component.js
new file mode 100644
index 00000000000..b6e2b996c67
--- /dev/null
+++ b/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
+  }
+}
diff --git a/admin/app/components/solidus_admin/orders/show/shipment/component.rb b/admin/app/components/solidus_admin/orders/show/shipment/component.rb
new file mode 100644
index 00000000000..cc112d90029
--- /dev/null
+++ b/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
diff --git a/admin/app/components/solidus_admin/orders/show/shipment/component.yml b/admin/app/components/solidus_admin/orders/show/shipment/component.yml
new file mode 100644
index 00000000000..512112038cd
--- /dev/null
+++ b/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
diff --git a/admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview.rb b/admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview.rb
new file mode 100644
index 00000000000..9d20ed1a224
--- /dev/null
+++ b/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
diff --git a/admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/orders/show/shipment/component_preview/overview.html.erb
new file mode 100644
index 00000000000..66873ba36a2
--- /dev/null
+++ b/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>
diff --git a/admin/spec/components/solidus_admin/orders/show/shipment/component_spec.rb b/admin/spec/components/solidus_admin/orders/show/shipment/component_spec.rb
new file mode 100644
index 00000000000..0904be5da2d
--- /dev/null
+++ b/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