@bookinglab/booking-ui-react 1.3.0 → 1.5.0

package/dist/index.js

@@ -668,8 +668,429 @@ var RegistrationForm = react.forwardRef(
   }
 );
 RegistrationForm.displayName = "RegistrationForm";
+var cx2 = (...classes) => classes.filter(Boolean).join(" ");
+var ContactDetailsForm = react.forwardRef(
+  ({
+    questions = [],
+    onSubmit,
+    onChange: _onChange,
+    initialValues,
+    validateOnBlur = true,
+    submitLabel = "Submit",
+    className = "",
+    classNames = {},
+    fieldSettings = {}
+  }, ref) => {
+    const formId = react.useId();
+    const [firstName, setFirstName] = react.useState(initialValues?.firstName || "");
+    const [lastName, setLastName] = react.useState(initialValues?.lastName || "");
+    const [emailValue, setEmailValue] = react.useState(initialValues?.email || "");
+    const [contactErrors, setContactErrors] = react.useState({});
+    const [contactTouched, setContactTouched] = react.useState({});
+    const [questionValues, setQuestionValues] = react.useState(() => {
+      if (!initialValues?.questions) return {};
+      const init = {};
+      for (const [key, val] of Object.entries(initialValues.questions)) {
+        init[Number(key)] = val;
+      }
+      return init;
+    });
+    const [questionErrors, setQuestionErrors] = react.useState({});
+    const [questionTouched, setQuestionTouched] = react.useState({});
+    const getFieldRequired = (name) => {
+      const s = fieldSettings[name];
+      return s?.required !== void 0 ? s.required : true;
+    };
+    const getFieldDisabled = (name) => {
+      const s = fieldSettings[name];
+      return !!s?.disabled;
+    };
+    const contactFields = [
+      { name: "firstName", label: "First name", value: firstName, setter: setFirstName },
+      { name: "lastName", label: "Last name", value: lastName, setter: setLastName },
+      { name: "email", label: "Email", value: emailValue, setter: setEmailValue }
+    ];
+    const validateContactField = react.useCallback((name, value) => {
+      const isRequired = getFieldRequired(name);
+      if (name === "email") {
+        const validators = isRequired ? compose(required, email) : email;
+        return value ? validators(value) : isRequired ? required(value) : null;
+      }
+      return isRequired ? required(value) : null;
+    }, [fieldSettings]);
+    const validateQuestionField = react.useCallback((question, value) => {
+      if (question.detail_type === "heading") return null;
+      if (question.required) {
+        if (value === void 0 || value === "" || value === null) {
+          return `${question.name} is required`;
+        }
+        if (question.detail_type === "check" && !value) {
+          return `${question.name} must be checked`;
+        }
+      }
+      if (question.detail_type === "number" && value !== "" && value !== void 0) {
+        const numValue = Number(value);
+        if (question.settings?.min !== void 0 && numValue < question.settings.min) {
+          return `Minimum value is ${question.settings.min}`;
+        }
+        if (question.settings?.max !== void 0 && numValue > question.settings.max) {
+          return `Maximum value is ${question.settings.max}`;
+        }
+      }
+      return null;
+    }, []);
+    const validateAllContacts = react.useCallback(() => {
+      const errs = {};
+      let valid = true;
+      for (const f of contactFields) {
+        if (getFieldDisabled(f.name)) continue;
+        const err = validateContactField(f.name, f.value);
+        if (err) {
+          errs[f.name] = err;
+          valid = false;
+        }
+      }
+      setContactErrors(errs);
+      return valid;
+    }, [firstName, lastName, emailValue, validateContactField, fieldSettings]);
+    const validateAllQuestions = react.useCallback(() => {
+      const errs = {};
+      let valid = true;
+      for (const q of questions) {
+        const err = validateQuestionField(q, questionValues[q.id]);
+        if (err) {
+          errs[q.id] = err;
+          valid = false;
+        }
+      }
+      setQuestionErrors(errs);
+      return valid;
+    }, [questions, questionValues, validateQuestionField]);
+    const buildOutput = react.useCallback(() => {
+      const q = {};
+      const answers = [];
+      for (const question of questions) {
+        if (question.detail_type === "heading") continue;
+        const rawValue = questionValues[question.id];
+        if (rawValue === void 0 || rawValue === "") continue;
+        let answer = String(rawValue);
+        let answerId = 0;
+        if (question.detail_type === "select" && question.options?.length) {
+          const option = question.options.find(
+            (o) => String(o.id) === String(rawValue)
+          );
+          if (option) {
+            answer = option.name;
+            answerId = typeof option.id === "number" ? option.id : parseInt(String(option.id), 10) || 0;
+          }
+        }
+        const idStr = String(question.id);
+        q[idStr] = { answer, answer_id: answerId, name: question.name };
+        answers.push({ question_id: question.id, name: question.name, answer, answer_id: answerId });
+      }
+      return { firstName, lastName, email: emailValue, q, answers };
+    }, [firstName, lastName, emailValue, questions, questionValues]);
+    const handleContactChange = react.useCallback((name, value) => {
+      const setter = name === "firstName" ? setFirstName : name === "lastName" ? setLastName : setEmailValue;
+      setter(value);
+      if (contactTouched[name]) {
+        const err = validateContactField(name, value);
+        setContactErrors((prev) => {
+          if (err) return { ...prev, [name]: err };
+          const { [name]: _, ...rest } = prev;
+          return rest;
+        });
+      }
+    }, [contactTouched, validateContactField]);
+    const handleContactBlur = react.useCallback((name, value) => {
+      setContactTouched((prev) => ({ ...prev, [name]: true }));
+      if (validateOnBlur) {
+        const err = validateContactField(name, value);
+        setContactErrors((prev) => {
+          if (err) return { ...prev, [name]: err };
+          const { [name]: _, ...rest } = prev;
+          return rest;
+        });
+      }
+    }, [validateOnBlur, validateContactField]);
+    const handleQuestionChange = react.useCallback((questionId, value) => {
+      setQuestionValues((prev) => ({ ...prev, [questionId]: value }));
+      setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
+      if (questionTouched[questionId]) {
+        const question = questions.find((q) => q.id === questionId);
+        if (question) {
+          const err = validateQuestionField(question, value);
+          setQuestionErrors((prev) => {
+            if (err) return { ...prev, [questionId]: err };
+            const { [questionId]: _, ...rest } = prev;
+            return rest;
+          });
+        }
+      }
+    }, [questionTouched, questions, validateQuestionField]);
+    const handleQuestionBlur = react.useCallback((questionId) => {
+      setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
+      if (validateOnBlur) {
+        const question = questions.find((q) => q.id === questionId);
+        if (question) {
+          const err = validateQuestionField(question, questionValues[questionId]);
+          setQuestionErrors((prev) => {
+            if (err) return { ...prev, [questionId]: err };
+            const { [questionId]: _, ...rest } = prev;
+            return rest;
+          });
+        }
+      }
+    }, [validateOnBlur, questions, questionValues, validateQuestionField]);
+    const handleSubmit = react.useCallback((e) => {
+      e.preventDefault();
+      const allContactTouched = {};
+      for (const f of contactFields) allContactTouched[f.name] = true;
+      setContactTouched(allContactTouched);
+      const allQTouched = {};
+      for (const q of questions) allQTouched[q.id] = true;
+      setQuestionTouched(allQTouched);
+      const contactValid = validateAllContacts();
+      const questionsValid = validateAllQuestions();
+      if (contactValid && questionsValid) {
+        onSubmit(buildOutput());
+      }
+    }, [contactFields, questions, validateAllContacts, validateAllQuestions, onSubmit, buildOutput]);
+    react.useImperativeHandle(ref, () => ({
+      reset: () => {
+        setFirstName(initialValues?.firstName || "");
+        setLastName(initialValues?.lastName || "");
+        setEmailValue(initialValues?.email || "");
+        setContactErrors({});
+        setContactTouched({});
+        if (initialValues?.questions) {
+          const init = {};
+          for (const [key, val] of Object.entries(initialValues.questions)) {
+            init[Number(key)] = val;
+          }
+          setQuestionValues(init);
+        } else {
+          setQuestionValues({});
+        }
+        setQuestionErrors({});
+        setQuestionTouched({});
+      },
+      setValues: (vals) => {
+        if (vals.firstName !== void 0) setFirstName(vals.firstName);
+        if (vals.lastName !== void 0) setLastName(vals.lastName);
+        if (vals.email !== void 0) setEmailValue(vals.email);
+      }
+    }), [initialValues]);
+    const styles = {
+      fieldWrapper: classNames.fieldWrapper || "mb-4",
+      label: classNames.label || "block text-sm font-medium mb-1",
+      heading: classNames.heading || "text-lg font-semibold mt-4 mb-2 first:mt-0",
+      input: classNames.input || "w-full px-3 py-2 border rounded-md text-sm",
+      inputError: classNames.inputError || "border-red-500",
+      checkbox: classNames.checkbox || "mt-1 h-4 w-4 rounded border-gray-300",
+      helpText: classNames.helpText || "mt-1 text-xs text-gray-500",
+      errorText: classNames.errorText || "mt-1 text-xs text-red-600",
+      button: classNames.button || "w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+    };
+    const inputClasses = (hasError) => hasError ? cx2(styles.input, styles.inputError) : styles.input;
+    const renderContactField = (name, label, value, type = "text") => {
+      const fieldId = `${formId}-${name}`;
+      const errorId = `${fieldId}-error`;
+      const isDisabled = getFieldDisabled(name);
+      const isRequired = getFieldRequired(name);
+      const error = contactTouched[name] ? 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: [
+          label,
+          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: fieldId,
+            name,
+            type,
+            value,
+            disabled: isDisabled,
+            onChange: (e) => handleContactChange(name, e.target.value),
+            onBlur: () => handleContactBlur(name, name === "firstName" ? firstName : name === "lastName" ? lastName : emailValue),
+            className: cx2(inputClasses(hasError), isDisabled ? "opacity-50 cursor-not-allowed" : ""),
+            "aria-invalid": hasError ? "true" : "false",
+            "aria-describedby": hasError ? errorId : void 0,
+            "aria-required": isRequired ? "true" : void 0
+          }
+        ),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+      ] }, name);
+    };
+    const renderQuestionField = (question) => {
+      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 hasError = !!error;
+      const ariaProps = {
+        "aria-invalid": hasError ? true : void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        "aria-required": question.required || void 0
+      };
+      switch (question.detail_type) {
+        case "heading":
+          return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: styles.heading, children: question.name }, question.id);
+        case "text_field":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+              question.name,
+              question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: fieldId,
+                type: "text",
+                value: value || "",
+                onChange: (e) => handleQuestionChange(question.id, e.target.value),
+                onBlur: () => handleQuestionBlur(question.id),
+                placeholder: question.settings?.placeholder,
+                className: inputClasses(hasError),
+                ...ariaProps
+              }
+            ),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        case "text_area":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+              question.name,
+              question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                id: fieldId,
+                value: value || "",
+                onChange: (e) => handleQuestionChange(question.id, e.target.value),
+                onBlur: () => handleQuestionBlur(question.id),
+                placeholder: question.settings?.placeholder,
+                rows: 4,
+                className: inputClasses(hasError),
+                ...ariaProps
+              }
+            ),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        case "select":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+              question.name,
+              question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                id: fieldId,
+                value: value ?? "",
+                onChange: (e) => handleQuestionChange(question.id, e.target.value),
+                onBlur: () => handleQuestionBlur(question.id),
+                className: inputClasses(hasError),
+                ...ariaProps,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select an option" }),
+                  question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.id, children: option.name }, option.id))
+                ]
+              }
+            ),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        case "number":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+              question.name,
+              question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: fieldId,
+                type: "number",
+                value: value ?? "",
+                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),
+                ...ariaProps
+              }
+            ),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        case "date":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+              question.name,
+              question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: fieldId,
+                type: "date",
+                value: value || "",
+                onChange: (e) => handleQuestionChange(question.id, e.target.value),
+                onBlur: () => handleQuestionBlur(question.id),
+                className: inputClasses(hasError),
+                ...ariaProps
+              }
+            ),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        case "check":
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id: fieldId,
+                  type: "checkbox",
+                  checked: !!value,
+                  onChange: (e) => handleQuestionChange(question.id, e.target.checked),
+                  onBlur: () => handleQuestionBlur(question.id),
+                  className: styles.checkbox,
+                  ...ariaProps
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: "text-sm", children: [
+                question.name,
+                question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+              ] })
+            ] }),
+            question.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.helpText, children: question.help_text }),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, question.id);
+        default:
+          return null;
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { type: "submit", className: styles.button, children: submitLabel })
+    ] });
+  }
+);
+ContactDetailsForm.displayName = "ContactDetailsForm";
 
 exports.BookingForm = BookingForm;
+exports.ContactDetailsForm = ContactDetailsForm;
 exports.RegistrationForm = RegistrationForm;
 exports.compose = compose;
 exports.email = email;