@bookinglab/booking-ui-react 1.8.0 → 1.10.0

package/README.md

@@ -72,6 +72,7 @@ interface Question {
   name: string;
   detail_type: 'heading' | 'text_field' | 'text_area' | 'select' | 'date' | 'number' | 'check';
   required?: boolean;
+  disabled?: boolean;
   help_text?: string;
   options?: QuestionOption[];  // For select type
   settings?: QuestionSettings;

package/dist/index.d.cts

@@ -232,6 +232,8 @@ interface ContactDetailsFormProps {
     fieldSettings?: ContactDetailsFieldSettings;
     /** When true, the submit button is hidden and form values are emitted via `onChange` on every change */
     hideSubmitButton?: boolean;
+    /** When true, all validation errors are shown immediately (useful for external submit triggers) */
+    isSubmitted?: boolean;
 }
 /**
  * Imperative handle methods exposed via ref
@@ -328,6 +330,8 @@ interface Question {
     price_per_booking?: boolean;
     outcome?: boolean;
     hide_on_customer_journey?: boolean;
+    /** Whether the question field is disabled */
+    disabled?: boolean;
 }
 type FormValues = Record<number, string | number | boolean>;
 type FormErrors = Record<number, string>;

package/dist/index.d.ts

@@ -232,6 +232,8 @@ interface ContactDetailsFormProps {
     fieldSettings?: ContactDetailsFieldSettings;
     /** When true, the submit button is hidden and form values are emitted via `onChange` on every change */
     hideSubmitButton?: boolean;
+    /** When true, all validation errors are shown immediately (useful for external submit triggers) */
+    isSubmitted?: boolean;
 }
 /**
  * Imperative handle methods exposed via ref
@@ -328,6 +330,8 @@ interface Question {
     price_per_booking?: boolean;
     outcome?: boolean;
     hide_on_customer_journey?: boolean;
+    /** Whether the question field is disabled */
+    disabled?: boolean;
 }
 type FormValues = Record<number, string | number | boolean>;
 type FormErrors = Record<number, string>;

package/dist/index.js

@@ -789,7 +789,8 @@ var ContactDetailsForm = react.forwardRef(
     className = "",
     classNames = {},
     fieldSettings = {},
-    hideSubmitButton = false
+    hideSubmitButton = false,
+    isSubmitted = false
   }, ref) => {
     const formId = react.useId();
     const [firstName, setFirstName] = react.useState(initialValues?.firstName || "");
@@ -830,6 +831,7 @@ var ContactDetailsForm = react.forwardRef(
     }, [fieldSettings]);
     const validateQuestionField = react.useCallback((question, value) => {
       if (question.detail_type === "heading") return null;
+      if (question.disabled) return null;
       if (question.required) {
         if (value === void 0 || value === "" || value === null) {
           return `${question.name} is required`;
@@ -1008,7 +1010,7 @@ var ContactDetailsForm = react.forwardRef(
       const errorId = `${fieldId}-error`;
       const isDisabled = getFieldDisabled(name);
       const isRequired = getFieldRequired(name);
-      const error = contactTouched[name] ? contactErrors[name] : void 0;
+      const error = contactTouched[name] || isSubmitted ? contactErrors[name] : void 0;
       const hasError = !!error;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
@@ -1038,8 +1040,9 @@ var ContactDetailsForm = react.forwardRef(
       const fieldId = `${formId}-q-${question.id}`;
       const errorId = `${fieldId}-error`;
       const value = questionValues[question.id];
-      const error = questionTouched[question.id] ? questionErrors[question.id] : void 0;
+      const error = questionTouched[question.id] || isSubmitted ? questionErrors[question.id] : void 0;
       const hasError = !!error;
+      const isDisabled = !!question.disabled;
       const ariaProps = {
         "aria-invalid": hasError ? true : void 0,
         "aria-describedby": hasError ? errorId : void 0,
@@ -1060,10 +1063,11 @@ var ContactDetailsForm = react.forwardRef(
                 id: fieldId,
                 type: "text",
                 value: value || "",
+                disabled: isDisabled,
                 onChange: (e) => handleQuestionChange(question.id, e.target.value),
                 onBlur: () => handleQuestionBlur(question.id),
                 placeholder: question.settings?.placeholder,
-                className: inputClasses(hasError),
+                className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                 ...ariaProps
               }
             ),
@@ -1081,11 +1085,12 @@ var ContactDetailsForm = react.forwardRef(
               {
                 id: fieldId,
                 value: value || "",
+                disabled: isDisabled,
                 onChange: (e) => handleQuestionChange(question.id, e.target.value),
                 onBlur: () => handleQuestionBlur(question.id),
                 placeholder: question.settings?.placeholder,
                 rows: 4,
-                className: inputClasses(hasError),
+                className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                 ...ariaProps
               }
             ),
@@ -1103,9 +1108,10 @@ var ContactDetailsForm = react.forwardRef(
               {
                 id: fieldId,
                 value: value ?? "",
+                disabled: isDisabled,
                 onChange: (e) => handleQuestionChange(question.id, e.target.value),
                 onBlur: () => handleQuestionBlur(question.id),
-                className: inputClasses(hasError),
+                className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                 ...ariaProps,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select an option" }),
@@ -1128,12 +1134,13 @@ var ContactDetailsForm = react.forwardRef(
                 id: fieldId,
                 type: "number",
                 value: value ?? "",
+                disabled: isDisabled,
                 onChange: (e) => handleQuestionChange(question.id, e.target.value ? Number(e.target.value) : ""),
                 onBlur: () => handleQuestionBlur(question.id),
                 min: question.settings?.min,
                 max: question.settings?.max,
                 placeholder: question.settings?.placeholder,
-                className: inputClasses(hasError),
+                className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                 ...ariaProps
               }
             ),
@@ -1152,9 +1159,10 @@ var ContactDetailsForm = react.forwardRef(
                 id: fieldId,
                 type: "date",
                 value: value || "",
+                disabled: isDisabled,
                 onChange: (e) => handleQuestionChange(question.id, e.target.value),
                 onBlur: () => handleQuestionBlur(question.id),
-                className: inputClasses(hasError),
+                className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                 ...ariaProps
               }
             ),
@@ -1170,9 +1178,10 @@ var ContactDetailsForm = react.forwardRef(
                   id: fieldId,
                   type: "checkbox",
                   checked: !!value,
+                  disabled: isDisabled,
                   onChange: (e) => handleQuestionChange(question.id, e.target.checked),
                   onBlur: () => handleQuestionBlur(question.id),
-                  className: styles.checkbox,
+                  className: cx2(styles.checkbox, isDisabled ? "opacity-50 cursor-not-allowed" : ""),
                   ...ariaProps
                 }
               ),
@@ -1188,6 +1197,12 @@ var ContactDetailsForm = react.forwardRef(
           return null;
       }
     };
+    react.useEffect(() => {
+      if (isSubmitted) {
+        validateAllContacts();
+        validateAllQuestions();
+      }
+    }, [isSubmitted]);
     react.useEffect(() => {
       if (hideSubmitButton && _onChange) {
         const contactValid = !contactFields.some((f) => {