Make billing cycles less confusing (#4233)

* Set default selected tab to last cycle when rendering usage

...And never disable this tab.

* rename Ongoing cycle to Upcoming cycle

* fix tests

* mix format

lib/plausible_web/components/billing/billing.ex

@@ -16,12 +16,12 @@ defmodule PlausibleWeb.Components.Billing do
 
   def render_monthly_pageview_usage(assigns) do
     ~H"""
-    <article id="monthly_pageview_usage_container" x-data="{ tab: 'current_cycle' }" class="mt-8">
+    <article id="monthly_pageview_usage_container" x-data="{ tab: 'last_cycle' }" class="mt-8">
       <h1 class="text-xl mb-6 font-bold dark:text-gray-100">Monthly pageviews usage</h1>
       <div class="mb-3">
         <ol class="divide-y divide-gray-300 dark:divide-gray-600 rounded-md border dark:border-gray-600 md:flex md:flex-row-reverse md:divide-y-0 md:overflow-hidden">
           <.billing_cycle_tab
-            name="Ongoing cycle"
+            name="Upcoming cycle"
             tab={:current_cycle}
             date_range={@usage.current_cycle.date_range}
             with_separator={true}
@@ -30,7 +30,6 @@ defmodule PlausibleWeb.Components.Billing do
             name="Last cycle"
             tab={:last_cycle}
             date_range={@usage.last_cycle.date_range}
-            disabled={@usage.last_cycle.total == 0 && @usage.penultimate_cycle.total == 0}
             with_separator={true}
           />
           <.billing_cycle_tab

test/plausible_web/controllers/auth_controller_test.exs

@@ -938,9 +938,6 @@ defmodule PlausibleWeb.AuthControllerTest do
 
       doc = get(conn, "/settings") |> html_response(200)
 
-      assert text_of_attr(find(doc, "#monthly_pageview_usage_container"), "x-data") ==
-               "{ tab: 'current_cycle' }"
-
       assert class_of_element(doc, "#billing_cycle_tab_penultimate_cycle button") =~
                "pointer-events-none"
 
@@ -948,72 +945,20 @@ defmodule PlausibleWeb.AuthControllerTest do
     end
 
     @tag :ee_only
-    test "penultimate and last cycles are both disabled if there's no usage", %{
+    test "last cycle tab is selected by default", %{
       conn: conn,
       user: user
     } do
-      site = insert(:site, members: [user])
-
-      populate_stats(site, [
-        build(:event, name: "pageview", timestamp: Timex.shift(Timex.now(), days: -5))
-      ])
-
-      last_bill_date = Timex.shift(Timex.today(), days: -10)
-
       insert(:subscription,
         paddle_plan_id: @v4_plan_id,
         user: user,
-        last_bill_date: last_bill_date
+        last_bill_date: Timex.shift(Timex.today(), days: -1)
       )
 
       doc = get(conn, "/settings") |> html_response(200)
 
       assert text_of_attr(find(doc, "#monthly_pageview_usage_container"), "x-data") ==
-               "{ tab: 'current_cycle' }"
+               "{ tab: 'last_cycle' }"
-
-      assert class_of_element(doc, "#billing_cycle_tab_last_cycle button") =~
-               "pointer-events-none"
-
-      assert text_of_element(doc, "#billing_cycle_tab_last_cycle") =~ "Not available"
-
-      assert class_of_element(doc, "#billing_cycle_tab_penultimate_cycle button") =~
-               "pointer-events-none"
-
-      assert text_of_element(doc, "#billing_cycle_tab_penultimate_cycle") =~ "Not available"
-    end
-
-    @tag :ee_only
-    test "when last cycle usage is 0, it's still not disabled if penultimate cycle has usage", %{
-      conn: conn,
-      user: user
-    } do
-      site = insert(:site, members: [user])
-
-      populate_stats(site, [
-        build(:event, name: "pageview", timestamp: Timex.shift(Timex.now(), days: -5)),
-        build(:event, name: "pageview", timestamp: Timex.shift(Timex.now(), days: -50))
-      ])
-
-      last_bill_date = Timex.shift(Timex.today(), days: -10)
-
-      insert(:subscription,
-        paddle_plan_id: @v4_plan_id,
-        user: user,
-        last_bill_date: last_bill_date
-      )
-
-      doc = get(conn, "/settings") |> html_response(200)
-
-      assert text_of_attr(find(doc, "#monthly_pageview_usage_container"), "x-data") ==
-               "{ tab: 'current_cycle' }"
-
-      refute class_of_element(doc, "#billing_cycle_tab_last_cycle") =~ "pointer-events-none"
-      refute text_of_element(doc, "#billing_cycle_tab_last_cycle") =~ "Not available"
-
-      refute class_of_element(doc, "#billing_cycle_tab_penultimate_cycle") =~
-               "pointer-events-none"
-
-      refute text_of_element(doc, "#billing_cycle_tab_penultimate_cycle") =~ "Not available"
     end
 
     @tag :ee_only