<%= if !Application.get_env(:plausible, :is_selfhost) do %> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-24 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-orange-200 "> <div class="flex justify-between"> <h2 class="text-xl font-black dark:text-gray-100">Subscription Plan</h2> <%= if @subscription do %> <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-bold leading-5 <%= subscription_colors(@subscription.status) %>"> <%= present_subscription_status(@subscription.status) %> </span> <% end %> </div> <div class="my-4 border-b border-gray-400"></div> <%= if @subscription && @subscription.status == "deleted" do %> <div class="p-2 bg-red-100 rounded-lg sm:p-3"> <div class="flex flex-wrap items-center justify-between"> <div class="flex items-center flex-1 w-0"> <svg class="w-6 h-6 text-red-800" viewBox="0 0 24 24" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 9V11M12 15H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0378 2.66667 10.268 4L3.33978 16C2.56998 17.3333 3.53223 19 5.07183 19Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="ml-3 font-medium text-red-800"> <%= if @subscription.next_bill_date && Timex.compare(@subscription.next_bill_date, Timex.today()) >= 0 do %> Your subscription is cancelled but you have access to your stats until <%= Timex.format!(@subscription.next_bill_date, "{Mshort} {D}, {YYYY}") %>. Upgrade below to make sure you don't lose access. <% else %> Your subscription is cancelled. Upgrade below to get access to your stats again. <% end %> </p> </div> </div> </div> <% end %> <div class="flex flex-col items-center justify-between mt-8 sm:flex-row sm:items-start"> <div class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900" style="width: 11.75rem;"> <h4 class="font-black dark:text-gray-100">Monthly quota</h4> <%= if @subscription do %> <div class="py-2 text-xl font-medium dark:text-gray-100"><%= subscription_quota(@subscription) %> pageviews</div> <%= case @subscription.status do %> <% "active" -> %> <%= link("Change plan", to: "/billing/change-plan", class: "text-sm text-indigo-500 font-medium") %> <% "past_due" -> %> <span class="text-sm font-medium text-gray-600 dark:text-gray-400" tooltip="Please update your billing details before changing plans">Change plan</span> <% _ -> %> <% end %> <% else %> <div class="py-2 text-xl font-medium dark:text-gray-100">Free trial</div> <%= link("Upgrade", to: "/billing/upgrade", class: "text-sm text-indigo-500 font-medium") %> <% end %> </div> <div class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900" style="width: 11.75rem;"> <h4 class="font-black dark:text-gray-100">Next bill amount</h4> <%= if @subscription && @subscription.status in ["active", "past_due"] do %> <div class="py-2 text-xl font-medium dark:text-gray-100"><%= PlausibleWeb.BillingView.present_currency(@subscription.currency_code) %><%= @subscription.next_bill_amount %></div> <%= if @subscription.update_url do %> <%= link("Update billing info", to: @subscription.update_url, class: "text-sm text-indigo-500 font-medium") %> <% end %> <% else %> <div class="py-2 text-xl font-medium dark:text-gray-100">---</div> <% end %> </div> <div class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900" style="width: 11.75rem;"> <h4 class="font-black dark:text-gray-100">Next bill date</h4> <%= if @subscription && @subscription.next_bill_date && @subscription.status in ["active", "past_due"] do %> <div class="py-2 text-xl font-medium dark:text-gray-100"><%= Timex.format!(@subscription.next_bill_date, "{Mshort} {D}, {YYYY}") %></div> <div class="text-sm font-medium text-gray-600 dark:text-gray-400">(<%= subscription_interval(@subscription) %> billing)</div> <% else %> <div class="py-2 text-xl font-medium dark:text-gray-100">---</div> <% end %> </div> </div> <h3 class="mt-8 text-xl font-bold dark:text-gray-100">Your usage</h3> <p class="mt-1 text-sm text-gray-500 leading-5 dark:text-gray-200">Last 30 days total usage across all of your sites</p> <div class="py-2"> <div class="flex flex-col"> <div class="-my-2 sm:-mx-6 lg:-mx-8"> <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <table class="min-w-full text-gray-900 divide-y divide-gray-200 dark:text-gray-100"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200"> <tr> <td class="py-4 text-sm whitespace-nowrap"> Pageviews </td> <td class="py-4 text-sm whitespace-nowrap"> <%= delimit_integer(@usage_pageviews) %> </td> </tr> <tr> <td class="py-4 text-sm whitespace-nowrap"> Custom events </td> <td class="py-4 text-sm whitespace-nowrap"> <%= delimit_integer(@usage_custom_events) %> </td> </tr> <tr> <td class="py-4 text-sm font-medium whitespace-nowrap"> Total billable pageviews </td> <td class="py-4 text-sm font-medium whitespace-nowrap"> <%= delimit_integer(@usage_pageviews + @usage_custom_events) %> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <%= cond do %> <% @subscription && @subscription.status in ["active", "past_due", "paused"] && @subscription.cancel_url -> %> <div class="mt-8"> <%= link("Cancel my subscription", to: @subscription.cancel_url, class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150") %> </div> <% true -> %> <div class="mt-8"> <%= link("Upgrade", to: "/billing/upgrade", class: "inline-block px-3 py-2 border border-transparent text-sm leading-4 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") %> </div> <% end %> </div> <%= case @invoices do %> <% {:error, :no_subscription} -> %> <% {:error, :request_failed} -> %> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800"> <h2 class="text-xl font-black dark:text-gray-100">Invoices</h2> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <p class="text-center text-black dark:text-gray-100 m-2"> Something went wrong </p> </div> <% invoice_list -> %> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-orange-200 rounded rounded-t-none shadow-md dark:bg-gray-800"> <h2 class="text-xl font-black dark:text-gray-100">Invoices</h2> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <table class="min-w-full divide-y divide-gray-200"> <thead> <tr> <th scope="col" class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> Date </th> <th scope="col" class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> Amount </th> <th scope="col" class="py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> Invoice </th> </tr> </thead> <%= for invoice <- format_invoices(invoice_list) do %> <tbody class="divide-y divide-gray-200"> <tr> <td class="py-4 text-sm text-gray-800 dark:text-gray-200 font-medium"> <%= invoice.date %> </td> <td class="py-4 text-sm text-gray-800 dark:text-gray-200"> <%= invoice.currency <> invoice.amount %> </td> <td class="py-4 text-sm text-indigo-500"> <%= link("Link", to: invoice.url, target: "_blank" ) %> </td> </tr> </tbody> <% end %> </table> </div> <% end %> <% end %> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-green-500 rounded rounded-t-none shadow-md dark:bg-gray-800"> <h2 class="text-xl font-black dark:text-gray-100">Dashboard Appearance</h2> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %> <div class="col-span-4 sm:col-span-2"> <%= label f, :theme, "Theme Selection", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %> <%= select f, :theme, Plausible.Themes.options(), class: "dark:bg-gray-900 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 cursor-pointer" %> </div> <%= submit "Save", class: "button mt-4" %> <% end %> </div> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-indigo-100 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-indigo-500"> <h2 class="text-xl font-black dark:text-gray-100">Account settings</h2> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %> <div class="my-4"> <%= label f, :name, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %> <div class="mt-1"> <%= text_input f, :name, class: "shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800" %> <%= error_tag f, :name %> </div> </div> <div class="my-4"> <%= label f, :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %> <div class="mt-1"> <%= email_input f, :email, class: "shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md" %> <%= error_tag f, :email %> </div> </div> <%= submit "Save changes", class: "button mt-4" %> <% end %> </div> <div id="api-keys" class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 bg-white border-t-2 border-indigo-100 rounded rounded-t-none shadow-md dark:bg-gray-800 dark:border-indigo-500"> <h2 class="text-xl font-black dark:text-gray-100">API keys</h2> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <div class="flex flex-col mt-6"> <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <%= if Enum.any?(@user.api_keys) do %> <div class="overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900"> <thead class="bg-gray-50 dark:bg-gray-900"> <tr> <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-100"> Name </th> <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-100"> Key </th> <th scope="col" class="relative px-6 py-3"> <span class="sr-only">Revoke</span> </th> </tr> </thead> <tbody> <%= for api_key <- @user.api_keys do %> <tr class="bg-white dark:bg-gray-800"> <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap"> <%= api_key.name %> </td> <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-100 whitespace-nowrap"> <%= api_key.key_prefix %><%= String.duplicate("*", 32 - 6) %> </td> <td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"> <%= button("Revoke", to: "/settings/api-keys/#{api_key.id}", class: "text-red-600 hover:text-red-900", method: :delete, "data-confirm": "Are you sure you want to revoke this key? This action cannot be reversed.") %> </td> </tr> <% end %> </tbody> </table> </div> <% end %> <%= link "+ New API key", to: "/settings/api-keys/new", class: "button mt-4" %> </div> </div> </div> </div> <div class="max-w-2xl px-8 pt-6 pb-8 mx-auto mt-16 mb-24 bg-white border-t-2 border-red-600 rounded rounded-t-none shadow-md dark:bg-gray-800"> <div class="flex items-center justify-between"> <h2 class="text-xl font-black dark:text-gray-100">Delete account</h2> </div> <div class="my-4 border-b border-gray-300 dark:border-gray-500"></div> <p class="dark:text-gray-100">Deleting your account removes all sites and stats you've collected</p> <%= if @subscription && @subscription.status == "active" do %> <span class="mt-6 bg-gray-300 button dark:bg-gray-600 hover:shadow-none hover:bg-gray-300">Delete my account</span> <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Your account cannot be deleted because you have an active subscription. If you want to delete your account, please cancel your subscription first.</p> <% else %> <%= link("Delete my account", to: "/me", class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150", method: "delete", data: [confirm: "Deleting your account will also delete all the sites and data that you own. This action cannot be reversed. Are you sure?"]) %> <% end %> </div>