@bookinglab/booking-ui-react 1.7.1 → 1.9.0

package/dist/index.mjs

@@ -786,7 +786,8 @@ var ContactDetailsForm = forwardRef(
     submitLabel = "Submit",
     className = "",
     classNames = {},
-    fieldSettings = {}
+    fieldSettings = {},
+    hideSubmitButton = false
   }, ref) => {
     const formId = useId();
     const [firstName, setFirstName] = useState(initialValues?.firstName || "");
@@ -827,6 +828,7 @@ var ContactDetailsForm = forwardRef(
     }, [fieldSettings]);
     const validateQuestionField = 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`;
@@ -1037,6 +1039,7 @@ var ContactDetailsForm = forwardRef(
       const value = questionValues[question.id];
       const error = questionTouched[question.id] ? 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,
@@ -1057,10 +1060,11 @@ var ContactDetailsForm = 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
               }
             ),
@@ -1078,11 +1082,12 @@ var ContactDetailsForm = 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
               }
             ),
@@ -1100,9 +1105,10 @@ var ContactDetailsForm = 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__ */ jsx("option", { value: "", children: "Select an option" }),
@@ -1125,12 +1131,13 @@ var ContactDetailsForm = 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
               }
             ),
@@ -1149,9 +1156,10 @@ var ContactDetailsForm = 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
               }
             ),
@@ -1167,9 +1175,10 @@ var ContactDetailsForm = 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
                 }
               ),
@@ -1185,12 +1194,24 @@ var ContactDetailsForm = forwardRef(
           return null;
       }
     };
+    useEffect(() => {
+      if (hideSubmitButton && _onChange) {
+        const contactValid = !contactFields.some((f) => {
+          if (getFieldDisabled(f.name)) return false;
+          return !!validateContactField(f.name, f.value);
+        });
+        const questionsValid = !questions.some(
+          (q) => !!validateQuestionField(q, questionValues[q.id])
+        );
+        _onChange(buildOutput(), contactValid && questionsValid);
+      }
+    }, [hideSubmitButton, firstName, lastName, emailValue, questionValues]);
     return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
       renderContactField("firstName", "First name", firstName),
       renderContactField("lastName", "Last name", lastName),
       renderContactField("email", "Email", emailValue, "email"),
       questions.map(renderQuestionField),
-      /* @__PURE__ */ jsx("button", { type: "submit", className: styles.button, children: submitLabel })
+      !hideSubmitButton && /* @__PURE__ */ jsx("button", { type: "submit", className: styles.button, children: submitLabel })
     ] });
   }
 );