Open verification modal when following drop notification link (#4344)

* Open verification modal when following drop notification link

* Add test

* Fixup

* Move `open-modal` event to Components.Modal API

assets/js/app.js

@@ -18,6 +18,13 @@ if (document.querySelectorAll('[data-modal]').length > 0) {
         new CustomEvent('close-modal', { bubbles: true, detail: e.detail.id })
       )
   })
+  window.addEventListener(`phx:open-modal`, (e) => {
+    document
+      .getElementById(e.detail.id)
+      .dispatchEvent(
+        new CustomEvent('open-modal', { bubbles: true, detail: e.detail.id })
+      )
+  })
 }
 
 const triggers = document.querySelectorAll('[data-dropdown-trigger]')

lib/plausible_web/live/components/modal.ex

@@ -106,6 +106,11 @@ defmodule PlausibleWeb.Live.Components.Modal do
     end
   end
 
+  @spec open(Phoenix.LiveView.Socket.t(), String.t()) :: Phoenix.LiveView.Socket.t()
+  def open(socket, id) do
+    Phoenix.LiveView.push_event(socket, "open-modal", %{id: id})
+  end
+
   @spec close(Phoenix.LiveView.Socket.t(), String.t()) :: Phoenix.LiveView.Socket.t()
   def close(socket, id) do
     Phoenix.LiveView.push_event(socket, "close-modal", %{id: id})

lib/plausible_web/live/verification.ex

@@ -34,6 +34,14 @@ defmodule PlausibleWeb.Live.Verification do
       launch_delayed(socket)
     end
 
+    socket =
+      if connected?(socket) and !!session["modal?"] and !!session["open_modal?"] do
+        launch_delayed(socket)
+        Modal.open(socket, "verification-modal")
+      else
+        socket
+      end
+
     {:ok, socket}
   end
 

lib/plausible_web/templates/email/drop_notification.html.eex

@@ -4,6 +4,5 @@ We've recorded <%= @current_visitors %> visitors on <%= link(@site.domain, to: "
 <br /><br />
 View dashboard: <%= link(@dashboard_link, to: @dashboard_link) %>
 <br /><br />
-Something looks off? Please use our integration testing tool to verify that Plausible has been integrated correctly: 
-<%= link(@settings_link, to: @settings_link) %>
+Something looks off? Please use our <%= link("integration testing tool", to: @settings_link) %> to verify that Plausible has been integrated correctly. 
 <% end %>

lib/plausible_web/templates/site/settings_general.html.heex

@@ -112,6 +112,7 @@
     <div :if={Plausible.Verification.enabled?(@current_user)}>
       <%= live_render(@conn, PlausibleWeb.Live.Verification,
         session: %{
+          "open_modal?" => !!@conn.params["launch_verification"],
           "site_id" => @site.id,
           "domain" => @site.domain,
           "modal?" => true,

lib/workers/traffic_change_notifier.ex

@@ -103,7 +103,9 @@ defmodule Plausible.Workers.TrafficChangeNotifier do
       if Enum.any?(site.members, &(&1.email == recipient)) do
         {
           Routes.stats_url(PlausibleWeb.Endpoint, :stats, site.domain, []),
-          Routes.site_url(PlausibleWeb.Endpoint, :settings_general, site.domain)
+          Routes.site_url(PlausibleWeb.Endpoint, :settings_general, site.domain,
+            launch_verification: true
+          ) <> "#snippet"
         }
       else
         {nil, nil}

test/plausible_web/live/verification_test.exs

@@ -140,6 +140,26 @@ defmodule PlausibleWeb.Live.VerificationTest do
       assert element_exists?(html, @go_to_dashboard_button)
     end
 
+    test "query launch_verification=true launches the modal", %{conn: conn, site: site} do
+      stub_fetch_body(200, source(site.domain))
+      stub_installation()
+
+      {lv, _html} = get_lv_modal(conn, site, "?launch_verification=true")
+
+      assert html =
+               eventually(fn ->
+                 html = render(lv)
+
+                 {
+                   html =~ "Success!",
+                   html
+                 }
+               end)
+
+      refute html =~ "Awaiting your first pageview"
+      assert element_exists?(html, @go_to_dashboard_button)
+    end
+
     test "failed verification can be retried", %{conn: conn, site: site} do
       stub_fetch_body(200, "")
       stub_installation(200, plausible_installed(false))
@@ -176,9 +196,9 @@ defmodule PlausibleWeb.Live.VerificationTest do
     {lv, html}
   end
 
-  defp get_lv_modal(conn, site) do
+  defp get_lv_modal(conn, site, query_string \\ "") do
     conn = conn |> no_slowdown() |> assign(:live_module, PlausibleWeb.Live.Verification)
-    {:ok, lv, html} = live(no_slowdown(conn), "/#{site.domain}/settings/general")
+    {:ok, lv, html} = live(no_slowdown(conn), "/#{site.domain}/settings/general#{query_string}")
     {lv, html}
   end