[Team] Invite flow redesign

app/views/events/team.html.erb

@@ -25,20 +25,6 @@
   <% end %>
 
   <% if policy(@event).can_invite_user? %>
-    <action type="button" class="pop menu__toggle" data-behavior="menu_toggle" aria-expanded="false" tabindex="0">
-      <%= inline_icon "link" %>
-      <div class="menu__content" data-behavior="menu_content">
-        <%= link_to event_invite_links_path(event_id: @event.slug),
-          data: { behavior: "modal_trigger", modal: "view_invite_links" } do %>
-          View invite links
-        <% end %>
-        <%= link_to new_event_invite_link_path(@event),
-          data: { behavior: "modal_trigger", modal: "new_invite_link" } do %>
-          Create new invite link
-        <% end %>
-      </div>
-    </action>
-
     <%= link_to new_event_organizer_position_invite_path(event_id: @event.slug), class: "btn bg-success", data: { behavior: "modal_trigger", modal: "invite_member" }, disabled: !organizer_signed_in?(as: :manager) do %>
       <%= inline_icon "member-add" %>
       Invite
@@ -186,20 +172,14 @@
 <% if policy(@event).can_invite_user? %>
   <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="invite_member">
     <%= modal_header "Invite a team member" %>
-    <%= render "organizer_position_invites/form", invite: OrganizerPositionInviteService::Create.new(event: @event).model %>
-  </section>
-<% end %>
-
-<% if policy(@event).can_invite_user? %>
-  <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="view_invite_links">
-    <%= modal_header "Active invite links" %>
 
+    <h3 class="mb-0 mb-2 flex items-center justify-between">
+      Links
+      <%= render "organizer_position_invite/links/form", event: @event %>
+    </h3>
     <%= render "organizer_position_invite/links/link_list", event: @event, invite_links: @invite_links %>
-  </section>
-
-  <section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="new_invite_link">
-    <%= modal_header "New invite link" %>
 
-    <%= render "organizer_position_invite/links/form", event: @event %>
+    <h3 class="mt-10 mb-2">Email</h3>
+    <%= render "organizer_position_invites/form", invite: OrganizerPositionInviteService::Create.new(event: @event).model %>
   </section>
 <% end %>

app/views/organizer_position_invite/links/_form.html.erb

@@ -1,10 +1,20 @@
 <%# locals: (event:) %>
 
-<%= form_with(url: event_invite_links_path(event_id: event.id)) do |form| %>
-  <div class="field">
-    <%= form.label :expires_at, "Expires on" %>
-    <%= form.date_field :expires_on, value: OrganizerPositionInvite::Link::DEFAULT_EXPIRATION.from_now.strftime("%Y-%m-%d") %>
+<div data-controller="menu" data-menu-placement-value="bottom-end">
+  <button
+    type="button"
+    class="btn btn-small menu__toggle menu__toggle--arrowless overflow-visible"
+    data-menu-target="toggle" data-action="menu#toggle click@document->menu#close keydown@document->menu#keydown">
+    <%= inline_icon "add", size: 28 %>
+    Create
+  </button>
+  <div class="menu__content menu__content--2 menu__content--compact h5 p-3" data-menu-target="content">
+    <%= form_with(url: event_invite_links_path(event_id: event.id)) do |form| %>
+      <div class="field">
+        <%= form.label :expires_at, "Expires on" %>
+        <%= form.date_field :expires_on, class: "!max-w-full w-full", value: OrganizerPositionInvite::Link::DEFAULT_EXPIRATION.from_now.strftime("%Y-%m-%d") %>
+      </div>
+      <%= form.submit "Continue", class: "btn -mt-1 w-full" %>
+    <% end %>
   </div>
-
-  <%= form.submit "Create", class: "btn" %>
-<% end %>
+</div>

app/views/organizer_position_invite/links/_link_list.html.erb

@@ -3,29 +3,38 @@
 <% if invite_links.empty? %>
   <p><%= event.name %> does not currently have any active invite links</p>
 <% else %>
-  <ul class="grid grid-cols-1 text-left w-full mt-2">
-    <% invite_links.each do |link| %>
-      <li class="overflow-visible card flex flex-row justify-between items-center gap-2">
-        <span class="w-full flex gap-2 items-center align-middle">
-            <div class="flex flex-col">
-              <p class="my-0 font-bold"><%= link_to link_url(link), link_url(link) %></p>
-              <p class="my-0">Created by <%= user_mention link.creator %> on <%= link.created_at.strftime("%B %e, %Y") %></p>
-              <p class="my-0">Expires in <%= distance_of_time_in_words(Time.now, link.expires_in.seconds.from_now) %></p>
-              <p class="my-0">Used <%= pluralize(link.requests.size, "times") %></p>
-            </div>
-            <div class="flex-grow"></div>
-            <%= pop_icon_to "view-close-small",
-                            deactivate_link_path(link),
-                            class: "error tooltipped",
-                            data: {
-                              turbo_frame: "_top",
-                              turbo_method: :post,
-                              turbo_confirm: "Are you sure you want to deactivate this invite link?",
-                            },
-                            "aria-label": "Deactivate invite link",
-                            disabled: !policy(link).deactivate? %>
-        </span>
-      </li>
-    <% end %>
-  </ul>
+  <% invite_links.each do |link| %>
+    <div class="overflow-visible justify-between items-center gap-2">
+      <span class="w-full flex gap-2 items-center align-middle">
+          <div class="flex flex-col">
+            <%= link_to link_url(link), class: "gap-1 my-0 font-bold flex items-center" do %>
+              <%= link.hashid %>
+              <%= inline_icon "copy", size: 24 %>
+            <% end %>
+            <p class="my-0 mt-1 text-sm flex items-center gap-1 text-muted">
+              <%= user_mention link.creator %>
+              <span class="tooltipped -ml-1.5" aria-label="Created <%= link.created_at.strftime("%B %e, %Y") %>">
+                &bull; Expires <%= distance_of_time_in_words(Time.now, link.expires_in.seconds.from_now) %>
+              </span>
+            </p>
+          </div>
+          <div class="flex-grow"></div>
+          <div class="tooltipped flex items-center text-muted mr-2 cursor-pointer" aria-label="Used <%= pluralize(link.requests.size, "times") %>">
+              <%= inline_icon "link", size: 24 %>
+              <%= link.requests.size %>
+          </div>
+          <%= pop_icon_to "delete",
+                          deactivate_link_path(link),
+                          class: "error tooltipped",
+                          data: {
+                            turbo_frame: "_top",
+                            turbo_method: :post,
+                            turbo_confirm: "Are you sure you want to deactivate this invite link?",
+                          },
+                          "aria-label": "Deactivate invite link",
+                          disabled: !policy(link).deactivate? %>
+      </span>
+      <div class="menu__divider"></div>
+    </div>
+  <% end %>
 <% end %>

app/views/organizer_position_invites/_form.html.erb

@@ -1,20 +1,20 @@
 <%= form_with(model: invite, local: true, url: event_organizer_position_invites_path(event_id: @event.slug), html: { "x-data": "{ role: 'member', spendingControls: 'true' }" }) do |form| %>
   <%= form_errors invite, "user" %>
 
-  <div class="field" x-data="{ email: '' }">
-    <%= form.label :email, class: "mb1" %>
-
-    <div class="flex items-center">
-      <%= form.email_field :email, class: "mr1", "x-model": "email", placeholder: "[email protected]" %>
-    </div>
-    <template x-if="/(team|webmaster|marketing|admin|info|about|support|sales|hello)/.test(email)">
-      <div class="warning mt1">⚠️ For security, we discourage team emails on
-        HCB. We recommend individual emails such as <em>[email protected]</em>!
+  <div class="border rounded-xl overflow-hidden">
+    <div class="field" x-data="{ email: '' }">
+      <div class="flex items-center">
+        <%= form.email_field :email, class: "!max-w-full w-full !border-0 !px-4 !max-h-10", "x-model": "email", placeholder: "Email address" %>
       </div>
-    </template>
-  </div>
+      <template x-if="/(team|webmaster|marketing|admin|info|about|support|sales|hello)/.test(email)">
+        <div class="warning mt1">⚠️ For security, we discourage team emails on
+          HCB. We recommend individual emails such as <em>[email protected]</em>!
+        </div>
+      </template>
+    </div>
 
-  <%= render "organizer_position_invites/role_and_control_form", form: form %>
+    <%= render "organizer_position_invites/role_and_control_form", form: form %>
+  </div>
 
   <% admin_tool("mt2 mb2 flex g1") do %>
     <%= render "organizer_position_invites/admin_signee_check", form: form, default_selected: false %>

app/views/organizer_position_invites/_role_and_control_form.html.erb

@@ -1,50 +1,51 @@
 <%# locals: (form:) %>
 
-<%= form.label :role, class: "mb1" %>
-<div class="field field--options flex">
-  <% OrganizerPositionInvite.roles.keys.map do |role| %>
-    <%= form.radio_button :role, role, "x-model": "role" %>
-    <%= form.label :role, value: role do %>
-      <strong><%= role.titleize %></strong>
-    <% end %>
-  <% end %>
-</div>
-
-<p class="muted mb1"><span class="bold info">Managers</span> can do everything
-  in the organization.</p>
-
-<div class="muted mb1">
-  <p class="m0"><span class="bold info">Members</span> can:</p>
-  <ul class="m0">
-    <li>Create & use cards (with a limit if spending controls are enabled)
-    </li>
-    <li>Not transfer money</li>
-    <li>Not change the organization's settings</li>
-  </ul>
+<div class="field px-4 gap-2 flex items-center">
+  <%= form.label :role, "Role" %>
+  <%= form.select :role,
+                  OrganizerPositionInvite.roles.keys.map { |role| [role.titleize, role] },
+                  {}, 
+                  "x-model": "role" %>
+  <div data-controller="menu" data-menu-placement-value="bottom-start">
+    <button
+      type="button"
+      class="pop menu__toggle menu__toggle--arrowless overflow-visible"
+      data-menu-target="toggle" data-action="menu#toggle click@document->menu#close keydown@document->menu#keydown">
+      <%= inline_icon "question-mark", size: 14 %>
+    </button>
+    <div class="menu__content menu__content--2 menu__content--compact h5 p-0" data-menu-target="content">
+      <p class="muted mb1"><span class="bold info">Managers</span> can do everything
+        in the organization.</p>
+      <div class="muted mb1">
+        <p class="m0"><span class="bold info">Members</span> can:</p>
+        <ul class="m0">
+          <li>Create & use cards (with a limit if spending controls are enabled)
+          </li>
+          <li>Not transfer money</li>
+          <li>Not change the organization's settings</li>
+        </ul>
+      </div>
+      <p class="muted mb1"><span class="bold info">Readers</span> have read-only access to the organization.</p>
+    </div>
+  </div>
 </div>
 
-<p class="muted mb1"><span class="bold info">Readers</span> have read-only access to the organization.</p>
-
-<div x-show="role === 'member'" x-cloak x-transition.duration.500ms class="my-4">
-  <%= form.label :enable_controls, class: "mb1 inline-flex flex-col" do %>
-    Enable spending controls?
-    <span class="muted h6">You can always enable & configure spending controls after, too.</span>
-  <% end %>
-
-  <div class="field field--options">
-    <%= form.radio_button :enable_controls, false, "x-model": "spendingControls" %>
-    <%= form.label :enable_controls, value: false do %>
-      <strong>No</strong>
-    <% end %>
-
-    <%= form.radio_button :enable_controls, true, "x-model": "spendingControls" %>
-    <%= form.label :enable_controls, value: true do %>
-      <strong>Yes</strong>
-    <% end %>
+<div data-controller="accordion" class="border-t px-4 pb-2">
+  <div class="flex items-center gap-4 field field--checkbox">
+    <label class="flex flex-col">
+      <span>Spending controls</span>
+      <span class="muted h6">Changes can be made later</span>
+    </label>
+    <div class="field--checkbox--switch ml-auto" style="flex-shrink:0">
+      <%= form.label :enable_controls do %>
+        <%= form.check_box :enable_controls,  { data: { action: "change->accordion#toggle", accordion_target: "checkbox" } }, true, false %>
+        <span class="slider"></span>
+      <% end %>
+    </div>
   </div>
 
-  <div x-show="spendingControls === 'true'" x-cloak x-transition.duration.500ms class="mb1">
+  <div data-accordion-target="content" class="flex items-center gap-4 justify-between">
     <%= form.label :initial_control_allowance_amount, value: "Initial allowance amount" %>
-    <%= form.number_field :initial_control_allowance_amount, placeholder: "500.00", step: 0.01, min: 0.00, data: { controller: "truncate-decimal", action: "truncate-decimal#truncate blur->truncate-decimal#pad" } %>
+    <%= form.number_field :initial_control_allowance_amount, placeholder: "500.00", step: 0.01, min: 0.00, style: "max-width:100px!important;text-align:right", data: { controller: "truncate-decimal", action: "truncate-decimal#truncate blur->truncate-decimal#pad" } %>
   </div>
 </div>