@wix/headless-forms 0.0.8 → 0.0.10

package/dist/services/form-service.d.ts

@@ -1,5 +1,6 @@
 import { forms } from '@wix/forms';
 import { type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
+import { FormValues } from '../react/types.js';
 /**
  * Response type for form submission operations.
  * Represents the different states a form submission can be in.
@@ -15,7 +16,7 @@ export type SubmitResponse = {
 };
 /**
  * API interface for the Form service, providing reactive form data management.
- * This service handles loading and managing form data, loading state, and errors.
+ * This service handles loading and managing form data, loading state, errors, and submissions.
  * It supports both pre-loaded form data and lazy loading with form IDs.
  *
  * @interface FormServiceAPI
@@ -27,6 +28,10 @@ export interface FormServiceAPI {
     isLoadingSignal: ReadOnlySignal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     errorSignal: ReadOnlySignal<string | null>;
+    /** Reactive signal containing submission response state */
+    submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Function to submit form with current values */
+    submitForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Service definition for the Form service.
@@ -39,23 +44,29 @@ export declare const FormServiceDefinition: string & {
     __config: {};
     isServiceDefinition?: boolean;
 } & FormServiceAPI;
+type OnSubmit = (formId: string, formValues: FormValues) => Promise<SubmitResponse>;
 /**
  * Configuration type for the Form service.
  * Supports two distinct patterns for providing form data:
  * - Pre-loaded form data (SSR/SSG scenarios)
  * - Lazy loading with form ID (client-side routing)
  *
+ * Optionally accepts a custom submission handler to override default behavior.
+ *
  * @type {FormServiceConfig}
  */
 export type FormServiceConfig = {
     formId: string;
+    onSubmit?: OnSubmit;
 } | {
     form: forms.Form;
+    onSubmit?: OnSubmit;
 };
 /**
- * Implementation of the Form service that manages reactive form data.
- * This service provides signals for form data, loading state, and error handling.
+ * Implementation of the Form service that manages reactive form data and submissions.
+ * This service provides signals for form data, loading state, error handling, and submission state.
  * It supports both pre-loaded form data and lazy loading with form IDs.
+ * Consumers can provide a custom submission handler via config.
  *
  * @example
  * ```tsx
@@ -64,6 +75,16 @@ export type FormServiceConfig = {
  *
  * // Lazy loading with form ID (client-side)
  * const formService = FormService.withConfig({ formId: 'form-123' });
+ *
+ * // With custom submission handler
+ * const formService = FormService.withConfig({
+ *   formId: 'form-123',
+ *   onSubmit: async (formId, formValues) => {
+ *     // Custom submission logic
+ *     await fetch('/api/submit', { method: 'POST', body: JSON.stringify({ formId, ...formValues }) });
+ *     return { type: 'success', message: 'Form submitted!' };
+ *   }
+ * });
  * ```
  */
 export declare const FormService: import("@wix/services-definitions").ServiceFactory<string & {
@@ -88,3 +109,4 @@ export declare const FormService: import("@wix/services-definitions").ServiceFac
  * ```
  */
 export declare function loadFormServiceConfig(formId: string): Promise<FormServiceConfig>;
+export {};

package/dist/services/form-service.js

@@ -1,4 +1,4 @@
-import { forms } from '@wix/forms';
+import { forms, submissions } from '@wix/forms';
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 /**
@@ -9,9 +9,10 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
  */
 export const FormServiceDefinition = defineService('formService');
 /**
- * Implementation of the Form service that manages reactive form data.
- * This service provides signals for form data, loading state, and error handling.
+ * Implementation of the Form service that manages reactive form data and submissions.
+ * This service provides signals for form data, loading state, error handling, and submission state.
  * It supports both pre-loaded form data and lazy loading with form IDs.
+ * Consumers can provide a custom submission handler via config.
  *
  * @example
  * ```tsx
@@ -20,12 +21,25 @@ export const FormServiceDefinition = defineService('formService');
  *
  * // Lazy loading with form ID (client-side)
  * const formService = FormService.withConfig({ formId: 'form-123' });
+ *
+ * // With custom submission handler
+ * const formService = FormService.withConfig({
+ *   formId: 'form-123',
+ *   onSubmit: async (formId, formValues) => {
+ *     // Custom submission logic
+ *     await fetch('/api/submit', { method: 'POST', body: JSON.stringify({ formId, ...formValues }) });
+ *     return { type: 'success', message: 'Form submitted!' };
+ *   }
+ * });
  * ```
  */
 export const FormService = implementService.withConfig()(FormServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
+    const submitResponseSignal = signalsService.signal({
+        type: 'idle',
+    });
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
     if (!hasSchema) {
@@ -51,10 +65,49 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
             isLoadingSignal.set(false);
         }
     }
+    async function defaultSubmitHandler(formId, formValues) {
+        try {
+            await submissions.createSubmission({ formId, ...formValues });
+            // TODO: add message
+            return { type: 'success' };
+        }
+        catch (error) {
+            console.error('Form submission failed:', error);
+            return { type: 'error', message: 'Failed to submit form' };
+        }
+    }
+    /**
+     * Submits the form with the provided values.
+     * Uses custom handler if provided in config, otherwise uses default submission.
+     */
+    async function submitForm(formValues) {
+        const form = formSignal.get();
+        if (!form) {
+            console.error('Cannot submit: form not loaded');
+            return;
+        }
+        // @ts-expect-error
+        const formId = form._id ? form._id : form.id;
+        submitResponseSignal.set({ type: 'idle' });
+        try {
+            const handler = config.onSubmit || defaultSubmitHandler;
+            const response = await handler(formId, formValues);
+            submitResponseSignal.set(response);
+        }
+        catch (error) {
+            console.error('Unexpected error during submission:', error);
+            submitResponseSignal.set({
+                type: 'error',
+                message: 'Unexpected error during submission',
+            });
+        }
+    }
     return {
         formSignal: formSignal,
         isLoadingSignal: isLoadingSignal,
         errorSignal: errorSignal,
+        submitResponseSignal: submitResponseSignal,
+        submitForm: submitForm,
     };
 });
 async function fetchForm(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -41,8 +41,8 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@wix/form-public": "^0.17.0",
-    "@wix/forms": "^1.0.329",
+    "@wix/form-public": "^0.26.0",
+    "@wix/forms": "^1.0.330",
     "@wix/headless-utils": "0.0.4",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"