Jake Vanderwerf
2 days ago 235ce5716edc2f7cbe80fdccf26eac7269587839
src/forms/view.js
@@ -3,84 +3,85 @@
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */
/**
 * view.js
 * Frontend JavaScript for the Form Block
 */
class FormBlock {
   constructor() {
      this.controller = new window.jvbForm();
      this.controller = window.jvbForm;
      document.querySelectorAll('.jvb-form-block form').forEach(form => {
         this.controller.registerForm(form, {autosave: true,autoUpload: false});
         this.controller.registerForm(form, {
            cache: true,
            autoUpload: false,
            imageMeta: false,
         });
      });
      this.controller.subscribe((event, data) => {
         if (event === 'form-submit') {
            this.handleFormSubmission(data);
            this.handleFormSubmission(data).then(()=>{});
         }
      });
   }
   async handleFormSubmission(data) {
      let formId = data.formId;
      let formConfig = data.config;
      let formData = data.fullData;
      let form = formConfig.element;
   async handleFormSubmission(eventData) {
      const { config, data } = eventData;
      const form = config.element;
      // Create FormData instead of JSON
      const submitData = new FormData();
      // Add all regular form fields
      for (const [key, value] of Object.entries(formData)) {
         // Skip the nonce field - we don't need it for REST API with __return_true
         if (key === '_wpnonce' || key === '_wp_http_referer') {
            continue;
         }
      // Add regular form fields
      for (const [key, value] of Object.entries(data)) {
         if (Array.isArray(value)) {
            value.forEach(v => submitData.append(`${key}[]`, v));
         } else if (typeof value === 'object' && value !== null) {
            // For nested objects, you might want to JSON.stringify them
            submitData.append(key, JSON.stringify(value));
         } else {
            submitData.append(key, value);
         }
      }
      config.element.querySelectorAll('[name="form_id"],[name="form_type"],[name="timestamp"],[name="cf-turnstile-response"]').forEach(input => {
         submitData.append(input.name, input.value);
      });
      // Get uploaded files from UploadManager
      // Add uploaded files
      if (window.jvbUploads) {
         const files = await window.jvbUploads.getFilesForForm(form);
         try {
            const files = await window.jvbUploads.getFilesForForm(form);
         // Append files with their field names
         files.forEach(({file, fieldName, uploadId, meta}) => {
            // Use fieldName[] for multiple files per field
            submitData.append(`${fieldName}[]`, file);
         });
            files.forEach(({ file, fieldName }) => {
               submitData.append(`${fieldName}[]`, file);
            });
         } catch (error) {
            console.error('Error getting files:', error);
         }
      }
      let headers = {
         // 'X-WP-Nonce': window.auth.getNonce()
      };
      let block = form.closest('.jvb-form-block');
      this.controller.showFormStatus(formId, 'uploading');
      this.controller.showFormStatus(config.id, 'uploading');
      try {
         const response = await fetch(`${jvbSettings.api}forms`, {
            method: 'POST',
            credentials: 'same-origin',
            headers,
            body: submitData // Send FormData instead of JSON
            body: submitData
         });
         const result = await response.json();
         if (!response.ok) {
            this.controller.showFormStatus(formId, 'error');
            this.controller.handleFormError(form, result); // ✓ Show error to user
            return; // Stop processing
            this.controller.showFormStatus(config.id, 'error');
            this.controller.handleFormError(form, result);
            return;
         }
         this.controller.showFormStatus(formId, 'submitted');
         this.controller.showSummary(formId, '.jvb-form-block');
         this.controller.showFormStatus(config.id, 'submitted');
         // this.controller.handleFormSuccess(form, result);
         this.controller.showSummary({ changes: data, config: config });
         window.jvbA11y.announce('Form successfully submitted!');
         // Clean up uploaded files from IndexedDB after successful submission
         // Clean up uploaded files
         if (window.jvbUploads) {
            const uploadFields = form.querySelectorAll('[data-upload-field]');
            for (const field of uploadFields) {
@@ -88,17 +89,16 @@
               await window.jvbUploads.clearFieldFromStores(fieldId);
            }
         }
      } catch (error) {
         console.error('Form submission error:', error);
         this.controller.showFormStatus(formId, 'error');
         // Show user-friendly network error - IMPROVED
         this.controller.showFormStatus(config.id, 'error');
         this.controller.handleFormError(form, {
            message: 'Network error. Please check your connection and try again.',
            code: 'network_error'
         });
      } finally {
         this.controller.store.delete(formId);
         await this.controller.store.delete(config.id);
      }
   }
}