From 7fa77b4fd7ecf9b51f16f335ee7c67dd7f2b0282 Mon Sep 17 00:00:00 2001
From: Cristiano Crolla <36827816+crolla97@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:33:49 +0000
Subject: [PATCH] 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     | 30 +++++++++++++++++++
 .../accounts/_account_valuation_list.html.erb |  2 +-
 app/views/layouts/application.html.erb        |  2 ++
 .../shared/_custom_confirm_modal.html.erb     | 16 ++++++++++
 config/locales/views/shared/en.yml            | 14 +++++++++
 5 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 app/views/shared/_custom_confirm_modal.html.erb
 create mode 100644 config/locales/views/shared/en.yml

diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
index 1213e85c..9ab9e865 100644
--- a/app/javascript/controllers/application.js
+++ b/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 }
diff --git a/app/views/accounts/_account_valuation_list.html.erb b/app/views/accounts/_account_valuation_list.html.erb
index 78f621d4..42070e0a 100644
--- a/app/views/accounts/_account_valuation_list.html.erb
+++ b/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 %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 16bc6069..a98b5403 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -79,5 +79,7 @@
       </main>
     </div>
     <%= turbo_frame_tag "modal" %>
+
+    <%= render 'shared/custom_confirm_modal' %>
   </body>
 </html>
diff --git a/app/views/shared/_custom_confirm_modal.html.erb b/app/views/shared/_custom_confirm_modal.html.erb
new file mode 100644
index 00000000..b18f5bb6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/config/locales/views/shared/en.yml b/config/locales/views/shared/en.yml
new file mode 100644
index 00000000..2c522eac
--- /dev/null
+++ b/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?