@bailierich/booking-components 2.0.0 → 2.1.0

package/components/BookingFlow/steps/ContactForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
 import type { ContactInfo, ContactFormSettings, OptInModule } from '../../../types';
 import { createEntranceAnimation } from '../../../styles';
@@ -30,9 +30,33 @@ export function ContactForm({
 }: ContactFormProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentOptInModule, setCurrentOptInModule] = useState<OptInModule | null>(null);
-  const [optInChecked, setOptInChecked] = useState<Record<string, boolean>>({});
+  const [optInChecked, setOptInChecked] = useState<Record<string, boolean>>(() => {
+    // Initialize from defaultChecked on each module
+    const defaults: Record<string, boolean> = {};
+    optInModules.forEach(m => {
+      if (m.defaultChecked) defaults[m.id] = true;
+    });
+    return defaults;
+  });
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const defaultsFiredRef = useRef(false);
+
+  // Fire onOptInData for defaultChecked modules on mount
+  useEffect(() => {
+    if (defaultsFiredRef.current) return;
+    defaultsFiredRef.current = true;
+    optInModules.forEach(m => {
+      if (m.defaultChecked && m.renderCustomForm && onOptInData) {
+        // Auto-submit consent data for pre-checked modules
+        m.renderCustomForm(
+          () => {},
+          (data: any) => onOptInData(m.id, data),
+          colors
+        );
+      }
+    });
+  }, []);
 
   const headerText = settings.headerContent?.value || 'Your Information';
 
@@ -114,8 +138,28 @@ export function ContactForm({
   const handleOptInChange = (module: OptInModule, checked: boolean) => {
     setOptInChecked(prev => ({ ...prev, [module.id]: checked }));
     if (checked) {
+      // For modules with renderCustomForm that auto-submit (like SMS consent),
+      // fire the submit immediately without showing BottomSheet
+      if (module.renderCustomForm) {
+        let submitted = false;
+        const result = module.renderCustomForm(
+          () => {},
+          (data: any) => {
+            if (onOptInData) onOptInData(module.id, data);
+            submitted = true;
+          },
+          colors
+        );
+        // If renderCustomForm returned null and submitted, skip the BottomSheet
+        if (result === null && submitted) return;
+      }
       setCurrentOptInModule(module);
       setIsModalOpen(true);
+    } else {
+      // Unchecked — revoke by sending null data
+      if (onOptInData) {
+        onOptInData(module.id, null);
+      }
     }
   };
 
@@ -203,9 +247,11 @@ export function ContactForm({
                       {module.label}
                       {module.required && <span className="text-red-500 ml-1">*</span>}
                     </span>
-                    <p className="text-xs text-gray-500 mt-0.5">
-                      Check this to provide additional information
-                    </p>
+                    {module.description && (
+                      <p className="text-xs text-gray-500 mt-0.5">
+                        {module.description}
+                      </p>
+                    )}
                   </div>
                 </label>
               ))}

package/dist/{index-DAai7Glf.d.mts → index-CqGdjmIM.d.mts}

@@ -25,7 +25,9 @@ interface Addon {
 interface OptInModule {
     id: string;
     label: string;
+    description?: string;
     required: boolean;
+    defaultChecked?: boolean;
     formTitle?: string;
     formFields?: FormField[];
     renderCustomForm?: (onClose: () => void, onSubmitData: (data: any) => void, colors: {

package/dist/{index-DAai7Glf.d.ts → index-CqGdjmIM.d.ts}

@@ -25,7 +25,9 @@ interface Addon {
 interface OptInModule {
     id: string;
     label: string;
+    description?: string;
     required: boolean;
+    defaultChecked?: boolean;
     formTitle?: string;
     formFields?: FormField[];
     renderCustomForm?: (onClose: () => void, onSubmitData: (data: any) => void, colors: {

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { H as HoldTimerConfig, C as CreateHoldFn, E as ExtendHoldFn, R as ReleaseHoldFn, O as OptInModule, S as Service, a as ServiceCategory, b as ServiceSelectionSettings, D as DateSelectionSettings, T as TimeSelectionSettings, A as Addon, c as AddonSelectionSettings, d as ContactInfo, e as ContactFormSettings, P as PaymentConfig, f as CyclePhase, F as FetchCycleDataFn, g as CycleClient, h as CycleWarningCallback, B as BottomSheetProps, i as HoldStatus } from './index-DAai7Glf.mjs';
-export { v as AddonSelectionStepProps, I as AnimationVariants, l as BackgroundConfig, k as BookingData, x as ConfirmationStepProps, w as ContactFormStepProps, y as CyclePhaseMap, q as DataProviders, t as DateSelectionStepProps, j as FormField, z as HoldManagerCallbacks, p as PolicyImage, n as ProgressBarConfig, s as ServiceSelectionStepProps, r as StepComponentProps, o as StepConfig, u as TimeSelectionStepProps, m as TransitionConfig, G as TransitionDirection, N as animations, V as createEntranceAnimation, U as createStaggerAnimation, J as getAnimationDuration, L as getFadeVariants, K as getSlideVariants, M as getTransitionVariants, Q as shouldReduceMotion } from './index-DAai7Glf.mjs';
+import { H as HoldTimerConfig, C as CreateHoldFn, E as ExtendHoldFn, R as ReleaseHoldFn, O as OptInModule, S as Service, a as ServiceCategory, b as ServiceSelectionSettings, D as DateSelectionSettings, T as TimeSelectionSettings, A as Addon, c as AddonSelectionSettings, d as ContactInfo, e as ContactFormSettings, P as PaymentConfig, f as CyclePhase, F as FetchCycleDataFn, g as CycleClient, h as CycleWarningCallback, B as BottomSheetProps, i as HoldStatus } from './index-CqGdjmIM.mjs';
+export { v as AddonSelectionStepProps, I as AnimationVariants, l as BackgroundConfig, k as BookingData, x as ConfirmationStepProps, w as ContactFormStepProps, y as CyclePhaseMap, q as DataProviders, t as DateSelectionStepProps, j as FormField, z as HoldManagerCallbacks, p as PolicyImage, n as ProgressBarConfig, s as ServiceSelectionStepProps, r as StepComponentProps, o as StepConfig, u as TimeSelectionStepProps, m as TransitionConfig, G as TransitionDirection, N as animations, V as createEntranceAnimation, U as createStaggerAnimation, J as getAnimationDuration, L as getFadeVariants, K as getSlideVariants, M as getTransitionVariants, Q as shouldReduceMotion } from './index-CqGdjmIM.mjs';
 import React$1 from 'react';
 
 interface LogoProps {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { H as HoldTimerConfig, C as CreateHoldFn, E as ExtendHoldFn, R as ReleaseHoldFn, O as OptInModule, S as Service, a as ServiceCategory, b as ServiceSelectionSettings, D as DateSelectionSettings, T as TimeSelectionSettings, A as Addon, c as AddonSelectionSettings, d as ContactInfo, e as ContactFormSettings, P as PaymentConfig, f as CyclePhase, F as FetchCycleDataFn, g as CycleClient, h as CycleWarningCallback, B as BottomSheetProps, i as HoldStatus } from './index-DAai7Glf.js';
-export { v as AddonSelectionStepProps, I as AnimationVariants, l as BackgroundConfig, k as BookingData, x as ConfirmationStepProps, w as ContactFormStepProps, y as CyclePhaseMap, q as DataProviders, t as DateSelectionStepProps, j as FormField, z as HoldManagerCallbacks, p as PolicyImage, n as ProgressBarConfig, s as ServiceSelectionStepProps, r as StepComponentProps, o as StepConfig, u as TimeSelectionStepProps, m as TransitionConfig, G as TransitionDirection, N as animations, V as createEntranceAnimation, U as createStaggerAnimation, J as getAnimationDuration, L as getFadeVariants, K as getSlideVariants, M as getTransitionVariants, Q as shouldReduceMotion } from './index-DAai7Glf.js';
+import { H as HoldTimerConfig, C as CreateHoldFn, E as ExtendHoldFn, R as ReleaseHoldFn, O as OptInModule, S as Service, a as ServiceCategory, b as ServiceSelectionSettings, D as DateSelectionSettings, T as TimeSelectionSettings, A as Addon, c as AddonSelectionSettings, d as ContactInfo, e as ContactFormSettings, P as PaymentConfig, f as CyclePhase, F as FetchCycleDataFn, g as CycleClient, h as CycleWarningCallback, B as BottomSheetProps, i as HoldStatus } from './index-CqGdjmIM.js';
+export { v as AddonSelectionStepProps, I as AnimationVariants, l as BackgroundConfig, k as BookingData, x as ConfirmationStepProps, w as ContactFormStepProps, y as CyclePhaseMap, q as DataProviders, t as DateSelectionStepProps, j as FormField, z as HoldManagerCallbacks, p as PolicyImage, n as ProgressBarConfig, s as ServiceSelectionStepProps, r as StepComponentProps, o as StepConfig, u as TimeSelectionStepProps, m as TransitionConfig, G as TransitionDirection, N as animations, V as createEntranceAnimation, U as createStaggerAnimation, J as getAnimationDuration, L as getFadeVariants, K as getSlideVariants, M as getTransitionVariants, Q as shouldReduceMotion } from './index-CqGdjmIM.js';
 import React$1 from 'react';
 
 interface LogoProps {