diff --git a/lib/plausible/billing/plans.ex b/lib/plausible/billing/plans.ex
index 08eb6299cdf6e42ae04e601e737bfaf44033de23..fe4de594dc15cc9c279acc73956813efb2cebb60 100644
--- a/lib/plausible/billing/plans.ex
+++ b/lib/plausible/billing/plans.ex
@@ -3,7 +3,7 @@ defmodule Plausible.Billing.Plans do
%{limit: 150_000_000, yearly_product_id: "648089", yearly_cost: "$4800"}
]
- @v2_pricing_date ~D[2017-05-11]
+ @v2_pricing_date ~D[2021-05-11]
def plans_for(user) do
raw_plans =
diff --git a/lib/plausible_web/templates/billing/change_plan.html.eex b/lib/plausible_web/templates/billing/change_plan.html.eex
index 314bfcfa666c93301e4f10546ef9af72b4d20883..ff7d4d2530fec83ceaff8701bc02c798b11f1e4f 100644
--- a/lib/plausible_web/templates/billing/change_plan.html.eex
+++ b/lib/plausible_web/templates/billing/change_plan.html.eex
@@ -1,16 +1,13 @@
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
<script>
- window.plans = function() {
+ plans = function() {
return {
rawPlans: <%= raw Jason.encode!(Plausible.Billing.Plans.plans_for(@conn.assigns[:current_user])) %>,
+ localizedPlans: null,
volume: '10k',
billingCycle: 'monthly',
selectedPlanPrice() {
- var selectedPlan = this.rawPlans.find((plan) => plan.volume === this.volume)
- if (this.billingCycle === 'monthly'){
- return selectedPlan.monthly_cost
- } else {
- return selectedPlan.yearly_cost
- }
+ return this.priceFor(this.selectedPlanProductId())
},
selectedPlanProductId() {
var selectedPlan = this.rawPlans.find((plan) => plan.volume === this.volume)
@@ -19,6 +16,30 @@
} else {
return selectedPlan.yearly_product_id
}
+ },
+ priceFor(productId) {
+ var plan = this.localizedPlans.find(plan => plan.product_id === Number(productId))
+ var currency = {
+ 'USD': '$',
+ 'EUR': '€',
+ 'GBP': '£'
+ }[plan.currency]
+
+ return currency + plan.price.gross
+ },
+ fetchPlans() {
+ var productIds = []
+
+ this.rawPlans.forEach((plan) => {
+ productIds.push(plan.monthly_product_id)
+ productIds.push(plan.yearly_product_id)
+ })
+
+ fetchJsonp('https://checkout.paddle.com/api/2.0/prices?product_ids=' + productIds.join(','))
+ .then((res) => res.json())
+ .then((data) => {
+ this.localizedPlans = data.response.products
+ })
}
}
}
@@ -29,7 +50,7 @@
</div>
<div class="w-full max-w-lg px-4 mx-auto mt-4">
- <div 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 x-init="fetchPlans" x-data="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 pt-2 text-xl font-bold dark:text-gray-100">
Select your new plan
</div>
@@ -52,7 +73,7 @@
<div class="pt-6"></div>
- <div class="flex flex-col">
+ <template x-if="localizedPlans" class="flex flex-col">
<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">
@@ -68,13 +89,15 @@
</thead>
<tbody class="bg-white dark:bg-gray-800">
<%= for plan <- Plausible.Billing.Plans.plans_for(@conn.assigns[:current_user]) do %>
- <%= render("_plan_option.html", volume: PlausibleWeb.StatsView.large_number_format(plan[:limit]), monthly_price: plan[:monthly_cost], yearly_price: plan[:yearly_cost]) %>
+ <%= render("_plan_option.html", plan: plan) %>
<% end %>
</tbody>
</table>
</div>
</div>
- </div>
+ </template>
+
+ <div x-show="!localizedPlans" class="mx-auto my-56 loading sm"><div></div></div>
<div class="mt-6 text-right">
<span class="inline-flex rounded-md shadow-sm">
diff --git a/lib/plausible_web/templates/billing/change_plan_preview.html.eex b/lib/plausible_web/templates/billing/change_plan_preview.html.eex
index 55390b3c19c1bae85b2091a3164410a6380f80cc..8622e19aa281bafcd766dd254ac9d726682f9307 100644
--- a/lib/plausible_web/templates/billing/change_plan_preview.html.eex
+++ b/lib/plausible_web/templates/billing/change_plan_preview.html.eex
@@ -25,7 +25,7 @@
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="border-b border-gray-200">
- <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">$<%= @preview_info["immediate_payment"]["amount"] %></td>
+ <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100"><%= present_currency(@preview_info["immediate_payment"]["currency"]) %><%= @preview_info["immediate_payment"]["amount"] %></td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100"><%= present_date(@preview_info["immediate_payment"]["date"]) %></td>
</tr>
</tbody>
@@ -55,7 +55,7 @@
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="border-b border-gray-200">
- <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">$<%= @preview_info["next_payment"]["amount"] %></td>
+ <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100"><%= present_currency(@preview_info["immediate_payment"]["currency"]) %><%= @preview_info["next_payment"]["amount"] %></td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100"><%= present_date(@preview_info["next_payment"]["date"]) %></td>
</tr>
</tbody>
diff --git a/lib/plausible_web/templates/billing/upgrade.html.eex b/lib/plausible_web/templates/billing/upgrade.html.eex
index 4786798827f786d7d51a89125bdd92bdfdf019bd..0803a37d01db2abb394e73299c11e5660273add5 100644
--- a/lib/plausible_web/templates/billing/upgrade.html.eex
+++ b/lib/plausible_web/templates/billing/upgrade.html.eex
@@ -28,10 +28,9 @@
return currency + plan.price.gross
},
fetchPlans() {
- var rawPlans = <%= raw Jason.encode!(Plausible.Billing.Plans.plans_for(@user)) %>
var productIds = []
- rawPlans.forEach((plan) => {
+ this.rawPlans.forEach((plan) => {
productIds.push(plan.monthly_product_id)
productIds.push(plan.yearly_product_id)
})
@@ -97,7 +96,7 @@
<div x-show="!localizedPlans" class="mx-auto my-56 loading sm"><div></div></div>
<div class="mt-6 text-right">
- <div class="text-sm font-medium dark:text-gray-100">Due today: <template x-if="localizedPlans"><b x-text="selectedPlanPrice()">$6</b></template></div>
+ <div class="text-sm font-medium dark:text-gray-100">Due today: <template x-if="localizedPlans"><b x-text="selectedPlanPrice()"></b></template></div>
<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">
diff --git a/lib/plausible_web/views/billing_view.ex b/lib/plausible_web/views/billing_view.ex
index 19ea331875c5cc4b8bf1a9a7fd251119b1dd13a7..6a4abdd9ec594377b23015b0aee5ecc94d8083f5 100644
--- a/lib/plausible_web/views/billing_view.ex
+++ b/lib/plausible_web/views/billing_view.ex
@@ -18,6 +18,10 @@ defmodule PlausibleWeb.BillingView do
|> Timex.format!("{D} {Mshort} {YYYY}")
end
+ def present_currency("USD"), do: "$"
+ def present_currency("EUR"), do: "€"
+ def present_currency("GBP"), do: "£"
+
def reccommended_plan(usage) do
cond do
usage < 9000 ->