From 49afb2e87c52bf2816ae2478b9ffa6a9bffa6db3 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Sat, 12 Sep 2026 01:34:15 +0300
Subject: [PATCH] make template form preview native

---
 app/javascript/elements/native_action.js      |  3 +-
 app/javascript/form.js                        |  2 +
 .../submit_form/_submission_form.html.erb     |  2 +-
 app/views/submit_form/show.html.erb           | 14 +++--
 .../templates_form_preview/show.html.erb      | 58 +++++++++++--------
 5 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/app/javascript/elements/native_action.js b/app/javascript/elements/native_action.js
index 2079cdea9..2b8f841e3 100644
--- a/app/javascript/elements/native_action.js
+++ b/app/javascript/elements/native_action.js
@@ -25,7 +25,8 @@ export default class extends HTMLElement {
       native: this.dataset.native,
       url: this.dataset.url,
       accept: this.dataset.accept,
-      destructive: this.dataset.destructive === 'true'
+      destructive: this.dataset.destructive === 'true',
+      selected: this.dataset.selected === 'true'
     })
   }
 
diff --git a/app/javascript/form.js b/app/javascript/form.js
index ab9535caa..54760af75 100644
--- a/app/javascript/form.js
+++ b/app/javascript/form.js
@@ -8,6 +8,7 @@ import ScrollButtons from './elements/scroll_buttons'
 import PageContainer from './elements/page_container'
 import SubmitForm from './elements/submit_form'
 import ModalButton from './elements/modal_button'
+import NativeAction from './elements/native_action'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
@@ -18,6 +19,7 @@ safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('modal-button', ModalButton)
+safeRegisterElement('native-action', NativeAction)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
diff --git a/app/views/submit_form/_submission_form.html.erb b/app/views/submit_form/_submission_form.html.erb
index 9dd1b1428..ed3a5723d 100644
--- a/app/views/submit_form/_submission_form.html.erb
+++ b/app/views/submit_form/_submission_form.html.erb
@@ -2,4 +2,4 @@
 <% data_fields = Submissions.filtered_conditions_fields(submitter).to_json %>
 <% invite_submitters = (submitter.submission.template_submitters || submitter.submission.template.submitters).select { |s| s['invite_by_uuid'] == submitter.uuid && submitter.submission.submitters.none? { |e| e.uuid == s['uuid'] } }.to_json %>
 <% optional_invite_submitters = (submitter.submission.template_submitters || submitter.submission.template.submitters).select { |s| s['optional_invite_by_uuid'] == submitter.uuid && submitter.submission.submitters.none? { |e| e.uuid == s['uuid'] } }.to_json %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" data-schema="<%= schema.to_json %>" data-reuse-signature="<%= configs[:reuse_signature] %>" data-require-signing-reason="<%= configs[:require_signing_reason] %>" data-with-signature-id="<%= configs[:with_signature_id] %>" data-with-field-labels="<%= configs[:with_field_labels] %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'].presence || submitter.submission.template&.preferences&.dig('completed_redirect_url') %>" data-completed-message="<%= (configs[:completed_message]&.compact_blank.presence || submitter.submission.template&.preferences&.dig('completed_message') || {}).to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Docuseal.multitenant? || Accounts.can_send_emails?(submitter.submission.account) %>" data-optional-invite-submitters="<%= optional_invite_submitters %>" data-invite-submitters="<%= invite_submitters %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-signature-text="<%= params[:signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>" data-dry-run="<%= local_assigns[:dry_run] %>" data-expand="<%= local_assigns[:expand] %>" data-scroll-padding="<%= local_assigns[:scroll_padding] %>" data-language="<%= I18n.locale.to_s.split('-').first %>"></submission-form>
+<submission-form data-attribution="<%= !turbo_native_app? %>" data-is-demo="<%= Docuseal.demo? %>" data-schema="<%= schema.to_json %>" data-reuse-signature="<%= configs[:reuse_signature] %>" data-require-signing-reason="<%= configs[:require_signing_reason] %>" data-with-signature-id="<%= configs[:with_signature_id] %>" data-with-field-labels="<%= configs[:with_field_labels] %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'].presence || submitter.submission.template&.preferences&.dig('completed_redirect_url') %>" data-completed-message="<%= (configs[:completed_message]&.compact_blank.presence || submitter.submission.template&.preferences&.dig('completed_message') || {}).to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Docuseal.multitenant? || Accounts.can_send_emails?(submitter.submission.account) %>" data-optional-invite-submitters="<%= optional_invite_submitters %>" data-invite-submitters="<%= invite_submitters %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-signature-text="<%= params[:signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>" data-dry-run="<%= local_assigns[:dry_run] %>" data-expand="<%= local_assigns[:expand] %>" data-scroll-padding="<%= local_assigns[:scroll_padding] %>" data-language="<%= I18n.locale.to_s.split('-').first %>"></submission-form>
diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 48580c8ff..b90ebd92a 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -159,13 +159,15 @@
           <% end %>
         </div>
       <% end %>
-      <%= render 'shared/attribution', link_path: '/start', account: @submitter.account, with_style: false %>
-      <% if @form_configs[:policy_links].present? %>
-        <div class="text-center md:text-neutral-500 md:pr-3 md:pb-3 md:text-sm md:text-left mt-2 md:mt-0 md:fixed md:bottom-0 md:right-0">
-          <div class="md:max-w-[8rem] flex flex-wrap md:flex-col justify-center md:justify-start md:items-start space-x-2 md:space-x-0">
-            <%= MarkdownToHtml.call(@form_configs[:policy_links]) %>
+      <% unless turbo_native_app? %>
+        <%= render 'shared/attribution', link_path: '/start', account: @submitter.account, with_style: false %>
+        <% if @form_configs[:policy_links].present? %>
+          <div class="text-center md:text-neutral-500 md:pr-3 md:pb-3 md:text-sm md:text-left mt-2 md:mt-0 md:fixed md:bottom-0 md:right-0">
+            <div class="md:max-w-[8rem] flex flex-wrap md:flex-col justify-center md:justify-start md:items-start space-x-2 md:space-x-0">
+              <%= MarkdownToHtml.call(@form_configs[:policy_links]) %>
+            </div>
           </div>
-        </div>
+        <% end %>
       <% end %>
     </div>
   </main>
diff --git a/app/views/templates_form_preview/show.html.erb b/app/views/templates_form_preview/show.html.erb
index c40457cb3..47f1086ee 100644
--- a/app/views/templates_form_preview/show.html.erb
+++ b/app/views/templates_form_preview/show.html.erb
@@ -1,26 +1,38 @@
-<% banner_html = capture do %>
-  <div class="sticky top-0 z-50 bg-base-100 py-2 px-2 flex items-center" style="margin: 0px -8px -16px -8px">
-    <div class="text-xl md:text-3xl font-semibold focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-      <%= @template.name %>
-    </div>
-    <div class="flex items-center" style="margin-left: 20px; flex-shrink: 0">
-      <% if @template.submitters.size > 1 %>
-        <form action="<%= template_form_path(@template) %>" method="get" class="mr-3">
-          <submit-form data-on="change">
-            <select name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
-              <% @template.submitters.each do |submitter| %>
-                <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
-                  <%= submitter['name'] %>
+<% if turbo_native_app? %>
+  <% content_for(:native_title, @template.name) %>
+  <% if @template.submitters.size > 1 %>
+    <% @template.submitters.each do |submitter| %>
+      <native-action data-section="submitter" data-label="<%= submitter['name'] %>" data-selected="<%= submitter['uuid'] == @submitter.uuid %>">
+        <a href="<%= template_form_path(@template, uuid: submitter['uuid']) %>"></a>
+      </native-action>
+    <% end %>
+  <% end %>
+  <% banner_html = '' %>
+<% else %>
+  <% banner_html = capture do %>
+    <div class="sticky top-0 z-50 bg-base-100 py-2 px-2 flex items-center" style="margin: 0px -8px -16px -8px">
+      <div class="text-xl md:text-3xl font-semibold focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+        <%= @template.name %>
+      </div>
+      <div class="flex items-center" style="margin-left: 20px; flex-shrink: 0">
+        <% if @template.submitters.size > 1 %>
+          <form action="<%= template_form_path(@template) %>" method="get" class="mr-3">
+            <submit-form data-on="change">
+              <select name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
+                <% @template.submitters.each do |submitter| %>
+                  <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
+                    <%= submitter['name'] %>
+                  <% end %>
                 <% end %>
-              <% end %>
-            </select>
-          </submit-form>
-        </form>
-      <% end %>
-      <a href="<%= edit_template_path(@template) %>" class="base-button" data-turbo="false" style="flex-shrink: 0; padding: 0px 24px;">
-        <%= t('exit_preview') %>
-      </a>
+              </select>
+            </submit-form>
+          </form>
+        <% end %>
+        <a href="<%= edit_template_path(@template) %>" class="base-button" data-turbo="false" style="flex-shrink: 0; padding: 0px 24px;">
+          <%= t('exit_preview') %>
+        </a>
+      </div>
     </div>
-  </div>
+  <% end %>
 <% end %>
-<%= render template: 'submit_form/show', locals: { dry_run: true, expand: false, banner_html:, scroll_padding: '-120px' } %>
+<%= render template: 'submit_form/show', locals: { dry_run: true, expand: false, banner_html:, scroll_padding: turbo_native_app? ? '-80px' : '-120px' } %>