analytics/lib/plausible_web/templates/billing/upgrade.html.eex

129 lines
6.7 KiB
Elixir
Raw Normal View History

2021-05-13 11:59:33 +03:00
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
<script>
2021-05-13 11:59:33 +03:00
plans = function() {
return {
rawPlans: <%= raw Jason.encode!(Plausible.Billing.Plans.plans_for(@user)) %>,
2021-05-13 11:59:33 +03:00
localizedPlans: null,
volume: '10k',
billingCycle: 'monthly',
selectedPlanPrice() {
2021-05-13 11:59:33 +03:00
return this.priceFor(this.selectedPlanProductId())
},
selectedPlanProductId() {
var selectedPlan = this.rawPlans.find((plan) => plan.volume === this.volume)
if (this.billingCycle === 'monthly'){
return selectedPlan.monthly_product_id
} else {
return selectedPlan.yearly_product_id
}
2021-05-13 11:59:33 +03:00
},
priceFor(productId) {
var plan = this.localizedPlans.find(plan => plan.product_id === Number(productId))
var currency = {
'USD': '$',
'EUR': '',
'GBP': '£'
}[plan.currency]
2021-05-14 10:50:56 +03:00
return currency + plan.price.net
2021-05-13 11:59:33 +03:00
},
fetchPlans() {
var productIds = []
2021-05-13 12:16:31 +03:00
this.rawPlans.forEach((plan) => {
2021-05-13 11:59:33 +03:00
productIds.push(plan.monthly_product_id)
productIds.push(plan.yearly_product_id)
})
var checkoutDomain = '<%= Plausible.Billing.PaddleApi.checkout_domain() %>'
fetchJsonp(checkoutDomain + '/api/2.0/prices?product_ids=' + productIds.join(','))
2021-05-13 11:59:33 +03:00
.then((res) => res.json())
.then((data) => {
this.localizedPlans = data.response.products
})
}
}
}
</script>
2019-09-02 14:29:19 +03:00
<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>
2021-01-19 11:36:02 +03:00
<div class="flex flex-col w-full max-w-4xl px-4 mx-auto mt-4 md:flex-row">
2021-05-13 11:59:33 +03:00
<div x-init="fetchPlans()" x-data="window.plans()" class="flex-1 px-8 py-4 mt-8 mb-4 bg-white rounded shadow-md dark:bg-gray-800">
<div class="w-full py-4 dark:text-gray-100">
<span>You've used <b><%= PlausibleWeb.AuthView.delimit_integer(@usage) %></b> billable pageviews in the last 30 days</span>
</div>
<div class="pt-2"></div>
2019-09-02 14:29:19 +03:00
2021-01-19 11:36:02 +03:00
<span class="relative z-0 inline-flex w-full shadow-sm">
<button type="button" @click="billingCycle = 'monthly'" :class="{'bg-indigo-600 text-white border-indigo-600': billingCycle === 'monthly', 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 border-gray-300 dark:border-gray-500': billingCycle === 'yearly'}" class="relative w-full px-4 py-2 text-sm font-medium text-center border rounded-l-md leading-5 focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150">
Monthly billing
</button>
2021-01-19 11:36:02 +03:00
<button type="button" @click="billingCycle = 'yearly'" :class="{'bg-indigo-600 text-white border-indigo-600': billingCycle === 'yearly', 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 border-gray-300 dark:border-gray-500': billingCycle === 'monthly'}" class="relative w-full px-4 py-2 -ml-px text-sm font-medium text-center border rounded-r-md leading-5 focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150">
Yearly billing
</button>
</span>
<div class="pt-6"></div>
2021-05-13 11:59:33 +03:00
<template x-if="localizedPlans" class="flex flex-col">
2021-01-19 11:36:02 +03:00
<div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg dark:border-t dark:border-l dark:border-r dark:shadow-none">
<table class="min-w-full">
<thead>
<tr>
2021-01-19 11:36:02 +03:00
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200 dark:bg-gray-900 leading-4 dark:text-gray-200">
Monthly pageviews
</th>
2021-01-19 11:36:02 +03:00
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200 dark:bg-gray-900 leading-4 dark:text-gray-200">
Price
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<%= for plan <- Plausible.Billing.Plans.plans_for(@user) do %>
2021-05-13 11:59:33 +03:00
<%= render("_plan_option.html", plan: plan) %>
<% end %>
</tbody>
</table>
</div>
</div>
2021-05-13 11:59:33 +03:00
</template>
<div x-show="!localizedPlans" class="mx-auto my-56 loading sm"><div></div></div>
2021-01-19 11:36:02 +03:00
<div class="mt-6 text-right">
2021-05-13 12:16:31 +03:00
<div class="text-sm font-medium dark:text-gray-100">Due today: <template x-if="localizedPlans"><b x-text="selectedPlanPrice()"></b></template></div>
2021-05-12 14:07:20 +03:00
<div class="mb-4 text-xs font-medium dark:text-gray-100">+ VAT if applicable</div>
<span class="inline-flex rounded-md shadow-sm">
<button type="button" data-theme="none" :data-product="selectedPlanProductId()" data-email="<%= @conn.assigns[:current_user].email %>" data-disable-logout="true" data-passthrough="<%= @conn.assigns[:current_user].id %>" data-success="/billing/upgrade-success" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent paddle_button 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">
2021-01-19 11:36:02 +03:00
<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>
</span>
</div>
</div>
2019-09-02 14:29:19 +03:00
2021-01-19 11:36:02 +03:00
<div class="flex-1 pl-8 pt-14">
<h3 class="text-lg font-medium text-gray-900 leading-6 dark:text-gray-100">
What happens if I go over my page views limit?
</h3>
2021-01-19 11:36:02 +03:00
<div class="mt-2 text-base text-gray-500 leading-6 dark:text-gray-200">
You will never be charged extra for an occasional traffic spike. There are no surprise fees and your card will never be charged unexpectedly.<br /><br />
If your page views exceed your plan for two consecutive months, we will contact you to upgrade to a higher plan for the following month. You will have two weeks to make a decision. You can decide to continue with a higher plan or to cancel your account at that point.
</div>
2019-09-02 14:29:19 +03:00
</div>
</div>
2019-09-02 14:29:19 +03:00
</div>
2021-01-19 11:36:02 +03:00
<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") %>