From 478e633a55979b420080d8809d6c6f54dd7183c0 Mon Sep 17 00:00:00 2001
From: andrea longhi <andrea@spaghetticode.it>
Date: Tue, 5 Mar 2024 12:28:13 +0100
Subject: [PATCH] Revisit address modal to work with turbo frames

Just like we did a few comments before with the order email modal.
---
 .../orders/show/address/component.html.erb    | 110 +++++++++---------
 1 file changed, 56 insertions(+), 54 deletions(-)

diff --git a/admin/app/components/solidus_admin/orders/show/address/component.html.erb b/admin/app/components/solidus_admin/orders/show/address/component.html.erb
index 13059d4e6c0..b47c32a6548 100644
--- a/admin/app/components/solidus_admin/orders/show/address/component.html.erb
+++ b/admin/app/components/solidus_admin/orders/show/address/component.html.erb
@@ -1,67 +1,69 @@
 <div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
-  <%= render component("orders/show").new(order: @order) %>
-
-  <%= render component("ui/modal").new(title: t(".title.#{@type}"), close_path: solidus_admin.order_path(@order)) do |modal| %>
-    <%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
-      <div class="w-full flex flex-col mb-4">
-        <div class="flex justify-between items-center mb-4 relative">
-          <h2 class="text-sm font-semibold">
-            <%= t(".subtitle.#{@type}") %>
-          </h2>
+  <%= turbo_frame_tag "edit_order_#{params[:type]}_address_modal" do %>
+    <%= render component("ui/modal").new(title: t(".title.#{@type}")) do |modal| %>
+      <%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
+        <div class="w-full flex flex-col mb-4">
+          <div class="flex justify-between items-center mb-4 relative">
+            <h2 class="text-sm font-semibold">
+              <%= t(".subtitle.#{@type}") %>
+            </h2>
 
-          <% if @addresses.present? %>
-            <%= render component('ui/dropdown').new(
-              text: t(".select_address"),
-              "data-#{stimulus_id}-target": "addresses",
-              class: "max-h-[26rem] overflow-y-auto"
-            ) do %>
-              <% @addresses.each do |address| %>
-                <%= tag.a(
-                  format_address(address),
-                  href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
-                  'data-turbo-frame': address_frame_id,
-                  'data-action': "#{component('ui/dropdown').stimulus_id}#close",
-                ) %>
+            <% if @addresses.present? %>
+              <%= render component('ui/dropdown').new(
+                text: t(".select_address"),
+                "data-#{stimulus_id}-target": "addresses",
+                class: "max-h-[26rem] overflow-y-auto"
+              ) do %>
+                <% @addresses.each do |address| %>
+                  <%= tag.a(
+                    format_address(address),
+                    href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
+                    'data-turbo-frame': address_frame_id,
+                    'data-action': "#{component('ui/dropdown').stimulus_id}#close",
+                  ) %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
-        </div>
+          </div>
 
-        <div class="w-full flex gap-4">
-          <%= turbo_frame_tag address_frame_id do %>
-            <%= render component('ui/forms/address').new(address: @address, name: "order[#{@type}_address_attributes]") %>
-          <% end %>
-        </div>
+          <div class="w-full flex gap-4">
+            <%= turbo_frame_tag address_frame_id do %>
+              <%= render component('ui/forms/address').new(address: @address, name: "order[#{@type}_address_attributes]") %>
+            <% end %>
+          </div>
 
-        <label class="flex gap-2 items-center">
-          <%= form.hidden_field use_attribute, value: '0', id: false %>
+          <label class="flex gap-2 items-center">
+            <%= form.hidden_field use_attribute, value: '0', id: false %>
 
-          <%= render component("ui/forms/checkbox").new(
-            name: "#{form.object_name}[#{use_attribute}]",
-            checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
-            value: '1'
-          ) %>
+            <%= render component("ui/forms/checkbox").new(
+              name: "#{form.object_name}[#{use_attribute}]",
+              checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
+              value: '1'
+            ) %>
 
-          <span class="font-normal text-xs">
-            <%= t(".use_this_address.#{@type}") %>
-          </span>
-        </label>
-      </div>
-    <% end %>
+            <span class="font-normal text-xs">
+              <%= t(".use_this_address.#{@type}") %>
+            </span>
+          </label>
+        </div>
+      <% end %>
 
-    <% modal.with_actions do %>
-      <%= render component("ui/button").new(
-        tag: :a,
-        scheme: :secondary,
-        text: t(".cancel"),
-        href: solidus_admin.order_path(@order)
-      ) %>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(
+            scheme: :secondary,
+            text: t(".cancel"),
+          ) %>
+        </form>
 
-      <%= render component("ui/button").new(
-        tag: :button,
-        text: t(".save"),
-        form: form_id
-      ) %>
+        <%= render component("ui/button").new(
+          tag: :button,
+          text: t(".save"),
+          form: form_id
+        ) %>
+      <% end %>
     <% end %>
   <% end %>
+
+  <%= render component("orders/show").new(order: @order) %>
 </div>