From d64a9afece84105e96e591bb935726ff489bff6c Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Wed, 10 May 2023 17:21:48 +0100
Subject: [PATCH] Replace angular ofn-with-tip directive on capture/ship
 buttons

---
 app/views/admin/shared/_tooltip.html.haml     |  3 +-
 .../spree/admin/orders/_table_row.html.haml   |  9 +++-
 .../controllers/tooltip_controller.js         | 43 ++++++++++++++++---
 .../css/admin/components/tooltip.scss         |  1 -
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/app/views/admin/shared/_tooltip.html.haml b/app/views/admin/shared/_tooltip.html.haml
index 3d0f140518..0f193e60b9 100644
--- a/app/views/admin/shared/_tooltip.html.haml
+++ b/app/views/admin/shared/_tooltip.html.haml
@@ -1,5 +1,6 @@
 %div{"data-controller": "tooltip"}
-  %a{"data-tooltip-target": "element", "data-action": "mouseenter->tooltip#showTooltip mouseleave->tooltip#hideTooltip"}= t('admin.whats_this')
+  %a{"data-tooltip-target": "element"}
+    = t('admin.whats_this')
   .tooltip-container
     .tooltip{"data-tooltip-target": "tooltip"}
       = sanitize tooltip_text
diff --git a/app/views/spree/admin/orders/_table_row.html.haml b/app/views/spree/admin/orders/_table_row.html.haml
index c4809f08f5..c7cdfbc78a 100644
--- a/app/views/spree/admin/orders/_table_row.html.haml
+++ b/app/views/spree/admin/orders/_table_row.html.haml
@@ -43,6 +43,11 @@
           %i.success.icon-ok-sign{"data-controller": "ephemeral"}
       %a.icon_link.with-tip.icon-edit.no-text{href: edit_admin_order_path(order), 'ofn-with-tip' => t('spree.admin.orders.index.edit')}
       - if order.ready_to_ship?
-        %button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s, 'ofn-with-tip' => t('spree.admin.orders.index.ship')}
+        %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.ship') }
+          %button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s,
+          "data-tooltip-target": "element" }
+
       - if order.payment_required? && order.pending_payments.reject(&:requires_authorization?).any?
-        %button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s, 'ofn-with-tip' => t('spree.admin.orders.index.capture')}
+        %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.capture') }
+          %button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s,
+          "data-tooltip-target": "element" }
diff --git a/app/webpacker/controllers/tooltip_controller.js b/app/webpacker/controllers/tooltip_controller.js
index 5a71ceb441..b75e7eab6c 100644
--- a/app/webpacker/controllers/tooltip_controller.js
+++ b/app/webpacker/controllers/tooltip_controller.js
@@ -4,12 +4,22 @@ import { computePosition, offset, arrow } from "@floating-ui/dom";
 export default class extends Controller {
   static targets = ["element", "tooltip", "arrow"];
   static values = {
-    placement: {
-      type: String,
-      default: "top",
-    },
+    tip: String,
+    placement: { type: String, default: "top" },
   };
 
+  connect() {
+    if (this.hasTipValue) { this.insertToolTipMarkup() }
+
+    this.elementTarget.addEventListener("mouseenter", this.showTooltip);
+    this.elementTarget.addEventListener("mouseleave", this.hideTooltip);
+  }
+
+  disconnect() {
+    this.elementTarget.removeEventListener("mouseenter", this.showTooltip);
+    this.elementTarget.removeEventListener("mouseleave", this.hideTooltip);
+  }
+
   update() {
     computePosition(this.elementTarget, this.tooltipTarget, {
       placement: this.placementValue,
@@ -38,12 +48,31 @@ export default class extends Controller {
     });
   }
 
-  showTooltip() {
+  showTooltip = () => {
     this.tooltipTarget.style.display = "block";
     this.update();
-  }
+  };
 
-  hideTooltip() {
+  hideTooltip = () => {
     this.tooltipTarget.style.display = "";
+  };
+
+  insertToolTipMarkup() {
+    let container = document.createElement("div");
+    let tooltip = document.createElement("div");
+    let arrow = document.createElement("div");
+    let text = document.createTextNode(this.tipValue);
+
+    container.classList.add("tooltip-container");
+    tooltip.classList.add("tooltip");
+    tooltip.setAttribute("data-tooltip-target", "tooltip");
+    arrow.classList.add("arrow");
+    arrow.setAttribute("data-tooltip-target", "arrow");
+
+    container.appendChild(tooltip);
+    tooltip.appendChild(text);
+    tooltip.appendChild(arrow);
+
+    this.elementTarget.appendChild(container);
   }
 }
diff --git a/app/webpacker/css/admin/components/tooltip.scss b/app/webpacker/css/admin/components/tooltip.scss
index 77612b180f..c8a68cf11f 100644
--- a/app/webpacker/css/admin/components/tooltip.scss
+++ b/app/webpacker/css/admin/components/tooltip.scss
@@ -28,5 +28,4 @@
 
 .tooltip-container {
   position: relative;
-  width: 240px;
 }