simplify shared links modal UI

app/views/templates_share_link/show.html.erb

@@ -1,3 +1,5 @@
+<% multiple_submitters = @template.submitters.to_a.length > 1 %>
+<% enough_defined_submitters = Templates.filter_undefined_submitters(@template.submitters).size < 2 %>
 <%= render 'shared/turbo_modal_large', title: t('share_link') do %>
   <div class="mt-2 mb-4 px-5">
     <%= form_for @template, url: template_share_link_path(@template), method: :post, html: { id: 'shared_link_form', autocomplete: 'off', class: 'mt-3' }, data: { close_on_submit: false } do |f| %>
@@ -12,28 +14,43 @@
         </check-on-click>
       </div>
     <% end %>
-    <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-4 mb-5' }, data: { close_on_submit: false } do |f| %>
+    <% if multiple_submitters && !enough_defined_submitters %>
+      <div class="alert items-start bg-base-100 border-base-300 mt-4">
+        <%= svg_icon('info_circle', class: 'stroke-current shrink-0 h-6 w-6 mt-1') %>
+        <div><%= t('this_template_has_multiple_parties_which_prevents_the_use_of_a_sharing_link') %></div>
+      </div>
+      <div class="collapse collapse-arrow join-item border border-base-300 mt-4">
+        <input type="checkbox" name="accordion" class="min-h-0">
+        <div class="collapse-title py-4 min-h-0">
+          <%= t('default_parties') %>
+        </div>
+        <div class="collapse-content !pb-0">
+          <%= render 'templates_preferences/recipients', template: @template, close_on_submit: false, with_toggles: false, with_submission_requester: false %>
+        </div>
+      </div>
+    <% end %>
+    <div class="collapse collapse-arrow join-item mt-4">
+      <input id="accordion_checkbox" type="checkbox" name="accordion" class="min-h-0">
+      <div class="collapse-title min-h-0 after:!right-3 p-1">
+        <%= t('advanced_settings') %>
+      </div>
+      <div class="collapse-content !p-0">
+        <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-4 pt-4 border-t border-base-300' }, data: { close_on_submit: false } do |f| %>
           <% link_form_fields = @template.preferences.fetch('link_form_fields', ['email']) %>
           <label class="pl-1"><%= t('link_form_fields') %></label>
           <required-checkbox-group class="flex flex-col md:flex-row items-center gap-2 w-full mt-2">
             <% %w[name email phone].each do |field| %>
-          <%= label_tag "link_form_fields_#{field}", t(field), class: 'relative flex w-full md:w-1/3 items-center h-12 border-base-300 py-3.5 border rounded-xl' do %>
+              <%= label_tag "link_form_fields_#{field}", t(field), class: 'relative flex w-full md:w-1/3 items-center h-14 border-base-300 py-3.5 border rounded-xl' do %>
                 <%= check_box_tag 'template[preferences][link_form_fields][]', field, link_form_fields.include?(field), class: 'absolute !animate-none checkbox left-3', id: "link_form_fields_#{field}" %>
                 <span class="font-medium w-full text-center"><%= t(field) %></span>
               <% end %>
             <% end %>
           </required-checkbox-group>
         <% end %>
-    <% if Templates.filter_undefined_submitters(@template.submitters).size > 1 %>
+        <% if multiple_submitters && enough_defined_submitters %>
-      <div class="alert items-start bg-base-100 border-base-300 mt-4">
+          <div class="collapse collapse-arrow join-item border border-base-300 mt-4">
-        <%= svg_icon('info_circle', class: 'stroke-current shrink-0 h-6 w-6 mt-1') %>
+            <input type="checkbox" name="accordion" class="min-h-0">
-        <div><%= t('this_template_has_multiple_parties_which_prevents_the_use_of_a_sharing_link') %></div>
+            <div class="collapse-title py-4 min-h-0">
-      </div>
-    <% end %>
-    <% if @template.submitters.to_a.length > 1 %>
-      <div class="collapse collapse-arrow join-item border border-base-300 mt-4 mb-5">
-        <input type="checkbox" name="accordion">
-        <div class="collapse-title text-xl font-medium">
               <%= t('default_parties') %>
             </div>
             <div class="collapse-content !pb-0">
@@ -42,9 +59,9 @@
           </div>
         <% end %>
         <% if Docuseal.multitenant? || Accounts.can_send_emails?(current_account) %>
-      <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-3' }, data: { close_on_submit: false } do |f| %>
+          <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-4' }, data: { close_on_submit: false } do |f| %>
             <%= f.fields_for :preferences, Struct.new(:shared_link_2fa).new(@template.preferences['shared_link_2fa'] == true) do |ff| %>
-          <label for="template_preferences_shared_link_2fa" class="flex items-center my-4 justify-between gap-1 alert bg-base-100 border-base-300">
+              <label for="template_preferences_shared_link_2fa" class="flex items-center mt-4 h-14 justify-between gap-1 alert bg-base-100 border-base-300">
                 <span><%= t('request_email_otp_verification_with_shared_link') %></span>
                 <%= ff.check_box :shared_link_2fa, { checked: ff.object.shared_link_2fa == true, disabled: !can?(:update, @template), class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
               </label>
@@ -52,4 +69,6 @@
           <% end %>
         <% end %>
       </div>
+    </div>
+  </div>
 <% end %>

config/locales/i18n.yml

@@ -783,6 +783,7 @@ en: &en
   email_verification: Email verification
   your_verification_code_to_access_the_name: 'Your verification code to access the "%{name}":'
   please_reply_to_this_email_if_you_didnt_request_this: Please reply to this email if you didn't request this.
+  advanced_settings: Advanced settings
   text: Text
   code: Code
   custom_html_emails: Custom HTML emails
@@ -1665,6 +1666,7 @@ es: &es
   email_verification: Verificación por correo electrónico
   your_verification_code_to_access_the_name: 'Su código de verificación para acceder a "%{name}":'
   please_reply_to_this_email_if_you_didnt_request_this: Por favor, responda este correo si no solicitó esto.
+  advanced_settings: Configuración avanzada
   text: Texto
   code: Código
   custom_html_emails: Correos electrónicos HTML personalizados
@@ -2546,6 +2548,7 @@ it: &it
   email_verification: Verifica email
   your_verification_code_to_access_the_name: 'Il tuo codice per accedere a "%{name}":'
   please_reply_to_this_email_if_you_didnt_request_this: Rispondi a questa email se non hai richiesto questo.
+  advanced_settings: Impostazioni avanzate
   text: Testo
   code: Codice
   custom_html_emails: Email HTML personalizzate
@@ -3430,6 +3433,7 @@ fr: &fr
   email_verification: Vérification de l'email
   your_verification_code_to_access_the_name: 'Votre code pour accéder à "%{name}" :'
   please_reply_to_this_email_if_you_didnt_request_this: Veuillez répondre à cet email si vous n'avez pas fait cette demande.
+  advanced_settings: Paramètres avancés
   text: Texte
   code: Code
   custom_html_emails: E-mails HTML personnalisés
@@ -4312,6 +4316,7 @@ pt: &pt
   email_verification: Verificação de e-mail
   your_verification_code_to_access_the_name: 'Seu código de verificação para acessar "%{name}":'
   please_reply_to_this_email_if_you_didnt_request_this: Responda a este e-mail se você não solicitou isso.
+  advanced_settings: Configurações avançadas
   text: Texto
   code: Código
   custom_html_emails: E-mails HTML personalizados
@@ -5195,6 +5200,7 @@ de: &de
   email_verification: E-Mail-Verifizierung
   your_verification_code_to_access_the_name: 'Ihr Verifizierungscode für den Zugriff auf "%{name}":'
   please_reply_to_this_email_if_you_didnt_request_this: Antworten Sie auf diese E-Mail, wenn Sie dies nicht angefordert haben.
+  advanced_settings: Erweiterte Einstellungen
   text: Text
   code: Code
   custom_html_emails: Benutzerdefinierte HTML-E-Mails