Add "Show more" link to browse more than 12 invoices (#4211)

* Allow browsing more than 12 invoices

* Remove paddle/get_invoices limit

lib/plausible/billing/paddle_api.ex

@@ -108,7 +108,6 @@ defmodule Plausible.Billing.PaddleApi do
       Enum.sort(response, fn %{"payout_date" => d1}, %{"payout_date" => d2} ->
         Date.compare(Date.from_iso8601!(d1), Date.from_iso8601!(d2)) == :gt
       end)
-      |> Enum.take(12)
       |> then(&{:ok, &1})
     else
       error ->

lib/plausible_web/templates/auth/user_settings.html.heex

@@ -121,7 +121,10 @@
           </p>
         </div>
       <% {:ok, invoice_list} when is_list(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">
+        <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"
+          x-data="{showAll: false}"
+        >
           <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">
@@ -147,9 +150,9 @@
                 </th>
               </tr>
             </thead>
-            <%= for invoice <- format_invoices(invoice_list) do %>
-              <tbody class="divide-y divide-gray-200">
-                <tr>
+            <%= for {invoice, idx} <- Enum.with_index(format_invoices(invoice_list)) do %>
+              <tbody class={["divide-y divide-gray-200"]}>
+                <tr x-show={"showAll || #{idx} < 12"}>
                   <td class="py-4 text-sm text-gray-800 dark:text-gray-200 font-medium">
                     <%= invoice.date %>
                   </td>
@@ -160,6 +163,17 @@
                     <%= link("Link", to: invoice.url, target: "_blank") %>
                   </td>
                 </tr>
+                <tr :if={idx == 12 && length(invoice_list) > 12} x-show="!showAll">
+                  <td colspan="3" class="text-center">
+                    <button
+                      x-on:click="showAll = true"
+                      x-show="!showAll"
+                      class="mt-4 text-indigo-500 hover:text-indigo-600"
+                    >
+                      Show More
+                    </button>
+                  </td>
+                </tr>
               </tbody>
             <% end %>
           </table>