[wip] Add order 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,30 @@
+<div class="<%= stimulus_id %> w-full relative overflow-visible" data-controller="<%= stimulus_id %>">
+  <%= render component('ui/panel').new(title: 'Summary') do %>
+    <div class="mx-auto">
+      <div class="text-sm py-2 flex justify-between font-semibold">
+        <span>Subtotal</span>
+        <span>€90.00</span>
+      </div>
+      <div class="text-sm py-2 flex justify-between">
+        <span>Taxes</span>
+        <span>€0.00</span>
+      </div>
+      <div class="text-sm py-2 flex justify-between">
+        <span>Shipping</span>
+        <span>€0.00</span>
+      </div>
+      <div class="text-sm py-2 flex justify-between">
+        <%= link_to('Add promo code', '#', class: "body-link") %>
+        <span>€0.00</span>
+      </div>
+      <div class="text-sm py-2 flex justify-between">
+        <%= link_to('Adjustments', '#', class: "body-link") %>
+        <span>€0.00</span>
+      </div>
+      <div class="text-sm py-2 flex justify-between font-semibold">
+        <span>Total</span>
+        <span>€90.00</span>
+      </div>
+    </div>
+  <% end %>
+</div>

admin/app/components/solidus_admin/orders/show/summary/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/summary/component.rb

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

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

@@ -0,0 +1,4 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  hello: "Hello world!"

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

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

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

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

@@ -0,0 +1,16 @@
+# 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
+
+  # it "renders something useful" do
+  #   render_inline(described_class.new(order: "order"))
+  #
+  #   expect(page).to have_text "Hello, components!"
+  #   expect(page).to have_css '.value'
+  # end
+end