@bookinglab/booking-ui-react 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -425,11 +425,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",
@@ -466,6 +482,7 @@ var DEFAULT_FIELDS = [
     validate: compose(required, ukPostcode)
   }
 ];
+var HIDEABLE_FIELDS = ["address1", "address2", "city", "postcode"];
 var RegistrationForm = forwardRef(
   ({
     fields = DEFAULT_FIELDS,
@@ -475,31 +492,58 @@ var RegistrationForm = forwardRef(
     validateOnBlur = true,
     submitLabel = "Submit",
     className = "",
-    classNames = {}
+    classNames = {},
+    fieldSettings = {}
   }, ref) => {
     const formId = useId();
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
     const [touched, setTouched] = 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 = 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 = 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 = 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;
@@ -512,7 +556,7 @@ var RegistrationForm = 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;
@@ -526,7 +570,7 @@ var RegistrationForm = 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 };
@@ -536,6 +580,36 @@ var RegistrationForm = 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);
@@ -543,6 +617,13 @@ var RegistrationForm = forwardRef(
       },
       [values, touched, allFields, validateField, onChange, checkIsValid]
     );
+    const handleCheckboxChange = useCallback(
+      (fieldName, checked) => {
+        const value = checked ? "true" : "";
+        handleChange(fieldName, value);
+      },
+      [handleChange]
+    );
     const handleBlur = useCallback(
       (fieldName) => {
         setTouched((prev) => ({ ...prev, [fieldName]: true }));
@@ -550,7 +631,7 @@ var RegistrationForm = 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 {
@@ -606,6 +687,8 @@ var RegistrationForm = 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"
     };
@@ -617,6 +700,32 @@ var RegistrationForm = forwardRef(
         const error = errors[field.name];
         const isTouched = touched[field.name];
         const showError = isTouched && error;
+        if (field.type === "check") {
+          return /* @__PURE__ */ jsxs("div", { className: styles.fieldWrapper, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.checkboxWrapper, children: [
+              /* @__PURE__ */ 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__ */ jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+              ] })
+            ] }),
+            showError && /* @__PURE__ */ jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+          ] }, field.name);
+        }
         return /* @__PURE__ */ jsxs("div", { className: styles.fieldWrapper, children: [
           /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
             field.label,
@@ -1191,7 +1300,12 @@ var ResetPasswordForm = forwardRef(
         }
         setTouched(allTouched);
         setErrors(newErrors);
-        if (isValid) onSubmit(values);
+        if (isValid) {
+          onSubmit(values);
+          setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+          setErrors({});
+          setTouched({});
+        }
       },
       [values, validateField, onSubmit]
     );