[Donations] Adding donation tiers

app/assets/stylesheets/components/_cards.scss

@@ -58,7 +58,7 @@
   z-index: 999;
 }
 
-.draggable-source--is-dragging .card {
+.draggable-source--is-dragging .card, .draggable-source--is-dragging.card {
   opacity: 0.5;
 }
 

app/controllers/donation/tiers_controller.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+class Donation
+  class TiersController < ApplicationController
+    before_action :set_event, except: [:set_index]
+
+    def index
+      @tiers = @event.donation_tiers
+    end
+
+    def set_index
+      tier = DonationTier.find_by(id: params[:event_id])
+      authorize tier.event, :update?
+
+      index = params[:index]
+
+      # get all the organizer positions as an array
+      tiers =  tier.event.donation_tiers.order(:sort_index).to_a
+
+      return head status: :bad_request if index < 0 || index >= tiers.size
+
+      # switch the position *in the in-memory array*
+      tiers.delete tier
+      tiers.insert index, tier
+
+      # persist the sort order
+      ActiveRecord::Base.transaction do
+        tiers.each_with_index do |op, idx|
+          op.update(sort_index: idx)
+        end
+      end
+
+      render json: organizer_positions.pluck(:id)
+    end
+
+    def create
+      authorize @event, :update?
+
+      @tier = @event.donation_tiers.new(
+        name: "Untitled tier",
+        amount_cents: 1000,
+        description: "",
+        sort_index: @event.donation_tiers.maximum(:sort_index).to_i + 1
+      )
+      @tier.save!
+      redirect_back fallback_location: edit_event_path(@event.slug), flash: { success: "Donation tier created successfully." }
+    rescue ActiveRecord::RecordInvalid => e
+      redirect_back fallback_location: edit_event_path(@event.slug), flash: { error: e.message }
+    end
+
+    def update
+      authorize @event, :update?
+      params[:tiers]&.each do |id, tier_data|
+        tier = @event.donation_tiers.find_by(id: id)
+        next unless tier
+
+        tier.update(
+          name: tier_data[:name],
+          description: tier_data[:description],
+          amount_cents: (tier_data[:amount_cents].to_f * 100).to_i
+        )
+      end
+
+      render json: { success: true, message: "Donation tiers updated successfully." }
+    rescue ActiveRecord::RecordInvalid => e
+      redirect_back fallback_location: edit_event_path(@event.slug), flash: { error: e.message }
+    end
+
+    def destroy
+      authorize @event, :update?
+      @tier = @event.donation_tiers.find(params[:format])
+      @tier.destroy
+      redirect_back fallback_location: edit_event_path(@event.slug), flash: { success: "Donation tiers updated successfully." }
+    rescue ActiveRecord::RecordInvalid => e
+      redirect_back fallback_location: edit_event_path(@event.slug), flash: { error: e.message }
+    end
+
+    private
+
+    def set_event
+      @event = Event.where(slug: params[:event_id]).first
+      puts @event.inspect
+      render json: { error: "Event not found" }, status: :not_found unless @event
+    end
+
+  end
+
+end

app/controllers/events_controller.rb

@@ -950,6 +950,7 @@ def event_params
       :slug,
       :hidden,
       :donation_page_enabled,
+      :donation_tiers_enabled,
       :donation_page_message,
       :reimbursements_require_organizer_peer_review,
       :public_reimbursement_page_enabled,

app/javascript/controllers/donation_tier_sort_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus'
+import csrf from '../common/csrf'
+
+export default class extends Controller {
+  static values = {
+    positions: Array,
+  }
+
+  async sort({ detail: { oldIndex, newIndex } }) {
+    if (oldIndex == newIndex) return
+
+    const copy = this.positionsValue
+
+    const id = copy[oldIndex]
+
+    copy.splice(oldIndex, 1)
+    copy.splice(newIndex, 0, id)
+
+    this.positionsValue = copy
+
+    await fetch(`/${id}/donation/tiers/set_index`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': csrf(),
+      },
+      body: JSON.stringify({ index: newIndex }),
+    })
+  }
+}

app/javascript/controllers/sortable_controller.js

@@ -4,11 +4,13 @@ import { Sortable, Plugins, Draggable } from '@shopify/draggable'
 export default class extends Controller {
   static values = {
     appendTo: String,
+    handle: String,
   }
 
   connect() {
     this.sortable = new Sortable(this.element, {
       draggable: '.draggable',
+      handle: this.handleValue,
       mirror: {
         constrainDimensions: true,
         appendTo: this.appendToValue,

app/models/donation_tier.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: donation_tiers
+#
+#  id           :bigint           not null, primary key
+#  amount_cents :integer          not null
+#  deleted_at   :datetime
+#  description  :text
+#  name         :string           not null
+#  sort_index   :integer
+#  created_at   :datetime         not null
+#  updated_at   :datetime         not null
+#  event_id     :bigint           not null
+#
+# Indexes
+#
+#  index_donation_tiers_on_event_id  (event_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (event_id => events.id)
+#
+class DonationTier < ApplicationRecord
+  belongs_to :event
+
+  validates :name, :amount_cents, presence: true
+  validates :amount_cents, numericality: { only_integer: true, greater_than: 0 }
+
+  default_scope { order(sort_index: :asc) }
+
+  acts_as_paranoid
+
+end

app/models/event.rb

@@ -18,6 +18,7 @@
 #  donation_page_message                        :text
 #  donation_reply_to_email                      :text
 #  donation_thank_you_message                   :text
+#  donation_tiers_enabled                       :boolean          default(FALSE), not null
 #  financially_frozen                           :boolean          default(FALSE), not null
 #  hidden_at                                    :datetime
 #  holiday_features                             :boolean          default(TRUE), not null
@@ -257,6 +258,7 @@ class Event < ApplicationRecord
   has_many :donation_payouts, through: :donations, source: :payout
   has_many :recurring_donations
   has_one :donation_goal, dependent: :destroy, class_name: "Donation::Goal"
+  has_many :donation_tiers, -> { order(sort_index: :asc) }, dependent: :destroy
 
   has_many :lob_addresses
   has_many :checks, through: :lob_addresses

app/views/donations/_donation_form.html.erb

@@ -1,12 +1,14 @@
 <%= turbo_frame_tag :donation do %>
-  <ul class="tab-container max-width-1 mx-auto bg-transparent">
-      <li class="<%= "active" unless @monthly %>">
-          <%= link_to "One-time", start_donation_donations_path(@event), data: { turbo: true } %>
-      </li>
-      <li class="<%= "active" if @monthly %>">
-          <%= link_to "Monthly", start_donation_donations_path(@event, monthly: true), data: { turbo: true } %>
-      </li>
-  </ul>
+  <% unless @tier %>
+    <ul class="tab-container max-width-1 mx-auto bg-transparent">
+        <li class="<%= "active" unless @monthly %>">
+            <%= link_to "One-time", upsert_query_params(monthly: nil), data: { turbo: true } %>
+        </li>
+        <li class="<%= "active" if @monthly %>">
+            <%= link_to "Monthly", upsert_query_params(monthly: true), data: { turbo: true } %>
+        </li>
+    </ul>
+  <% end %>
 
   <%= form_with(model: @monthly ? [@event, @recurring_donation] : donation, local: true, url: (make_donation_donations_path unless @monthly),
                 class: "card mx-auto max-width-1 mb3", data: { turbo: true, turbo_action: "advance" }, html: { autocomplete: "off" }) do |form| %>
@@ -44,7 +46,7 @@
             return '0.00';
         }
     }">
-      <div class="field">
+      <div class="field <%= "hidden" if @tier %>">
         <% if @international %>
           <%= form.label :amount, "Donation amount (USD)" %>
         <% else %>
@@ -53,7 +55,7 @@
         <div class="flex items-center">
           <span class="bold muted shrink-none" style="width: 1rem;">$</span>
           <%= form.number_field :amount,
-                                value: (donation.amount.nil? ? nil : ("%.2f" % (donation.amount.to_f / 100))),
+                                value: @tier ? ("%.2f" % (@tier.amount_cents.to_f / 100)) : (donation.amount.nil? ? nil : ("%.2f" % (donation.amount.to_f / 100))),
                                 placeholder: @placeholder_amount,
                                 step: 0.01,
                                 min: 1, # Limitations placed by Stripe

app/views/donations/_donation_tiers.html.erb

@@ -0,0 +1,63 @@
+<% if @event.donation_tiers.size > 0 %>
+  <% if params[:tier_id] || params[:custom_amount] %>
+   <%= link_to upsert_query_params(tier_id: nil, custom_amount: nil), class: "mt-10 inline-flex -ml-2 items-center no-underline gap-2" do %>
+      <%= inline_icon "view-back" %>
+      Back
+    <% end %>
+
+    <div class="card max-w-sm w-full mx-auto border border-2 border-blue relative shadow-none mt-3 mb-5">
+      <div class="flex items-center justify-center absolute top-0 right-0 m-3 bg-blue rounded-full p-1 text-white">
+        <%= inline_icon "check-thin", size: 24 %>
+      </div>
+      <h2 class="mt-3 mb-4">
+        <%= @tier&.name || "Custom" %>
+      </h2>
+      <p class="text opacity-60 mb-3 flex-1 max-w-full break-words whitespace-normal">
+        <%= @tier&.description || "Pay a custom amount, one-time or recurring, to support #{@event.name}" %>
+      </p>
+      <% if @tier %>
+        <div class="flex items-end gap-1">
+          <span class="text-xl font-bold">
+            <%= render_money_short @tier.amount_cents %>
+          </span>
+          <span class="opacity-60">per month</span>
+        </div>
+
+        <button class="btn btn-primary mt-4 w-full" onclick="try {navigator.share({ text: 'Donate to <%= @event.name %>', url: window.location.href })} catch (e) { navigator.clipboard.writeText(window.location.href); alert('Copied URL to clipboard!'); }">
+          <%= inline_icon "share" %>
+          Share link
+        </button>
+      <% end %>
+    </div>
+  <% else %>
+    <h2 class="mt-8">Dontate</h2>
+    <div class="mt-4 px-2 -mx-2 flex gap-4 overflow-x-auto whitespace-nowrap pb-2 mx-auto">
+      <div class="card w-[250px] shrink-0 mb-8 flex flex-col">
+        <h3 class="mb-0 mt-0">
+          Custom
+        </h3>
+        <p class="text opacity-60 mb-2 flex-1 max-w-full break-words whitespace-normal">
+          Pay a custom amount, one-time or recurring, to support <%= @event.name %>
+        </p>
+        <div class="flex-1"></div>
+        <%= link_to upsert_query_params(custom_amount: true), class: "w-full btn btn-primary mt-auto" do %>
+          Continue
+        <% end %>
+      </div>
+      <% @event.donation_tiers.each do |donation_tier| %>
+        <div class="card w-[250px] shrink-0 mb-8 flex flex-col">
+          <h3 class="mb-0 mt-0">
+            <%= donation_tier.name %>
+          </h3>
+          <p class="text opacity-60 mb-3 flex-1 max-w-full break-words whitespace-normal">
+            <%= donation_tier.description %>
+          </p>
+          <div class="flex-1"></div>
+          <%= link_to upsert_query_params(tier_id: donation_tier.id, monthly: true), class: "w-full btn btn-primary mt-auto" do %>
+            <%= render_money_short donation_tier.amount_cents %><span class="font-bold text-base opacity-60">/month</span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/views/donations/start_donation.html.erb

@@ -1,6 +1,7 @@
 <% title "Give to " + @event.name %>
 <% page_sm %>
 <% no_app_shell %>
+<% @tier = @event.donation_tiers.find(params[:tier_id]) if params[:tier_id] %>
 
 <% content_for :head do %>
   <meta name="twitter:card" content="summary_large_image">
@@ -14,7 +15,13 @@
   <meta name="description" content="<%= description %>">
 <% end %>
 
-<%= render "events/landing/header" %>
+<%= render "events/landing/header" do %>
+  <% if @event.donation_goal.present? %>
+    <div class="shrink-0 w-full max-w-sm ml-auto">
+      <%= render "donations/donation_goal", donation: @donation %>
+    </div>
+  <% end %>
+<% end %>
 
 <% if @event.donation_page_message.present? %>
   <div class="container container--sm">
@@ -24,8 +31,10 @@
   </div>
 <% end %>
 
-<%= render "donations/donation_goal", donation: @donation %>
-<%= render "donations/donation_form", donation: @donation %>
+<%= render "donations/donation_tiers", donation: @donation %>
+<% if @event.donation_tiers.empty? || @tier || params[:custom_amount] %>
+  <%= render "donations/donation_form", donation: @donation %>
+<% end %>
 
 <% if @event.demo_mode? %>
   <div class="container container--sm">

app/views/events/landing/_header.html.erb

@@ -35,13 +35,20 @@
   <div class="donations-header-image py-20"
        <% if @has_header_image %> style="background: linear-gradient(rgba(23, 23, 29, 0.3), rgba(23, 23, 29, 0.9)),  url('<%= url_for @event.donation_header_image %>'); background-position: center; background-size: cover; background-repeat: no-repeat;"
        <% end %>>
-    <h1 class="mt-0 mb0 border-none center <%= "smoke drop-shadow-lg" if @has_header_image %>">
-      <span class="h3 caps block <%= @has_header_image ? "muted" : "secondary" %>"><%= defined?(lead) ? lead : "Donate to" %></span>
-      <div class="flex justify-center items-center mt1">
-        <%= render "donations/logo" %>
-        <span class="ml2"><%= @event.name %></span>
+    <div class="container flex flex-col sm:flex-row items-center <%= yield.present? ? "" : "justify-center" %>">
+      <div>
+        <h1 class="mt-0 mb0 border-none <%= yield.present? ? "" : "center" %> <%= "smoke drop-shadow-lg" if @has_header_image %>">
+          <span class="h3 caps block <%= @has_header_image ? "muted" : "secondary" %>"><%= defined?(lead) ? lead : "Donate to" %></span>
+          <div class="flex justify-center items-center mt1">
+            <%= render "donations/logo" %>
+            <span class="ml2"><%= @event.name %></span>
+          </div>
+        </h1>
       </div>
-    </h1>
+      <% if yield.present? %>
+        <%= yield %>
+      <% end %>
+    </div>
   </div>
 
   <% if @background.present? %>