docuseal/app/views/submit_form/show.html.erb

<% content_for(:html_title, "#{@submitter.submission.name || @submitter.submission.template&.name} | DocuSeal") %>
<% I18n.with_locale(@submitter.account.locale) do %>
  <% content_for(:html_description, t('account_name_has_invited_you_to_fill_and_sign_documents_online_effortlessly_with_a_secure_fast_and_user_friendly_digital_document_signing_solution', account_name: @submitter.account.name)) %>
<% end %>
<% fields_index = Templates.build_field_areas_index(@submitter.submission.template_fields || @submitter.submission.template.fields) %>
<% values = @submitter.submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) } %>
<% submitters_index = @submitter.submission.submitters.index_by(&:uuid) %>
<% page_blob_struct = Struct.new(:url, :metadata) %>
<% service_url_time = ActiveStorage::Attachment.service_url_time %>
<% schema = Submissions.filtered_conditions_schema(@submitter.submission, values:, include_submitter_uuid: @submitter.uuid) %>
<% font_scale = 1000.0 / PdfUtils::US_LETTER_W %>
<% decline_modal_id = nil %>
<% delegate_modal_id = nil %>
<div style="max-height: -webkit-fill-available;">
  <main id="scrollbox">
    <div id="sr_only_content"></div>
    <div class="mx-auto block pb-72" style="max-width: 1000px">
      <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 transition-transform duration-300 %>
      <%= local_assigns[:banner_html] || capture do %>
        <%= render('submit_form/banner') %>
        <header id="signing_form_header" class="sticky min-[1230px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
          <h1 class="text-xl md:text-2xl font-medium focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            <%= @submitter.submission.name || @submitter.submission.template&.name %>
          </h1>
          <div class="flex items-center gap-2 group" style="margin-left: 20px; flex-shrink: 0">
            <% if @form_configs[:with_decline] && !@submitter.viewer? %>
              <modal-button data-target="<%= decline_modal_id = SecureRandom.uuid %>" class="hidden group-has-[.complete-button]:flex">
                <button type="button" class="btn btn-sm md:!px-5 px-2" aria-label="<%= t(:decline) %>">
                  <span class="hidden md:inline"><%= t(:decline) %></span>
                  <span class="inline md:hidden">
                    <%= svg_icon('x', class: 'w-5 h-5') %>
                  </span>
                </button>
              </modal-button>
            <% end %>
            <span id="complete_button_container" class="peer contents"></span>
            <% if @form_configs[:with_delegate] && !@submitter.viewer? %>
              <modal-button data-target="<%= delegate_modal_id = SecureRandom.uuid %>" class="hidden peer-empty:flex">
                <button id="delegate_button" type="button" class="btn btn-sm !px-5"><%= t(:delegate) %></button>
              </modal-button>
              <% if @form_configs[:with_decline] && !@submitter.viewer? %>
                <modal-button data-target="<%= decline_modal_id %>" class="hidden peer-empty:flex">
                  <button id="decline_button" type="button" class="btn btn-sm px-2" aria-label="<%= t(:decline) %>">
                    <%= svg_icon('x', class: 'w-5 h-5') %>
                  </button>
                </modal-button>
              <% end %>
              <% if @form_configs[:with_partial_download] %>
                <download-button role="button" tabindex="0" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2 hidden peer-empty:flex" title="<%= t('download') %>" aria-label="<%= t('download') %>">
                  <span data-target="download-button.defaultButton">
                    <%= svg_icon('download', class: 'w-5 h-5') %>
                  </span>
                  <span class="hidden" data-target="download-button.loadingButton">
                    <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
                  </span>
                </download-button>
              <% end %>
            <% else %>
              <% if @form_configs[:with_decline] && !@submitter.viewer? %>
                <modal-button data-target="<%= decline_modal_id %>" class="hidden peer-empty:flex">
                  <button id="decline_button" type="button" class="btn btn-sm !px-5"><%= t(:decline) %></button>
                </modal-button>
              <% end %>
              <% if @form_configs[:with_partial_download] %>
                <download-button role="button" tabindex="0" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm !px-4 hidden peer-empty:flex" aria-label="<%= t('download') %>">
                  <span class="flex items-center justify-center" data-target="download-button.defaultButton">
                    <%= svg_icon('download', class: 'w-6 h-6 inline md:hidden') %>
                    <span class="hidden md:inline"><%= t('download') %></span>
                  </span>
                  <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
                    <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
                    <span class="hidden md:inline"><%= t('downloading') %></span>
                  </span>
                </download-button>
              <% end %>
            <% end %>
          </div>
        </header>
        <scroll-buttons inert class="fixed right-5 top-2 hidden md:flex gap-1 z-50 ease-in-out opacity-0 -translate-y-10 group">
          <% if @form_configs[:with_decline] && !@submitter.viewer? %>
            <modal-button data-target="<%= decline_modal_id %>" class="hidden group-has-[.complete-button]:flex">
              <button type="button" class="btn btn-sm px-2" aria-label="<%= t(:decline) %>">
                <%= svg_icon('x', class: 'w-5 h-5') %>
              </button>
            </modal-button>
          <% end %>
          <span id="complete_button_container_scroll" class="peer contents"></span>
          <% if @form_configs[:with_delegate] && !@submitter.viewer? %>
            <modal-button data-target="<%= delegate_modal_id %>" class="hidden peer-empty:flex">
              <button id="delegate_button_mobile" type="button" class="btn btn-sm px-0" aria-label="<%= t(:delegate) %>">
                <span class="min-[1366px]:inline hidden px-3">
                  <%= t(:delegate) %>
                </span>
                <span class="inline min-[1366px]:hidden px-2">
                  <%= svg_icon('user_share', class: 'w-5 h-5') %>
                </span>
              </button>
            </modal-button>
            <% if @form_configs[:with_decline] && !@submitter.viewer? %>
              <modal-button data-target="<%= decline_modal_id %>" class="hidden peer-empty:flex">
                <button id="decline_button_mobile" type="button" class="btn btn-sm px-2" aria-label="<%= t(:decline) %>">
                  <%= svg_icon('x', class: 'w-5 h-5') %>
                </button>
              </modal-button>
            <% end %>
          <% else %>
            <% if @form_configs[:with_decline] && !@submitter.viewer? %>
              <modal-button data-target="<%= decline_modal_id %>" class="hidden peer-empty:flex">
                <button id="decline_button_mobile" type="button" class="btn btn-sm px-0" aria-label="<%= t(:decline) %>">
                  <span class="min-[1366px]:inline hidden px-3">
                    <%= t(:decline) %>
                  </span>
                  <span class="inline min-[1366px]:hidden px-2">
                    <%= svg_icon('x', class: 'w-5 h-5') %>
                  </span>
                </button>
              </modal-button>
            <% end %>
          <% end %>
          <% if @form_configs[:with_partial_download] %>
            <download-button role="button" tabindex="0" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2 hidden peer-empty:flex" aria-label="<%= t('download') %>">
              <span data-target="download-button.defaultButton">
                <%= svg_icon('download', class: 'w-5 h-5') %>
              </span>
              <span class="hidden" data-target="download-button.loadingButton">
                <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
              </span>
            </download-button>
          <% end %>
        </scroll-buttons>
      <% end %>
      <% schema.each do |item| %>
        <% document = @submitter.submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
        <div id="document-<%= document.uuid %>">
          <div class="sr_only_content"></div>
          <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
          <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
          <% lazyload_metadata = document.preview_images.last&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
          <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}#{Templates::ProcessDocument::PREVIEW_FORMAT}")) %>
            <page-container class="block relative my-4 shadow-md" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
              <img loading="lazy" src="<%= page.is_a?(ActiveStorage::Attachment) ? page.url(time: service_url_time) : page.url %>" width="<%= width %>" height="<%= height %>" alt="<%= "#{item['name']} - #{t('page')} #{index + 1}" %>">
              <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">
                <% if annots = document_annots_index[index] %>
                  <%= render 'submit_form/annotations', annots: %>
                <% end %>
                <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
                  <% value = values[field['uuid']].presence || (field['readonly'] == true && field['default_value'].present? ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submitter.submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil) %>
                  <% next if value.blank? %>
                  <% next if !field['readonly'] && field['submitter_uuid'] == @submitter.uuid %>
                  <% next if value == '{{date}}' && field['submitter_uuid'] != @submitter.uuid %>
                  <% next if field['conditions'].present? && values[field['uuid']].blank? && field['submitter_uuid'] != @submitter.uuid %>
                  <% next if field['conditions'].present? && field['submitter_uuid'] == @submitter.uuid %>
                  <% next if field.dig('preferences', 'formula').present? && field['submitter_uuid'] == @submitter.uuid %>
                  <%= render 'submissions/value', page_width: width, page_height: height, font_scale:, area:, field:, attachments_index: @attachments_index, value: field.dig('preferences', 'mask').present? ? TextUtils.mask_value(value, field.dig('preferences', 'mask')) : value, locale: @submitter.account.locale, timezone: @submitter.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: @form_configs[:with_signature_id], with_submitter_timezone: @form_configs[:with_submitter_timezone], with_timestamp_seconds: @form_configs[:with_timestamp_seconds], with_signature_id_reason: @form_configs[:with_signature_id_reason], with_signature_id_completed_at: @form_configs[:with_signature_id_completed_at] %>
                <% end %>
              </div>
            </page-container>
          <% 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]) %>
          </div>
        </div>
      <% end %>
    </div>
  </main>
</div>
<div class="fixed bottom-0 w-full h-0 z-50">
  <div class="mx-auto" style="max-width: 1000px">
    <div class="relative md:mx-32">
      <%= render 'submit_form/submission_form', attachments_index: @attachments_index, submitter: @submitter, signature_attachment: @signature_attachment, configs: @form_configs, dry_run: local_assigns[:dry_run], expand: local_assigns[:expand], scroll_padding: local_assigns.fetch(:scroll_padding, '-110px'), schema: %>
    </div>
  </div>
</div>
<% if @form_configs[:with_decline] && !@submitter.viewer? %>
  <%= render 'shared/html_modal', title: t(:decline), uuid: decline_modal_id do %>
    <%= render 'submit_form/decline_form', submitter: @submitter %>
  <% end %>
<% end %>
<% if @form_configs[:with_delegate] && !@submitter.viewer? %>
  <%= render 'shared/html_modal', title: t(:delegate), uuid: delegate_modal_id do %>
    <%= render 'submit_form/delegate_form', submitter: @submitter %>
  <% end %>
<% end %>
<%= render 'scripts/autosize_field' %>