Partial submissions (#705)

* Implement partial form submissions feature

* Add status filtering for form submissions

* Add Partial Submission in Analytics

* improve partial submission

* fix lint

* Add type checking for submission ID in form submission job

* on form stats Partial Submissions only if enable

* Partial Submissions is PRO Feature

* Partial Submissions is PRO Feature

* improvement migration

* Update form submission status labels to 'Submitted' and 'In Progress'

* start partial sync when dataFormValue update

* badge size xs

* Refactor partial submission hash management

* Refactor partial form submission handling in PublicFormController

* fix submissiona

* Refactor form submission ID handling and metadata processing

- Improve submission ID extraction and decoding across controllers
- Add robust handling for submission hash and ID conversion
- Enhance metadata processing in StoreFormSubmissionJob
- Simplify submission storage logic with clearer metadata extraction
- Minor UI improvements in FormSubmissions and OpenTable components

* Enhance form submission settings UI with advanced partial submission options

- Restructure partial submissions toggle with more descriptive label
- Add advanced submission options section with Pro tag
- Improve help text for partial submissions feature
- Update ProTag with more detailed upgrade modal description

* Refactor partial form submission sync mechanism

- Improve partial submission synchronization in usePartialSubmission composable
- Replace interval-based sync with Vue's reactive watch
- Add robust handling for different form data input patterns
- Implement onBeforeUnmount hook for final sync attempt
- Enhance data synchronization reliability and performance

* Improve partial form submission validation and synchronization

* fix lint

* Refactor submission identifier processing in PublicFormController

- Updated the docblock for the method responsible for processing submission identifiers to clarify its functionality. The method now explicitly states that it converts a submission hash or string ID into a numeric submission_id, ensuring consistent internal storage format.

These changes aim to improve code documentation and enhance understanding of the method's purpose and behavior.

* Enhance Form Logic Condition Checker to Exclude Partial Submissions

- Updated the query in FormLogicConditionChecker to exclude submissions with a status of 'partial', ensuring that only complete submissions are processed.
- Minor formatting adjustment in the docblock of PublicFormController for improved clarity.

These changes aim to refine submission handling and enhance the accuracy of form logic evaluations.

* Partial Submission Test

* Refactor FormSubmissionController and PartialSubmissionTest for Consistency

- Updated the `FormSubmissionController` to improve code consistency by adjusting the formatting of anonymous functions in the `filter` and `first` methods.
- Modified `PartialSubmissionTest` to simplify the `Storage::fake()` method call, removing the unnecessary 'local' parameter for better clarity.

These changes aim to enhance code readability and maintainability across the form submission handling and testing components.

* Enhance FormSubmissionController and EditSubmissionTest for Clarity

- Added validation to the `FormSubmissionController` by introducing `$submissionData = $request->validated();` to ensure that only validated data is processed for form submissions.
- Improved code readability in the `FormSubmissionController` by adjusting the formatting of anonymous functions in the `filter` and `first` methods.
- Removed unnecessary blank lines in the `EditSubmissionTest` to streamline the test setup.

These changes aim to enhance data integrity during form submissions and improve overall code clarity and maintainability.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/components/FormStats.vue

@@ -118,7 +118,12 @@ export default {
             borderColor: "rgba(16, 185, 129, 1)",
             data: [],
           },
-        ],
+        ].concat(this.form.enable_partial_submissions ? [{
+            label: "Partial Submissions",
+            backgroundColor: "rgba(255, 193, 7, 1)",
+            borderColor: "rgba(255, 193, 7, 1)",
+            data: [],
+          }] : []),
       },
       chartOptions: {
         scales: {
@@ -172,6 +177,9 @@ export default {
           this.chartData.labels = Object.keys(statsData.views)
           this.chartData.datasets[0].data = statsData.views
           this.chartData.datasets[1].data = statsData.submissions
+          if (this.form.enable_partial_submissions) {
+            this.chartData.datasets[2].data = statsData.partial_submissions
+          }
           this.isLoading = false
         }
       }).catch((error) => {

client/components/open/forms/components/FormSubmissions.vue

@@ -42,6 +42,14 @@
             </VForm>
           </div>
           <div class="font-semibold flex gap-2">
+            <USelectMenu
+              class="w-32"
+              v-if="form.enable_partial_submissions"
+              v-model="selectedStatus"
+              :options="statusList"
+              value-attribute="value"
+              option-attribute="label"
+            />
             <UButton
               size="sm"
               color="white"
@@ -125,6 +133,12 @@ export default {
       }),
       displayColumns: {},
       wrapColumns: {},
+      statusList: [
+        { label: 'All', value: 'all' },
+        { label: 'Submitted', value: 'completed' },
+        { label: 'In Progress', value: 'partial' }
+      ],
+      selectedStatus: 'all',
     }
   },
 
@@ -147,7 +161,11 @@ export default {
     filteredData() {
       if (!this.tableData) return []
 
-      const filteredData = clonedeep(this.tableData)
+      let filteredData = clonedeep(this.tableData)
+
+      if (this.selectedStatus !== 'all') {
+        filteredData = filteredData.filter((submission) => submission.status === this.selectedStatus)
+      }
 
       if (this.searchForm.search === '' || this.searchForm.search === null) {
         return filteredData
@@ -170,6 +188,9 @@ export default {
     },
     'searchForm.search'() {
       this.dataChanged()
+    },
+    'selectedStatus'() {
+      this.dataChanged()
     }
   },
 

client/components/open/forms/components/form-components/FormSubmissionSettings.vue

@@ -31,7 +31,7 @@
       v-if="hasPaymentBlock"
       color="primary"
       variant="subtle"
-      title="You have a payment block in your form. so can't disable auto save"
+      title="Must be enabled with a payment block."
       class="max-w-md"
     />
     
@@ -76,6 +76,31 @@
       </div>
     </div>
 
+    <!-- Advanced Submission Settings -->
+    <h4 class="font-semibold mt-4 border-t pt-4">
+      Advanced Submission Options <pro-tag />
+    </h4>
+    <p class="text-gray-500 text-sm mb-4">
+      Configure advanced options for form submissions and data collection.
+    </p>
+    
+    <ToggleSwitchInput
+      name="enable_partial_submissions"
+      :form="form"
+      help="Capture incomplete form submissions to analyze user drop-off points and collect partial data even when users don't complete the entire form."
+    >
+      <template #label>
+        <span class="text-sm">
+          Collect partial submissions
+        </span>
+        <ProTag
+          class="ml-1"
+          upgrade-modal-title="Upgrade to collect partial submissions"
+          upgrade-modal-description="Capture valuable data from incomplete form submissions. Analyze where users drop off and collect partial information even when they don't complete the entire form."
+        />
+      </template>
+    </ToggleSwitchInput>
+
     <!-- Post-Submission Behavior -->
     <h4 class="font-semibold mt-4 border-t pt-4">
       After Submission <pro-tag