@bailierich/booking-components 2.0.0 → 2.1.1

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/components/Forms/FormRenderer.tsx

@@ -154,14 +154,22 @@ export default function FormRenderer({ form, businessId, onSuccess }: FormRender
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
             </svg>
           </div>
-          <h3 className="text-xl font-semibold mb-2" style={{ color: form.settings.styling?.labelColor || '#000000' }}>Success!</h3>
-          <p style={{ color: form.settings.styling?.textColor || '#000000' }}>{form.settings.successMessage}</p>
-          <button
-            onClick={() => setIsSuccess(false)}
-            className="mt-6 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
-          >
-            Submit Another Response
-          </button>
+          <h3 className="text-xl font-semibold mb-2" style={{ color: '#1a1a1a' }}>Success!</h3>
+          <p style={{ color: '#374151' }}>{form.settings.successMessage}</p>
+          <div className="mt-6 flex gap-3 justify-center">
+            <button
+              onClick={() => window.location.href = '/'}
+              className="px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+            >
+              Back to Home
+            </button>
+            <button
+              onClick={() => setIsSuccess(false)}
+              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              Submit Another Response
+            </button>
+          </div>
         </div>
       </div>
     );

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 {