medos-sdk 1.1.11 → 1.1.13

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -1,8 +1,9 @@
 import { AppointmentService, } from "../services/AppointmentService";
 import { PatientService } from "../services/PatientService";
 import { MedosClient } from "../client/MedosClient";
-import { INITIAL_STATE, COUNTRY_CODES, mapBloodGroupToApi, } from "../components/types";
-import { validatePhoneNumber, validateCountryCode, } from "../components/validation";
+import { INITIAL_STATE, } from "../components/appointment-booking/types";
+import { COUNTRY_CODES, GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, mapBloodGroupToApi, } from "../components/constants/options";
+import { validatePhoneNumber, validateCountryCode, validateDateOfBirth, validateBloodGroup, } from "../components/validation";
 import { formatDateToISO, parsePatientName } from "../components/utils";
 import { VanillaIcons } from "./components/VanillaIcons";
 import { VanillaSelect } from "./components/VanillaSelect";
@@ -207,17 +208,58 @@ class AppointmentCalendarWidget {
         return true;
     }
     updateSubmitButtonState() {
-        const submitBtn = this.container.querySelector("#medos-btn-submit");
-        if (submitBtn) {
-            const canSubmit = this.state.patientName &&
-                this.state.patientAddress &&
-                this.state.patientCity &&
-                this.state.patientState &&
-                this.state.patientCountry &&
-                this.state.patientZipcode &&
-                this.state.patientAge &&
-                this.state.otpVerified;
-            submitBtn.disabled = !(canSubmit && !this.state.loading);
+        try {
+            const submitBtn = this.container.querySelector("#medos-btn-submit");
+            if (submitBtn) {
+                const canSubmit = this.state.patientName &&
+                    this.state.patientAddress &&
+                    this.state.patientCity &&
+                    this.state.patientState &&
+                    this.state.patientCountry &&
+                    this.state.patientZipcode &&
+                    this.state.patientAge &&
+                    this.state.patientGender &&
+                    this.state.otpVerified &&
+                    (!(this.state.patientDob && this.state.patientDob.trim() !== "") ||
+                        this.isValidDateOfBirth(this.state.patientDob)) &&
+                    (!(this.state.bloodGroup && this.state.bloodGroup.trim() !== "") ||
+                        this.isValidBloodGroup(this.state.bloodGroup));
+                submitBtn.disabled = !(canSubmit && !this.state.loading);
+            }
+        }
+        catch (error) {
+            console.error("Error updating submit button state:", error);
+            const submitBtn = this.container.querySelector("#medos-btn-submit");
+            if (submitBtn) {
+                submitBtn.disabled = true;
+            }
+        }
+    }
+    updatePatientDetailsButtonState() {
+        try {
+            const continueBtn = this.container.querySelector("#medos-btn-continue");
+            if (continueBtn) {
+                const isFormValid = this.state.patientName &&
+                    this.state.patientAge &&
+                    this.state.patientGender &&
+                    this.state.patientAddress &&
+                    this.state.patientCity &&
+                    this.state.patientState &&
+                    this.state.patientCountry &&
+                    this.state.patientZipcode &&
+                    (!(this.state.patientDob && this.state.patientDob.trim() !== "") ||
+                        this.isValidDateOfBirth(this.state.patientDob)) &&
+                    (!(this.state.bloodGroup && this.state.bloodGroup.trim() !== "") ||
+                        this.isValidBloodGroup(this.state.bloodGroup));
+                continueBtn.disabled = !isFormValid;
+            }
+        }
+        catch (error) {
+            console.error("Error updating patient details button state:", error);
+            const continueBtn = this.container.querySelector("#medos-btn-continue");
+            if (continueBtn) {
+                continueBtn.disabled = true;
+            }
         }
     }
     async sendOtp() {
@@ -318,6 +360,9 @@ class AppointmentCalendarWidget {
             !this.state.selectedSlot ||
             !this.state.workspaceId ||
             !this.state.selectedAddress ||
+            !this.state.patientName ||
+            !this.state.patientAge ||
+            !this.state.patientGender ||
             !this.state.patientAddress ||
             !this.state.patientCity ||
             !this.state.patientState ||
@@ -332,6 +377,40 @@ class AppointmentCalendarWidget {
             this.setState({ error: "Please verify your phone number first." });
             return;
         }
+        if (this.state.patientDob && this.state.patientDob.trim() !== "") {
+            if (!this.isValidDateOfBirth(this.state.patientDob)) {
+                const dobValue = this.state.patientDob;
+                const today = new Date();
+                const inputDate = new Date(dobValue);
+                if (inputDate > today) {
+                    this.displayFieldValidationError("dateOfBirth", "future");
+                }
+                else if (!/^\d{4}-\d{2}-\d{2}$/.test(dobValue)) {
+                    this.displayFieldValidationError("dateOfBirth", "format");
+                }
+                else {
+                    this.displayFieldValidationError("dateOfBirth", "invalid");
+                }
+                return;
+            }
+        }
+        if (this.state.bloodGroup && this.state.bloodGroup.trim() !== "") {
+            if (!this.isValidBloodGroup(this.state.bloodGroup)) {
+                this.displayFieldValidationError("bloodGroup", "invalid");
+                return;
+            }
+            try {
+                const mappedValue = this.safeMapBloodGroupToApi(this.state.bloodGroup);
+                if (mappedValue === "UNKNOWN" && this.state.bloodGroup !== "UNKNOWN") {
+                    this.displayFieldValidationError("bloodGroup", "mapping");
+                    return;
+                }
+            }
+            catch (error) {
+                this.displayFieldValidationError("bloodGroup", "mapping");
+                return;
+            }
+        }
         this.setState({ loading: true });
         this.render();
         try {
@@ -377,13 +456,12 @@ class AppointmentCalendarWidget {
                     gender: this.state.patientGender
                         ? this.state.patientGender.toUpperCase()
                         : undefined,
-                    bloodGroup: this.state.bloodGroup
-                        ? mapBloodGroupToApi(this.state.bloodGroup)
-                        : mapBloodGroupToApi("UNKNOWN"),
+                    dob: this.safeFormatDateOfBirth(this.state.patientDob),
+                    bloodGroup: this.safeMapBloodGroupToApi(this.state.bloodGroup),
                 },
                 patientAddress: patientAddressPayload,
             });
-            this.state.step = 5;
+            this.state.step = 7;
             this.options.onSuccess?.();
         }
         catch (e) {
@@ -449,7 +527,22 @@ class AppointmentCalendarWidget {
             this.render();
             return;
         }
-        this.state.step = Math.min(6, this.state.step + 1);
+        if (this.state.step === 5) {
+            const isFormValid = this.state.patientName &&
+                this.state.patientAge &&
+                this.state.patientGender &&
+                this.state.patientAddress &&
+                this.state.patientCity &&
+                this.state.patientState &&
+                this.state.patientCountry &&
+                this.state.patientZipcode;
+            if (!isFormValid)
+                return;
+            this.state.step = 6;
+            this.render();
+            return;
+        }
+        this.state.step = Math.min(7, this.state.step + 1);
         this.render();
     }
     goBack() {
@@ -484,6 +577,11 @@ class AppointmentCalendarWidget {
             this.render();
             return;
         }
+        if (this.state.step === 6) {
+            this.state.step = 5;
+            this.render();
+            return;
+        }
         this.state.step = Math.max(0, this.state.step - 1);
         this.render();
     }
@@ -494,7 +592,25 @@ class AppointmentCalendarWidget {
         this.render();
     }
     setState(updates) {
-        this.state = { ...this.state, ...updates };
+        try {
+            const safeUpdates = { ...updates };
+            if ("bloodGroup" in safeUpdates && safeUpdates.bloodGroup === undefined) {
+                safeUpdates.bloodGroup = "";
+            }
+            if ("patientDob" in safeUpdates && safeUpdates.patientDob === undefined) {
+                safeUpdates.patientDob = "";
+            }
+            this.state = { ...this.state, ...safeUpdates };
+            if (safeUpdates.bloodGroup !== undefined ||
+                safeUpdates.patientDob !== undefined) {
+                this.updatePatientDetailsButtonState();
+                this.updateSubmitButtonState();
+            }
+        }
+        catch (error) {
+            console.error("Error updating state:", error);
+            this.state = { ...this.state, ...updates };
+        }
     }
     render() {
         if (!this.mounted)
@@ -597,6 +713,61 @@ class AppointmentCalendarWidget {
                 });
             }
         }
+        if (this.state.step === 5) {
+            const genderContainer = this.container.querySelector("#medos-gender-select-container");
+            if (genderContainer) {
+                const genderOptions = GENDER_OPTIONS.map((g) => ({
+                    value: g.value,
+                    label: g.label,
+                }));
+                this.genderSelect = new VanillaSelect(genderContainer, genderOptions, {
+                    placeholder: "Select gender",
+                    onValueChange: (value) => {
+                        this.state.patientGender = value;
+                        this.updatePatientDetailsButtonState();
+                    },
+                });
+                if (this.state.patientGender) {
+                    this.genderSelect.setValue(this.state.patientGender);
+                }
+            }
+            const bloodGroupContainer = this.container.querySelector("#medos-blood-group-select-container");
+            if (bloodGroupContainer) {
+                const bloodGroupOptions = BLOOD_GROUP_OPTIONS.map((bg) => ({
+                    value: bg.value,
+                    label: bg.label,
+                }));
+                this.bloodGroupSelect = new VanillaSelect(bloodGroupContainer, bloodGroupOptions, {
+                    placeholder: "Select blood group (optional)",
+                    onValueChange: (value) => {
+                        this.setState({ error: null });
+                        try {
+                            if (value && value.trim() !== "") {
+                                if (!this.isValidBloodGroup(value)) {
+                                    this.displayFieldValidationError("bloodGroup", "invalid");
+                                    return;
+                                }
+                                const mappedValue = this.safeMapBloodGroupToApi(value);
+                                if (mappedValue === "UNKNOWN" && value !== "UNKNOWN") {
+                                    this.displayFieldValidationError("bloodGroup", "mapping");
+                                    return;
+                                }
+                            }
+                            this.setState({ bloodGroup: value });
+                            this.updatePatientDetailsButtonState();
+                            this.updateSubmitButtonState();
+                        }
+                        catch (error) {
+                            console.error("Blood group selection error:", error);
+                            this.displayFieldValidationError("bloodGroup", "mapping");
+                        }
+                    },
+                });
+                if (this.state.bloodGroup) {
+                    this.bloodGroupSelect.setValue(this.state.bloodGroup);
+                }
+            }
+        }
     }
     renderStep() {
         switch (this.state.step) {
@@ -613,8 +784,10 @@ class AppointmentCalendarWidget {
             case 4:
                 return this.renderPatientSelectionStep();
             case 5:
-                return this.renderAppointmentSummaryStep();
+                return this.renderPatientDetailsStep();
             case 6:
+                return this.renderAppointmentSummaryStep();
+            case 7:
                 return this.renderSuccessStep();
             default:
                 return "";
@@ -1109,6 +1282,203 @@ class AppointmentCalendarWidget {
       </div>
     `;
     }
+    renderPatientDetailsStep() {
+        const isFormValid = this.state.patientName &&
+            this.state.patientAge &&
+            this.state.patientGender &&
+            this.state.patientAddress &&
+            this.state.patientCity &&
+            this.state.patientState &&
+            this.state.patientCountry &&
+            this.state.patientZipcode;
+        return `
+      <!-- Patient Information Section -->
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.user(14)}
+          <span class="medos-section-title">Patient Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                First Name <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-first-name"
+                placeholder="Jane"
+                value="${this.escapeHtml(this.state.patientName.split(" ")[0] || "")}"
+              />
+            </div>
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                Last Name <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-last-name"
+                placeholder="Doe"
+                value="${this.escapeHtml(this.state.patientName.split(" ").slice(1).join(" ") || "")}"
+              />
+            </div>
+          </div>
+
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                Age <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="number"
+                class="medos-appointment-input"
+                id="medos-patient-age"
+                placeholder="25"
+                min="0"
+                max="120"
+                value="${this.escapeHtml(this.state.patientAge)}"
+              />
+            </div>
+            <div class="medos-form-field">
+              <label class="medos-form-label">Email</label>
+              <input
+                type="email"
+                class="medos-appointment-input"
+                id="medos-patient-email"
+                placeholder="jane@example.com (optional)"
+                value="${this.escapeHtml(this.state.patientEmail)}"
+              />
+            </div>
+          </div>
+
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                Gender <span style="color: #EF4444;">*</span>
+              </label>
+              <div id="medos-gender-select-container"></div>
+            </div>
+            <div class="medos-form-field">
+              <label class="medos-form-label">Blood Group</label>
+              <div id="medos-blood-group-select-container"></div>
+            </div>
+          </div>
+
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">Date of Birth</label>
+              <input
+                type="date"
+                class="medos-appointment-input"
+                id="medos-patient-dob"
+                value="${this.escapeHtml(this.state.patientDob)}"
+              />
+              ${this.state.patientDob &&
+            this.state.patientDob.trim() !== "" &&
+            !this.isValidDateOfBirth(this.state.patientDob)
+            ? this.getDateOfBirthErrorMessage(this.state.patientDob)
+            : ""}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Address Information Section -->
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mapPin(14)}
+          <span class="medos-section-title">Address Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-field">
+            <label class="medos-form-label">
+              Address <span style="color: #EF4444;">*</span>
+            </label>
+            <input
+              type="text"
+              class="medos-appointment-input"
+              id="medos-patient-address"
+              placeholder="123 Main Street"
+              value="${this.escapeHtml(this.state.patientAddress)}"
+            />
+          </div>
+
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                City <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-city"
+                placeholder="New York"
+                value="${this.escapeHtml(this.state.patientCity)}"
+              />
+            </div>
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                State <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-state"
+                placeholder="NY"
+                value="${this.escapeHtml(this.state.patientState)}"
+              />
+            </div>
+          </div>
+
+          <div class="medos-form-row">
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                Country <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-country"
+                placeholder="United States"
+                value="${this.escapeHtml(this.state.patientCountry)}"
+              />
+            </div>
+            <div class="medos-form-field">
+              <label class="medos-form-label">
+                Zipcode <span style="color: #EF4444;">*</span>
+              </label>
+              <input
+                type="text"
+                class="medos-appointment-input"
+                id="medos-patient-zipcode"
+                placeholder="10001"
+                value="${this.escapeHtml(this.state.patientZipcode)}"
+              />
+            </div>
+          </div>
+
+          <div class="medos-form-field" style="margin-top: 20px;">
+            <label class="medos-form-label">Landmark</label>
+            <input
+              type="text"
+              class="medos-appointment-input"
+              id="medos-patient-landmark"
+              placeholder="Near Central Park"
+              value="${this.escapeHtml(this.state.patientLandmark)}"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-back" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-cancel">Cancel</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${isFormValid ? "" : "disabled"}>Continue</button>
+      </div>
+    `;
+    }
     renderAppointmentSummaryStep() {
         const selectedDoctor = this.doctors.find((d) => d.id === this.state.selectedDoctor);
         const selectedAddress = this.state.addresses.find((addr) => addr.id === this.state.selectedAddress);
@@ -1426,6 +1796,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientAge = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientEmailInput = this.container.querySelector("#medos-patient-email");
@@ -1442,6 +1813,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientAddress = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientCityInput = this.container.querySelector("#medos-patient-city");
@@ -1450,6 +1822,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientCity = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientStateInput = this.container.querySelector("#medos-patient-state");
@@ -1458,6 +1831,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientState = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientCountryInput = this.container.querySelector("#medos-patient-country");
@@ -1466,6 +1840,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientCountry = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientZipcodeInput = this.container.querySelector("#medos-patient-zipcode");
@@ -1474,6 +1849,7 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientZipcode = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientLandmarkInput = this.container.querySelector("#medos-patient-landmark");
@@ -1483,6 +1859,92 @@ class AppointmentCalendarWidget {
                 this.state.patientLandmark = target.value;
             });
         }
+        const patientFirstNameInput = this.container.querySelector("#medos-patient-first-name");
+        if (patientFirstNameInput) {
+            patientFirstNameInput.addEventListener("input", (e) => {
+                const target = e.target;
+                const lastName = this.state.patientName.split(" ").slice(1).join(" ") || "";
+                this.state.patientName = `${target.value} ${lastName}`.trim();
+                this.updatePatientDetailsButtonState();
+            });
+        }
+        const patientLastNameInput = this.container.querySelector("#medos-patient-last-name");
+        if (patientLastNameInput) {
+            patientLastNameInput.addEventListener("input", (e) => {
+                const target = e.target;
+                const firstName = this.state.patientName.split(" ")[0] || "";
+                this.state.patientName = `${firstName} ${target.value}`.trim();
+                this.updatePatientDetailsButtonState();
+            });
+        }
+        const patientDobInput = this.container.querySelector("#medos-patient-dob");
+        if (patientDobInput) {
+            patientDobInput.addEventListener("input", (e) => {
+                const target = e.target;
+                const dobValue = target.value;
+                this.setState({ patientDob: dobValue });
+                this.setState({ error: null });
+                if (dobValue && dobValue.trim() !== "") {
+                    try {
+                        if (!this.isValidDateOfBirth(dobValue)) {
+                            target.classList.add("medos-input-error");
+                            const today = new Date();
+                            const inputDate = new Date(dobValue);
+                            if (inputDate > today) {
+                                target.title = "Date of birth cannot be in the future";
+                            }
+                            else if (!/^\d{4}-\d{2}-\d{2}$/.test(dobValue)) {
+                                target.title = "Please use YYYY-MM-DD format";
+                            }
+                            else {
+                                target.title = "Please enter a valid date";
+                            }
+                        }
+                        else {
+                            target.classList.remove("medos-input-error");
+                            target.title = "";
+                        }
+                    }
+                    catch (error) {
+                        console.warn("Date validation error:", error);
+                        target.classList.add("medos-input-error");
+                        target.title = "Date validation failed";
+                    }
+                }
+                else {
+                    target.classList.remove("medos-input-error");
+                    target.title = "";
+                }
+                this.updatePatientDetailsButtonState();
+                this.updateSubmitButtonState();
+            });
+            patientDobInput.addEventListener("blur", (e) => {
+                const target = e.target;
+                const dobValue = target.value;
+                if (dobValue && dobValue.trim() !== "") {
+                    try {
+                        if (!this.isValidDateOfBirth(dobValue)) {
+                            target.classList.add("medos-input-error");
+                            const today = new Date();
+                            const inputDate = new Date(dobValue);
+                            if (inputDate > today) {
+                                this.displayFieldValidationError("dateOfBirth", "future");
+                            }
+                            else if (!/^\d{4}-\d{2}-\d{2}$/.test(dobValue)) {
+                                this.displayFieldValidationError("dateOfBirth", "format");
+                            }
+                            else {
+                                this.displayFieldValidationError("dateOfBirth", "invalid");
+                            }
+                        }
+                    }
+                    catch (error) {
+                        console.warn("Date validation error on blur:", error);
+                        this.displayFieldValidationError("dateOfBirth", "invalid");
+                    }
+                }
+            });
+        }
         const optionCards = this.container.querySelectorAll(".medos-option-card");
         optionCards.forEach((card) => {
             card.addEventListener("click", () => {
@@ -1687,6 +2149,122 @@ class AppointmentCalendarWidget {
         div.textContent = text;
         return div.innerHTML;
     }
+    isValidDateOfBirth(dob) {
+        try {
+            return validateDateOfBirth(dob);
+        }
+        catch (error) {
+            console.warn("Date of birth validation error:", error);
+            return false;
+        }
+    }
+    isValidBloodGroup(bloodGroup) {
+        try {
+            return validateBloodGroup(bloodGroup);
+        }
+        catch (error) {
+            console.warn("Blood group validation error:", error);
+            return false;
+        }
+    }
+    safeMapBloodGroupToApi(bloodGroup) {
+        try {
+            if (!bloodGroup) {
+                return "UNKNOWN";
+            }
+            if (!this.isValidBloodGroup(bloodGroup)) {
+                console.warn(`Invalid blood group provided: ${bloodGroup}, using UNKNOWN`);
+                return "UNKNOWN";
+            }
+            const mapped = mapBloodGroupToApi(bloodGroup);
+            if (!mapped || mapped === "") {
+                console.warn(`Blood group mapping failed for: ${bloodGroup}, using UNKNOWN`);
+                return "UNKNOWN";
+            }
+            return mapped;
+        }
+        catch (error) {
+            console.error("Blood group mapping error:", error);
+            return "UNKNOWN";
+        }
+    }
+    safeFormatDateOfBirth(dob) {
+        try {
+            if (!dob) {
+                return undefined;
+            }
+            if (!this.isValidDateOfBirth(dob)) {
+                console.warn(`Invalid date of birth provided: ${dob}, excluding from payload`);
+                return undefined;
+            }
+            return dob;
+        }
+        catch (error) {
+            console.error("Date of birth formatting error:", error);
+            return undefined;
+        }
+    }
+    getDateOfBirthErrorMessage(dobValue) {
+        try {
+            const today = new Date();
+            const inputDate = new Date(dobValue);
+            if (inputDate > today) {
+                return '<div class="medos-validation-error">Date of birth cannot be in the future</div>';
+            }
+            else if (!/^\d{4}-\d{2}-\d{2}$/.test(dobValue)) {
+                return '<div class="medos-validation-error">Please use YYYY-MM-DD format</div>';
+            }
+            else {
+                return '<div class="medos-validation-error">Please enter a valid date of birth</div>';
+            }
+        }
+        catch (error) {
+            console.warn("Error generating date of birth error message:", error);
+            return '<div class="medos-validation-error">Please enter a valid date of birth</div>';
+        }
+    }
+    displayFieldValidationError(fieldName, errorType) {
+        let errorMessage = "";
+        switch (fieldName) {
+            case "bloodGroup":
+                switch (errorType) {
+                    case "invalid":
+                        errorMessage =
+                            "Please select a valid blood group from the dropdown or leave it empty.";
+                        break;
+                    case "mapping":
+                        errorMessage =
+                            "Blood group selection failed. Please try selecting again or leave it empty.";
+                        break;
+                    default:
+                        errorMessage =
+                            "Blood group validation failed. Please check your selection.";
+                }
+                break;
+            case "dateOfBirth":
+                switch (errorType) {
+                    case "invalid":
+                        errorMessage =
+                            "Please enter a valid date of birth in YYYY-MM-DD format or leave it empty.";
+                        break;
+                    case "future":
+                        errorMessage =
+                            "Date of birth cannot be in the future. Please enter a valid past date.";
+                        break;
+                    case "format":
+                        errorMessage =
+                            "Please enter date of birth in the correct format (YYYY-MM-DD).";
+                        break;
+                    default:
+                        errorMessage =
+                            "Date of birth validation failed. Please check the date format.";
+                }
+                break;
+            default:
+                errorMessage = `Validation failed for ${fieldName}. Please check your input.`;
+        }
+        this.setState({ error: errorMessage });
+    }
     destroy() {
         this.mounted = false;
         this.container.innerHTML = "";