@bookinglab/booking-ui-react 1.6.0 → 1.7.0

package/dist/index.d.cts

@@ -23,7 +23,7 @@ interface FieldConfig {
     /** Display label for the field */
     label: string;
     /** Input type */
-    type: 'text' | 'email' | 'tel' | 'password' | 'select';
+    type: 'text' | 'email' | 'tel' | 'password' | 'select' | 'check';
     /** Whether the field is required */
     required?: boolean;
     /** Placeholder text */
@@ -53,6 +53,10 @@ interface RegistrationFormClassNames {
     input?: string;
     /** Input elements in error state */
     inputError?: string;
+    /** Checkbox input specifically */
+    checkbox?: string;
+    /** Checkbox wrapper (label + checkbox) */
+    checkboxWrapper?: string;
     /** Help text below fields */
     helpText?: string;
     /** Error message text */
@@ -60,6 +64,27 @@ interface RegistrationFormClassNames {
     /** Submit button */
     button?: string;
 }
+/**
+ * Settings for individual default fields (hide, disable, change required status)
+ */
+interface RegistrationFieldSettings {
+    /** Settings for the Address 1 field */
+    address1?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Address 2 field */
+    address2?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Town/City field */
+    city?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Postcode field */
+    postcode?: {
+        hidden?: boolean;
+    };
+}
 /**
  * Props for the RegistrationForm component
  */
@@ -80,6 +105,8 @@ interface RegistrationFormProps {
     className?: string;
     /** Custom class names for styling individual elements */
     classNames?: RegistrationFormClassNames;
+    /** Settings for controlling visibility of default fields */
+    fieldSettings?: RegistrationFieldSettings;
 }
 /**
  * Imperative handle methods exposed via ref
@@ -366,6 +393,9 @@ declare function BookingForm({ questions, onSubmit, submitLabel, className, labe
  * Features:
  * - Customizable fields via props
  * - Built-in validation with blur and submit triggers
+ * - Email and password confirmation with matching validation
+ * - fieldSettings prop to hide address fields
+ * - Checkbox field type support for custom questions
  * - Full accessibility support (ARIA attributes, keyboard navigation)
  * - Imperative handle for programmatic control (reset, setValues)
  * - Granular styling via classNames prop
@@ -379,6 +409,7 @@ declare function BookingForm({ questions, onSubmit, submitLabel, className, labe
  *   onSubmit={(values) => console.log(values)}
  *   onChange={(values, isValid) => console.log(isValid)}
  *   submitLabel="Register"
+ *   fieldSettings={{ address2: { hidden: true }, postcode: { hidden: true } }}
  * />
  *
  * // Programmatic control
@@ -460,4 +491,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };

package/dist/index.d.ts

@@ -23,7 +23,7 @@ interface FieldConfig {
     /** Display label for the field */
     label: string;
     /** Input type */
-    type: 'text' | 'email' | 'tel' | 'password' | 'select';
+    type: 'text' | 'email' | 'tel' | 'password' | 'select' | 'check';
     /** Whether the field is required */
     required?: boolean;
     /** Placeholder text */
@@ -53,6 +53,10 @@ interface RegistrationFormClassNames {
     input?: string;
     /** Input elements in error state */
     inputError?: string;
+    /** Checkbox input specifically */
+    checkbox?: string;
+    /** Checkbox wrapper (label + checkbox) */
+    checkboxWrapper?: string;
     /** Help text below fields */
     helpText?: string;
     /** Error message text */
@@ -60,6 +64,27 @@ interface RegistrationFormClassNames {
     /** Submit button */
     button?: string;
 }
+/**
+ * Settings for individual default fields (hide, disable, change required status)
+ */
+interface RegistrationFieldSettings {
+    /** Settings for the Address 1 field */
+    address1?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Address 2 field */
+    address2?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Town/City field */
+    city?: {
+        hidden?: boolean;
+    };
+    /** Settings for the Postcode field */
+    postcode?: {
+        hidden?: boolean;
+    };
+}
 /**
  * Props for the RegistrationForm component
  */
@@ -80,6 +105,8 @@ interface RegistrationFormProps {
     className?: string;
     /** Custom class names for styling individual elements */
     classNames?: RegistrationFormClassNames;
+    /** Settings for controlling visibility of default fields */
+    fieldSettings?: RegistrationFieldSettings;
 }
 /**
  * Imperative handle methods exposed via ref
@@ -366,6 +393,9 @@ declare function BookingForm({ questions, onSubmit, submitLabel, className, labe
  * Features:
  * - Customizable fields via props
  * - Built-in validation with blur and submit triggers
+ * - Email and password confirmation with matching validation
+ * - fieldSettings prop to hide address fields
+ * - Checkbox field type support for custom questions
  * - Full accessibility support (ARIA attributes, keyboard navigation)
  * - Imperative handle for programmatic control (reset, setValues)
  * - Granular styling via classNames prop
@@ -379,6 +409,7 @@ declare function BookingForm({ questions, onSubmit, submitLabel, className, labe
  *   onSubmit={(values) => console.log(values)}
  *   onChange={(values, isValid) => console.log(isValid)}
  *   submitLabel="Register"
+ *   fieldSettings={{ address2: { hidden: true }, postcode: { hidden: true } }}
  * />
  *
  * // Programmatic control
@@ -460,4 +491,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };

package/dist/index.js

@@ -427,11 +427,27 @@ var DEFAULT_FIELDS = [
     required: true,
     validate: compose(required, email)
   },
+  {
+    name: "verifyEmail",
+    label: "Verify email address",
+    type: "email",
+    required: true,
+    // Cross-field validation is handled in the component
+    validate: required
+  },
   {
     name: "password",
     label: "Password",
     type: "password",
-    required: false
+    required: true,
+    validate: required
+  },
+  {
+    name: "confirmPassword",
+    label: "Confirm password",
+    type: "password",
+    required: true,
+    validate: required
   },
   {
     name: "phone",
@@ -468,6 +484,7 @@ var DEFAULT_FIELDS = [
     validate: compose(required, ukPostcode)
   }
 ];
+var HIDEABLE_FIELDS = ["address1", "address2", "city", "postcode"];
 var RegistrationForm = react.forwardRef(
   ({
     fields = DEFAULT_FIELDS,
@@ -477,31 +494,58 @@ var RegistrationForm = react.forwardRef(
     validateOnBlur = true,
     submitLabel = "Submit",
     className = "",
-    classNames = {}
+    classNames = {},
+    fieldSettings = {}
   }, ref) => {
     const formId = react.useId();
     const [values, setValues] = react.useState({});
     const [errors, setErrors] = react.useState({});
     const [touched, setTouched] = react.useState({});
-    const allFields = additionalFields ? [...fields, ...additionalFields] : fields;
+    const visibleFields = fields.filter((field) => {
+      if (HIDEABLE_FIELDS.includes(field.name)) {
+        const setting = fieldSettings[field.name];
+        if (setting?.hidden) return false;
+      }
+      return true;
+    });
+    const allFields = additionalFields ? [...visibleFields, ...additionalFields] : visibleFields;
+    const validateMatching = react.useCallback(
+      (fieldName, value, currentValues) => {
+        if (fieldName === "verifyEmail") {
+          if (value && currentValues.email && value !== currentValues.email) {
+            return "Email addresses do not match";
+          }
+        }
+        if (fieldName === "confirmPassword") {
+          if (value && currentValues.password && value !== currentValues.password) {
+            return "Passwords do not match";
+          }
+        }
+        return null;
+      },
+      []
+    );
     const validateField = react.useCallback(
-      (field, value) => {
+      (field, value, currentValues) => {
         if (field.required && (!value || value.trim() === "")) {
           return "This field is required";
         }
         if (field.validate && value) {
-          return field.validate(value);
+          const error = field.validate(value);
+          if (error) return error;
         }
+        const matchError = validateMatching(field.name, value, currentValues);
+        if (matchError) return matchError;
         return null;
       },
-      []
+      [validateMatching]
     );
     const validateAll = react.useCallback(() => {
       const newErrors = {};
       let isValid = true;
       for (const field of allFields) {
         const value = values[field.name] || "";
-        const error = validateField(field, value);
+        const error = validateField(field, value, values);
         if (error) {
           newErrors[field.name] = error;
           isValid = false;
@@ -514,7 +558,7 @@ var RegistrationForm = react.forwardRef(
       (currentValues) => {
         for (const field of allFields) {
           const value = currentValues[field.name] || "";
-          const error = validateField(field, value);
+          const error = validateField(field, value, currentValues);
           if (error) return false;
         }
         return true;
@@ -528,7 +572,7 @@ var RegistrationForm = react.forwardRef(
         if (touched[fieldName]) {
           const field = allFields.find((f) => f.name === fieldName);
           if (field) {
-            const error = validateField(field, value);
+            const error = validateField(field, value, newValues);
             if (!error) {
               setErrors((prev) => {
                 const next = { ...prev };
@@ -538,6 +582,36 @@ var RegistrationForm = react.forwardRef(
             }
           }
         }
+        if (fieldName === "email" && touched.verifyEmail) {
+          const verifyField = allFields.find((f) => f.name === "verifyEmail");
+          if (verifyField) {
+            const verifyError = validateField(verifyField, newValues.verifyEmail || "", newValues);
+            setErrors((prev) => {
+              const next = { ...prev };
+              if (verifyError) {
+                next.verifyEmail = verifyError;
+              } else {
+                delete next.verifyEmail;
+              }
+              return next;
+            });
+          }
+        }
+        if (fieldName === "password" && touched.confirmPassword) {
+          const confirmField = allFields.find((f) => f.name === "confirmPassword");
+          if (confirmField) {
+            const confirmError = validateField(confirmField, newValues.confirmPassword || "", newValues);
+            setErrors((prev) => {
+              const next = { ...prev };
+              if (confirmError) {
+                next.confirmPassword = confirmError;
+              } else {
+                delete next.confirmPassword;
+              }
+              return next;
+            });
+          }
+        }
         if (onChange) {
           const isValid = checkIsValid(newValues);
           onChange(newValues, isValid);
@@ -545,6 +619,13 @@ var RegistrationForm = react.forwardRef(
       },
       [values, touched, allFields, validateField, onChange, checkIsValid]
     );
+    const handleCheckboxChange = react.useCallback(
+      (fieldName, checked) => {
+        const value = checked ? "true" : "";
+        handleChange(fieldName, value);
+      },
+      [handleChange]
+    );
     const handleBlur = react.useCallback(
       (fieldName) => {
         setTouched((prev) => ({ ...prev, [fieldName]: true }));
@@ -552,7 +633,7 @@ var RegistrationForm = react.forwardRef(
           const field = allFields.find((f) => f.name === fieldName);
           if (field) {
             const value = values[fieldName] || "";
-            const error = validateField(field, value);
+            const error = validateField(field, value, values);
             if (error) {
               setErrors((prev) => ({ ...prev, [fieldName]: error }));
             } else {
@@ -608,6 +689,8 @@ var RegistrationForm = react.forwardRef(
       label: classNames.label || "block text-sm font-medium mb-1",
       input: classNames.input || "w-full px-3 py-2 border rounded-md",
       inputError: classNames.inputError || "border-red-500",
+      checkbox: classNames.checkbox || "",
+      checkboxWrapper: classNames.checkboxWrapper || "flex items-center gap-2",
       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"
     };
@@ -619,6 +702,32 @@ var RegistrationForm = react.forwardRef(
         const error = errors[field.name];
         const isTouched = touched[field.name];
         const showError = isTouched && error;
+        if (field.type === "check") {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checkboxWrapper, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id: fieldId,
+                  name: field.name,
+                  type: "checkbox",
+                  checked: value === "true",
+                  onChange: (e) => handleCheckboxChange(field.name, e.target.checked),
+                  onBlur: () => handleBlur(field.name),
+                  className: `${styles.checkbox} ${showError ? styles.inputError : ""}`,
+                  "aria-invalid": showError ? "true" : "false",
+                  "aria-describedby": showError ? errorId : void 0,
+                  "aria-required": field.required ? "true" : "false"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+              ] })
+            ] }),
+            showError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, field.name);
+        }
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
             field.label,
@@ -1193,7 +1302,12 @@ var ResetPasswordForm = react.forwardRef(
         }
         setTouched(allTouched);
         setErrors(newErrors);
-        if (isValid) onSubmit(values);
+        if (isValid) {
+          onSubmit(values);
+          setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+          setErrors({});
+          setTouched({});
+        }
       },
       [values, validateField, onSubmit]
     );