Localize change plan page

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 =

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">

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>

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">

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 ->