Add Custom Turbo Confirm Modal (#580)

* Add turbo confirm dialog

* Add default fallback check

* Fix locale typo and swap element type

* Replaced locale folder and removed static strings from Turbo.setConfirmMethod

* Normalize shared/en.yml

app/javascript/controllers/application.js

@@ -6,4 +6,34 @@ const application = Application.start()
 application.debug = false
 window.Stimulus   = application
 
+Turbo.setConfirmMethod((message) => {
+  const dialog = document.getElementById("turbo-confirm");
+
+  try {
+    const { title, body, accept } = JSON.parse(message);
+
+    if (title) {
+      document.getElementById("turbo-confirm-title").innerHTML = title;
+    }
+
+    if (body) {
+      document.getElementById("turbo-confirm-body").innerHTML = body;
+    }
+
+    if (accept) {
+      document.getElementById("turbo-confirm-accept").innerHTML = accept;
+    }
+  } catch (e) {
+    document.getElementById("turbo-confirm-title").innerText = message;
+  }
+
+  dialog.showModal();
+
+  return new Promise((resolve) => {
+    dialog.addEventListener("close", () => {
+        resolve(dialog.returnValue == "confirm")
+    }, { once: true })
+  })
+})
+
 export { application }

app/views/accounts/_account_valuation_list.html.erb

@@ -33,7 +33,7 @@
             <%= lucide_icon("pencil-line", class: "w-5 h-5 text-gray-500 shrink-0") %>
             <span class="text-gray-900 text-sm">Edit entry</span>
           <% end %>
-          <%= link_to valuation_path(valuation.original),  data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }, class: "text-red-600 flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
+          <%= link_to valuation_path(valuation.original),  data: { turbo_method: :delete, turbo_confirm: { title: t('custom_turbo_confirm.history.title'), body: t('custom_turbo_confirm.history.body_html'), accept: t('custom_turbo_confirm.history.accept') } }, class: "text-red-600 flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
             <%= lucide_icon("trash-2", class: "w-5 h-5 shrink-0") %>
             <span class="text-sm">Delete entry</span>
           <% end %>

app/views/layouts/application.html.erb

@@ -79,5 +79,7 @@
       </main>
     </div>
     <%= turbo_frame_tag "modal" %>
+
+    <%= render 'shared/custom_confirm_modal' %>
   </body>
 </html>

app/views/shared/_custom_confirm_modal.html.erb

@@ -0,0 +1,16 @@
+<dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl">
+  <form method="dialog" class="p-4">
+    <div class="flex flex-col mb-4">
+      <div class="flex justify-between mb-2 gap-4">
+        <h3 id="turbo-confirm-title" class="font-medium text-md"><%= t('custom_turbo_confirm.default.title') %></h3>
+        <button value="cancel">
+          <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-gray-500") %>
+        </button>
+      </div>
+      <div id="turbo-confirm-body" class="text-gray-500 text-sm">
+        <%= t('custom_turbo_confirm.default.body_html') %>
+      </div>
+    </div>
+    <button id="turbo-confirm-accept" class="w-full text-red-600 rounded-xl text-center p-[10px] border" value="confirm"><%= t('custom_turbo_confirm.default.accept') %></button>
+  </form>
+</dialog>

config/locales/views/shared/en.yml

@@ -0,0 +1,14 @@
+---
+en:
+  custom_turbo_confirm:
+    default:
+      accept: Confirm
+      body_html: "<p>You will not be able to undo this decision</p>"
+      title: Are you sure?
+    history:
+      accept: Delete entry
+      body_html: "<p>Deleting this entry will remove it from the account’s history
+        which will impact different parts of your account. This includes the net worth
+        and account graphs.</p></br><p>The only way you’ll be able to add this entry
+        back is by re-entering it manually via a new entry</p>"
+      title: Delete Entry?