From e02377509c99288d39167b0eec50dfcd2ae1412d Mon Sep 17 00:00:00 2001
From: Uku Taht <uku.taht@gmail.com>
Date: Tue, 19 Jan 2021 10:36:02 +0200
Subject: [PATCH] Add 10m, 20m plan

---
 lib/plausible/billing/plans.ex                |  8 +-
 .../templates/billing/_plan_option.html.eex   |  7 ++
 .../templates/billing/change_plan.html.eex    | 90 +++++-------------
 .../templates/billing/upgrade.html.eex        | 92 ++++++-------------
 4 files changed, 64 insertions(+), 133 deletions(-)
 create mode 100644 lib/plausible_web/templates/billing/_plan_option.html.eex

diff --git a/lib/plausible/billing/plans.ex b/lib/plausible/billing/plans.ex
index d43e3dd36..ea5765e59 100644
--- a/lib/plausible/billing/plans.ex
+++ b/lib/plausible/billing/plans.ex
@@ -7,7 +7,9 @@ defmodule Plausible.Billing.Plans do
       "500k": %{product_id: "597487", due_now: "$27"},
       "1m": %{product_id: "597642", due_now: "$48"},
       "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: %{
       "10k": %{product_id: "572810", due_now: "$48"},
@@ -16,7 +18,9 @@ defmodule Plausible.Billing.Plans do
       "500k": %{product_id: "597488", due_now: "$216"},
       "1m": %{product_id: "597643", due_now: "$384"},
       "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"}
     }
   }
 
diff --git a/lib/plausible_web/templates/billing/_plan_option.html.eex b/lib/plausible_web/templates/billing/_plan_option.html.eex
new file mode 100644
index 000000000..c624b6be0
--- /dev/null
+++ b/lib/plausible_web/templates/billing/_plan_option.html.eex
@@ -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>
diff --git a/lib/plausible_web/templates/billing/change_plan.html.eex b/lib/plausible_web/templates/billing/change_plan.html.eex
index 25f05d48b..d5a61b345 100644
--- a/lib/plausible_web/templates/billing/change_plan.html.eex
+++ b/lib/plausible_web/templates/billing/change_plan.html.eex
@@ -6,24 +6,24 @@
   <h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1>
 </div>
 
-<div class="w-full max-w-lg px-4 mt-4 mx-auto">
-  <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 class="w-full max-w-lg px-4 mx-auto mt-4">
+  <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">
       Select your new plan
     </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
       next payment date could change. You can preview these changes before committing.
     </div>
 
     <div class="pt-8"></div>
 
-    <span class="relative z-0 inline-flex shadow-sm w-full">
-      <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">
+    <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>
-      <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
         <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%
@@ -34,84 +34,44 @@
     <div class="pt-6"></div>
 
     <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="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="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>
-                <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
                 </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
                 </th>
               </tr>
             </thead>
             <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'}">
-                <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '10k'}">10k</td>
-                <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '10k'}">
-                  <span x-show="billingCycle === 'monthly'">$6</span>
-                  <span x-show="billingCycle === 'yearly'">$4</span>
-                </td>
-              </tr>
-              <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'}">
-                <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '100k'}">100k</td>
-                <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>
+              <%= render("_plan_option.html", volume: "10k", monthly_price: "$6", yearly_price: "$4") %>
+              <%= render("_plan_option.html", volume: "100k", monthly_price: "$12", yearly_price: "$8") %>
+              <%= render("_plan_option.html", volume: "200k", monthly_price: "$18", yearly_price: "$12") %>
+              <%= render("_plan_option.html", volume: "500k", monthly_price: "$27", yearly_price: "$18") %>
+              <%= render("_plan_option.html", volume: "1m", monthly_price: "$48", yearly_price: "$32") %>
+              <%= render("_plan_option.html", volume: "2m", monthly_price: "$69", yearly_price: "$46") %>
+              <%= render("_plan_option.html", volume: "5m", monthly_price: "$99", yearly_price: "$69") %>
+              <%= render("_plan_option.html", volume: "10m", monthly_price: "$150", yearly_price: "$100") %>
+              <%= render("_plan_option.html", volume: "20m", monthly_price: "$225", yearly_price: "$150") %>
             </tbody>
           </table>
         </div>
       </div>
     </div>
 
-    <div class="text-right mt-6">
+    <div class="mt-6 text-right">
       <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">
-          <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>
+        <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="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
         </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">
-          <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>
+        <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="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
         </a>
       </span>
@@ -119,7 +79,7 @@
   </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") %>
 </div>
 
diff --git a/lib/plausible_web/templates/billing/upgrade.html.eex b/lib/plausible_web/templates/billing/upgrade.html.eex
index b62777261..52e489ce2 100644
--- a/lib/plausible_web/templates/billing/upgrade.html.eex
+++ b/lib/plausible_web/templates/billing/upgrade.html.eex
@@ -7,19 +7,19 @@
 </div>
 
 <div>
-  <div class="w-full max-w-4xl px-4 mt-4 mx-auto flex flex-col 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 class="flex flex-col w-full max-w-4xl px-4 mx-auto mt-4 md:flex-row">
+    <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">
         <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>
 
-      <span class="relative z-0 inline-flex shadow-sm w-full">
-        <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">
+      <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>
-        <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
           <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%
@@ -30,91 +30,51 @@
       <div class="pt-6"></div>
 
       <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="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="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>
-                  <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
                   </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
                   </th>
                 </tr>
               </thead>
               <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'}">
-                  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}">10k</td>
-                  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}">
-                    <span x-show="billingCycle === 'monthly'">$6</span>
-                    <span x-show="billingCycle === 'yearly'">$4</span>
-                  </td>
-                </tr>
-                <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'}">
-                  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '100k'}">100k</td>
-                  <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>
+              <%= render("_plan_option.html", volume: "10k", monthly_price: "$6", yearly_price: "$4") %>
+              <%= render("_plan_option.html", volume: "100k", monthly_price: "$12", yearly_price: "$8") %>
+              <%= render("_plan_option.html", volume: "200k", monthly_price: "$18", yearly_price: "$12") %>
+              <%= render("_plan_option.html", volume: "500k", monthly_price: "$27", yearly_price: "$18") %>
+              <%= render("_plan_option.html", volume: "1m", monthly_price: "$48", yearly_price: "$32") %>
+              <%= render("_plan_option.html", volume: "2m", monthly_price: "$69", yearly_price: "$46") %>
+              <%= render("_plan_option.html", volume: "5m", monthly_price: "$99", yearly_price: "$69") %>
+              <%= render("_plan_option.html", volume: "10m", monthly_price: "$150", yearly_price: "$100") %>
+              <%= render("_plan_option.html", volume: "20m", monthly_price: "$225", yearly_price: "$150") %>
               </tbody>
             </table>
           </div>
         </div>
       </div>
 
-      <div class="text-right mt-6">
-        <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="mt-6 text-right">
+        <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">
-          <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">
-            <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>
+          <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="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>
 
-    <div class="flex-1 pt-14 pl-8">
-      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+    <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>
-      <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 />
         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>
@@ -123,7 +83,7 @@
   </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") %>
 </div>