plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-27 17:23:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add 10m, 20m plan

Browse Source
This commit is contained in:
Uku Taht 2021-01-19 10:36:02 +02:00
parent 99a3582883
commit e02377509c
4 changed files with 64 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/plausible/billing/plans.ex
View File

@ -7,7 +7,9 @@ defmodule Plausible.Billing.Plans do
"500k": %{product_id: "597487", due_now: "$27"}, "500k": %{product_id: "597487", due_now: "$27"},
"1m": %{product_id: "597642", due_now: "$48"}, "1m": %{product_id: "597642", due_now: "$48"},
"2m": %{product_id: "597309", due_now: "$69"}, "2m": %{product_id: "597309", due_now: "$69"},
"5m": %{product_id: "597311", due_now: "$99"} "5m": %{product_id: "597311", due_now: "$99"},
"10m": %{product_id: "642352", due_now: "$150"},
"20m": %{product_id: "642355", due_now: "$225"}
}, },
yearly: %{ yearly: %{
"10k": %{product_id: "572810", due_now: "$48"}, "10k": %{product_id: "572810", due_now: "$48"},
@ -16,7 +18,9 @@ defmodule Plausible.Billing.Plans do
"500k": %{product_id: "597488", due_now: "$216"}, "500k": %{product_id: "597488", due_now: "$216"},
"1m": %{product_id: "597643", due_now: "$384"}, "1m": %{product_id: "597643", due_now: "$384"},
"2m": %{product_id: "597310", due_now: "$552"}, "2m": %{product_id: "597310", due_now: "$552"},
"5m": %{product_id: "597312", due_now: "$792"} "5m": %{product_id: "597312", due_now: "$792"},
"10m": %{product_id: "642354", due_now: "$1200"},
"20m": %{product_id: "642356", due_now: "$1800"}
} }
} }

7
lib/plausible_web/templates/billing/_plan_option.html.eex Normal file
View File

@ -0,0 +1,7 @@
<tr @click="volume = '<%= @volume %>'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '<%= @volume %>', 'border-b border-gray-200 cursor-pointer': volume !== '<%= @volume %>'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @volume %>'}"><%= @volume %></td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @volume %>'}">
<span x-show="billingCycle === 'monthly'"><%= @monthly_price %></span>
<span x-show="billingCycle === 'yearly'"><%= @yearly_price %></span>
</td>
</tr>

90
lib/plausible_web/templates/billing/change_plan.html.eex
View File

@ -6,24 +6,24 @@
<h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1> <h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1>
</div> </div>
<div class="w-full max-w-lg px-4 mt-4 mx-auto"> <div class="w-full max-w-lg px-4 mx-auto mt-4">
<div x-data="{volume: '10k', billingCycle: 'monthly'}" class="flex-1 bg-white dark:bg-gray-800 shadow-md rounded px-8 py-4 mb-4 mt-8"> <div x-data="{volume: '10k', billingCycle: 'monthly'}" class="flex-1 px-8 py-4 mt-8 mb-4 bg-white rounded shadow-md dark:bg-gray-800">
<div class="w-full pt-2 text-xl font-bold dark:text-gray-100"> <div class="w-full pt-2 text-xl font-bold dark:text-gray-100">
Select your new plan Select your new plan
</div> </div>
<div class="w-full text-gray-500 dark:text-gray-200 text-sm"> <div class="w-full text-sm text-gray-500 dark:text-gray-200">
Depending on which plan you choose, your card might be charged immediately and your Depending on which plan you choose, your card might be charged immediately and your
next payment date could change. You can preview these changes before committing. next payment date could change. You can preview these changes before committing.
</div> </div>
<div class="pt-8"></div> <div class="pt-8"></div>
<span class="relative z-0 inline-flex shadow-sm w-full"> <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 text-center px-4 py-2 rounded-l-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150"> <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 Monthly billing
</button> </button>
<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="-ml-px relative w-full text-center px-4 py-2 rounded-r-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150"> <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 Yearly billing
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-200 text-yellow-800 dark:text-yellow-900"> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-200 text-yellow-800 dark:text-yellow-900">
-33% -33%
@ -34,84 +34,44 @@
<div class="pt-6"></div> <div class="pt-6"></div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"> <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none"> <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"> <table class="min-w-full">
<thead> <thead>
<tr> <tr>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider"> <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 Monthly pageviews
</th> </th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider"> <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 per month Price per month
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white dark:bg-gray-800"> <tbody class="bg-white dark:bg-gray-800">
<tr @click="volume = '10k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '10k', 'border-b border-gray-200 cursor-pointer': volume !== '10k'}"> <%= render("_plan_option.html", volume: "10k", monthly_price: "$6", yearly_price: "$4") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '10k'}">10k</td> <%= render("_plan_option.html", volume: "100k", monthly_price: "$12", yearly_price: "$8") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '10k'}"> <%= render("_plan_option.html", volume: "200k", monthly_price: "$18", yearly_price: "$12") %>
<span x-show="billingCycle === 'monthly'">$6</span> <%= render("_plan_option.html", volume: "500k", monthly_price: "$27", yearly_price: "$18") %>
<span x-show="billingCycle === 'yearly'">$4</span> <%= render("_plan_option.html", volume: "1m", monthly_price: "$48", yearly_price: "$32") %>
</td> <%= render("_plan_option.html", volume: "2m", monthly_price: "$69", yearly_price: "$46") %>
</tr> <%= render("_plan_option.html", volume: "5m", monthly_price: "$99", yearly_price: "$69") %>
<tr @click="volume = '100k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '100k', 'border-b border-gray-200 cursor-pointer': volume !== '100k'}"> <%= render("_plan_option.html", volume: "10m", monthly_price: "$150", yearly_price: "$100") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '100k'}">100k</td> <%= render("_plan_option.html", volume: "20m", monthly_price: "$225", yearly_price: "$150") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '100k'}">
<span x-show="billingCycle === 'monthly'">$12</span>
<span x-show="billingCycle === 'yearly'">$8</span>
</td>
</tr>
<tr @click="volume = '200k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '200k', 'border-b border-gray-200 cursor-pointer': volume !== '200k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '200k'}">200k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '200k'}">
<span x-show="billingCycle === 'monthly'">$18</span>
<span x-show="billingCycle === 'yearly'">$12</span>
</td>
</tr>
<tr @click="volume = '500k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '500k', 'border-b border-gray-200 cursor-pointer': volume !== '500k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '500k'}">500k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '500k'}">
<span x-show="billingCycle === 'monthly'">$27</span>
<span x-show="billingCycle === 'yearly'">$18</span>
</td>
</tr>
<tr @click="volume = '1m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '1m', 'border-b border-gray-200 cursor-pointer': volume !== '1m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '1m'}">1m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '1m'}">
<span x-show="billingCycle === 'monthly'">$48</span>
<span x-show="billingCycle === 'yearly'">$32</span>
</td>
</tr>
<tr @click="volume = '2m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '2m', 'border-b border-gray-200 cursor-pointer': volume !== '1m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '2m'}">2m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '2m'}">
<span x-show="billingCycle === 'monthly'">$69</span>
<span x-show="billingCycle === 'yearly'">$46</span>
</td>
</tr>
<tr @click="volume = '5m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '5m', 'border-b border-gray-200 cursor-pointer': volume !== '1m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '5m'}">5m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '5m'}">
<span x-show="billingCycle === 'monthly'">$99</span>
<span x-show="billingCycle === 'yearly'">$66</span>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="text-right mt-6"> <div class="mt-6 text-right">
<span class="inline-flex rounded-md shadow-sm"> <span class="inline-flex rounded-md shadow-sm">
<a x-show="window.plans[billingCycle][volume].product_id !== '<%= @subscription.paddle_plan_id %>'" style="display: none;" :href="'/billing/change-plan/preview/' + window.plans[billingCycle][volume].product_id" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 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"> <a x-show="window.plans[billingCycle][volume].product_id !== '<%= @subscription.paddle_plan_id %>'" style="display: none;" :href="'/billing/change-plan/preview/' + window.plans[billingCycle][volume].product_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">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 inline 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> <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 Preview changes
</a> </a>
<a x-show="window.plans[billingCycle][volume].product_id === '<%= @subscription.paddle_plan_id %>'" style="display: none;" tooltip="Select a different plan to continue" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-400"> <a x-show="window.plans[billingCycle][volume].product_id === '<%= @subscription.paddle_plan_id %>'" style="display: none;" tooltip="Select a different plan to continue" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-400 border border-transparent leading-5 rounded-md">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 inline 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> <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 Preview changes
</a> </a>
</span> </span>
@ -119,7 +79,7 @@
</div> </div>
</div> </div>
<div class="text-center mt-8 dark:text-gray-100"> <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") %> Questions? Contact <%= link("support@plausible.io", to: "mailto: support@plausible.io", class: "text-indigo-500") %>
</div> </div>

92
lib/plausible_web/templates/billing/upgrade.html.eex
View File

@ -7,19 +7,19 @@
</div> </div>
<div> <div>
<div class="w-full max-w-4xl px-4 mt-4 mx-auto flex flex-col md:flex-row"> <div class="flex flex-col w-full max-w-4xl px-4 mx-auto mt-4 md:flex-row">
<div x-data="{planSize: '10k', billingCycle: 'monthly'}" class="flex-1 bg-white dark:bg-gray-800 shadow-md rounded px-8 py-4 mb-4 mt-8"> <div x-data="{volume: '10k', billingCycle: 'monthly'}" 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"> <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> <span>You've used <b><%= PlausibleWeb.AuthView.delimit_integer(@usage) %></b> billable pageviews in the last 30 days</span>
</div> </div>
<div class="pt-2"></div> <div class="pt-2"></div>
<span class="relative z-0 inline-flex shadow-sm w-full"> <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 text-center px-4 py-2 rounded-l-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150"> <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 Monthly billing
</button> </button>
<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="-ml-px relative w-full text-center px-4 py-2 rounded-r-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150"> <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 Yearly billing
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-200 text-yellow-800 dark:text-yellow-900"> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-200 text-yellow-800 dark:text-yellow-900">
-33% -33%
@ -30,91 +30,51 @@
<div class="pt-6"></div> <div class="pt-6"></div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"> <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none"> <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"> <table class="min-w-full">
<thead> <thead>
<tr> <tr>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider"> <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 Monthly pageviews
</th> </th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider"> <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 per month Price per month
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white dark:bg-gray-800"> <tbody class="bg-white dark:bg-gray-800">
<tr @click="planSize = '10k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '10k', 'border-b border-gray-200 cursor-pointer': planSize !== '10k'}"> <%= render("_plan_option.html", volume: "10k", monthly_price: "$6", yearly_price: "$4") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}">10k</td> <%= render("_plan_option.html", volume: "100k", monthly_price: "$12", yearly_price: "$8") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}"> <%= render("_plan_option.html", volume: "200k", monthly_price: "$18", yearly_price: "$12") %>
<span x-show="billingCycle === 'monthly'">$6</span> <%= render("_plan_option.html", volume: "500k", monthly_price: "$27", yearly_price: "$18") %>
<span x-show="billingCycle === 'yearly'">$4</span> <%= render("_plan_option.html", volume: "1m", monthly_price: "$48", yearly_price: "$32") %>
</td> <%= render("_plan_option.html", volume: "2m", monthly_price: "$69", yearly_price: "$46") %>
</tr> <%= render("_plan_option.html", volume: "5m", monthly_price: "$99", yearly_price: "$69") %>
<tr @click="planSize = '100k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '100k', 'border-b border-gray-200 cursor-pointer': planSize !== '100k'}"> <%= render("_plan_option.html", volume: "10m", monthly_price: "$150", yearly_price: "$100") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '100k'}">100k</td> <%= render("_plan_option.html", volume: "20m", monthly_price: "$225", yearly_price: "$150") %>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '100k'}">
<span x-show="billingCycle === 'monthly'">$12</span>
<span x-show="billingCycle === 'yearly'">$8</span>
</td>
</tr>
<tr @click="planSize = '200k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '200k', 'border-b border-gray-200 cursor-pointer': planSize !== '200k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '200k'}">200k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '200k'}">
<span x-show="billingCycle === 'monthly'">$18</span>
<span x-show="billingCycle === 'yearly'">$12</span>
</td>
</tr>
<tr @click="planSize = '500k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '500k', 'border-b border-gray-200 cursor-pointer': planSize !== '500k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '500k'}">500k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '500k'}">
<span x-show="billingCycle === 'monthly'">$27</span>
<span x-show="billingCycle === 'yearly'">$18</span>
</td>
</tr>
<tr @click="planSize = '1m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '1m', 'border-b border-gray-200 cursor-pointer': planSize !== '1m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '1m'}">1m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '1m'}">
<span x-show="billingCycle === 'monthly'">$48</span>
<span x-show="billingCycle === 'yearly'">$32</span>
</td>
</tr>
<tr @click="planSize = '2m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '2m', 'border-b border-gray-200 cursor-pointer': planSize !== '2m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '2m'}">2m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '2m'}">
<span x-show="billingCycle === 'monthly'">$69</span>
<span x-show="billingCycle === 'yearly'">$46</span>
</td>
</tr>
<tr @click="planSize = '5m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '5m', 'border-b border-gray-200 cursor-pointer': planSize !== '5m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '5m'}">5m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '5m'}">
<span x-show="billingCycle === 'monthly'">$99</span>
<span x-show="billingCycle === 'yearly'">$66</span>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="text-right mt-6"> <div class="mt-6 text-right">
<div class="mb-4 text-sm font-medium dark:text-gray-100">Due today: <b x-text="window.plans[billingCycle][planSize].due_now">$6</b></div> <div class="mb-4 text-sm font-medium dark:text-gray-100">Due today: <b x-text="window.plans[billingCycle][volume].due_now">$6</b></div>
<span class="inline-flex rounded-md shadow-sm"> <span class="inline-flex rounded-md shadow-sm">
<button type="button" data-theme="none" :data-product="window.plans[billingCycle][planSize].product_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 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 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"> <button type="button" data-theme="none" :data-product="window.plans[billingCycle][volume].product_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="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">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 inline 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> <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 Pay securely via Paddle
</button> </button>
</span> </span>
</div> </div>
</div> </div>
<div class="flex-1 pt-14 pl-8"> <div class="flex-1 pl-8 pt-14">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"> <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? What happens if I go over my page views limit?
</h3> </h3>
<div class="mt-2 text-base leading-6 text-gray-500 dark:text-gray-200"> <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 /> 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. 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> </div>
@ -123,7 +83,7 @@
</div> </div>
</div> </div>
<div class="text-center mt-8 dark:text-gray-100"> <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") %> Questions? Contact <%= link("support@plausible.io", to: "mailto: support@plausible.io", class: "text-indigo-500") %>
</div> </div>