fix refactor complete button

app/javascript/form.js

@@ -53,10 +53,8 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),
       fields: JSON.parse(this.dataset.fields),
-      completeButtonRef: document.getElementById('complete_button_container'),
-      completeButtonMobileRef: document.getElementById('complete_button_container_mobile'),
-      declineButtonRef: document.getElementById('decline_button')?.closest('modal-button'),
-      declineButtonMobileRef: document.getElementById('decline_button_mobile')?.closest('modal-button')
+      completeButtonContainer: document.getElementById('complete_button_container'),
+      completeButtonScrollContainer: document.getElementById('complete_button_container_scroll')
     })
 
     this.app.mount(this.appElem)

app/javascript/submission_form/form.vue

@@ -114,12 +114,12 @@
     </button>
   </Teleport>
   <Teleport
-    v-for="ref in (canShowCompleteButton ? [completeButtonRef, completeButtonMobileRef].filter(Boolean) : [])"
+    v-for="ref in (showCompleteButton ? [completeButtonContainer, completeButtonScrollContainer].filter(Boolean) : [])"
     :key="ref"
     :to="ref"
   >
     <button
-      class="btn btn-sm btn-neutral text-white px-4"
+      class="complete-button btn btn-sm btn-neutral text-white px-4"
       form="steps_form"
       type="submit"
       name="completed"
@@ -816,22 +816,12 @@ export default {
       required: false,
       default: null
     },
-    completeButtonRef: {
+    completeButtonContainer: {
       type: Object,
       required: false,
       default: null
     },
-    completeButtonMobileRef: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    declineButtonRef: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    declineButtonMobileRef: {
+    completeButtonScrollContainer: {
       type: Object,
       required: false,
       default: null
@@ -1053,6 +1043,7 @@ export default {
       isSubmitting: false,
       isSubmittingComplete: false,
       submittedValues: {},
+      isFormStarted: false,
       recalculateButtonDisabledKey: '',
       isAccessibilityMode: false
     }
@@ -1101,9 +1092,9 @@ export default {
         })
       })
     },
-    canShowCompleteButton () {
-      return this.completeButtonRef && !this.emptyValueRequiredStep && !this.isCompleted && !this.isInvite &&
-        this.stepFields.some((fields) => fields.some((f) => !isEmpty(this.values[f.uuid])))
+    showCompleteButton () {
+      return this.completeButtonContainer && !this.isCompleted && !this.isInvite && this.isFormStarted &&
+        !this.stepFields.find((fields) => fields.some((f) => f.required && isEmpty(this.submittedValues[f.uuid])))
     },
     submitButtonText () {
       if (this.alwaysMinimize) {
@@ -1287,15 +1278,6 @@ export default {
         this.currentStep -= 1
       }
     },
-    canShowCompleteButton: {
-      immediate: true,
-      handler (show) {
-        this.$nextTick(() => {
-          if (this.declineButtonRef) this.declineButtonRef.classList.toggle('hidden', show)
-          if (this.declineButtonMobileRef) this.declineButtonMobileRef.classList.toggle('hidden', show)
-        })
-      }
-    },
     attachmentConditionsIndex: {
       deep: true,
       immediate: true,
@@ -1715,6 +1697,8 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
+          this.isFormStarted = true
+
           const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))
 
           if (nextStep) {
@@ -1751,6 +1735,7 @@ export default {
     },
     async performComplete (resp) {
       this.isCompleted = true
+      this.isFormVisible = true
 
       if (resp?.text) {
         const respData = await resp.text()

app/views/submit_form/show.html.erb

@@ -21,21 +21,32 @@
           <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 space-x-2" style="margin-left: 20px; flex-shrink: 0">
-            <span id="complete_button_container"></span>
+          <div class="flex items-center gap-2 group" style="margin-left: 20px; flex-shrink: 0">
+            <% decline_modal_id = nil %>
+            <% if @form_configs[:with_decline] %>
+              <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] %>
-              <modal-button data-target="<%= delegate_modal_id = SecureRandom.uuid %>">
+              <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] %>
-                <modal-button data-target="<%= decline_modal_id = SecureRandom.uuid %>">
+                <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" title="<%= t('download') %>" aria-label="<%= t('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>
@@ -46,12 +57,12 @@
               <% end %>
             <% else %>
               <% if @form_configs[:with_decline] %>
-                <modal-button data-target="<%= decline_modal_id = SecureRandom.uuid %>">
+                <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" aria-label="<%= t('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>
@@ -65,10 +76,17 @@
             <% 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">
-          <span id="complete_button_container_mobile"></span>
+        <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] %>
+            <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] %>
-            <modal-button data-target="<%= delegate_modal_id %>">
+            <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) %>
@@ -79,23 +97,15 @@
               </button>
             </modal-button>
             <% if @form_configs[:with_decline] %>
-              <modal-button data-target="<%= decline_modal_id %>">
+              <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 %>
-            <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" 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>
           <% else %>
             <% if @form_configs[:with_decline] %>
-              <modal-button data-target="<%= decline_modal_id %>">
+              <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) %>
@@ -106,15 +116,15 @@
                 </button>
               </modal-button>
             <% end %>
-            <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" 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 %>
+          <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>
         </scroll-buttons>
       <% end %>
       <% schema.each do |item| %>

spec/system/signing_form_spec.rb

@@ -1286,17 +1286,19 @@ RSpec.describe 'Signing Form' do
       submission.update(template_fields: template.fields)
     end
 
-    it 'shows header complete button and hides decline after filling required fields' do
+    it 'shows header complete button and hides download after filling required fields' do
       visit submit_form_path(slug: submitter.slug)
 
       expect(page).to have_button('Decline')
+      expect(page).to have_css('download-button[aria-label="Download"]', visible: true)
       expect(page).not_to have_css('#complete_button_container button')
 
       fill_in 'First Name', with: 'John Doe'
       click_button 'next'
 
       expect(page).to have_css('#complete_button_container button')
-      expect(page).not_to have_button('Decline')
+      expect(page).to have_button('Decline')
+      expect(page).to have_css('download-button[aria-label="Download"]', visible: :hidden)
     end
 
     it 'completes the form via header complete button skipping optional fields' do