add subscription payment drawer

Author: zcesur

lib/algora/accounts/schemas/user.ex

@@ -40,6 +40,7 @@ defmodule Algora.Accounts.User do
     field :priority, :integer, default: 0
     field :fee_pct, :integer, default: 9
     field :fee_pct_prev, :integer, default: 9
+    field :subscription_price, Money
     field :seeded, :boolean, default: false
     field :activated, :boolean, default: false
     field :max_open_attempts, :integer, default: 3

lib/algora/jobs/jobs.ex

@@ -11,13 +11,10 @@ defmodule Algora.Jobs do
   alias Algora.Payments
   alias Algora.Payments.Transaction
   alias Algora.Repo
-  alias Algora.Settings
   alias Algora.Util
 
   require Logger
 
-  def price, do: Money.new(:USD, 2_270, no_fraction_if_integer: true)
-
   def list_jobs(opts \\ []) do
     JobPosting
     |> where([j], j.status == :active)
@@ -51,16 +48,18 @@ defmodule Algora.Jobs do
   defp maybe_limit(query, nil), do: query
   defp maybe_limit(query, limit), do: limit(query, ^limit)
 
-  @spec create_payment_session(job_posting: JobPosting.t()) ::
+  @spec create_payment_session(JobPosting.t(), Money.t()) ::
           {:ok, String.t()} | {:error, atom()}
-  def create_payment_session(job_posting) do
-    {amount, description} = get_job_price_and_description(job_posting.user_id)
-
+  def create_payment_session(job_posting, amount) do
     line_items = [
       %LineItem{
         amount: amount,
         title: "Job posting - #{job_posting.company_name}",
-        description: description
+        description: "Annual subscription"
+      },
+      %LineItem{
+        amount: Money.mult!(amount, Decimal.new("0.04")),
+        title: "Processing fee (4%)"
       }
     ]
 
@@ -144,15 +143,4 @@ defmodule Algora.Jobs do
     |> preload(:user)
     |> Repo.all()
   end
-
-  def get_job_price_and_description(org_id) do
-    case Settings.get_org_job_settings(org_id) do
-      %{amount: amount, description: description} ->
-        {amount, description}
-
-      nil ->
-        # default values
-        {price(), "1 month"}
-    end
-  end
 end

lib/algora/settings/settings.ex

@@ -164,19 +164,4 @@ defmodule Algora.Settings do
   def set_featured_transactions(ids) when is_list(ids) do
     set("featured_transactions", %{"ids" => ids})
   end
-
-  def get_org_job_settings(org_id) when is_binary(org_id) do
-    case get("org_job_settings:#{org_id}") do
-      %{"amount" => amount, "description" => description} when is_binary(description) ->
-        %{amount: Algora.MoneyUtils.deserialize(amount), description: description}
-
-      _ ->
-        nil
-    end
-  end
-
-  def set_org_job_settings(org_id, amount, description)
-      when is_binary(org_id) and is_binary(description) and is_struct(amount, Money) do
-    set("org_job_settings:#{org_id}", %{"amount" => Algora.MoneyUtils.serialize(amount), "description" => description})
-  end
 end

lib/algora_web/live/org/job_live.ex

@@ -32,6 +32,8 @@ defmodule AlgoraWeb.Org.JobLive do
          |> assign(:job, job)
          |> assign(:show_import_drawer, false)
          |> assign(:show_share_drawer, false)
+         |> assign(:show_payment_drawer, false)
+         |> assign(:payment_form, to_form(%{"payment_type" => "stripe"}, as: :payment))
          |> assign(:current_tab, tab)
          |> assign(:bounty_form, to_form(BountyForm.changeset(%BountyForm{}, %{})))
          |> assign(:tip_form, to_form(TipForm.changeset(%TipForm{}, %{})))
@@ -55,12 +57,6 @@ defmodule AlgoraWeb.Org.JobLive do
     {:ok, push_navigate(socket, to: ~p"/#{handle}/jobs/#{id}/applicants")}
   end
 
-  @impl true
-  def handle_params(%{"tab" => "activate", "org_handle" => handle, "id" => id}, _uri, socket) do
-    Algora.Admin.alert("Activation request received for #{AlgoraWeb.Endpoint.url()}/#{handle}/jobs/#{id}", :info)
-    {:noreply, redirect(socket, external: AlgoraWeb.Constants.get(:calendar_url))}
-  end
-
   @impl true
   def handle_params(%{"tab" => tab}, _uri, socket) do
     {:noreply, assign(socket, :current_tab, tab)}
@@ -354,7 +350,7 @@ defmodule AlgoraWeb.Org.JobLive do
               </div>
               <div class="flex flex-col justify-center items-center text-center">
                 <.button
-                  patch={~p"/#{@current_org.handle}/jobs/#{@job.id}/activate"}
+                  phx-click="toggle_payment_drawer"
                   variant="none"
                   class="group bg-emerald-900/10 text-emerald-300 transition-colors duration-75 hover:bg-emerald-800/10 hover:text-emerald-300 hover:drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-emerald-400/40 hover:border-emerald-400/50 focus:border-emerald-400/50 h-[8rem]"
                   size="xl"
@@ -475,12 +471,17 @@ defmodule AlgoraWeb.Org.JobLive do
         </div>
       </.drawer_content>
     </.drawer>
+
+    {payment_drawer(assigns)}
     """
   end
 
   @impl true
   def handle_event("activate_subscription", _params, socket) do
-    case Jobs.create_payment_session(%{socket.assigns.job | email: socket.assigns.current_user.email}) do
+    case Jobs.create_payment_session(
+           %{socket.assigns.job | email: socket.assigns.current_user.email},
+           socket.assigns.current_org.subscription_price
+         ) do
       {:ok, url} ->
         Algora.Admin.alert("Payment session created for job posting: #{socket.assigns.job.company_name}", :info)
         {:noreply, redirect(socket, external: url)}
@@ -491,6 +492,16 @@ defmodule AlgoraWeb.Org.JobLive do
     end
   end
 
+  @impl true
+  def handle_event("toggle_payment_drawer", _, socket) do
+    socket =
+      if socket.assigns.current_org.subscription_price,
+        do: assign(socket, :show_payment_drawer, !socket.assigns.show_payment_drawer),
+        else: redirect(socket, external: AlgoraWeb.Constants.get(:calendar_url))
+
+    {:noreply, socket}
+  end
+
   @impl true
   def handle_event("toggle_import_drawer", _, socket) do
     {:noreply, assign(socket, :show_import_drawer, !socket.assigns.show_import_drawer)}
@@ -617,6 +628,35 @@ defmodule AlgoraWeb.Org.JobLive do
     {:noreply, assign(socket, :show_share_drawer, false)}
   end
 
+  @impl true
+  def handle_event("close_payment_drawer", _, socket) do
+    {:noreply, assign(socket, :show_payment_drawer, false)}
+  end
+
+  @impl true
+  def handle_event("process_payment", %{"payment" => %{"payment_type" => "stripe"}}, socket) do
+    # Mock data for demonstration
+    case Jobs.create_payment_session(
+           %{socket.assigns.job | email: socket.assigns.current_user.email},
+           socket.assigns.current_org.subscription_price
+         ) do
+      {:ok, url} ->
+        {:noreply, redirect(socket, external: url)}
+
+      {:error, _reason} ->
+        {:noreply, put_flash(socket, :error, "Something went wrong. Please try again.")}
+    end
+  end
+
+  @impl true
+  def handle_event("process_payment", %{"payment" => %{"payment_type" => "wire"}}, socket) do
+    # Mock successful wire initiation
+    {:noreply,
+     socket
+     |> put_flash(:info, "Wire transfer details have been sent to your email")
+     |> assign(:show_payment_drawer, false)}
+  end
+
   @impl true
   def handle_event(_event, _params, socket) do
     {:noreply, socket}
@@ -1429,4 +1469,145 @@ defmodule AlgoraWeb.Org.JobLive do
     </.button>
     """
   end
+
+  defp payment_drawer(assigns) do
+    ~H"""
+    <.drawer show={@show_payment_drawer} on_cancel={JS.push("close_payment_drawer")} direction="right">
+      <.drawer_header>
+        <.drawer_title>Activate Subscription</.drawer_title>
+        <.drawer_description>
+          Choose your preferred payment method to activate your annual subscription
+        </.drawer_description>
+      </.drawer_header>
+
+      <.drawer_content :if={@current_org.subscription_price} class="mt-4">
+        <.form for={@payment_form} phx-submit="process_payment">
+          <div class="space-y-6">
+            <div class="grid grid-cols-2 gap-4" phx-update="ignore" id="payment-form-tabs">
+              <%= for {label, value} <- [{"Stripe", "stripe"}, {"Wire Transfer", "wire"}] do %>
+                <label class={[
+                  "group relative flex cursor-pointer rounded-lg px-3 py-2 shadow-sm focus:outline-none",
+                  "border-2 bg-background transition-all duration-200 hover:border-primary hover:bg-primary/10",
+                  "border-border has-[:checked]:border-primary has-[:checked]:bg-primary/10"
+                ]}>
+                  <.input
+                    type="radio"
+                    name="payment[payment_type]"
+                    checked={@payment_form[:payment_type].value == value}
+                    value={value}
+                    class="sr-only"
+                    phx-click={
+                      %JS{}
+                      |> JS.hide(to: "#payment-details [data-tab]:not([data-tab=#{value}])")
+                      |> JS.show(to: "#payment-details [data-tab=#{value}]")
+                    }
+                  />
+                  <span class="flex flex-1 items-center justify-between">
+                    <span class="text-sm font-medium">{label}</span>
+                    <.icon
+                      name="tabler-check"
+                      class="invisible size-5 text-primary group-has-[:checked]:visible"
+                    />
+                  </span>
+                </label>
+              <% end %>
+            </div>
+
+            <div id="payment-details">
+              <div data-tab="stripe">
+                <.card>
+                  <.card_header>
+                    <.card_title>Stripe Payment</.card_title>
+                    <.card_description>Pay with credit card or ACH using Stripe</.card_description>
+                  </.card_header>
+                  <.card_content>
+                    <div class="space-y-4">
+                      <div class="flex justify-between items-center">
+                        <span class="text-sm text-muted-foreground">Annual Subscription</span>
+                        <span class="font-semibold font-display">
+                          {Money.to_string!(@current_org.subscription_price)}
+                        </span>
+                      </div>
+                      <div class="flex justify-between items-center">
+                        <span class="text-sm text-muted-foreground">Processing Fee (4%)</span>
+                        <span class="font-semibold font-display">
+                          {Money.to_string!(
+                            Money.mult!(@current_org.subscription_price, Decimal.new("0.04"))
+                          )}
+                        </span>
+                      </div>
+                      <div class="border-t pt-4 flex justify-between items-center">
+                        <span class="font-semibold">Total</span>
+                        <span class="font-semibold font-display">
+                          {Money.to_string!(
+                            Money.mult!(@current_org.subscription_price, Decimal.new("1.04"))
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </.card_content>
+                </.card>
+
+                <div class="pt-4 flex justify-end gap-4">
+                  <.button variant="secondary" phx-click="close_payment_drawer" type="button">
+                    Cancel
+                  </.button>
+                  <.button type="submit">
+                    Continue to checkout
+                  </.button>
+                </div>
+              </div>
+
+              <div data-tab="wire" class="hidden">
+                <.card>
+                  <.card_header>
+                    <.card_title>Wire Transfer Details</.card_title>
+                    <.card_description>Send payment to the following account</.card_description>
+                  </.card_header>
+                  <.card_content>
+                    <div class="space-y-4">
+                      <div class="grid grid-cols-2 gap-2 text-sm">
+                        <span class="text-muted-foreground">Bank Name:</span>
+                        <span class="font-medium">Silicon Valley Bank</span>
+
+                        <span class="text-muted-foreground">Account Name:</span>
+                        <span class="font-medium">Algora Inc</span>
+
+                        <span class="text-muted-foreground">Account Number:</span>
+                        <span class="font-medium">XXXX-XXXX-1234</span>
+
+                        <span class="text-muted-foreground">Routing Number:</span>
+                        <span class="font-medium">XXXXXX123</span>
+
+                        <span class="text-muted-foreground">SWIFT Code:</span>
+                        <span class="font-medium">SVBKUS6S</span>
+
+                        <span class="text-muted-foreground">Amount:</span>
+                        <span class="font-medium font-display">
+                          {Money.to_string!(@current_org.subscription_price)}
+                        </span>
+                      </div>
+                    </div>
+                    <p class="text-sm text-muted-foreground pt-4">
+                      You will receive an invoice and receipt via email once you confirm
+                    </p>
+                  </.card_content>
+                </.card>
+
+                <div class="pt-4 flex justify-end gap-4">
+                  <.button variant="secondary" phx-click="close_payment_drawer" type="button">
+                    Cancel
+                  </.button>
+                  <.button type="submit">
+                    I have wired
+                  </.button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </.form>
+      </.drawer_content>
+    </.drawer>
+    """
+  end
 end

lib/algora_web/live/org/jobs_live.ex

@@ -179,7 +179,7 @@ defmodule AlgoraWeb.Org.JobsLive do
     with {:ok, user} <-
            Accounts.get_or_register_user(params["email"], %{type: :organization, display_name: params["company_name"]}),
          {:ok, job} <- params |> Map.put("user_id", user.id) |> Jobs.create_job_posting(),
-         {:ok, url} <- Jobs.create_payment_session(job) do
+         {:ok, url} <- Jobs.create_payment_session(job, socket.assigns.current_org.subscription_price) do
       Algora.Admin.alert("Job posting initialized: #{job.company_name}", :info)
       {:noreply, redirect(socket, external: url)}
     else

priv/repo/migrations/20250430180359_add_subscription_price_to_users.exs

@@ -0,0 +1,9 @@
+defmodule Algora.Repo.Migrations.AddSubscriptionPriceToUsers do
+  use Ecto.Migration
+
+  def change do
+    alter table(:users) do
+      add :subscription_price, :money_with_currency
+    end
+  end
+end