Add header with create component buttons

This commit introduces a new header within the `orders/new` component,
providing users with 'Save' and 'Discard' button options.
While the UI elements have been integrated, the functionalities for these
buttons remain to be implemented in subsequent iterations.

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

@@ -9,7 +9,7 @@
       <%= render component("ui/button").new(
         tag: :a,
         text: t('.create_order'),
-        href: spree.new_admin_order_path,
+        href: solidus_admin.new_order_path,
         icon: "add-line",
       ) %>
     </div>

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

@@ -1,8 +1,20 @@
-<div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
-  <p>Add Orders::New HTML here</p>
-  <p> <%= @order %> </p>
-
-  <label>Your name: <input data-action="input->orders--new#typed"/></label>
-  <p>Hello <span data-orders--new-target="output"></span></p>
-  <%= t '.hello' %>
+<div class="px-4 relative" data-controller="<%= stimulus_id %>">
+  <header class="py-6 flex items-center gap-4">
+    <%= render component("ui/button").new(
+      tag: :a,
+      title: t(".back"),
+      icon: "arrow-left-line",
+      scheme: :secondary,
+      href: solidus_admin.orders_path
+    ) %>
+    <h1 class="flex items-center gap-2">
+      <span class="body-title"><%= t(".create_order") %></span>
+    </h1>
+
+    <div class="ml-auto flex gap-2 items-center">
+      <%= render component("feedback").new %>
+      <%= 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) %>
+    </div>
+  </header>
 </div>

admin/app/components/solidus_admin/orders/new/component.js

@@ -1,14 +1,5 @@
 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/new/component.rb

@@ -4,4 +4,8 @@ class SolidusAdmin::Orders::New::Component < SolidusAdmin::BaseComponent
   def initialize(order:)
     @order = order
   end
+
+  def form_id
+    @form_id ||= "#{stimulus_id}--form-#{@order.id}"
+  end
 end

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

@@ -1,4 +1,6 @@
 # Add your component translations here.
 # Use the translation in the example in your template with `t(".hello")`.
 en:
-  hello: "Hello world!"
+  create_order: Create Order
+  save: Save
+  discard: Discard

admin/spec/components/previews/solidus_admin/orders/new/component_preview.rb

@@ -5,11 +5,6 @@ class SolidusAdmin::Orders::New::ComponentPreview < ViewComponent::Preview
   include SolidusAdmin::Preview
 
   def overview
-    render_with_template
-  end
-
-  # @param order text
-  def playground(order: "order")
-    render component("orders/new").new(order: order)
+    render_with_template(locals: { order: Spree::Order.new })
   end
 end

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

@@ -1,7 +1,3 @@
 <div class="mb-8">
-  <h6 class="text-gray-500 mb-3 mt-0">
-    Scenario 1
-  </h6>
-
-  <%= render current_component.new(order: "order") %>
+  <%= render current_component.new(order: order) %>
 </div>