mirror of
https://github.com/plausible/analytics.git
synced 2024-12-29 20:42:01 +03:00
2c9c1590e4
* Adding a note about WP plugin * Make it pretty * Add component for link in new tab * Adjust link styling for dark mode * Update Subscription.free (for testing purposes) * More natural interface for syled_link * Use <.styled_link> helper in change_domain.html.heex * Mix format * Fix warning * Fix credo warning --------- Co-authored-by: Uku Taht <uku.taht@gmail.com>
380 lines
16 KiB
Plaintext
380 lines
16 KiB
Plaintext
<%= if !Application.get_env(:plausible, :is_selfhost) do %>
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-24 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-orange-200 ">
|
|
<div class="flex justify-between">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Subscription Plan</h2>
|
|
<span
|
|
:if={@subscription}
|
|
class={[
|
|
"inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-bold leading-5",
|
|
subscription_colors(@subscription.status)
|
|
]}
|
|
>
|
|
<%= present_subscription_status(@subscription.status) %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="my-4 border-b border-gray-400"></div>
|
|
|
|
<div
|
|
:if={@subscription && @subscription.status == "deleted"}
|
|
class="p-2 bg-red-100 rounded-lg sm:p-3"
|
|
>
|
|
<div class="flex flex-wrap items-center justify-between">
|
|
<div class="flex items-center flex-1 w-0">
|
|
<svg
|
|
class="w-6 h-6 text-red-800"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 9V11M12 15H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0378 2.66667 10.268 4L3.33978 16C2.56998 17.3333 3.53223 19 5.07183 19Z"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<p class="ml-3 font-medium text-red-800">
|
|
<%= if @subscription.next_bill_date && Timex.compare(@subscription.next_bill_date, Timex.today()) >= 0 do %>
|
|
Your subscription is cancelled but you have access to your stats until <%= Timex.format!(
|
|
@subscription.next_bill_date,
|
|
"{Mshort} {D}, {YYYY}"
|
|
) %>. Upgrade below to make sure you don't lose access.
|
|
<% else %>
|
|
Your subscription is cancelled. Upgrade below to get access to your stats again.
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-between mt-8 sm:flex-row sm:items-start">
|
|
<div
|
|
class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900"
|
|
style="width: 11.75rem;"
|
|
>
|
|
<h4 class="font-black dark:text-gray-100">Monthly quota</h4>
|
|
<%= if @subscription do %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">
|
|
<%= subscription_quota(@subscription) %> pageviews
|
|
</div>
|
|
|
|
<.styled_link
|
|
:if={@subscription.status == "active"}
|
|
href={Routes.billing_path(@conn, :change_plan_form)}
|
|
class="text-sm font-medium"
|
|
>
|
|
Change plan
|
|
</.styled_link>
|
|
|
|
<span
|
|
:if={@subscription.status == "past_due"}
|
|
class="text-sm text-gray-600 dark:text-gray-400 font-medium"
|
|
tooltip="Please update your billing details before changing plans"
|
|
>
|
|
Change plan
|
|
</span>
|
|
<% else %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">Free trial</div>
|
|
<.styled_link class="text-sm font-medium" href={Routes.billing_path(@conn, :upgrade)}>
|
|
Upgrade
|
|
</.styled_link>
|
|
<% end %>
|
|
</div>
|
|
<div
|
|
class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900"
|
|
style="width: 11.75rem;"
|
|
>
|
|
<h4 class="font-black dark:text-gray-100">Next bill amount</h4>
|
|
<%= if @subscription && @subscription.status in ["active", "past_due"] do %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">
|
|
<%= PlausibleWeb.BillingView.present_currency(@subscription.currency_code) %><%= @subscription.next_bill_amount %>
|
|
</div>
|
|
<%= if @subscription.update_url do %>
|
|
<%= link("Update billing info",
|
|
to: @subscription.update_url,
|
|
class: "text-sm text-indigo-500 font-medium"
|
|
) %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">---</div>
|
|
<% end %>
|
|
</div>
|
|
<div
|
|
class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900"
|
|
style="width: 11.75rem;"
|
|
>
|
|
<h4 class="font-black dark:text-gray-100">Next bill date</h4>
|
|
|
|
<%= if @subscription && @subscription.next_bill_date && @subscription.status in ["active", "past_due"] do %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">
|
|
<%= Timex.format!(@subscription.next_bill_date, "{Mshort} {D}, {YYYY}") %>
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
(<%= subscription_interval(@subscription) %> billing)
|
|
</div>
|
|
<% else %>
|
|
<div class="py-2 text-xl font-medium dark:text-gray-100">---</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<article class="mt-8">
|
|
<h1 class="text-xl font-bold dark:text-gray-100">Usage & Limits</h1>
|
|
<h2 class="mt-1 mb-3 text-sm text-gray-500 leading-5 dark:text-gray-200">
|
|
Your usage across all of your sites and the limits of your plan
|
|
</h2>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_table>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_row
|
|
title="Total billable pageviews (last 30 days)"
|
|
usage={@total_pageview_usage}
|
|
limit={@total_pageview_limit}
|
|
/>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_row
|
|
pad
|
|
title="Pageviews"
|
|
usage={@pageview_usage}
|
|
class="font-normal text-gray-500 dark:text-gray-400"
|
|
/>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_row
|
|
pad
|
|
title="Custom events"
|
|
usage={@custom_event_usage}
|
|
class="font-normal text-gray-500 dark:text-gray-400"
|
|
/>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_row
|
|
title="Owned sites"
|
|
usage={@site_usage}
|
|
limit={@site_limit}
|
|
/>
|
|
<PlausibleWeb.Components.Billing.usage_and_limits_row
|
|
title="Team members"
|
|
usage={@team_member_usage}
|
|
limit={@team_member_limit}
|
|
/>
|
|
</PlausibleWeb.Components.Billing.usage_and_limits_table>
|
|
</article>
|
|
|
|
<%= cond do %>
|
|
<% @subscription && @subscription.status in ["active", "past_due", "paused"] && @subscription.cancel_url -> %>
|
|
<div class="mt-8">
|
|
<%= link("Cancel my subscription",
|
|
to: @subscription.cancel_url,
|
|
class:
|
|
"inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150"
|
|
) %>
|
|
</div>
|
|
<% true -> %>
|
|
<div class="mt-8">
|
|
<%= link("Upgrade",
|
|
to: "/billing/upgrade",
|
|
class:
|
|
"inline-block px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150"
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= case @invoices do %>
|
|
<% {:error, :no_invoices} -> %>
|
|
<% {:error, :request_failed} -> %>
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Invoices</h2>
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
<p class="text-center text-black dark:text-gray-100 m-2">
|
|
Something went wrong
|
|
</p>
|
|
</div>
|
|
<% {:ok, invoice_list} when is_list(invoice_list) -> %>
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Invoices</h2>
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
|
>
|
|
Date
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
|
>
|
|
Amount
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
|
>
|
|
Invoice
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<%= for invoice <- format_invoices(invoice_list) do %>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="py-4 text-sm text-gray-800 dark:text-gray-200 font-medium">
|
|
<%= invoice.date %>
|
|
</td>
|
|
<td class="py-4 text-sm text-gray-800 dark:text-gray-200">
|
|
<%= invoice.currency <> invoice.amount %>
|
|
</td>
|
|
<td class="py-4 text-sm text-indigo-500">
|
|
<%= link("Link", to: invoice.url, target: "_blank") %>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<% end %>
|
|
</table>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-green-500 rounded rounded-t-none shadow-md dark:bg-gray-800">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Dashboard Appearance</h2>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %>
|
|
<div class="col-span-4 sm:col-span-2">
|
|
<%= label(f, :theme, "Theme Selection",
|
|
class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300"
|
|
) %>
|
|
<%= select(f, :theme, Plausible.Themes.options(),
|
|
class:
|
|
"dark:bg-gray-900 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 cursor-pointer"
|
|
) %>
|
|
</div>
|
|
<%= submit("Save", class: "button mt-4") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-indigo-100 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-indigo-500">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Account settings</h2>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %>
|
|
<div class="my-4">
|
|
<%= label(f, :name, class: "block text-sm font-medium text-gray-700 dark:text-gray-300") %>
|
|
<div class="mt-1">
|
|
<%= text_input(f, :name,
|
|
class:
|
|
"shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800"
|
|
) %>
|
|
<%= error_tag(f, :name) %>
|
|
</div>
|
|
</div>
|
|
<div class="my-4">
|
|
<%= label(f, :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300") %>
|
|
<div class="mt-1">
|
|
<%= email_input(f, :email,
|
|
class:
|
|
"shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md"
|
|
) %>
|
|
<%= error_tag(f, :email) %>
|
|
</div>
|
|
</div>
|
|
<%= submit("Save changes", class: "button mt-4") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div
|
|
id="api-keys"
|
|
class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-indigo-100 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-indigo-500"
|
|
>
|
|
<h2 class="text-xl font-black dark:text-gray-100">API keys</h2>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<div class="flex flex-col mt-6">
|
|
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
|
<%= if Enum.any?(@user.api_keys) do %>
|
|
<div class="overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900">
|
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-100"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-100"
|
|
>
|
|
Key
|
|
</th>
|
|
<th scope="col" class="relative px-6 py-3">
|
|
<span class="sr-only">Revoke</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<%= for api_key <- @user.api_keys do %>
|
|
<tr class="bg-white dark:bg-gray-800">
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap">
|
|
<%= api_key.name %>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-100 whitespace-nowrap">
|
|
<%= api_key.key_prefix %><%= String.duplicate("*", 32 - 6) %>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
|
|
<%= button("Revoke",
|
|
to: "/settings/api-keys/#{api_key.id}",
|
|
class: "text-red-600 hover:text-red-900",
|
|
method: :delete,
|
|
"data-confirm":
|
|
"Are you sure you want to revoke this key? This action cannot be reversed."
|
|
) %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link("+ New API key", to: "/settings/api-keys/new", class: "button mt-4") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 mb-24 bg-white border-t-2 border-red-600 rounded rounded-t-none shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Delete account</h2>
|
|
</div>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<p class="dark:text-gray-100">
|
|
Deleting your account removes all sites and stats you've collected
|
|
</p>
|
|
|
|
<%= if @subscription && @subscription.status == "active" do %>
|
|
<span class="mt-6 bg-gray-300 button dark:bg-gray-600 hover:shadow-none hover:bg-gray-300">
|
|
Delete my account
|
|
</span>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
Your account cannot be deleted because you have an active subscription. If you want to delete your account, please cancel your subscription first.
|
|
</p>
|
|
<% else %>
|
|
<%= link("Delete my account",
|
|
to: "/me",
|
|
class:
|
|
"inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150",
|
|
method: "delete",
|
|
data: [
|
|
confirm:
|
|
"Deleting your account will also delete all the sites and data that you own. This action cannot be reversed. Are you sure?"
|
|
]
|
|
) %>
|
|
<% end %>
|
|
</div>
|