add create payout account form

Author: zcesur

lib/algora/integrations/stripe/connect_countries.ex

@@ -0,0 +1,128 @@
+defmodule Algora.Stripe.ConnectCountries do
+  @moduledoc false
+
+  def list,
+    do: [
+      {"Albania", "AL"},
+      {"Algeria", "DZ"},
+      {"Angola", "AO"},
+      {"Antigua and Barbuda", "AG"},
+      {"Argentina", "AR"},
+      {"Armenia", "AM"},
+      {"Australia", "AU"},
+      {"Austria", "AT"},
+      {"Azerbaijan", "AZ"},
+      {"Bahamas", "BS"},
+      {"Bahrain", "BH"},
+      {"Bangladesh", "BD"},
+      {"Belgium", "BE"},
+      {"Benin", "BJ"},
+      {"Bhutan", "BT"},
+      {"Bolivia", "BO"},
+      {"Bosnia and Herzegovina", "BA"},
+      {"Botswana", "BW"},
+      {"Brazil", "BR"},
+      {"Brunei", "BN"},
+      {"Bulgaria", "BG"},
+      {"Cambodia", "KH"},
+      {"Canada", "CA"},
+      {"Chile", "CL"},
+      {"China", "CN"},
+      {"Colombia", "CO"},
+      {"Costa Rica", "CR"},
+      {"Croatia", "HR"},
+      {"Cyprus", "CY"},
+      {"Czech Republic", "CZ"},
+      {"Denmark", "DK"},
+      {"Dominican Republic", "DO"},
+      {"Ecuador", "EC"},
+      {"Egypt", "EG"},
+      {"El Salvador", "SV"},
+      {"Estonia", "EE"},
+      {"Ethiopia", "ET"},
+      {"Finland", "FI"},
+      {"France", "FR"},
+      {"Gabon", "GA"},
+      {"Gambia", "GM"},
+      {"Germany", "DE"},
+      {"Ghana", "GH"},
+      {"Gibraltar", "GI"},
+      {"Greece", "GR"},
+      {"Guatemala", "GT"},
+      {"Guyana", "GY"},
+      {"Hong Kong", "HK"},
+      {"Hungary", "HU"},
+      {"Iceland", "IS"},
+      {"India", "IN"},
+      {"Indonesia", "ID"},
+      {"Ireland", "IE"},
+      {"Israel", "IL"},
+      {"Italy", "IT"},
+      {"Ivory Coast", "CI"},
+      {"Jamaica", "JM"},
+      {"Japan", "JP"},
+      {"Jordan", "JO"},
+      {"Kazakhstan", "KZ"},
+      {"Kenya", "KE"},
+      {"Kuwait", "KW"},
+      {"Laos", "LA"},
+      {"Latvia", "LV"},
+      {"Liechtenstein", "LI"},
+      {"Lithuania", "LT"},
+      {"Luxembourg", "LU"},
+      {"Macao", "MO"},
+      {"Macedonia", "MK"},
+      {"Madagascar", "MG"},
+      {"Malaysia", "MY"},
+      {"Malta", "MT"},
+      {"Mauritius", "MU"},
+      {"Mexico", "MX"},
+      {"Moldova", "MD"},
+      {"Monaco", "MC"},
+      {"Mongolia", "MN"},
+      {"Morocco", "MA"},
+      {"Mozambique", "MZ"},
+      {"Namibia", "NA"},
+      {"Netherlands", "NL"},
+      {"New Zealand", "NZ"},
+      {"Nigeria", "NG"},
+      {"Norway", "NO"},
+      {"Oman", "OM"},
+      {"Pakistan", "PK"},
+      {"Panama", "PA"},
+      {"Paraguay", "PY"},
+      {"Peru", "PE"},
+      {"Philippines", "PH"},
+      {"Poland", "PL"},
+      {"Portugal", "PT"},
+      {"Qatar", "QA"},
+      {"Romania", "RO"},
+      {"Rwanda", "RW"},
+      {"Saint Lucia", "LC"},
+      {"San Marino", "SM"},
+      {"Saudi Arabia", "SA"},
+      {"Senegal", "SN"},
+      {"Serbia", "RS"},
+      {"Singapore", "SG"},
+      {"Slovakia", "SK"},
+      {"Slovenia", "SI"},
+      {"South Africa", "ZA"},
+      {"South Korea", "KR"},
+      {"Spain", "ES"},
+      {"Sri Lanka", "LK"},
+      {"Sweden", "SE"},
+      {"Switzerland", "CH"},
+      {"Taiwan", "TW"},
+      {"Tanzania", "TZ"},
+      {"Thailand", "TH"},
+      {"Trinidad and Tobago", "TT"},
+      {"Tunisia", "TN"},
+      {"Turkey", "TR"},
+      {"United Arab Emirates", "AE"},
+      {"United Kingdom", "GB"},
+      {"United States", "US"},
+      {"Uruguay", "UY"},
+      {"Uzbekistan", "UZ"},
+      {"Vietnam", "VN"}
+    ]
+end

lib/algora_web/live/user/transactions_live.ex

@@ -5,8 +5,31 @@ defmodule AlgoraWeb.User.TransactionsLive do
 
   alias Algora.Accounts.User
   alias Algora.Payments
+  alias Algora.Stripe.ConnectCountries
   alias Algora.Util
 
+  defmodule PayoutAccountForm do
+    @moduledoc false
+    use Ecto.Schema
+
+    import Ecto.Changeset
+
+    @countries ConnectCountries.list()
+
+    embedded_schema do
+      field :country, :string
+    end
+
+    def changeset(schema \\ %__MODULE__{}, attrs) do
+      schema
+      |> cast(attrs, [:country])
+      |> validate_required([:country])
+      |> validate_inclusion(:country, Enum.map(@countries, &elem(&1, 1)))
+    end
+
+    def countries, do: @countries
+  end
+
   def mount(_params, _session, socket) do
     if connected?(socket) do
       Payments.subscribe()
@@ -15,13 +38,44 @@ defmodule AlgoraWeb.User.TransactionsLive do
     {:ok,
      socket
      |> assign(:page_title, "Your transactions")
+     |> assign(:show_payout_drawer, true)
+     |> assign(:payout_account_form, to_form(PayoutAccountForm.changeset(%PayoutAccountForm{}, %{})))
      |> assign_transactions()}
   end
 
   def handle_info(:payments_updated, socket) do
     {:noreply, assign_transactions(socket)}
   end
 
+  def handle_event("show_payout_drawer", _params, socket) do
+    {:noreply, assign(socket, :show_payout_drawer, true)}
+  end
+
+  def handle_event("close_drawer", _params, socket) do
+    {:noreply, assign(socket, :show_payout_drawer, false)}
+  end
+
+  def handle_event("create_payout_account", %{"payout_account_form" => params}, socket) do
+    changeset =
+      %PayoutAccountForm{}
+      |> PayoutAccountForm.changeset(params)
+      |> Map.put(:action, :validate)
+
+    case changeset do
+      %{valid?: true} = changeset ->
+        # TODO: Actually create the payout account
+        IO.inspect(changeset.changes, label: "Would create payout account with")
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "Payout account created!")
+         |> assign(:show_payout_drawer, false)}
+
+      %{valid?: false} = changeset ->
+        {:noreply, assign(socket, :payout_account_form, to_form(changeset))}
+    end
+  end
+
   defp assign_transactions(socket) do
     transactions =
       Payments.list_transactions(
@@ -66,9 +120,15 @@ defmodule AlgoraWeb.User.TransactionsLive do
   def render(assigns) do
     ~H"""
     <div class="container mx-auto max-w-7xl space-y-6 p-6">
-      <div class="space-y-1">
-        <h1 class="text-2xl font-bold">Your Transactions</h1>
-        <p class="text-muted-foreground">View and manage your transaction history</p>
+      <div class="flex items-end justify-between gap-4">
+        <div class="space-y-1">
+          <h1 class="text-2xl font-bold">Your Transactions</h1>
+          <p class="text-muted-foreground">View and manage your transaction history</p>
+        </div>
+        <.button phx-click="show_payout_drawer">
+          <.icon name="tabler-plus" class="w-4 h-4 mr-2 -ml-1" />
+          <span>Create payout account</span>
+        </.button>
       </div>
       
     <!-- Totals Cards -->
@@ -162,6 +222,39 @@ defmodule AlgoraWeb.User.TransactionsLive do
         </.card_content>
       </.card>
     </div>
+    <.drawer show={@show_payout_drawer} on_cancel="close_drawer" direction="right">
+      <.drawer_header>
+        <.drawer_title>Create Payout Account</.drawer_title>
+        <.drawer_description>Create a payout account to receive your earnings</.drawer_description>
+      </.drawer_header>
+      <.drawer_content class="mt-4">
+        <.simple_form for={@payout_account_form} phx-submit="create_payout_account">
+          <div class="space-y-6 max-w-md">
+            <.input
+              field={@payout_account_form[:country]}
+              label="Country"
+              type="select"
+              prompt=""
+              options={
+                PayoutAccountForm.countries()
+                |> Enum.map(fn {name, code} ->
+                  {Algora.Misc.CountryEmojis.get(code, "🌎") <> " " <> name, code}
+                end)
+              }
+              helptext="Select the country where you or your business will legally operate."
+            />
+            <div class="flex justify-end gap-4">
+              <.button variant="outline" type="button" phx-click="close_drawer">
+                Cancel
+              </.button>
+              <.button type="submit">
+                Create Account
+              </.button>
+            </div>
+          </div>
+        </.simple_form>
+      </.drawer_content>
+    </.drawer>
     """
   end