<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script> <div class="mx-auto mt-6 text-center"> <h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1> </div> <script> plan = function() { return { localizedPlan: null, price() { var currency = { 'USD': '$', 'EUR': '€', 'GBP': '£' }[this.localizedPlan.currency] return currency + this.localizedPlan.price.net }, fetchPlan() { fetchJsonp('https://checkout.paddle.com/api/2.0/prices?product_ids=<%= @plan.paddle_plan_id %>') .then(res => res.json()) .then((data) => { this.localizedPlan = data.response.products[0] }) } } } </script> <div class="w-full max-w-lg px-4 mx-auto mt-4"> <div x-init="fetchPlan()" x-data="window.plan()" class="flex-1 p-8 mt-8 bg-white rounded shadow-md dark:bg-gray-800"> <div x-show="!localizedPlan" class="mx-auto my-40 loading sm"><div></div></div> <template x-if="localizedPlan"> <div> <div class="w-full pb-4 dark:text-gray-100"> <span>We've prepared your account for an upgrade to custom limits outside the listed plans:</span> </div> <ul class="w-full py-4 dark:text-gray-100"> <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.monthly_pageview_limit) %></b> monthly pageviews</li> <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.site_limit) %></b> sites</li> <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.hourly_api_request_limit) %></b> hourly api requests</li> </ul> <ul class="w-full py-4 dark:text-gray-100"> <span>The plan is priced at</span> <template x-if="localizedPlan"><b x-text="price()"></b> </template> <span>per <%= if @plan.billing_interval == :yearly, do: "year", else: "month" %>. On the next page, our payment provider will calculate the prorated amount that your card will be charged if you decide to upgrade now.</span> </ul> <div class="mt-6 text-left"> <span class="inline-flex w-full rounded-md shadow-sm"> <%= link(to: Routes.billing_path(@conn, :change_plan_preview, @plan.paddle_plan_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 ") do %> <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 <% end %> </span> </div> </div> </template> </div> </div> <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") %>