Implement bitcoin donations via BTCPay

app/views/contributions/donations/_bitcoin.html.erb

@@ -0,0 +1,36 @@
+<div class="rounded-lg p-6 bg-emerald-50 hover:bg-emerald-100 transition-colors">
+  <h3 class="mb-4 text-lg font-bold">Donate directly with Bitcoin</h3>
+  <p class="mb-6">
+    Open-source money for open-source services.
+  </p>
+  <div data-controller="modal" data-action="keydown.esc->modal#close">
+    <button class="btn-md btn-emerald w-full lg:w-1/2" data-action="click->modal#open">
+      Donate
+    </button>
+    <%= render ModalComponent.new(show_close_button: false) do %>
+      <div>
+        <h3>Your contribution</h3>
+
+        <%= form_with(url: contributions_donations_url, method: :post) do |f| %>
+          <%= f.hidden_field :donation_method, value: "btcpay" %>
+
+          <div class="mb-6 flex gap-2">
+            <%= f.number_field :amount, required: true %>
+            <%= f.select :currency, options_for_select([
+                  ["EUR", "EUR"], ["USD", "USD"], ["sats", "sats"]
+                ], selected: "EUR"), class: "flex-none" %>
+          </div>
+
+          <%= render FormElements::FieldsetComponent.new(tag: "div", title: "Public name") do %>
+            <%= f.text_field :public_name, class: "w-full", placeholder: "Anonymous"  %>
+          <% end %>
+
+          <p class="mt-12">
+            <%= f.submit 'Continue', data: { turbo: false },
+                  class: "btn-md btn-blue w-full" %>
+          </p>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/contributions/donations/_list.html.erb

@@ -1,8 +1,12 @@
 <ul class="list-none">
   <% donations.each do |donation| %>
-    <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
+    <li class="mb-8 grid gap-y-2 grid-cols-2 items-center">
       <h3 class="mb-0">
+        <% if donation.completed? %>
         <%= donation.paid_at.strftime("%B %d, %Y") %>
+        <% else %>
+        <%= donation.created_at.strftime("%B %d, %Y") %>
+        <% end %>
       </h3>
       <p class="row-span-2 font-mono text-right mb-0">
         <span class="text-xl">
@@ -10,14 +14,22 @@
         </span>
         <br>
         <span class="text-sm text-gray-500">
-          (~ <%= number_to_currency donation.amount_eur / 100, unit: "" %> EUR)
+          (~ <%= number_to_currency donation.fiat_amount.to_f / 100, unit: "" %> <%= donation.fiat_currency %>)
         </span>
       </p>
-      <p class="mb-0">
-        <% if donation.public_name.present? %>
-          Public name: <%= donation.public_name %>
+      <p class="mb-0 text-gray-500">
+        <% if donation.processing? %>
+          Waiting for confirmations
+          <% if donation.donation_method == "btcpay" %>
+            <%= link_to "check status", btcpay_checkout_url(donation.btcpay_invoice_id),
+                  class: "ml-2 btn-sm btn-gray" %>
+          <% end %>
         <% else %>
-          Anonymous
+          <% if donation.public_name.present? %>
+            As: <%= donation.public_name %>
+          <% else %>
+            Anonymous
+          <% end %>
         <% end %>
       </p>
     </li>

app/views/contributions/donations/_opencollective.html.erb

@@ -0,0 +1,6 @@
+<div class="rounded-lg p-6 bg-zinc-100 hover:bg-zinc-200 transition-colors">
+  <h3 class="mb-4 text-lg font-bold text-gray-500">Donate via OpenCollective</h3>
+  <p class="text-gray-600 text-gray-500">
+    Coming soon.
+  </p>
+</div>

app/views/contributions/donations/index.html.erb

@@ -6,23 +6,35 @@
       Your financial contributions to the development and upkeep of Kosmos
       software and services.
     </p>
-    <% if @donations.any? %>
-      <%= render partial: "contributions/donations/list",
-                 locals: { donations: @donations } %>
-    <% else %>
-      <div class="text-center">
-        <p class="mt-8 mb-12 inline-flex align-center items-center">
-          <%= image_tag("/img/illustrations/undraw_savings_re_eq4w.svg", class: 'h-48') %>
-        </p>
-        <h3>
-          No donations yet
-        </h3>
-        <p class="text-gray-500">
-          The donation process is not automated yet.<br>Please
-          <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
-          if you'd like to contribute this way right now.
-        </p>
-      </div>
-    <% end %>
   </section>
+
+  <section class="donation-methods">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+      <% if @donation_methods.include?(:btcpay) ||
+            @donation_methods.include?(:lndhub) %>
+        <%= render partial: "contributions/donations/bitcoin", locals: {
+          donation_methods: @donation_methods, lndhub_balance: @balance
+        } %>
+      <% end %>
+      <% if @donation_methods.include?(:opencollective) %>
+        <%= render partial: "contributions/donations/opencollective" %>
+      <% end %>
+    </div>
+  </section>
+
+  <% if @donations_pending.any? %>
+  <section class="donation-list">
+    <h2>Pending</h2>
+    <%= render partial: "contributions/donations/list",
+               locals: { donations: @donations_pending } %>
+  </section>
+  <% end %>
+
+  <% if @donations_completed.any? %>
+  <section class="donation-list">
+    <h2>Past contributions</h2>
+    <%= render partial: "contributions/donations/list",
+               locals: { donations: @donations_completed } %>
+  </section>
+  <% end %>
 <% end %>