mirror of
https://github.com/plausible/analytics.git
synced 2024-12-18 23:11:43 +03:00
69 lines
3.2 KiB
Elixir
69 lines
3.2 KiB
Elixir
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
|
|
<div class="mx-auto mt-6 text-center">
|
|
<h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1>
|
|
</div>
|
|
|
|
<script>
|
|
plan = function() {
|
|
return {
|
|
localizedPlan: null,
|
|
price() {
|
|
var currency = {
|
|
'USD': '$',
|
|
'EUR': '€',
|
|
'GBP': '£'
|
|
}[this.localizedPlan.currency]
|
|
|
|
return currency + this.localizedPlan.price.net
|
|
},
|
|
fetchPlan() {
|
|
fetchJsonp('https://checkout.paddle.com/api/2.0/prices?product_ids=<%= @plan.paddle_plan_id %>')
|
|
.then(res => res.json())
|
|
.then((data) => {
|
|
this.localizedPlan = data.response.products[0]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="w-full max-w-lg px-4 mx-auto mt-4">
|
|
<div x-init="fetchPlan()" x-data="window.plan()" class="flex-1 p-8 mt-8 bg-white rounded shadow-md dark:bg-gray-800">
|
|
<div x-show="!localizedPlan" class="mx-auto my-40 loading sm"><div></div></div>
|
|
<template x-if="localizedPlan">
|
|
<div>
|
|
<div class="w-full pb-4 dark:text-gray-100">
|
|
<span>We've prepared your account for an upgrade to custom limits outside the listed plans:</span>
|
|
</div>
|
|
|
|
<ul class="w-full py-4 dark:text-gray-100">
|
|
<li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.monthly_pageview_limit) %></b> monthly pageviews</li>
|
|
<li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.site_limit) %></b> sites</li>
|
|
<li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.hourly_api_request_limit) %></b> hourly api requests</li>
|
|
</ul>
|
|
|
|
<ul class="w-full py-4 dark:text-gray-100">
|
|
<span>The plan is priced at</span>
|
|
<template x-if="localizedPlan"><b x-text="price()"></b> </template>
|
|
<span>per <%= if @plan.billing_interval == :yearly, do: "year", else: "month" %>. On the next page, our payment provider will calculate the prorated amount that your card will be charged if you decide to upgrade now.</span>
|
|
</ul>
|
|
|
|
<div class="mt-6 text-left">
|
|
<span class="inline-flex w-full rounded-md shadow-sm">
|
|
<%= link(to: Routes.billing_path(@conn, :change_plan_preview, @plan.paddle_plan_id), class: "inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent leading-5 rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150 ") do %>
|
|
<svg fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mr-2"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
|
|
Preview changes
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center dark:text-gray-100">
|
|
Questions? Contact <%= link("support@plausible.io", to: "mailto:support@plausible.io", class: "text-indigo-500") %>
|
|
</div>
|
|
|
|
<%= render("_paddle_script.html") %>
|