mirror of
https://github.com/plausible/analytics.git
synced 2024-12-21 16:41:31 +03:00
68 lines
2.9 KiB
Elixir
68 lines
2.9 KiB
Elixir
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
|
|
<script>
|
|
plan = function() {
|
|
return {
|
|
localizedPlan: null,
|
|
price() {
|
|
var currency = {
|
|
'USD': '$',
|
|
'EUR': '€',
|
|
'GBP': '£'
|
|
}[this.localizedPlan.currency]
|
|
|
|
return currency + this.localizedPlan.price.net
|
|
},
|
|
fetchPlan() {
|
|
fetchJsonp('<%= Plausible.Billing.PaddleApi.checkout_domain() %>/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="mx-auto mt-6 text-center">
|
|
<h1 class="text-3xl font-black dark:text-gray-100">Upgrade your free trial</h1>
|
|
</div>
|
|
|
|
<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-32 loading sm"><div></div></div>
|
|
<template x-if="localizedPlan">
|
|
<div>
|
|
<div class="w-full pb-4 dark:text-gray-100">
|
|
<span>We've prepared a custom enterprise plan for your account with the following limits:</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" %> + VAT if applicable. Click the button below to upgrade.
|
|
</ul>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<div class="mt-6">
|
|
<button type="button" data-theme="none" data-product="<%= @plan.paddle_plan_id %>" data-email="<%= @conn.assigns[:current_user].email %>" data-disable-logout="true" data-passthrough="<%= @conn.assigns[:current_user].id %>" data-success="/billing/upgrade-success" class="paddle_button items-center button">
|
|
<svg fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mr-2"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
|
|
Pay securely via Paddle
|
|
</button>
|
|
</div>
|
|
</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") %>
|