@wix/headless-forms 0.0.8 → 0.0.9

package/cjs/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/cjs/dist/services/form-service.js

@@ -13,9 +13,10 @@ const signals_1 = require("@wix/services-definitions/core-services/signals");
  */
 exports.FormServiceDefinition = (0, services_definitions_1.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
@@ -24,12 +25,25 @@ exports.FormServiceDefinition = (0, services_definitions_1.defineService)('formS
  *
  * // 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!' };
+ *   }
+ * });
  * ```
  */
 exports.FormService = services_definitions_1.implementService.withConfig()(exports.FormServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(signals_1.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) {
@@ -55,10 +69,49 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
             isLoadingSignal.set(false);
         }
     }
+    async function defaultSubmitHandler(formId, formValues) {
+        try {
+            await forms_1.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/dist/react/Form.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { type CheckboxGroupProps, type CheckboxProps, type PhoneInputProps, type DateInputProps, type DatePickerProps, type DateTimeInputProps, type DropdownProps, type FileUploadProps, type MultilineAddressProps, type NumberInputProps, type RadioGroupProps, type RatingInputProps, type RichTextProps, type SignatureProps, type SubmitButtonProps, type TagsProps, type TextAreaProps, type TextInputProps, type TimeInputProps, type ProductListProps, type FixedPaymentProps, type PaymentInputProps, type DonationProps, type AppointmentProps, type ImageChoiceProps } from './types';
 import { type FormServiceConfig } from '../services/form-service';
-import { CheckboxGroupProps, CheckboxProps, PhoneInputProps, DateInputProps, DatePickerProps, DateTimeInputProps, DropdownProps, FileUploadProps, MultilineAddressProps, NumberInputProps, RadioGroupProps, RatingInputProps, RichTextProps, SignatureProps, SubmitButtonProps, TagsProps, TextAreaProps, TextInputProps, TimeInputProps, ProductListProps, FixedPaymentProps, PaymentInputProps, DonationProps, AppointmentProps, ImageChoiceProps } from './types.js';
 /**
  * Props for the Form root component following the documented API
  */

package/dist/react/Form.js

@@ -457,10 +457,9 @@ export const Fields = React.forwardRef((props, ref) => {
     const handleFormValidate = useCallback((errors) => {
         setFormErrors(errors);
     }, []);
-    return (_jsx(CoreFields, { children: ({ form }) => {
-            console.log('Fields form', form);
+    return (_jsx(CoreFields, { children: ({ form, submitForm }) => {
             if (!form)
                 return null;
-            return (_jsx("div", { ref: ref, children: _jsx(FormViewer, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap }) }));
+            return (_jsx("div", { ref: ref, children: _jsx(FormViewer, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues) }) }));
         } }));
 });

package/dist/react/core/Form.d.ts

@@ -1,5 +1,6 @@
 import { forms } from '@wix/forms';
 import { FormServiceConfig } from '../../services/form-service.js';
+import { FormValues } from '../types.js';
 /**
  * Props for Root headless component
  */
@@ -223,6 +224,7 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
  */
 interface FieldsRenderProps {
     form: forms.Form | null;
+    submitForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component
@@ -231,12 +233,13 @@ interface FieldsProps {
     children: (props: FieldsRenderProps) => React.ReactNode;
 }
 /**
- * Fields component that provides form data to its children.
- * This component accesses the form data from the service and passes it to children via render props.
+ * Fields component that provides form data and actions to its children.
+ * This component accesses the form data and submitForm action from the service
+ * and passes them to children via render props.
  *
  * @component
  * @param {FieldsProps} props - Component props
- * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data and actions
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -244,11 +247,14 @@ interface FieldsProps {
  * function FormFields() {
  *   return (
  *     <Form.Fields>
- *       {({ form }) => (
+ *       {({ form, submitForm }) => (
  *         form ? (
  *           <div>
  *             <h2>{form.name}</h2>
  *             <p>{form.description}</p>
+ *             <button onClick={() => submitForm({ field1: 'value' })}>
+ *               Submit
+ *             </button>
  *           </div>
  *         ) : null
  *       )}

package/dist/react/core/Form.js

@@ -141,9 +141,10 @@ export function LoadingError(props) {
  * ```
  */
 export function Error(props) {
-    // TODO: Implement submit response handling when submitResponseSignal is added to service
-    const error = null;
-    const hasError = false;
+    const { submitResponseSignal } = useService(FormServiceDefinition);
+    const submitResponse = submitResponseSignal.get();
+    const error = submitResponse.type === 'error' ? submitResponse.message : null;
+    const hasError = submitResponse.type === 'error';
     return props.children({
         error,
         hasError,
@@ -176,21 +177,25 @@ export function Error(props) {
  * ```
  */
 export function Submitted(props) {
-    // TODO: Implement submit response handling when submitResponseSignal is added to service
-    const isSubmitted = false;
-    const message = DEFAULT_SUCCESS_MESSAGE;
+    const { submitResponseSignal } = useService(FormServiceDefinition);
+    const submitResponse = submitResponseSignal.get();
+    const isSubmitted = submitResponse.type === 'success';
+    const message = submitResponse.type === 'success'
+        ? submitResponse.message || DEFAULT_SUCCESS_MESSAGE
+        : DEFAULT_SUCCESS_MESSAGE;
     return props.children({
         isSubmitted,
         message,
     });
 }
 /**
- * Fields component that provides form data to its children.
- * This component accesses the form data from the service and passes it to children via render props.
+ * Fields component that provides form data and actions to its children.
+ * This component accesses the form data and submitForm action from the service
+ * and passes them to children via render props.
  *
  * @component
  * @param {FieldsProps} props - Component props
- * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data and actions
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -198,11 +203,14 @@ export function Submitted(props) {
  * function FormFields() {
  *   return (
  *     <Form.Fields>
- *       {({ form }) => (
+ *       {({ form, submitForm }) => (
  *         form ? (
  *           <div>
  *             <h2>{form.name}</h2>
  *             <p>{form.description}</p>
+ *             <button onClick={() => submitForm({ field1: 'value' })}>
+ *               Submit
+ *             </button>
  *           </div>
  *         ) : null
  *       )}
@@ -212,9 +220,10 @@ export function Submitted(props) {
  * ```
  */
 export function Fields(props) {
-    const { formSignal } = useService(FormServiceDefinition);
+    const { formSignal, submitForm } = useService(FormServiceDefinition);
     const form = formSignal.get();
     return props.children({
         form,
+        submitForm,
     });
 }