[Admin] Add order/show/summary component

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

@@ -11,6 +11,7 @@
   <%= 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 %>

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

@@ -0,0 +1,14 @@
+<div class="<%= stimulus_id %> w-full">
+  <%= render component('ui/panel').new(title: t('.summary')) do %>
+    <%= render component('ui/details_list').new(
+      items: [
+        { label: t('.subtotal'), value: number_to_currency(@order.item_total), class: 'font-semibold' },
+        { label: t('.taxes'), value: number_to_currency(@order.additional_tax_total) },
+        { label: t('.shipping'), value: number_to_currency(@order.shipment_total) },
+        { label: link_to(t('.add_promo_code'), '#', class: "body-link"), value: number_to_currency(@order.promo_total) },
+        { label: link_to(t('.adjustments'), '#', class: "body-link"), value: number_to_currency(@order.adjustment_total) },
+        { label: t('.total'), value: number_to_currency(@order.total), class: 'font-semibold' }
+      ]
+    ) %>
+  <% end %>
+</div>

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

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

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

@@ -0,0 +1,8 @@
+en:
+  summary: Summary
+  subtotal: Subtotal
+  taxes: Taxes
+  shipping: Shipping
+  add_promo_code: Add Promo Code
+  adjustments: Adjustments
+  total: Total

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

@@ -0,0 +1,10 @@
+<div class="<%= stimulus_id %>">
+  <ul class="text-sm">
+    <% @items.each do |item| %>
+      <li class="flex justify-between py-2 <%= item[:class] %>">
+        <span><%= item[:label] %></span>
+        <span><%= item[:value] %></span>
+      </li>
+    <% end %>
+  </ul>
+</div>

admin/app/components/solidus_admin/ui/details_list/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::DetailsList::Component < SolidusAdmin::BaseComponent
+  def initialize(items:)
+    @items = items
+  end
+end

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# @component "orders/show/summary"
+class SolidusAdmin::Orders::Show::Summary::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    order = fake_order(item_total: 340, additional_tax_total: 10, shipment_total: 20, promo_total: 10, adjustment_total: 20)
+    render_with_template(locals: { order: order })
+  end
+
+  # @param item_total [Float]
+  # @param additional_tax_total [Float]
+  # @param shipment_total [Float]
+  # @param promo_total [Float]
+  # @param adjustment_total [Float]
+  def playground(item_total: 100, additional_tax_total: 10, shipment_total: 5, promo_total: 0, adjustment_total: 0)
+    fake_order = fake_order(
+      item_total: item_total,
+      additional_tax_total: additional_tax_total,
+      shipment_total: shipment_total,
+      promo_total: promo_total,
+      adjustment_total: adjustment_total
+    )
+
+    render current_component.new(order: fake_order)
+  end
+
+  private
+
+  def fake_order(item_total:, additional_tax_total:, shipment_total:, promo_total:, adjustment_total:)
+    order = Spree::Order.new
+
+    order.define_singleton_method(:item_total) { item_total }
+    order.define_singleton_method(:additional_tax_total) { additional_tax_total }
+    order.define_singleton_method(:shipment_total) { shipment_total }
+    order.define_singleton_method(:promo_total) { promo_total }
+    order.define_singleton_method(:adjustment_total) { adjustment_total }
+    order.define_singleton_method(:total) {
+      item_total.to_f + additional_tax_total.to_f + shipment_total.to_f - promo_total.to_f - adjustment_total.to_f
+    }
+
+    order
+  end
+end

admin/spec/components/previews/solidus_admin/orders/show/summary/component_preview/overview.html.erb

@@ -0,0 +1 @@
+<%= render current_component.new(order: order) %>

admin/spec/components/previews/solidus_admin/ui/details_list/component_preview.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# @component "ui/details_list"
+class SolidusAdmin::UI::DetailsList::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param items select { choices: [[Order details, './data/example1.json'], [Product details, './data/example2.json'], [Account details, './data/example3.json']] }
+  def playground(items: './data/example1.json')
+    parsed_items = JSON.parse(
+      File.read(File.join(__dir__, items)),
+      symbolize_names: true
+    )
+
+    render current_component.new(items: parsed_items)
+  end
+end

admin/spec/components/previews/solidus_admin/ui/details_list/component_preview/overview.html.erb

@@ -0,0 +1,10 @@
+<%= render current_component.new(
+  items: [
+    { label: 'Subtotal', value: '€90.00', class: 'font-semibold' },
+    { label: 'Taxes', value: '€0.00' },
+    { label: 'Shipping', value: '€0.00' },
+    { label: link_to('Add promo code', '#', class: "body-link"), value: '€0.00' },
+    { label: link_to('Adjustments', '#', class: "body-link"), value: '€0.00' },
+    { label: 'Total', value: '€90.00', class: 'font-semibold' }
+  ]
+) %>

admin/spec/components/previews/solidus_admin/ui/details_list/data/example1.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Subtotal", "value": "€120.00", "class": "font-semibold" },
+  { "label": "Discount", "value": "€20.00", "class": "text-red-500" },
+  { "label": "Shipping", "value": "€5.00" },
+  { "label": "Total", "value": "€105.00", "class": "font-bold" }
+]

admin/spec/components/previews/solidus_admin/ui/details_list/data/example2.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Weight", "value": "2kg" },
+  { "label": "Dimensions", "value": "10x20x30 cm" },
+  { "label": "Color", "value": "Red", "class": "text-red-500" },
+  { "label": "Material", "value": "Aluminum" }
+]

admin/spec/components/previews/solidus_admin/ui/details_list/data/example3.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Name", "value": "John Doe" },
+  { "label": "Membership", "value": "Gold", "class": "font-semibold" },
+  { "label": "Points", "value": "1500" },
+  { "label": "Account Status", "value": "Deactivated", "class": "text-red-500" }
+]

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::Orders::Show::Summary::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end

admin/spec/components/solidus_admin/ui/details_list/component_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::DetailsList::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end