From 04da148af02ee6dbbcee6e4fb6e0710a76a00a26 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 16 Jan 2022 13:19:39 +0000
Subject: [PATCH] Decouple login modal opening from Angular

---
 app/views/checkout/_authentication.html.haml        | 10 +++++-----
 app/views/shared/menu/_signed_out.html.haml         |  4 ++--
 app/webpacker/controllers/login_modal_controller.js |  8 ++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 app/webpacker/controllers/login_modal_controller.js

diff --git a/app/views/checkout/_authentication.html.haml b/app/views/checkout/_authentication.html.haml
index d157901059..d3362107a8 100644
--- a/app/views/checkout/_authentication.html.haml
+++ b/app/views/checkout/_authentication.html.haml
@@ -3,17 +3,17 @@
     .small-12.columns.text-center
       %h3.pad-top
         = t :checkout_headline
-  .row.pad-top
-    -if guest_checkout_allowed?
+  .row.pad-top{ "data-controller": "login-modal" }
+    - if guest_checkout_allowed?
       .small-5.columns.text-center
-        %button.primary.expand{"auth" => "login"}
+        %button.primary.expand{ "data-action": "click->login-modal#call" }
           = t :label_login
       .small-2.columns.text-center
         %p.pad-top= "#{t :action_or}"
       .small-5.columns.text-center
         %button.neutral-btn.dark.expand{"ng-click" => "enabled = true"}
           = t :checkout_as_guest
-    -else
+    - else
       .small-6.columns.small-centered
-        %button.primary.expand{"auth" => "login"}
+        %button.primary.expand{ "data-action": "click->login-modal#call" }
           = t :label_login
diff --git a/app/views/shared/menu/_signed_out.html.haml b/app/views/shared/menu/_signed_out.html.haml
index a5d527632a..570c707b31 100644
--- a/app/views/shared/menu/_signed_out.html.haml
+++ b/app/views/shared/menu/_signed_out.html.haml
@@ -1,5 +1,5 @@
-%li#login-link
-  %a{"auth" => "login"}
+%li#login-link{ "data-controller": "login-modal" }
+  %a{"auth": "login", "data-action": "click->login-modal#call" }
     %img{ src: image_pack_path("menu/icn-login.svg") }
     %span
       = t 'label_login'
diff --git a/app/webpacker/controllers/login_modal_controller.js b/app/webpacker/controllers/login_modal_controller.js
new file mode 100644
index 0000000000..34ca4b92ab
--- /dev/null
+++ b/app/webpacker/controllers/login_modal_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  call(event) {
+    event.preventDefault()
+    window.dispatchEvent(new Event("login:modal:open"))
+  }
+}