Packages

phoenix_kit

1.7.37
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules referrals web form.html.heex
Raw

lib/modules/referrals/web/form.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="{@project_title} #{@page_title}"

  current_path={@url_path}

  project_title={@project_title}

>

  <div class="container flex-col mx-auto px-4 py-6">

    <%!-- Header Section --%>

    <header class="w-full relative mb-6">

      <%!-- Back Button (Left aligned) --%>

      <.link

        navigate={PhoenixKit.Utils.Routes.path("/admin/users/referral-codes")}

        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"

      >

        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Referrals

      </.link>



      <%!-- Title Section --%>

      <div class="text-center">

        <h1 class="text-4xl font-bold text-base-content mb-3">{@page_title}</h1>

        <p class="text-lg text-base-content">

          <%= if @mode == :new do %>

            Create a new referral code for user registration

          <% else %>

            Edit referral code details

          <% end %>

        </p>

      </div>

    </header>



    <%!-- Referral Code Form --%>

    <div class="max-w-2xl mx-auto">

      <div class="bg-base-100 rounded-lg shadow-md p-6">

        <.form

          :let={form}

          for={@changeset}

          id="referral_code_form"

          phx-submit="save_code"

          phx-change="validate_code"

          class="space-y-6"

        >

          <%!-- Code Field with Generate Button --%>

          <div class="form-control">

            <.input

              field={form[:code]}

              type="text"

              label="Referral Code *"

              placeholder="Enter code or generate random"

              required

            />

            <button

              type="button"

              class="mt-5 btn btn-outline btn-secondary"

              phx-click="generate_code"

            >

              <PhoenixKitWeb.Components.Core.Icons.icon_refresh class="w-4 h-4 mr-1" /> Generate

            </button>

          </div>



          <%!-- Description Field --%>

          <div class="form-control">

            <.input

              field={form[:description]}

              type="text"

              label="Description *"

              placeholder="Brief description of this referral code"

              required

            />

          </div>



          <%!-- Beneficiary Field --%>

          <div class="form-control">

            <label class="label">

              <span class="label-text font-semibold">Beneficiary User</span>

            </label>



            <%= if @selected_beneficiary do %>

              <%!-- Selected Beneficiary Display --%>

              <div class="flex items-center gap-2 p-3 bg-base-200 rounded-lg border">

                <div class="flex-1">

                  <div class="font-medium">{@selected_beneficiary.email}</div>

                  <%= if @selected_beneficiary.username do %>

                    <div class="text-sm text-base-content/60">

                      @{@selected_beneficiary.username}

                    </div>

                  <% end %>

                  <%= if @selected_beneficiary.first_name || @selected_beneficiary.last_name do %>

                    <div class="text-sm text-base-content/70">

                      {@selected_beneficiary.first_name} {@selected_beneficiary.last_name}

                    </div>

                  <% end %>

                </div>

                <button

                  type="button"

                  class="btn btn-sm btn-ghost btn-circle"

                  phx-click="clear_beneficiary"

                  title="Clear selection"

                >

                  <PhoenixKitWeb.Components.Core.Icons.icon_x class="w-4 h-4" />

                </button>

              </div>

              <%!-- Hidden fields to store the beneficiary ID and UUID --%>

              <input

                type="hidden"

                name="referrals[beneficiary]"

                value={@selected_beneficiary.uuid}

              />

              <input

                type="hidden"

                name="referrals[beneficiary_uuid]"

                value={@selected_beneficiary.uuid}

              />

            <% else %>

              <%!-- Search Input --%>

              <div class="relative">

                <input

                  type="text"

                  class="input input-bordered w-full"

                  placeholder="Search users by email, username, or name..."

                  phx-change="search_beneficiary"

                  phx-debounce="300"

                  name="search"

                  autocomplete="off"

                />



                <%!-- Search Results Dropdown --%>

                <%= if length(@search_results) > 0 do %>

                  <div class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">

                    <%= for user <- @search_results do %>

                      <button

                        type="button"

                        class="w-full p-3 text-left hover:bg-base-200 border-b border-base-300 last:border-b-0 focus:bg-base-200 focus:outline-none"

                        phx-click="select_beneficiary"

                        phx-value-user_id={user.uuid}

                      >

                        <div class="font-medium">{user.email}</div>

                        <%= if user.username do %>

                          <div class="text-sm text-base-content/60">

                            @{user.username}

                          </div>

                        <% end %>

                        <%= if user.first_name || user.last_name do %>

                          <div class="text-sm text-base-content/70">

                            {user.first_name} {user.last_name}

                          </div>

                        <% end %>

                      </button>

                    <% end %>

                  </div>

                <% end %>

              </div>

            <% end %>



            <label class="mt-2 label">

              <span class="label-text-alt text-base-content/70">

                Optional: Search and select a user who will benefit from this code

              </span>

            </label>

          </div>



          <%!-- Maximum Uses Field --%>

          <div class="form-control">

            <.input

              field={form[:max_uses]}

              type="number"

              min="1"

              label="Maximum Uses *"

              placeholder="How many times can this code be used?"

              required

            />

            <label class="mt-2 label">

              <span class="label-text-alt text-base-content/70">

                Set how many users can register using this code

              </span>

            </label>

          </div>



          <%!-- Expiration Date Field --%>

          <div class="form-control">

            <.input

              field={form[:expiration_date]}

              type="datetime-local"

              label="Expiration Date"

            />

            <label class="mt-2 label">

              <span class="label-text-alt text-base-content/70">

                Leave empty for no expiration

              </span>

            </label>

          </div>



          <%!-- Active Status Toggle --%>

          <div class="form-control">

            <.checkbox field={form[:status]} label="Is active?" />



            <span class="mt-2 label text-base-content/70">

              Inactive codes cannot be used for registration

            </span>

          </div>



          <%!-- Form Actions --%>

          <div class="flex justify-end gap-4 pt-6 border-t">

            <button

              type="submit"

              class="btn btn-primary"

              disabled={!@changeset.valid?}

            >

              <PhoenixKitWeb.Components.Core.Icons.icon_check class="w-4 h-4 mr-2" />

              {if @mode == :edit, do: "Update Code", else: "Create Code"}

            </button>

            <button

              type="button"

              class="btn btn-ghost"

              phx-click="cancel"

            >

              <PhoenixKitWeb.Components.Core.Icons.icon_x class="w-4 h-4 mr-2" /> Cancel

            </button>

          </div>

        </.form>

      </div>

    </div>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>