Improve upgrade call to action styles and content

- Improve `Upgrade` CTA in list and turn it into a link
- Improve `Upgrade` CTA tooltip copy to make it more clear what happens with locked goals on the dashboard
- Add disabled (faded) styling to icon button and toggle switch
- Move disabled styling to toggle only in goal form
- Add `link_class` attribute to `upgrade_call_to_action` component in order to override link color when displayed inside tooltip
- Add `Business` pill to goal form to make it more obvious that the feature is locked, and make it a link to the billing page
- Improve prop styling inside tooltip in goal list to make it more readable and ensure truncation when prop is long

Author: sanne-san

lib/plausible_web/components/billing/billing.ex

@@ -11,6 +11,7 @@ defmodule PlausibleWeb.Components.Billing do
   attr :current_user, Plausible.Auth.User, required: true
   attr :current_team, :any, required: true
   attr :locked?, :boolean, required: true
+  attr :link_class, :string, default: ""
   slot :inner_block, required: true
 
   def feature_gate(assigns) do
@@ -36,7 +37,7 @@ defmodule PlausibleWeb.Components.Billing do
             class="max-w-sm sm:max-w-md mb-2 text-sm text-gray-600 dark:text-gray-100/60 leading-normal text-center"
           >
             To access this feature,
-            <.upgrade_call_to_action current_user={@current_user} current_team={@current_team} />
+            <.upgrade_call_to_action current_user={@current_user} current_team={@current_team} link_class={@link_class} />
           </span>
         </div>
       </div>
@@ -357,6 +358,8 @@ defmodule PlausibleWeb.Components.Billing do
 
   defp change_plan_or_upgrade_text(_subscription), do: "Change plan"
 
+  attr :link_class, :string, default: ""
+
   def upgrade_call_to_action(assigns) do
     user = assigns.current_user
     site = assigns[:site]
@@ -389,7 +392,7 @@ defmodule PlausibleWeb.Components.Billing do
       upgrade_assistance_required? ->
         ~H"""
         contact
-        <.styled_link href="mailto:hello@plausible.io" class="font-medium">
+        <.styled_link href="mailto:hello@plausible.io" class={"font-medium " <> @link_class}>
           hello@plausible.io
         </.styled_link>
         to upgrade your subscription.
@@ -398,7 +401,7 @@ defmodule PlausibleWeb.Components.Billing do
       true ->
         ~H"""
         <.styled_link
-          class="inline-block font-medium"
+          class={"inline-block font-medium " <> @link_class}
           href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
         >
           upgrade your subscription.

lib/plausible_web/components/generic.ex

@@ -488,7 +488,8 @@ defmodule PlausibleWeb.Components.Generic do
         :if={@server_mode?}
         class={[
           "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
-          if(@checked, do: "bg-indigo-600", else: "dark:bg-gray-600 bg-gray-200")
+          if(@checked, do: "bg-indigo-600", else: "dark:bg-gray-600 bg-gray-200"),
+          if(@disabled, do: "opacity-50")
         ]}
       >
         <span
@@ -501,7 +502,10 @@ defmodule PlausibleWeb.Components.Generic do
       </span>
       <span
         :if={!@server_mode?}
-        class="relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+        class={[
+          "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
+          if(@disabled, do: "opacity-50")
+        ]}
         x-bind:class={"#{@js_active_var} ? 'bg-indigo-600' : 'dark:bg-gray-600 bg-gray-200'"}
       >
         <span
@@ -646,7 +650,7 @@ defmodule PlausibleWeb.Components.Generic do
       "top-0",
       "-translate-y-full",
       "z-[1000]",
-      "sm:max-w-72",
+      "sm:max-w-64",
       "w-max"
     ]
 
@@ -684,7 +688,7 @@ defmodule PlausibleWeb.Components.Generic do
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0"
         >
-          <div class="bg-gray-800 text-white rounded-sm px-2.5 py-1.5 text-xs font-medium">
+          <div class="bg-gray-800 text-white rounded-sm px-2.5 py-1.5 text-xs font-medium whitespace-normal">
             {render_slot(@tooltip_content)}
           </div>
         </div>
@@ -1035,6 +1039,7 @@ defmodule PlausibleWeb.Components.Generic do
       "dark:group-hover/button:" <> text.dark_hover,
       "transition-colors",
       "duration-150",
+      "group-disabled/button:opacity-50",
       assigns.icon_class
     ]
 
@@ -1251,7 +1256,7 @@ defmodule PlausibleWeb.Components.Generic do
     ~H"""
     <span
       class={[
-        "inline-flex items-center text-xs font-medium py-1 px-2 rounded-md",
+        "inline-flex items-center text-xs font-medium py-[3px] px-[7px] rounded-md",
         @color_classes,
         @class
       ]}

lib/plausible_web/live/goal_settings/form.ex

@@ -526,26 +526,30 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
 
   def custom_property_section(assigns) do
     ~H"""
-    <.tooltip enabled?={not @has_access_to_props?}>
-      <:tooltip_content>
-        <div class="text-xs">
-          To get access to this feature
+    <div class="mt-6 mb-2 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <span class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">
+          {if @use_custom_props, do: "Custom properties", else: "Add custom property"}
+        </span>
+        <.link
+          :if={not @has_access_to_props? and not @use_custom_props}
+          href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
+          class="inline-block"
+        >
+          <.pill color={:indigo}>
+            Business
+          </.pill>
+        </.link>
+      </div>
+      <.tooltip enabled?={not @has_access_to_props?} centered?={true}>
+        <:tooltip_content>
+          To get access to this feature,
           <PlausibleWeb.Components.Billing.upgrade_call_to_action
             current_user={@current_user}
             current_team={@site_team}
+            link_class="!inline !text-indigo-400 hover:!text-indigo-300"
           />
-        </div>
-      </:tooltip_content>
-      <div class="mt-6 mb-2 flex items-center justify-between">
-        <span class={[
-          "text-sm/6 font-medium",
-          if(@has_access_to_props?,
-            do: "text-gray-900 dark:text-gray-100",
-            else: "text-gray-500 dark:text-gray-400"
-          )
-        ]}>
-          {if @use_custom_props, do: "Custom properties", else: "Add custom property"}
-        </span>
+        </:tooltip_content>
         <.toggle_switch
           id="add-custom-property"
           id_suffix={@suffix}
@@ -554,8 +558,8 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
           phx-target={@myself}
           disabled={not @has_access_to_props?}
         />
-      </div>
-    </.tooltip>
+      </.tooltip>
+    </div>
 
     <.error :for={msg <- Enum.map(@f[:custom_props].errors, &translate_error/1)}>
       {msg}
@@ -709,34 +713,39 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
 
   defp revenue_toggle(assigns) do
     ~H"""
-    <.tooltip enabled?={not @has_access_to_revenue_goals?}>
-      <:tooltip_content>
-        <div class="text-xs">
-          To get access to this feature
+
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <span class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">
+          Enable revenue tracking
+        </span>
+        <.link
+          :if={not @has_access_to_revenue_goals?}
+          href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
+          class="inline-block"
+        >
+          <.pill color={:indigo}>
+            Business
+          </.pill>
+        </.link>
+      </div>
+      <.tooltip enabled?={not @has_access_to_revenue_goals?} centered?={true}>
+        <:tooltip_content>
+          To get access to this feature,
           <PlausibleWeb.Components.Billing.upgrade_call_to_action
             current_user={@current_user}
             current_team={@site_team}
+            link_class="!inline !text-indigo-400 hover:!text-indigo-300"
           />
-        </div>
-      </:tooltip_content>
-      <div class="flex items-center justify-between">
-        <span class={[
-          "text-sm/6 font-medium",
-          if(@has_access_to_revenue_goals?,
-            do: "text-gray-900 dark:text-gray-100",
-            else: "text-gray-500 dark:text-gray-400"
-          )
-        ]}>
-          Enable revenue tracking
-        </span>
+        </:tooltip_content>
         <PlausibleWeb.Components.Generic.toggle_switch
           id="enable-revenue-tracking"
           id_suffix={@suffix}
           js_active_var="active"
           disabled={not @has_access_to_revenue_goals?}
         />
-      </div>
-    </.tooltip>
+      </.tooltip>
+    </div>
     """
   end
 

lib/plausible_web/live/goal_settings/list.ex

@@ -73,57 +73,26 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
               <% has_unavailable_revenue? = not @revenue_goals_enabled? and not is_nil(goal.currency) %>
               <% has_unavailable_props? =
                 not @props_available? and Plausible.Goal.has_custom_props?(goal) %>
+              <.goal_name_with_icons goal={goal} />
               <%= if has_unavailable_revenue? or has_unavailable_props? do %>
-                <div class="truncate">{goal}</div>
-                <.tooltip>
+                <.tooltip centered?={true}>
                   <:tooltip_content>
                     <p class="text-xs">
                       <%= if has_unavailable_revenue? do %>
-                        Revenue Goals act like regular custom<br />
-                        events without a Business subscription<br />
+                        Revenue goals appear as regular goals on the dashboard. Upgrade to Business to see revenue data.
                       <% else %>
-                        Custom Properties on Goals require<br /> a Business subscription<br />
+                        Upgrade to Business to show goals with custom properties on the dashboard.
                       <% end %>
                     </p>
                   </:tooltip_content>
-                  <span class="w-max flex items-center text-gray-500 italic text-sm">
-                    <Heroicons.lock_closed solid class="size-4 mr-1" /> Upgrade Required
-                  </span>
+                  <.styled_link
+                    class="w-max flex items-center text-sm"
+                    href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
+                  >
+                    <Heroicons.lock_closed class="size-3.5 mr-1 stroke-2" /> Upgrade
+                  </.styled_link>
                 </.tooltip>
               <% else %>
-                <div class="font-medium text-sm flex items-center gap-1.5">
-                  <span class="truncate">{goal}</span>
-                  <.tooltip :if={not Enum.empty?(goal.funnels)} centered?={true}>
-                    <:tooltip_content>
-                      Belongs to funnel
-                    </:tooltip_content>
-                    <Heroicons.funnel class="size-3.5 mt-px stroke-2 flex-shrink-0" />
-                  </.tooltip>
-                  <.tooltip :if={Plausible.Goal.has_custom_props?(goal)} centered?={true}>
-                    <:tooltip_content>
-                      <div class="text-xs">
-                        <div :for={{key, value} <- goal.custom_props}>
-                          {key} is {value}
-                        </div>
-                      </div>
-                    </:tooltip_content>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                      class="size-3.5 mt-px flex-shrink-0"
-                    >
-                      <circle fill="currentColor" cx="7.25" cy="7.25" r="1.25" />
-                      <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M4 3h5.172a2 2 0 0 1 1.414.586l5.536 5.536a3 3 0 0 1 0 4.243l-2.757 2.757a3 3 0 0 1-4.243 0l-5.536-5.536A2 2 0 0 1 3 9.172V4a1 1 0 0 1 1-1Z"
-                      />
-                    </svg>
-                  </.tooltip>
-                </div>
                 <div class="truncate">
                   <.goal_description goal={goal} />
                 </div>
@@ -294,6 +263,44 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
     end
   end
 
+  defp goal_name_with_icons(assigns) do
+    ~H"""
+    <div class="font-medium text-sm flex items-center gap-1.5">
+      <span class="truncate">{@goal}</span>
+      <.tooltip :if={not Enum.empty?(@goal.funnels)} centered?={true}>
+        <:tooltip_content>
+          Belongs to funnel
+        </:tooltip_content>
+        <Heroicons.funnel class="size-3.5 mt-px stroke-2 flex-shrink-0" />
+      </.tooltip>
+      <.tooltip :if={Plausible.Goal.has_custom_props?(@goal)} centered?={true}>
+        <:tooltip_content>
+          <div class="-mx-1 flex flex-col gap-1 text-xs">
+            <div class="truncate" :for={{key, value} <- @goal.custom_props}>
+              <span class="bg-white/20 px-1 py-0.5 rounded-sm">{key}</span> is <span class="bg-white/20 px-1 py-0.5 rounded-sm">{value}</span>
+            </div>
+          </div>
+        </:tooltip_content>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          class="size-3.5 mt-px flex-shrink-0"
+        >
+          <circle fill="currentColor" cx="7.25" cy="7.25" r="1.25" />
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 3h5.172a2 2 0 0 1 1.414.586l5.536 5.536a3 3 0 0 1 0 4.243l-2.757 2.757a3 3 0 0 1-4.243 0l-5.536-5.536A2 2 0 0 1 3 9.172V4a1 1 0 0 1 1-1Z"
+          />
+        </svg>
+      </.tooltip>
+    </div>
+    """
+  end
+
   defp goal_editable?(goal, revenue_goals_enabled?, props_available?) do
     revenue_ok? = not is_nil(goal.currency) or revenue_goals_enabled?
     props_ok? = not Plausible.Goal.has_custom_props?(goal) or props_available?