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
This commit is contained in:
RobertJoonas 2024-06-17 14:51:30 +03:00 committed by GitHub
parent 7175863492
commit f9a4cc784d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 61 deletions

View File

@ -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

View File

@ -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' }"
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"
"{ tab: 'last_cycle' }"
end
@tag :ee_only