@bookinglab/booking-ui-react 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -672,6 +672,7 @@ var ContactDetailsForm = forwardRef(
     questions = [],
     onSubmit,
     onChange: _onChange,
+    initialValues,
     validateOnBlur = true,
     submitLabel = "Submit",
     className = "",
@@ -679,12 +680,19 @@ var ContactDetailsForm = forwardRef(
     fieldSettings = {}
   }, ref) => {
     const formId = useId();
-    const [firstName, setFirstName] = useState("");
-    const [lastName, setLastName] = useState("");
-    const [emailValue, setEmailValue] = useState("");
+    const [firstName, setFirstName] = useState(initialValues?.firstName || "");
+    const [lastName, setLastName] = useState(initialValues?.lastName || "");
+    const [emailValue, setEmailValue] = useState(initialValues?.email || "");
     const [contactErrors, setContactErrors] = useState({});
     const [contactTouched, setContactTouched] = useState({});
-    const [questionValues, setQuestionValues] = useState({});
+    const [questionValues, setQuestionValues] = 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] = useState({});
     const [questionTouched, setQuestionTouched] = useState({});
     const getFieldRequired = (name) => {
@@ -848,12 +856,20 @@ var ContactDetailsForm = forwardRef(
     }, [contactFields, questions, validateAllContacts, validateAllQuestions, onSubmit, buildOutput]);
     useImperativeHandle(ref, () => ({
       reset: () => {
-        setFirstName("");
-        setLastName("");
-        setEmailValue("");
+        setFirstName(initialValues?.firstName || "");
+        setLastName(initialValues?.lastName || "");
+        setEmailValue(initialValues?.email || "");
         setContactErrors({});
         setContactTouched({});
-        setQuestionValues({});
+        if (initialValues?.questions) {
+          const init = {};
+          for (const [key, val] of Object.entries(initialValues.questions)) {
+            init[Number(key)] = val;
+          }
+          setQuestionValues(init);
+        } else {
+          setQuestionValues({});
+        }
         setQuestionErrors({});
         setQuestionTouched({});
       },
@@ -862,7 +878,7 @@ var ContactDetailsForm = forwardRef(
         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",
@@ -1070,7 +1086,178 @@ var ContactDetailsForm = forwardRef(
   }
 );
 ContactDetailsForm.displayName = "ContactDetailsForm";
+var FIELDS = [
+  { name: "currentPassword", label: "Current Password" },
+  { name: "newPassword", label: "New Password" },
+  { name: "confirmNewPassword", label: "Confirm New Password" }
+];
+var ResetPasswordForm = forwardRef(
+  ({
+    onSubmit,
+    onChange,
+    validateOnBlur = true,
+    submitLabel = "Update Password",
+    className = "",
+    classNames = {}
+  }, ref) => {
+    const formId = useId();
+    const [values, setValues] = useState({
+      currentPassword: "",
+      newPassword: "",
+      confirmNewPassword: ""
+    });
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    const validateField = useCallback(
+      (name, val, allValues) => {
+        if (!val || val.trim() === "") return "This field is required";
+        if (name === "confirmNewPassword" && val !== allValues.newPassword) {
+          return "Passwords do not match";
+        }
+        return null;
+      },
+      []
+    );
+    const checkIsValid = useCallback(
+      (v) => {
+        for (const field of FIELDS) {
+          if (validateField(field.name, v[field.name], v)) return false;
+        }
+        return true;
+      },
+      [validateField]
+    );
+    const handleChange = useCallback(
+      (name, val) => {
+        const newValues = { ...values, [name]: val };
+        setValues(newValues);
+        if (touched[name]) {
+          const error = validateField(name, val, newValues);
+          if (!error) {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next[name];
+              return next;
+            });
+          }
+        }
+        if (name === "newPassword" && touched.confirmNewPassword) {
+          const confirmError = validateField("confirmNewPassword", newValues.confirmNewPassword, newValues);
+          if (confirmError) {
+            setErrors((prev) => ({ ...prev, confirmNewPassword: confirmError }));
+          } else {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next.confirmNewPassword;
+              return next;
+            });
+          }
+        }
+        onChange?.(newValues, checkIsValid(newValues));
+      },
+      [values, touched, validateField, onChange, checkIsValid]
+    );
+    const handleBlur = useCallback(
+      (name) => {
+        setTouched((prev) => ({ ...prev, [name]: true }));
+        if (validateOnBlur) {
+          const error = validateField(name, values[name], values);
+          if (error) {
+            setErrors((prev) => ({ ...prev, [name]: error }));
+          } else {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next[name];
+              return next;
+            });
+          }
+        }
+      },
+      [validateOnBlur, values, validateField]
+    );
+    const handleSubmit = useCallback(
+      (e) => {
+        e.preventDefault();
+        const allTouched = {};
+        const newErrors = {};
+        let isValid = true;
+        for (const field of FIELDS) {
+          allTouched[field.name] = true;
+          const error = validateField(field.name, values[field.name], values);
+          if (error) {
+            newErrors[field.name] = error;
+            isValid = false;
+          }
+        }
+        setTouched(allTouched);
+        setErrors(newErrors);
+        if (isValid) onSubmit(values);
+      },
+      [values, validateField, onSubmit]
+    );
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+        setErrors({});
+        setTouched({});
+      },
+      setValues: (newVals) => {
+        setValues((prev) => {
+          const merged = { ...prev };
+          for (const [key, value] of Object.entries(newVals)) {
+            if (value !== void 0) {
+              merged[key] = value;
+            }
+          }
+          return merged;
+        });
+      }
+    }), []);
+    const styles = {
+      fieldWrapper: classNames.fieldWrapper || "mb-4",
+      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",
+      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"
+    };
+    return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
+      FIELDS.map((field) => {
+        const fieldId = `${formId}-${field.name}`;
+        const errorId = `${fieldId}-error`;
+        const value = values[field.name];
+        const error = errors[field.name];
+        const isTouched = touched[field.name];
+        const showError = isTouched && error;
+        return /* @__PURE__ */ jsxs("div", { className: styles.fieldWrapper, children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+            field.label,
+            /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: fieldId,
+              name: field.name,
+              type: "password",
+              value,
+              onChange: (e) => handleChange(field.name, e.target.value),
+              onBlur: () => handleBlur(field.name),
+              className: `${styles.input} ${showError ? styles.inputError : ""}`,
+              "aria-invalid": showError ? "true" : "false",
+              "aria-describedby": showError ? errorId : void 0,
+              "aria-required": "true"
+            }
+          ),
+          showError && /* @__PURE__ */ jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+        ] }, field.name);
+      }),
+      /* @__PURE__ */ jsx("button", { type: "submit", className: styles.button, children: submitLabel })
+    ] });
+  }
+);
+ResetPasswordForm.displayName = "ResetPasswordForm";
 
-export { BookingForm, ContactDetailsForm, RegistrationForm, compose, email, minLen, phone, required, ukPostcode };
+export { BookingForm, ContactDetailsForm, RegistrationForm, ResetPasswordForm, compose, email, minLen, phone, required, ukPostcode };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map