From 897e33bf6a5b70ea57d5c63f1a492cb83247d1e3 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Thu, 24 Jul 2025 09:45:02 +0300
Subject: [PATCH] simplify shared links modal UI

---
 app/views/templates_share_link/show.html.erb | 73 ++++++++++++--------
 config/locales/i18n.yml                      |  6 ++
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/app/views/templates_share_link/show.html.erb b/app/views/templates_share_link/show.html.erb
index c6ec4cf7..df1ad45e 100644
--- a/app/views/templates_share_link/show.html.erb
+++ b/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,14 @@
         </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| %>
-      <% 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 %>
-            <%= 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">
         <%= 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>
-    <% 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">
+      <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">
@@ -41,15 +29,46 @@
         </div>
       </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| %>
-        <%= 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">
-            <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>
+    <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-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 %>
-      <% end %>
-    <% end %>
+        <% if multiple_submitters && enough_defined_submitters %>
+          <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 %>
+        <% if Docuseal.multitenant? || Accounts.can_send_emails?(current_account) %>
+          <%= 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 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>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
   </div>
 <% end %>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 29236bc4..3f35158b 100644
--- a/config/locales/i18n.yml
+++ b/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