Fix funnels and props functionality not hiding when toggled off

sanne-san · sanne-san · commit 779dd928f0bc · 2025-11-13T04:18:03.000-06:00
- Add show_content? attribute to generic tile component
- Ensure content is hidden when toggled off
- Avoid rendering border and empty space when toggled off
- Fix formatting
diff --git a/extra/lib/plausible_web/live/funnel_settings.ex b/extra/lib/plausible_web/live/funnel_settings.ex
@@ -70,12 +70,17 @@ defmodule PlausibleWeb.Live.FunnelSettings do
         />
       </div>
 
-      <div :if={@goal_count < Funnel.min_steps()} class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto">
+      <div
+        :if={@goal_count < Funnel.min_steps()}
+        class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto"
+      >
         <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
           Ready to dig into user flows?
         </h3>
         <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-        Set up a few goals like <span class="font-medium text-indigo-600 dark:text-gray-100">Signup</span>, <span class="font-medium text-indigo-600 dark:text-gray-100">Visit /</span>, or <span class="font-medium text-indigo-600 dark:text-gray-100">Scroll 50% on /blog/*</span> first, then return here to build your first funnel.
+          Set up a few goals like <span class="font-medium text-indigo-600 dark:text-gray-100">Signup</span>, <span class="font-medium text-indigo-600 dark:text-gray-100">Visit /</span>, or
+          <span class="font-medium text-indigo-600 dark:text-gray-100">Scroll 50% on /blog/*</span>
+          first, then return here to build your first funnel.
         </p>
         <.button_link
           class="mt-4"
diff --git a/extra/lib/plausible_web/live/funnel_settings/list.ex b/extra/lib/plausible_web/live/funnel_settings/list.ex
@@ -57,7 +57,10 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
               Create your first funnel
             </h3>
             <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-              Compose goals into funnels to track user flows and conversion rates. <.styled_link href="https://plausible.io/docs/funnel-analysis" target="_blank">Learn more</.styled_link>
+              Compose goals into funnels to track user flows and conversion rates.
+              <.styled_link href="https://plausible.io/docs/funnel-analysis" target="_blank">
+                Learn more
+              </.styled_link>
             </p>
             <.button
               id="add-funnel-button"
diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex
@@ -487,6 +487,7 @@ defmodule PlausibleWeb.Components.Generic do
   attr :current_team, :any, default: nil
   attr :site, :any
   attr :conn, :any
+  attr :show_content?, :boolean, default: true
 
   def tile(assigns) do
     ~H"""
@@ -507,8 +508,8 @@ defmodule PlausibleWeb.Components.Generic do
           conn={@conn}
         />
       </header>
-      <div class="border-b dark:border-gray-700 mx-6"></div>
-      <div class="relative">
+      <div :if={@show_content?} class="border-b dark:border-gray-700 mx-6"></div>
+      <div :if={@show_content?} class="relative">
         <%= if @feature_mod do %>
           <PlausibleWeb.Components.Billing.feature_gate
             locked?={@feature_mod.check_availability(@current_team) != :ok}
diff --git a/lib/plausible_web/live/goal_settings/list.ex b/lib/plausible_web/live/goal_settings/list.ex
@@ -104,7 +104,10 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
               Create your first goal
             </h3>
             <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-              Define actions that you want your users to take, like visiting a certain page, submitting a form, etc. <.styled_link href="https://plausible.io/docs/goal-conversions" target="_blank">Learn more</.styled_link>
+              Define actions that you want your users to take, like visiting a certain page, submitting a form, etc.
+              <.styled_link href="https://plausible.io/docs/goal-conversions" target="_blank">
+                Learn more
+              </.styled_link>
             </p>
             <.button
               id="add-goal-button"
diff --git a/lib/plausible_web/live/imports_exports_settings.ex b/lib/plausible_web/live/imports_exports_settings.ex
@@ -131,67 +131,67 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
 
       <div class="mt-6">
         <.table rows={@site_imports}>
-        <:thead>
-          <.th>Import</.th>
-          <.th hide_on_mobile>Date Range</.th>
-          <.th hide_on_mobile>
-            <div class="text-right">Pageviews</div>
-          </.th>
-          <.th invisible>Actions</.th>
-        </:thead>
+          <:thead>
+            <.th>Import</.th>
+            <.th hide_on_mobile>Date Range</.th>
+            <.th hide_on_mobile>
+              <div class="text-right">Pageviews</div>
+            </.th>
+            <.th invisible>Actions</.th>
+          </:thead>
 
-        <:tbody :let={entry}>
-          <.td max_width="max-w-40">
-            <div class="flex items-center gap-x-2 truncate">
-              <div class="w-5" title={notice_message(entry.tooltip)}>
-                <Heroicons.clock
-                  :if={entry.live_status == SiteImport.pending()}
-                  class="block size-5 text-indigo-600 dark:text-green-600"
-                />
-                <.spinner
-                  :if={entry.live_status == SiteImport.importing()}
-                  class="block size-5 text-indigo-600 dark:text-green-600"
-                />
-                <Heroicons.check
-                  :if={entry.live_status == SiteImport.completed()}
-                  class="block size-5 text-indigo-600 dark:text-green-600"
-                />
-                <Heroicons.exclamation_triangle
-                  :if={entry.live_status == SiteImport.failed()}
-                  class="block size-5 text-red-700 dark:text-red-500"
-                />
+          <:tbody :let={entry}>
+            <.td max_width="max-w-40">
+              <div class="flex items-center gap-x-2 truncate">
+                <div class="w-5" title={notice_message(entry.tooltip)}>
+                  <Heroicons.clock
+                    :if={entry.live_status == SiteImport.pending()}
+                    class="block size-5 text-indigo-600 dark:text-green-600"
+                  />
+                  <.spinner
+                    :if={entry.live_status == SiteImport.importing()}
+                    class="block size-5 text-indigo-600 dark:text-green-600"
+                  />
+                  <Heroicons.check
+                    :if={entry.live_status == SiteImport.completed()}
+                    class="block size-5 text-indigo-600 dark:text-green-600"
+                  />
+                  <Heroicons.exclamation_triangle
+                    :if={entry.live_status == SiteImport.failed()}
+                    class="block size-5 text-red-700 dark:text-red-500"
+                  />
+                </div>
+                <div
+                  class="max-w-sm"
+                  title={"#{Plausible.Imported.SiteImport.label(entry.site_import)} created at #{format_date(entry.site_import.inserted_at)}"}
+                >
+                  {Plausible.Imported.SiteImport.label(entry.site_import)}
+                </div>
               </div>
-              <div
-                class="max-w-sm"
-                title={"#{Plausible.Imported.SiteImport.label(entry.site_import)} created at #{format_date(entry.site_import.inserted_at)}"}
-              >
-                {Plausible.Imported.SiteImport.label(entry.site_import)}
-              </div>
-            </div>
-          </.td>
+            </.td>
 
-          <.td hide_on_mobile>
-            {format_date(entry.site_import.start_date)} - {format_date(entry.site_import.end_date)}
-          </.td>
+            <.td hide_on_mobile>
+              {format_date(entry.site_import.start_date)} - {format_date(entry.site_import.end_date)}
+            </.td>
 
-          <.td>
-            <div class="text-right">
-              {if entry.live_status == SiteImport.completed(),
-                do:
-                  PlausibleWeb.StatsView.large_number_format(
-                    pageview_count(entry.site_import, @pageview_counts)
-                  )}
-            </div>
-          </.td>
-          <.td actions>
-            <.delete_button
-              href={"/#{URI.encode_www_form(@site.domain)}/settings/forget-import/#{entry.site_import.id}"}
-              method="delete"
-              data-confirm="Are you sure you want to delete this import?"
-            />
-          </.td>
-        </:tbody>
-      </.table>
+            <.td>
+              <div class="text-right">
+                {if entry.live_status == SiteImport.completed(),
+                  do:
+                    PlausibleWeb.StatsView.large_number_format(
+                      pageview_count(entry.site_import, @pageview_counts)
+                    )}
+              </div>
+            </.td>
+            <.td actions>
+              <.delete_button
+                href={"/#{URI.encode_www_form(@site.domain)}/settings/forget-import/#{entry.site_import.id}"}
+                method="delete"
+                data-confirm="Are you sure you want to delete this import?"
+              />
+            </.td>
+          </:tbody>
+        </.table>
       </div>
     <% end %>
     """
diff --git a/lib/plausible_web/live/props_settings/list.ex b/lib/plausible_web/live/props_settings/list.ex
@@ -48,7 +48,10 @@ defmodule PlausibleWeb.Live.PropsSettings.List do
               Create a custom property
             </h3>
             <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-              Attach custom properties when sending a pageview or an event to create custom metrics. <.styled_link href="https://plausible.io/docs/custom-props/introduction" target="_blank">Learn more</.styled_link>
+              Attach custom properties when sending a pageview or an event to create custom metrics.
+              <.styled_link href="https://plausible.io/docs/custom-props/introduction" target="_blank">
+                Learn more
+              </.styled_link>
             </p>
             <.button
               id="add-property-button"
diff --git a/lib/plausible_web/live/shared_link_settings.ex b/lib/plausible_web/live/shared_link_settings.ex
@@ -68,7 +68,10 @@ defmodule PlausibleWeb.Live.SharedLinkSettings do
             Create your first shared link
           </h3>
           <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-            Share your stats privately with anyone. Links are unique, secure, and can be password-protected. <.styled_link href="https://plausible.io/docs/shared-links" target="_blank">Learn more</.styled_link>
+            Share your stats privately with anyone. Links are unique, secure, and can be password-protected.
+            <.styled_link href="https://plausible.io/docs/shared-links" target="_blank">
+              Learn more
+            </.styled_link>
           </p>
           <.button
             id="add-shared-link-button"
diff --git a/lib/plausible_web/live/shields/country_rules.ex b/lib/plausible_web/live/shields/country_rules.ex
@@ -41,7 +41,13 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do
                 Block a country
               </h3>
               <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-                Reject incoming traffic from specific countries. <.styled_link href="https://plausible.io/docs/excluding#exclude-visits-by-country" target="_blank">Learn more</.styled_link>
+                Reject incoming traffic from specific countries.
+                <.styled_link
+                  href="https://plausible.io/docs/excluding#exclude-visits-by-country"
+                  target="_blank"
+                >
+                  Learn more
+                </.styled_link>
               </p>
               <.button
                 :if={@country_rules_count < Shields.maximum_country_rules()}
diff --git a/lib/plausible_web/live/shields/hostname_rules.ex b/lib/plausible_web/live/shields/hostname_rules.ex
@@ -44,7 +44,13 @@ defmodule PlausibleWeb.Live.Shields.HostnameRules do
                 Allow a hostname
               </h3>
               <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-                Accept incoming traffic only from familiar hostnames. Traffic from all hostnames is recorded until you add your first rule. <.styled_link href="https://plausible.io/docs/excluding#exclude-visits-by-hostname" target="_blank">Learn more</.styled_link>
+                Accept incoming traffic only from familiar hostnames. Traffic from all hostnames is recorded until you add your first rule.
+                <.styled_link
+                  href="https://plausible.io/docs/excluding#exclude-visits-by-hostname"
+                  target="_blank"
+                >
+                  Learn more
+                </.styled_link>
               </p>
               <.button
                 :if={@hostname_rules_count < Shields.maximum_hostname_rules()}
diff --git a/lib/plausible_web/live/shields/ip_rules.ex b/lib/plausible_web/live/shields/ip_rules.ex
@@ -42,7 +42,10 @@ defmodule PlausibleWeb.Live.Shields.IPRules do
                 Block an IP address
               </h3>
               <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-                Reject incoming traffic from specific IP addresses. <.styled_link href="https://plausible.io/docs/excluding" target="_blank">Learn more</.styled_link>
+                Reject incoming traffic from specific IP addresses.
+                <.styled_link href="https://plausible.io/docs/excluding" target="_blank">
+                  Learn more
+                </.styled_link>
               </p>
               <.button
                 :if={@ip_rules_count < Shields.maximum_ip_rules()}
diff --git a/lib/plausible_web/live/shields/page_rules.ex b/lib/plausible_web/live/shields/page_rules.ex
@@ -44,7 +44,13 @@ defmodule PlausibleWeb.Live.Shields.PageRules do
                 Block a page
               </h3>
               <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-                Reject incoming traffic for specific pages. <.styled_link href="https://plausible.io/docs/top-pages#block-traffic-from-specific-pages-or-sections" target="_blank">Learn more</.styled_link>
+                Reject incoming traffic for specific pages.
+                <.styled_link
+                  href="https://plausible.io/docs/top-pages#block-traffic-from-specific-pages-or-sections"
+                  target="_blank"
+                >
+                  Learn more
+                </.styled_link>
               </p>
               <.button
                 :if={@page_rules_count < Shields.maximum_page_rules()}
diff --git a/lib/plausible_web/templates/settings/api_keys.html.heex b/lib/plausible_web/templates/settings/api_keys.html.heex
@@ -17,7 +17,10 @@
         <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
           Create your first API key
         </h3>
-        <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">Access your stats through the Plausible API. <.styled_link href="https://plausible.io/docs/stats-api">Learn more</.styled_link></p>
+        <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+          Access your stats through the Plausible API.
+          <.styled_link href="https://plausible.io/docs/stats-api">Learn more</.styled_link>
+        </p>
         <.button_link href={Routes.settings_path(@conn, :new_api_key)}>
           New API Key
         </.button_link>
diff --git a/lib/plausible_web/templates/site/settings_funnels.html.heex b/lib/plausible_web/templates/site/settings_funnels.html.heex
@@ -3,6 +3,7 @@
     docs="funnel-analysis"
     feature_mod={Plausible.Billing.Feature.Funnels}
     feature_toggle?={true}
+    show_content?={!Plausible.Billing.Feature.Funnels.opted_out?(@site)}
     current_role={@site_role}
     current_team={@site_team}
     site={@site}
@@ -15,8 +16,10 @@
       Compose goals into funnels to track user flows and conversion rates.
     </:subtitle>
 
-    {live_render(@conn, PlausibleWeb.Live.FunnelSettings,
-      session: %{"site_id" => @site.id, "domain" => @site.domain}
-    )}
+    <div :if={Plausible.Billing.Feature.Funnels.enabled?(@site)}>
+      {live_render(@conn, PlausibleWeb.Live.FunnelSettings,
+        session: %{"site_id" => @site.id, "domain" => @site.domain}
+      )}
+    </div>
   </.tile>
 </.settings_tiles>
diff --git a/lib/plausible_web/templates/site/settings_goals.html.heex b/lib/plausible_web/templates/site/settings_goals.html.heex
@@ -3,6 +3,7 @@
     docs="goal-conversions"
     feature_mod={Plausible.Billing.Feature.Goals}
     feature_toggle?={true}
+    show_content?={!Plausible.Billing.Feature.Goals.opted_out?(@site)}
     site={@site}
     conn={@conn}
   >
diff --git a/lib/plausible_web/templates/site/settings_props.html.heex b/lib/plausible_web/templates/site/settings_props.html.heex
@@ -3,6 +3,7 @@
     docs="custom-props/introduction"
     feature_mod={Plausible.Billing.Feature.Props}
     feature_toggle?={true}
+    show_content?={!Plausible.Billing.Feature.Props.opted_out?(@site)}
     site={@site}
     current_role={@site_role}
     current_team={@site_team}
@@ -16,9 +17,11 @@
       create custom metrics.
     </:subtitle>
 
-    {live_render(@conn, PlausibleWeb.Live.PropsSettings,
-      id: "props-form",
-      session: %{"site_id" => @site.id, "domain" => @site.domain}
-    )}
+    <div :if={Plausible.Billing.Feature.Props.enabled?(@site)}>
+      {live_render(@conn, PlausibleWeb.Live.PropsSettings,
+        id: "props-form",
+        session: %{"site_id" => @site.id, "domain" => @site.domain}
+      )}
+    </div>
   </.tile>
 </.settings_tiles>
