@wix/headless-bookings 0.0.96 → 0.0.97

package/dist/services/booking-form/booking-form.js

@@ -9,9 +9,8 @@
  */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { FormServiceDefinition } from '@wix/headless-forms/services';
 import { BookingServiceDefinition, } from '../booking/booking.js';
-import { hasForm, extractFormIdFromConfig } from './utils.js';
+import { hasForm, extractFormIdFromConfig, hasFormId } from './utils.js';
 // ============================================================================
 // Constants
 // ============================================================================
@@ -20,6 +19,7 @@ import { hasForm, extractFormIdFromConfig } from './utils.js';
  * All booking forms must belong to this namespace.
  */
 export const BOOKING_FORM_NAMESPACE = 'wix.bookings.v2.bookings';
+const DEFAULT_FORM_ID = '00000000-0000-0000-0000-000000000000';
 /**
  * Error thrown when BookingFormService cannot be initialized due to missing configuration.
  * This occurs when:
@@ -54,32 +54,51 @@ export const BookingFormServiceDefinition = defineService('bookingForm');
 // ============================================================================
 /**
  * Validates that a form belongs to the bookings namespace.
- * @param form The form to validate
+ * @param config The service config that may contain a pre-loaded form
  * @throws Error if the form is not from the bookings namespace
  */
 function validateBookingFormNamespace(form) {
-    // Check if form has namespace property and validate it
-    // The namespace might be in different locations depending on the form structure
-    const formNamespace = form.namespace ||
-        form._namespace;
+    const formNamespace = form.namespace;
     if (formNamespace && formNamespace !== BOOKING_FORM_NAMESPACE) {
         throw new Error(`BookingFormService: Invalid form namespace. ` +
             `Expected "${BOOKING_FORM_NAMESPACE}", but received "${formNamespace}". ` +
             `Ensure the form is a booking form.`);
     }
 }
+function validateBookingFormConfig({ config, services, }) {
+    if (!config) {
+        return;
+    }
+    if (hasForm(config)) {
+        validateBookingFormNamespace(config.form);
+        const servicesFormId = services.length > 1 ? DEFAULT_FORM_ID : services?.[0]?.form?._id;
+        if (servicesFormId !== config.form._id) {
+            throw new Error(`BookingFormService: Invalid form ID. ` +
+                `Expected "${config.form._id}", but received "${servicesFormId}". ` +
+                `Ensure the form is the same as the selected services form.`);
+        }
+    }
+}
 /**
  * Extracts the form ID from either config type or from services.
+ *
+ * Extraction priority:
+ * 1. From config (if formId is provided directly or extracted from pre-loaded form)
+ * 2. From services:
+ *    - If multiple services: use DEFAULT_FORM_ID
+ *    - If single service: use the service's form ID
+ *
  * @param config The service config (optional)
  * @param services The list of services to extract formId from if config is not provided
  * @returns The form ID
+ * @throws BookingFormConfigurationError if no formId can be extracted
  */
 function extractFormId(config, services) {
     // Try to extract from config first
     let formId = extractFormIdFromConfig(config);
     // Fallback to extracting from services
     if (!formId) {
-        formId = services.find((s) => s.form?._id)?.form?._id;
+        formId = services.length > 1 ? DEFAULT_FORM_ID : services?.[0]?.form?._id;
     }
     if (!formId) {
         throw new BookingFormConfigurationError('BookingFormService: no formId found in config or services. ' +
@@ -87,6 +106,23 @@ function extractFormId(config, services) {
     }
     return formId;
 }
+/**
+ * Extracts service IDs from config or services.
+ *
+ * Extraction priority:
+ * 1. From config.serviceIds if config has formId and serviceIds are provided
+ * 2. From services array (extract _id from each service)
+ *
+ * @param config The service config (optional)
+ * @param services The list of services to extract IDs from if config doesn't provide them
+ * @returns Array of service IDs
+ */
+function getServiceIds(config, services) {
+    if (hasFormId(config) && config.serviceIds) {
+        return config.serviceIds;
+    }
+    return services.map((s) => s._id).filter(Boolean);
+}
 // ============================================================================
 // Service Implementation
 // ============================================================================
@@ -98,8 +134,16 @@ function extractFormId(config, services) {
  * 1. Client-side: formId is provided, form is loaded dynamically
  * 2. SSR/SSG: Pre-loaded form is provided (must be from bookings namespace)
  *
- * NOTE: The Form.Fields ref is managed internally - the core component passes
- * a validate callback that the service stores and calls when validateFormSubmission() is invoked.
+ * Initialization:
+ * - Requires either a config (formId or form) OR BookingService with selected services
+ * - If config is not provided, formId is extracted from selected services
+ * - For multiple services, uses DEFAULT_FORM_ID; for single service, uses service's form ID
+ * - Service IDs are extracted from config.serviceIds or from selected services
+ *
+ * Validation:
+ * - The Form.Fields core component registers a validation callback via setValidateCallback
+ * - The validateFormSubmission() method calls this registered callback
+ * - The callback may be null initially until the core component registers it
  *
  * @example
  * ```tsx
@@ -108,24 +152,33 @@ function extractFormId(config, services) {
  *   BookingFormServiceDefinition.withConfig({ formId: 'form-123' })
  * );
  *
+ * // Pattern 1b: Client-side loading with service IDs
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({
+ *     formId: 'form-123',
+ *     serviceIds: ['service-1', 'service-2']
+ *   })
+ * );
+ *
  * // Pattern 2: SSR with pre-loaded form
  * const bookingFormService = useService(
  *   BookingFormServiceDefinition.withConfig({ form: preloadedForm })
  * );
  *
- * // Store form submission
- * bookingFormService.setFormSubmission(formValues);
+ * // Pattern 3: No config - formId extracted from BookingService
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig(undefined)
+ * );
  *
- * // Validate form
- * const result = await bookingFormService.validateFormSubmission();
- * if (result.valid) {
+ * // Validate form (callback must be registered by core component first)
+ * const result = await bookingFormService.validateFormSubmission?.();
+ * if (result?.valid) {
  *   // Proceed with booking
  * }
  * ```
  */
 export const BookingFormService = implementService.withConfig()(BookingFormServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
-    const formService = getService(FormServiceDefinition);
     // BookingService is optional - may not be available if not wrapped with Booking.Root
     let bookingService = null;
     try {
@@ -135,6 +188,10 @@ export const BookingFormService = implementService.withConfig()(BookingFormServi
         // BookingService not available - that's ok if formId was provided explicitly
         bookingService = null;
     }
+    /**
+     * Helper to extract services from BookingService.
+     * Returns empty array if BookingService is not available.
+     */
     const getServices = () => {
         if (!bookingService) {
             return [];
@@ -150,64 +207,37 @@ export const BookingFormService = implementService.withConfig()(BookingFormServi
     if (!config && (!bookingService || !hasServiceSelections)) {
         throw new BookingFormConfigurationError();
     }
-    // Determine if we have a pre-loaded form
-    const hasPreloadedForm = hasForm(config);
-    // If form is provided, validate namespace
-    if (hasPreloadedForm) {
-        validateBookingFormNamespace(config.form);
-    }
-    // Extract formId from config (either directly or from form object)
-    const formIdValue = extractFormId(config, getServices());
-    // Initialize formSubmission signal (stores form data to be submitted)
-    const formSubmission = signalsService.signal(null);
-    // Initialize submissionId signal (for future use)
-    const formSubmissionId = signalsService.signal(null);
-    // formId signal - readonly
-    const formId = signalsService.signal(formIdValue);
-    // form signal - contains pre-loaded form if provided
-    const form = signalsService.signal(hasForm(config) ? config.form : null);
-    // Internal: Store validate callback (set by core component, not exposed publicly)
-    let _validateCallback = null;
-    // Internal: Register validate callback (called by core component via closure)
-    const _setValidateCallback = (callback) => {
-        _validateCallback = callback;
-    };
-    // Action to set form submission data
-    const setFormSubmission = (formValues) => {
-        formSubmission.set(formValues);
-    };
-    // Action to validate form - delegates to internally registered callback
-    const validateFormSubmission = async () => {
-        if (!_validateCallback) {
-            console.error('BookingFormService: Validate callback not registered. ' +
-                'Ensure BookingForm component is mounted.');
-            return { valid: false, validationFailures: ['Form not initialized'] };
-        }
-        return _validateCallback();
-    };
-    // Auto-sync formValues to BookingService.formSubmission (client-side only)
-    // This keeps Booking.Data.formSubmission updated as the user types
-    // and ensures the book action gets the latest form values
-    // Only set up sync if BookingService is available
-    if (bookingService) {
-        signalsService.effect(() => {
-            const formValues = formService.formValuesSignal.get();
-            if (formValues && Object.keys(formValues).length > 0) {
-                bookingService.actions.setFormSubmission(formValues);
-            }
+    const serviceSelections = getServices();
+    // Validate config
+    validateBookingFormConfig({ config, services: serviceSelections });
+    // Extract formId from config (either directly or from form object) or from services
+    const formIdValue = extractFormId(config, serviceSelections);
+    // Extract service IDs to pass to FormService (from config or services)
+    const serviceIds = getServiceIds(config, serviceSelections);
+    /**
+     * Form service config signal.
+     *
+     * If pre-loaded form is provided (SSR/SSG):
+     *   - Creates config with the form object
+     *
+     * Otherwise (client-side loading):
+     *   - Creates config with formId, namespace, and metadata
+     *   - Includes serviceIds in additionalMetadata for FormService
+     */
+    const formServiceConfig = signalsService.signal(hasForm(config)
+        ? { form: config.form }
+        : {
+            formId: formIdValue,
+            namespace: BOOKING_FORM_NAMESPACE,
+            additionalMetadata: {
+                ...config?.additionalMetadata,
+                serviceIds,
+            },
         });
-    }
-    // Public API (what's exposed in BookingFormServiceAPI interface)
-    const publicApi = {
-        formValues: formService.formValuesSignal,
-        formSubmission,
-        formSubmissionId,
-        formId,
-        form,
-        setFormSubmission,
-        validateFormSubmission,
-        // Internal method for core component access
-        _setValidateCallback,
+    /**
+     * Public API implementation.
+     */
+    return {
+        formServiceConfig,
     };
-    return publicApi;
 });

package/dist/services/index.d.ts

@@ -8,7 +8,7 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, Ti
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from '../api/query-services/index.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
-export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';
+export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, } from './booking-form/booking-form.js';
 export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type Location, type LoadLocationListServiceResult, getLocationById, } from './location-list/location-list.js';
 export { StaffMemberListService, StaffMemberListServiceDefinition, loadStaffMemberListServiceInitialData, staffMemberListServiceBinding, type StaffMemberListServiceAPI, type StaffMemberListServiceConfig, type StaffMemberListActions, type StaffMemberData, type LoadStaffMemberListServiceResult, } from './staff-member-list/staff-member-list.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "f9c07dcbd13bfcae1645e58e7c0cb56dbf2cea75260bc86cd19cafeb"
+  "falconPackageHash": "7e4084020a17ac4efa052dae5a1a2a9ace583d3ea7ed88f9ff71cc9f"
 }