Redo site verification UI (#4153)

* Redo site verification UI

* format

lib/plausible/verification/checks/csp.ex

@@ -6,7 +6,7 @@ defmodule Plausible.Verification.Checks.CSP do
   use Plausible.Verification.Check
 
   @impl true
-  def friendly_name, do: "We're visiting your site to ensure that everything is working correctly"
+  def friendly_name, do: "We're visiting your site to ensure that everything is working"
 
   @impl true
   def perform(%State{assigns: %{headers: headers}} = state) do

lib/plausible/verification/checks/fetch_body.ex

@@ -7,7 +7,7 @@ defmodule Plausible.Verification.Checks.FetchBody do
   use Plausible.Verification.Check
 
   @impl true
-  def friendly_name, do: "We're visiting your site to ensure that everything is working correctly"
+  def friendly_name, do: "We're visiting your site to ensure that everything is working"
 
   @impl true
   def perform(%State{url: "https://" <> _ = url} = state) do

lib/plausible/verification/checks/scan_body.ex

@@ -5,7 +5,7 @@ defmodule Plausible.Verification.Checks.ScanBody do
   use Plausible.Verification.Check
 
   @impl true
-  def friendly_name, do: "We're visiting your site to ensure that everything is working correctly"
+  def friendly_name, do: "We're visiting your site to ensure that everything is working"
 
   @impl true
   def perform(%State{assigns: %{raw_body: body}} = state) when is_binary(body) do

lib/plausible/verification/diagnostics.ex

@@ -97,9 +97,9 @@ defmodule Plausible.Verification.Diagnostics do
           plausible_installed?: false,
           body_fetched?: false
         },
-        url
+        _url
       ) do
-    error(@errors.unreachable, url: url)
+    error(@errors.unreachable)
   end
 
   def interpret(
@@ -119,9 +119,9 @@ defmodule Plausible.Verification.Diagnostics do
           service_error: nil,
           body_fetched?: false
         },
-        url
+        _url
       ) do
-    error(@errors.unreachable, url: url)
+    error(@errors.unreachable)
   end
 
   def interpret(
@@ -325,7 +325,7 @@ defmodule Plausible.Verification.Diagnostics do
   end
 
   defp error(error, assigns) do
-    message = EEx.eval_string(error.message, assigns: assigns)
-    error(%{error | message: message})
+    recommendation = EEx.eval_string(error.recommendation, assigns: assigns)
+    error(%{error | recommendation: recommendation})
   end
 end

lib/plausible/verification/errors.ex

@@ -18,13 +18,13 @@ defmodule Plausible.Verification.Errors do
         "https://plausible.io/docs/troubleshoot-integration#does-your-site-use-a-content-security-policy-csp"
     },
     unreachable: %{
-      message: "We couldn't reach <%= @url %>. Is your site up?",
+      message: "We couldn't reach your site",
       recommendation:
         "If your site is running at a different location, please manually check your integration",
       url: "https://plausible.io/docs/troubleshoot-integration"
     },
     no_snippet: %{
-      message: "We couldn't find the Plausible snippet on your site",
+      message: "We couldn't find the Plausible snippet",
       recommendation: "Please insert the snippet into your site",
       url: "https://plausible.io/docs/plausible-script"
     },
@@ -35,28 +35,28 @@ defmodule Plausible.Verification.Errors do
       url: "https://plausible.io/wordpress-analytics-plugin"
     },
     temporary: %{
-      message: "We encountered a temporary problem verifying your website",
+      message: "We encountered a temporary problem",
       recommendation: "Please try again in a few minutes or manually check your integration",
       url:
         "https://plausible.io/docs/troubleshoot-integration#how-to-manually-check-your-integration"
     },
     old_script: %{
-      message: "We encountered a problem trying to verify your website",
+      message: "We couldn't verify your website",
       recommendation:
-        "The integration may be working but as you're running an older version of our script, we cannot verify it automatically. Please manually check your integration or update to use the latest script",
+        "You're running an older version of our script so we cannot verify it automatically. Please update to the latest script",
       url:
         "https://plausible.io/docs/troubleshoot-integration#are-you-using-an-older-version-of-our-script"
     },
     old_script_wp_no_plugin: %{
-      message: "We encountered a problem trying to verify your website",
+      message: "We couldn't verify your website",
       recommendation:
-        "The integration may be working but as you're running an older version of our script, we cannot verify it automatically. Please install our WordPress plugin to use the built-in proxy",
+        "You're running an older version of our script so we cannot verify it. Please use our WordPress plugin instead",
       url: "https://plausible.io/wordpress-analytics-plugin"
     },
     old_script_wp_plugin: %{
-      message: "We encountered a problem trying to verify your website",
+      message: "We couldn't verify your website",
       recommendation:
-        "The integration may be working but as you're running an older version of our script, we cannot verify it automatically. Please disable and then enable the proxy in our WordPress plugin, then clear your WordPress cache",
+        "You're running an older version of our script so we cannot verify it. Please re-enable the proxy in our plugin",
       url: "https://plausible.io/wordpress-analytics-plugin"
     },
     proxy_misconfigured: %{
@@ -76,15 +76,15 @@ defmodule Plausible.Verification.Errors do
       url: "https://plausible.io/docs/proxy/introduction"
     },
     multiple_snippets: %{
-      message: "We've found multiple Plausible snippets on your site.",
+      message: "We've found multiple Plausible snippets",
       recommendation: "Please ensure that only one snippet is used",
       url:
         "https://plausible.io/docs/troubleshoot-integration#did-you-insert-multiple-plausible-snippets-into-your-site"
     },
     cache_wp_plugin: %{
       message: "We encountered an issue with your site cache",
       recommendation:
-        "Please clear your WordPress cache to ensure that the latest version of your site is being displayed to all your visitors",
+        "Please clear your WordPress cache to ensure that the latest version is displayed to your visitors",
       url: "https://plausible.io/wordpress-analytics-plugin"
     },
     cache_wp_no_plugin: %{
@@ -96,19 +96,18 @@ defmodule Plausible.Verification.Errors do
     cache_general: %{
       message: "We encountered an issue with your site cache",
       recommendation:
-        "Please clear your cache (or wait for your provider to clear it) to ensure that the latest version of your site is being displayed to all your visitors",
+        "Please clear your cache (or wait for your provider to clear it) to ensure that the latest version is displayed to your visitors",
       url:
         "https://plausible.io/docs/troubleshoot-integration#have-you-cleared-the-cache-of-your-site"
     },
     snippet_in_body: %{
-      message: "Plausible snippet is placed in the body of your site",
+      message: "Plausible snippet is placed in the body",
       recommendation: "Please relocate the snippet to the header of your site",
       url: "https://plausible.io/docs/troubleshoot-integration"
     },
     different_data_domain: %{
-      message: "Your data-domain is different than <%= @domain %>",
-      recommendation:
-        "Please ensure that the site in the data-domain attribute is an exact match to the site as you added it to your Plausible account",
+      message: "Your data-domain is different",
+      recommendation: "Please ensure that the data-domain is an exact match to <%= @domain %>",
       url:
         "https://plausible.io/docs/troubleshoot-integration#have-you-added-the-correct-data-domain-attribute-in-the-plausible-snippet"
     },

lib/plausible_web/live/components/verification.ex

@@ -11,8 +11,7 @@ defmodule PlausibleWeb.Live.Components.Verification do
   attr :domain, :string, required: true
   attr :modal?, :boolean, default: false
 
-  attr :message, :string,
-    default: "We're visiting your site to ensure that everything is working correctly"
+  attr :message, :string, default: "We're visiting your site to ensure that everything is working"
 
   attr :finished?, :boolean, default: false
   attr :success?, :boolean, default: false
@@ -21,93 +20,87 @@ defmodule PlausibleWeb.Live.Components.Verification do
 
   def render(assigns) do
     ~H"""
-    <div class={[
-      "bg-white dark:bg-gray-800 text-center h-96 flex flex-col",
-      if(!@modal?, do: "shadow-md rounded px-8 pt-6 pb-4 mb-4 mt-16")
-    ]}>
-      <h2 class="text-xl font-bold dark:text-gray-100">
-        <%= if @success? && @finished? do %>
-          Success!
-        <% else %>
-          Verifying your integration
-        <% end %>
-      </h2>
-      <h2 class="text-xl dark:text-gray-100 text-xs">
-        <%= if @finished? && @success? do %>
-          Your integration is working and visitors are being counted accurately
-        <% else %>
-          on <%= @domain %>
-        <% end %>
-      </h2>
+    <div
+      class={[
+        "dark:text-gray-100 text-center bg-white dark:bg-gray-800 flex flex-col",
+        if(not @modal?, do: "shadow-md rounded px-8 pt-6 pb-4 mb-4 mt-16 h-96", else: "h-72")
+      ]}
+      id="progress-indicator"
+    >
       <div
-        :if={!@finished? || @success?}
-        class="flex justify-center w-full my-auto"
-        id="progress-indicator"
+        :if={not @finished? or (not @modal? and @success?)}
+        class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-gray-700"
       >
-        <div class={["block pulsating-circle", if(@modal? && @finished?, do: "hidden")]}></div>
-        <Heroicons.check_circle
-          :if={@modal? && @finished? && @success?}
-          id="check-circle"
-          solid
-          class="w-24 h-24 text-green-500 pt-8"
-        />
+        <div class="block pulsating-circle" }></div>
       </div>
 
       <div
-        :if={@finished? && !@success?}
-        class="flex justify-center pt-3 h-14 mb-4 dark:text-gray-400 "
-        id="progress-indicator"
+        :if={@finished? and @success? and @modal?}
+        class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500"
+        id="check-circle"
       >
-        <.shuttle width={50} height={50} />
+        <Heroicons.check_badge class="h-6 w-6 text-green-600 bg-green-100 dark:bg-green-500 dark:text-green-200" />
       </div>
+
       <div
-        id="progress"
-        class={[
-          "mt-2 dark:text-gray-400",
-          if(!@finished?, do: "animate-pulse text-xs", else: "font-bold text-sm"),
-          if(@finished? && !@success?, do: "text-red-500 dark:text-red-600")
-        ]}
+        :if={@finished? and not @success?}
+        class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-200"
+        id="error-circle"
       >
-        <p id="progress-message" class="leading-normal">
-          <span :if={!@finished?}><%= @message %></span>
-          <span :if={@finished? && !@success? && @interpretation && @interpretation.errors}>
+        <Heroicons.exclamation_triangle class="h-6 w-6 text-red-600 bg-red-100 dark:bg-red-200 dark:text-red-800" />
+      </div>
+
+      <div class="mt-6">
+        <h3 class="font-semibold leading-6 text-xl">
+          <span :if={@finished? and @success?}>Success!</span>
+          <span :if={not @finished?}>Verifying your integration</span>
+
+          <span :if={@finished? and not @success? and @interpretation}>
             <%= List.first(@interpretation.errors) %>
-            <div class="text-xs dark:text-gray-400 font-normal mt-1" id="recommendations">
-              <.recommendations interpretation={@interpretation} />
-            </div>
           </span>
-          <p
-            :if={@finished? && @success? && !@modal?}
-            class="leading-normal animate-pulse text-xs font-normal"
-          >
-            Awaiting your first pageview.
-          </p>
+        </h3>
+        <p :if={@finished? and @success? and @modal?} id="progress" class="mt-2">
+          Your integration is working and visitors are being counted accurately
         </p>
+        <p :if={@finished? and @success? and not @modal?} id="progress" class="mt-2 animate-pulse">
+          Your integration is working. Awaiting your first pageview.
+        </p>
+        <p :if={not @finished?} class="mt-2 animate-pulse" id="progress"><%= @message %></p>
+
+        <.recommendations
+          :if={@finished? and not @success? and @interpretation}
+          interpretation={@interpretation}
+        />
       </div>
 
-      <div class="mt-auto pb-2 text-gray-600 dark:text-gray-400 text-xs w-full text-center leading-normal">
-        <div :if={@finished?} class="mb-4">
-          <div class="flex justify-center gap-x-4 mt-4">
-            <.button_link :if={!@success?} href="#" phx-click="retry" class="text-xs font-bold">
-              Verify integration again
-            </.button_link>
-            <.button_link
-              :if={@success?}
-              href={"/#{URI.encode_www_form(@domain)}?skip_to_dashboard=true"}
-              class="text-xs font-bold"
-            >
-              Go to the dashboard
-            </.button_link>
-          </div>
-        </div>
-        <%= if ee?() && @finished? && !@success? && @attempts >= 3 do %>
+      <div :if={@finished?} class="mt-auto">
+        <.button_link :if={not @success?} href="#" phx-click="retry" class="font-bold w-full">
+          Verify integration again
+        </.button_link>
+        <.button_link
+          :if={@success?}
+          href={"/#{URI.encode_www_form(@domain)}?skip_to_dashboard=true"}
+          class="w-full font-bold mb-4"
+        >
+          Go to the dashboard
+        </.button_link>
+      </div>
+
+      <div
+        :if={
+          (not @modal? and not @success?) or
+            (@finished? and not @success?)
+        }
+        class="mt-auto text-sm"
+      >
+        <%= if ee?() and @finished? and not @success? and @attempts >= 3 do %>
           Need further help with your integration? Do
           <.styled_link href="https://plausible.io/contact">
             contact us
           </.styled_link>
           <br />
         <% end %>
-        <%= if !@modal? && !@success? do %>
+        <%= if not @success? and not @modal? do %>
           Need to see the snippet again?
           <.styled_link href={"/#{URI.encode_www_form(@domain)}/snippet"}>
             Click here
@@ -125,16 +118,11 @@ defmodule PlausibleWeb.Live.Components.Verification do
 
   def recommendations(assigns) do
     ~H"""
-    <p class="leading-normal">
+    <p class="mt-2" id="recommendations">
       <span :for={recommendation <- @interpretation.recommendations} class="recommendation">
         <span :if={is_binary(recommendation)}><%= recommendation %></span>
-        <span :if={is_tuple(recommendation)}><%= elem(recommendation, 0) %> -</span>
-        <.styled_link
-          :if={is_tuple(recommendation)}
-          href={elem(recommendation, 1)}
-          new_tab={true}
-          class="text-xs"
-        >
+        <span :if={is_tuple(recommendation)}><%= elem(recommendation, 0) %>.&nbsp;</span>
+        <.styled_link :if={is_tuple(recommendation)} href={elem(recommendation, 1)} new_tab={true}>
           Learn more
         </.styled_link>
         <br />

lib/plausible_web/live/verification.ex

@@ -128,7 +128,7 @@ defmodule PlausibleWeb.Live.Verification do
 
   defp reset_component(socket) do
     update_component(socket,
-      message: "We're visiting your site to ensure that everything is working correctly",
+      message: "We're visiting your site to ensure that everything is working",
       finished?: false,
       success?: false,
       diagnostics: nil

test/plausible/site/verification/checks_test.exs

@@ -763,8 +763,8 @@ defmodule Plausible.Verification.ChecksTest do
   end
 
   defp assert_error(interpretation, error, assigns) do
-    message = EEx.eval_string(error.message, assigns: assigns)
-    assert_error(interpretation, %{error | message: message})
+    recommendation = EEx.eval_string(error.recommendation, assigns: assigns)
+    assert_error(interpretation, %{error | recommendation: recommendation})
   end
 
   defp assert_ok(interpretation) do