medos-sdk 1.1.10 → 1.1.12

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, GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } 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,18 +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.patientEmail &&
-                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() {
@@ -319,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 ||
@@ -333,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 {
@@ -359,11 +437,11 @@ class AppointmentCalendarWidget {
                 workspaceId: this.state.workspaceId,
                 workspaceAddressId: this.state.selectedAddress,
                 doctorId: this.state.selectedDoctor,
-                mode: "OFFLINE",
+                mode: this.state.consultationMode || "OFFLINE",
                 appointmentDate,
                 fromDateTimeTs,
                 toDateTimeTs,
-                consultationCharge: this.state.consultationCharge || "0",
+                consultationCharge: this.state.consultationMode === "ONLINE" ? "500" : "300",
                 type: "CONSULTATION",
                 source: "SDK_POWERED_WEBSITE",
                 patientPayload: {
@@ -378,10 +456,12 @@ class AppointmentCalendarWidget {
                     gender: this.state.patientGender
                         ? this.state.patientGender.toUpperCase()
                         : undefined,
+                    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) {
@@ -396,34 +476,112 @@ class AppointmentCalendarWidget {
     }
     goToNext() {
         if (this.state.step === 0) {
+            if (!this.state.otpVerified)
+                return;
+            this.state.step = 1;
+            this.render();
+            return;
+        }
+        if (this.state.step === 1) {
+            if (!this.state.bookingOptionType)
+                return;
+            if (this.state.showPackageExplorer) {
+                if (this.state.selectedNewPackage) {
+                    this.state.showPackageExplorer = false;
+                    this.state.step = 2;
+                    this.render();
+                }
+                return;
+            }
+            this.state.step = 2;
+            this.render();
+            return;
+        }
+        if (this.state.step === 2) {
             if (this.state.addresses.length > 1 && !this.state.selectedAddress)
                 return;
             if (this.doctors.length > 1 && !this.state.selectedDoctor)
                 return;
+            this.state.step = 3;
+            const dateStr = formatDateToISO(this.state.selectedDate);
+            if (dateStr) {
+                this.loadSlots();
+            }
+            else {
+                this.render();
+            }
+            return;
+        }
+        if (this.state.step === 3) {
+            const dateStr = formatDateToISO(this.state.selectedDate);
+            if (!dateStr || !this.state.selectedSlot)
+                return;
+            this.state.step = 4;
+            this.render();
+            return;
+        }
+        if (this.state.step === 4) {
+            if (!this.state.selectedPatient)
+                return;
+            this.state.step = 5;
+            this.render();
+            return;
+        }
+        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() {
+        if (this.state.step === 1) {
+            if (this.state.showPackageExplorer) {
+                this.state.showPackageExplorer = false;
+                this.state.selectedNewPackage = null;
+                this.render();
+                return;
+            }
+            this.state.step = 0;
+            this.render();
+            return;
+        }
+        if (this.state.step === 2) {
             this.state.step = 1;
             this.render();
             return;
         }
-        const dateStr = formatDateToISO(this.state.selectedDate);
-        if (this.state.step === 1 && dateStr) {
+        if (this.state.step === 3) {
             this.state.step = 2;
-            this.loadSlots();
+            this.render();
             return;
         }
-        if (this.state.step === 2 && this.state.selectedSlot) {
+        if (this.state.step === 4) {
             this.state.step = 3;
             this.render();
             return;
         }
-        if (this.state.step === 3 && this.state.otpVerified) {
+        if (this.state.step === 5) {
             this.state.step = 4;
             this.render();
             return;
         }
-        this.state.step = Math.min(5, this.state.step + 1);
-        this.render();
-    }
-    goBack() {
+        if (this.state.step === 6) {
+            this.state.step = 5;
+            this.render();
+            return;
+        }
         this.state.step = Math.max(0, this.state.step - 1);
         this.render();
     }
@@ -434,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)
@@ -444,13 +620,6 @@ class AppointmentCalendarWidget {
         <div class="medos-appointment-card">
           <div class="medos-appointment-header">
             <h2 class="medos-appointment-title">Book Appointment</h2>
-            <div class="medos-appointment-stepper">
-              <div class="medos-appointment-step-pill ${this.state.step === 0 ? "active" : ""}">1 Address</div>
-              <div class="medos-appointment-step-pill ${this.state.step === 1 ? "active" : ""}">2 Date</div>
-              <div class="medos-appointment-step-pill ${this.state.step === 2 ? "active" : ""}">3 Slot</div>
-              <div class="medos-appointment-step-pill ${this.state.step === 3 ? "active" : ""}">4 Phone</div>
-              <div class="medos-appointment-step-pill ${this.state.step === 4 ? "active" : ""}">5 Details</div>
-            </div>
           </div>
 
           ${this.state.loading
@@ -469,6 +638,30 @@ class AppointmentCalendarWidget {
     }
     initializeCustomComponents() {
         if (this.state.step === 0) {
+            const countryCodeContainer = this.container.querySelector("#medos-country-code-container");
+            if (countryCodeContainer) {
+                const countryOptions = COUNTRY_CODES.map((c) => ({
+                    value: c.code,
+                    label: c.label,
+                }));
+                this.countryCodeSelect = new VanillaSelect(countryCodeContainer, countryOptions, {
+                    placeholder: "Country",
+                    onValueChange: (value) => {
+                        this.state.countryCode = value;
+                        const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                        if (sendOtpBtn) {
+                            const canSendOtp = this.state.countryCode &&
+                                this.state.patientPhone.length >= 10;
+                            sendOtpBtn.disabled = !canSendOtp;
+                        }
+                    },
+                });
+                if (this.state.countryCode) {
+                    this.countryCodeSelect.setValue(this.state.countryCode);
+                }
+            }
+        }
+        if (this.state.step === 2 && !this.state.showPackageExplorer) {
             const addressContainer = this.container.querySelector("#medos-address-select-container");
             if (addressContainer && this.state.addresses.length > 0) {
                 const addressOptions = this.state.addresses.map((a) => ({
@@ -496,7 +689,7 @@ class AppointmentCalendarWidget {
                     onValueChange: (value) => {
                         this.state.selectedDoctor = Number(value) || null;
                         const selectedDoc = this.doctors.find((d) => d.id === this.state.selectedDoctor);
-                        if (selectedDoc && selectedDoc.consultationCharge) {
+                        if (selectedDoc?.consultationCharge) {
                             this.state.consultationCharge = selectedDoc.consultationCharge;
                         }
                         this.render();
@@ -507,7 +700,7 @@ class AppointmentCalendarWidget {
                 }
             }
         }
-        if (this.state.step === 1) {
+        if (this.state.step === 3) {
             const calendarContainer = this.container.querySelector("#medos-calendar-container");
             if (calendarContainer) {
                 this.calendar = new VanillaCalendar(calendarContainer, {
@@ -515,55 +708,59 @@ class AppointmentCalendarWidget {
                     pastDisabled: true,
                     onSelect: (date) => {
                         this.state.selectedDate = date;
-                        this.render();
-                    },
-                });
-            }
-        }
-        if (this.state.step === 3) {
-            const countryCodeContainer = this.container.querySelector("#medos-country-code-container");
-            if (countryCodeContainer) {
-                const countryOptions = COUNTRY_CODES.map((c) => ({
-                    value: c.code,
-                    label: c.label,
-                }));
-                this.countryCodeSelect = new VanillaSelect(countryCodeContainer, countryOptions, {
-                    placeholder: "Country",
-                    onValueChange: (value) => {
-                        this.state.countryCode = value;
-                        const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
-                        if (sendOtpBtn) {
-                            const canSendOtp = this.state.countryCode &&
-                                this.state.patientPhone.length >= 10;
-                            sendOtpBtn.disabled = !canSendOtp;
-                        }
+                        this.loadSlots();
                     },
                 });
-                if (this.state.countryCode) {
-                    this.countryCodeSelect.setValue(this.state.countryCode);
-                }
             }
         }
-        if (this.state.step === 4) {
-            const genderContainer = this.container.querySelector("#medos-gender-container");
+        if (this.state.step === 5) {
+            const genderContainer = this.container.querySelector("#medos-gender-select-container");
             if (genderContainer) {
-                this.genderSelect = new VanillaSelect(genderContainer, GENDER_OPTIONS, {
+                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.updateSubmitButtonState();
+                        this.updatePatientDetailsButtonState();
                     },
                 });
                 if (this.state.patientGender) {
                     this.genderSelect.setValue(this.state.patientGender);
                 }
             }
-            const bloodGroupContainer = this.container.querySelector("#medos-blood-group-container");
+            const bloodGroupContainer = this.container.querySelector("#medos-blood-group-select-container");
             if (bloodGroupContainer) {
-                this.bloodGroupSelect = new VanillaSelect(bloodGroupContainer, BLOOD_GROUP_OPTIONS, {
+                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.state.bloodGroup = 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) {
@@ -575,147 +772,357 @@ class AppointmentCalendarWidget {
     renderStep() {
         switch (this.state.step) {
             case 0:
-                return this.renderStep0();
+                return this.renderPhoneVerificationStep();
             case 1:
-                return this.renderStep1();
+                return this.renderBookingOptionStep();
             case 2:
-                return this.renderStep2();
+                return this.state.showPackageExplorer
+                    ? this.renderPackageExplorerStep()
+                    : this.renderLocationDoctorStep();
             case 3:
-                return this.renderStep3();
+                return this.renderNewAppointmentStep();
             case 4:
-                return this.renderStep4();
+                return this.renderPatientSelectionStep();
             case 5:
-                return this.renderStep5();
+                return this.renderPatientDetailsStep();
+            case 6:
+                return this.renderAppointmentSummaryStep();
+            case 7:
+                return this.renderSuccessStep();
             default:
                 return "";
         }
     }
-    renderStep0() {
-        const canProceed = this.canProceedFromMergedStep();
-        return `
-      <div style="border:1px solid #e5e7eb;border-radius:12px;margin-bottom:24px;background:#fff;">
-        <div style="background:#F9FAFB;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #E5E7EB;">
-          ${VanillaIcons.mapPin(18)}
-          <h3 style="font-size:18px;font-weight:600;margin:0;">Location & Doctor</h3>
-        </div>
-        <div style="padding:24px;">
-          <div style="margin-bottom:20px;">
-            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
-              Preferred Location <span style="color:#EF4444">*</span>
-            </label>
-            <div id="medos-address-select-container"></div>
+    renderPhoneVerificationStep() {
+        const countryCodeValid = this.state.countryCode && validateCountryCode(this.state.countryCode);
+        const phoneValid = this.state.patientPhone && validatePhoneNumber(this.state.patientPhone);
+        const canSendOtp = countryCodeValid && phoneValid && !this.state.otpSending;
+        if (!this.state.otpSent) {
+            return `
+        <div class="medos-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Search Patient</span>
           </div>
-          <div style="margin-bottom:20px;">
-            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
-              Preferred Doctor <span style="color:#EF4444">*</span>
-            </label>
-            <div id="medos-doctor-select-container"></div>
+          <div class="medos-section-body">
+            <p class="medos-section-description">Enter Phone Number</p>
+            <div class="medos-phone-input-row">
+              <div class="medos-country-code-wrapper">
+                <div id="medos-country-code-container"></div>
+              </div>
+              <div class="medos-phone-wrapper">
+                <input 
+                  type="tel" 
+                  class="medos-input" 
+                  id="medos-phone" 
+                  placeholder="XXXXXXXXXX" 
+                  value="${this.escapeHtml(this.state.patientPhone)}" 
+                  maxlength="15"
+                />
+              </div>
+            </div>
+            ${this.state.patientPhone && !phoneValid
+                ? '<div class="medos-validation-error">Phone number should be 7-15 digits</div>'
+                : ""}
           </div>
-          <div style="margin-bottom:20px;">
-            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
-              Chief Complaint <span style="color:#6B7280">(optional)</span>
-            </label>
-            <textarea 
-              style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6e9ef;font-size:14px;box-sizing:border-box;"
-              class="medos-textarea" 
-              id="medos-chief-complaint"
-              placeholder="Enter Chief Complaint or Appointment Notes"
-            ></textarea>
+        </div>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-cancel">Cancel</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Continue"}</button>
+        </div>
+      `;
+        }
+        if (this.state.otpVerified) {
+            return `
+        <div class="medos-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Search Patient</span>
+          </div>
+          <div class="medos-section-body">
+            <div class="medos-verified-badge">
+              ${VanillaIcons.successBadge(20)}
+              <span>Phone verified successfully</span>
+            </div>
+            <div class="medos-verified-number">${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
           </div>
         </div>
-      </div>
-      <div style="display:flex;gap:8px;margin-top:16px;justify-content:flex-end;">
-        <button style="background:#218838;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;${!canProceed ? "opacity:0.6;" : ""}" id="medos-btn-next" ${!canProceed ? "disabled" : ""}>Next</button>
-      </div>
-    `;
-    }
-    renderStep1() {
-        const dateStr = formatDateToISO(this.state.selectedDate);
-        const selectedDoctor = this.doctors.find((d) => d.id === this.state.selectedDoctor);
-        const selectedDoctorData = this.doctors.find((d) => d.id === this.state.selectedDoctor);
-        const consultationCharge = selectedDoctorData?.consultationCharge ||
-            selectedDoctor?.consultationCharge ||
-            this.state.consultationCharge ||
-            "N/A";
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-cancel">Cancel</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-next">Continue</button>
+        </div>
+      `;
+        }
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.consultationType(14)}
-          <span class="medos-section-title">Consultation Type</span>
+          ${VanillaIcons.phone(14)}
+          <span class="medos-section-title">Enter OTP</span>
         </div>
         <div class="medos-section-body">
-          <div class="medos-consultation-options">
-            <label class="medos-radio-option ${this.state.consultationMode === "OFFLINE" ? "selected" : ""}">
-              <input 
-                type="radio" 
-                name="consultationMode" 
-                value="OFFLINE" 
-                ${this.state.consultationMode === "OFFLINE" ? "checked" : ""}
-                class="medos-radio-input"
-              />
-              <span class="medos-radio-label">In-Person Visit</span>
-            </label>
-            <label class="medos-radio-option ${this.state.consultationMode === "ONLINE" ? "selected" : ""}">
-              <input 
-                type="radio" 
-                name="consultationMode" 
-                value="ONLINE" 
-                ${this.state.consultationMode === "ONLINE" ? "checked" : ""}
-                class="medos-radio-input"
-              />
-              <span class="medos-radio-label">Online Consultation</span>
-            </label>
+          <p class="medos-section-description">Enter the 6-digit code sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</p>
+          <div class="medos-otp-input-wrapper">
+            <input 
+              type="text" 
+              class="medos-input medos-otp-input" 
+              id="medos-otp" 
+              placeholder="Enter 6-digit OTP" 
+              value="${this.escapeHtml(this.state.otpCode)}" 
+              maxlength="6"
+            />
           </div>
-          <div class="medos-consultation-charge">
-            <span class="medos-charge-label">Consultation Charge:</span>
-            <span class="medos-charge-value">${consultationCharge !== "N/A"
-            ? "₹" + consultationCharge
-            : consultationCharge}</span>
+          <button class="medos-link-btn" id="medos-btn-change-number">Change phone number</button>
+        </div>
+      </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
+            ? ""
+            : "disabled"}>${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+      </div>
+    `;
+    }
+    renderBookingOptionStep() {
+        const hasActivePacks = this.state.userSessionPacks.length > 0;
+        const activePack = this.state.userSessionPacks.find((p) => p.remainingSessions > 0);
+        return `
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.calendar(14)}
+          <span class="medos-section-title">Choose Booking Option</span>
+        </div>
+        <div class="medos-section-body">
+          <p class="medos-section-description">Select a package to explore on offer</p>
+          
+          ${hasActivePacks && activePack
+            ? `
+            <div class="medos-active-session-packs">
+              <label class="medos-form-label">YOUR ACTIVE SESSION PACKS</label>
+              <div class="medos-session-pack-card ${this.state.bookingOptionType === "session-pack"
+                ? "selected"
+                : ""}" data-pack-id="${activePack.id}">
+                <div class="medos-pack-header">
+                  <span class="medos-pack-name">${this.escapeHtml(activePack.name)}</span>
+                  <span class="medos-pack-badge">${activePack.remainingSessions} sessions</span>
+                </div>
+                <div class="medos-pack-details">
+                  ${activePack.remainingSessions} of ${activePack.totalSessions} sessions • <a href="#" class="medos-link">view details</a>
+                </div>
+              </div>
+            </div>
+          `
+            : ""}
+          
+          <div class="medos-other-options">
+            <label class="medos-form-label">OTHER OPTIONS</label>
+            
+            <div class="medos-option-cards">
+              <div class="medos-option-card ${this.state.bookingOptionType === "new-appointment"
+            ? "selected"
+            : ""}" data-option="new-appointment">
+                <div class="medos-option-icon">${VanillaIcons.calendar(24)}</div>
+                <div class="medos-option-content">
+                  <span class="medos-option-title">Standard Consultation</span>
+                  <span class="medos-option-subtitle">Pay per appointment</span>
+                </div>
+              </div>
+              
+              <div class="medos-option-card ${this.state.bookingOptionType === "explore-packages"
+            ? "selected"
+            : ""}" data-option="explore-packages">
+                <div class="medos-option-icon">${VanillaIcons.giftBox(24)}</div>
+                <div class="medos-option-content">
+                  <span class="medos-option-title">Session Packs</span>
+                  <span class="medos-option-subtitle">Explore packs with discounts and offers</span>
+                </div>
+              </div>
+            </div>
           </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">Continue</button>
+      </div>
+    `;
+    }
+    renderPackageExplorerStep() {
+        const packages = this.state.availablePackages.length > 0
+            ? this.state.availablePackages
+            : [
+                {
+                    id: 1,
+                    name: "Silver Package",
+                    description: "• 3 consultations (In clinic & Online appointments)\n• Can redeem for 6 months after\n  purchase",
+                    totalSessions: 3,
+                    price: 5000,
+                    validityDays: 180,
+                    applicableOnline: true,
+                    applicableOffline: true,
+                },
+                {
+                    id: 2,
+                    name: "Gold Package",
+                    description: "• 5 consultations (In clinic & Online appointments)\n• Can redeem for 12 months after\n  purchase",
+                    totalSessions: 5,
+                    price: 8000,
+                    validityDays: 365,
+                    applicableOnline: true,
+                    applicableOffline: true,
+                },
+            ];
+        return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.dateTime(14)}
-          <span class="medos-section-title">Select Date</span>
+          ${VanillaIcons.giftBox(14)}
+          <span class="medos-section-title">Explore Session Packs</span>
         </div>
         <div class="medos-section-body">
-          <div id="medos-calendar-container"></div>
+          <p class="medos-section-description">Select a package to explore on offer</p>
+          
+          <div class="medos-available-packages">
+            <label class="medos-form-label">AVAILABLE PACKAGES</label>
+            
+            ${packages
+            .map((pkg, index) => `
+              <div class="medos-package-card ${this.state.selectedNewPackage?.id === pkg.id ? "selected" : ""}" data-package-id="${pkg.id}">
+                <div class="medos-package-radio">
+                  <input type="radio" name="package" value="${pkg.id}" ${this.state.selectedNewPackage?.id === pkg.id ? "checked" : ""} />
+                </div>
+                <div class="medos-package-content">
+                  <div class="medos-package-name">${this.escapeHtml(pkg.name)}</div>
+                  <div class="medos-package-description">${this.escapeHtml(pkg.description || "").replace(/\n/g, "<br>")}</div>
+                </div>
+                <div class="medos-package-price">₹ ${pkg.price.toLocaleString()}</div>
+              </div>
+            `)
+            .join("")}
+          </div>
+          
+          <div class="medos-package-note">
+            <a href="#" class="medos-link">View full terms and conditions</a>
+          </div>
         </div>
       </div>
-
       <div class="medos-actions">
-        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${dateStr ? "" : "disabled"}>Next</button>
+        <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" ${this.state.selectedNewPackage ? "" : "disabled"}>Continue</button>
       </div>
     `;
     }
-    renderStep2() {
+    renderLocationDoctorStep() {
+        const canProceed = this.canProceedFromMergedStep();
+        return `
+      <div style="border:1px solid #e5e7eb;border-radius:12px;margin-bottom:24px;background:#fff;">
+        <div style="background:#F9FAFB;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #E5E7EB;">
+          ${VanillaIcons.mapPin(18)}
+          <h3 style="font-size:18px;font-weight:600;margin:0;">Location & Doctor</h3>
+        </div>
+        <div style="padding:24px;">
+          <div style="margin-bottom:20px;">
+            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
+              Preferred Location <span style="color:#EF4444">*</span>
+            </label>
+            <div id="medos-address-select-container"></div>
+          </div>
+          <div style="margin-bottom:20px;">
+            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
+              Preferred Doctor <span style="color:#EF4444">*</span>
+            </label>
+            <div id="medos-doctor-select-container"></div>
+          </div>
+          <div style="margin-bottom:20px;">
+            <label style="display:block;font-size:13px;margin-bottom:6px;color:#374151;">
+              Chief Complaint <span style="color:#6B7280">(optional)</span>
+            </label>
+            <textarea 
+              style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6e9ef;font-size:14px;box-sizing:border-box;"
+              class="medos-textarea" 
+              id="medos-chief-complaint"
+              placeholder="Enter Chief Complaint or Appointment Notes"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+      <div style="display:flex;gap:8px;margin-top:16px;justify-content:flex-end;">
+        <button class="medos-btn medos-btn-back" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
+        <button style="background:#218838;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;${canProceed ? "" : "opacity:0.6;"}" id="medos-btn-next" ${canProceed ? "" : "disabled"}>Continue</button>
+      </div>
+    `;
+    }
+    renderNewAppointmentStep() {
+        const dateStr = formatDateToISO(this.state.selectedDate);
+        const consultationCharge = this.state.consultationMode === "ONLINE" ? "500" : "300";
         const dateDisplay = this.state.selectedDate
             ? this.state.selectedDate.toLocaleDateString("en-US", {
-                weekday: "long",
                 year: "numeric",
                 month: "long",
                 day: "numeric",
             })
             : "";
+        const usingSessionPack = this.state.bookingOptionType === "session-pack" &&
+            this.state.selectedSessionPack;
+        const sessionInfo = usingSessionPack
+            ? `
+      <div class="medos-session-info">
+        <span class="medos-session-label">Sessions:</span>
+        <span class="medos-session-value">${this.state.selectedSessionPack?.remainingSessions} appointments now remaining</span>
+      </div>
+    `
+            : "";
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.clock(14)}
-          <span class="medos-section-title">Select Time Slot</span>
+          ${VanillaIcons.consultationType(14)}
+          <span class="medos-section-title">Consultation Type</span>
         </div>
         <div class="medos-section-body">
-          <div class="medos-selected-date-display">
-            ${VanillaIcons.dateTime(16)}
-            <span>${dateDisplay}</span>
+          <label class="medos-form-label">Consultation Mode</label>
+          <div class="medos-consultation-options">
+            <label class="medos-radio-option ${this.state.consultationMode === "OFFLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="OFFLINE" 
+                ${this.state.consultationMode === "OFFLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Online</span>
+            </label>
+            <label class="medos-radio-option ${this.state.consultationMode === "ONLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="ONLINE" 
+                ${this.state.consultationMode === "ONLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Offline</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.dateTime(14)}
+          <span class="medos-section-title">Date & Time</span>
+        </div>
+        <div class="medos-section-body medos-datetime-layout">
+          <div class="medos-calendar-section">
+            <label class="medos-form-label">Available Dates</label>
+            <div class="medos-date-display">${dateDisplay}</div>
+            <div id="medos-calendar-container"></div>
           </div>
-          ${this.state.slots.length === 0
-            ? '<div class="medos-empty-slots">No slots available for selected date</div>'
+          <div class="medos-slots-section">
+            <label class="medos-form-label">Available Slots</label>
+            ${this.state.slots.length === 0
+            ? '<div class="medos-empty-slots">Select a date to see available slots</div>'
             : `
-              <div class="medos-slots-grid">
-                ${this.state.slots
+                <div class="medos-slots-grid-compact">
+                  ${this.state.slots
                 .map((s) => {
                 const start = new Date(s.start).toLocaleTimeString([], {
                     hour: "2-digit",
@@ -728,128 +1135,164 @@ class AppointmentCalendarWidget {
                 const selected = this.state.selectedSlot?.start === s.start &&
                     this.state.selectedSlot?.end === s.end;
                 return `
-                    <div class="medos-slot-card ${selected ? "selected" : ""}" 
-                         data-slot-id="${this.escapeHtml(s.id || `${s.start}-${s.end}`)}" 
-                         data-slot-start="${this.escapeHtml(s.start)}" 
-                         data-slot-end="${this.escapeHtml(s.end)}">
-                      <span class="medos-slot-time">${start}</span>
-                      <span class="medos-slot-separator">-</span>
-                      <span class="medos-slot-time">${end}</span>
-                      ${selected
-                    ? `<span class="medos-slot-check">${VanillaIcons.check(14)}</span>`
-                    : ""}
-                    </div>
-                  `;
+                      <div class="medos-slot-btn ${selected ? "selected" : ""}" 
+                           data-slot-id="${this.escapeHtml(s.id || `${s.start}-${s.end}`)}" 
+                           data-slot-start="${this.escapeHtml(s.start)}" 
+                           data-slot-end="${this.escapeHtml(s.end)}">
+                        ${start}
+                      </div>
+                    `;
             })
                 .join("")}
-              </div>
-            `}
+                </div>
+              `}
+          </div>
         </div>
       </div>
+
       <div class="medos-actions">
-        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${this.state.selectedSlot ? "" : "disabled"} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
+        <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" ${this.state.selectedSlot ? "" : "disabled"}>Continue</button>
       </div>
     `;
     }
-    renderStep3() {
-        const countryCodeValid = this.state.countryCode && validateCountryCode(this.state.countryCode);
-        const phoneValid = this.state.patientPhone && validatePhoneNumber(this.state.patientPhone);
-        const canSendOtp = countryCodeValid && phoneValid && !this.state.otpSending;
-        if (!this.state.otpSent) {
-            return `
-        <div class="medos-section-card">
-          <div class="medos-section-header">
-            ${VanillaIcons.phone(14)}
-            <span class="medos-section-title">Phone Verification</span>
-          </div>
-          <div class="medos-section-body">
-            <p class="medos-section-description">Please enter your phone number for verification</p>
-            <div class="medos-phone-input-row">
-              <div class="medos-country-code-wrapper">
-                <div id="medos-country-code-container"></div>
-              </div>
-              <div class="medos-phone-wrapper">
-                <input 
-                  type="tel" 
-                  class="medos-input" 
-                  id="medos-phone" 
-                  placeholder="Enter phone number" 
-                  value="${this.escapeHtml(this.state.patientPhone)}" 
-                  maxlength="15"
-                />
-              </div>
-            </div>
-            ${this.state.patientPhone && !phoneValid
-                ? '<div class="medos-validation-error">Phone number should be 7-15 digits</div>'
-                : ""}
-          </div>
-        </div>
-        <div class="medos-actions">
-          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Send OTP"}</button>
-        </div>
-      `;
-        }
-        if (this.state.otpVerified) {
-            return `
-        <div class="medos-section-card">
-          <div class="medos-section-header">
-            ${VanillaIcons.phone(14)}
-            <span class="medos-section-title">Phone Verification</span>
-          </div>
-          <div class="medos-section-body">
-            <div class="medos-verified-badge">
-              ${VanillaIcons.successBadge(20)}
-              <span>Phone verified successfully</span>
-            </div>
-            <div class="medos-verified-number">${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
-          </div>
-        </div>
-        <div class="medos-actions">
-          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-btn medos-btn-primary" id="medos-btn-next">Continue</button>
-        </div>
-      `;
-        }
+    renderPatientSelectionStep() {
+        const patients = this.state.verifiedPatients.length > 0
+            ? this.state.verifiedPatients
+            : [
+                {
+                    id: 1,
+                    firstName: "Mumma",
+                    lastName: "Bear",
+                    email: "mumma@example.com",
+                    countryCode: "+91",
+                    phoneNumber: this.state.patientPhone,
+                    dob: "1970-01-01",
+                    age: 55,
+                    gender: "FEMALE",
+                    bloodGroup: "O+",
+                    mrn: "MRN001",
+                    address: {
+                        id: 1,
+                        completeAddress: "123 Main St",
+                        addressLine1: "123 Main St",
+                        addressLine2: "",
+                        city: "Mumbai",
+                        state: "Maharashtra",
+                        country: "India",
+                        zipcode: "400001",
+                        landmark: "",
+                        phoneNumber: this.state.patientPhone,
+                        latitude: 0,
+                        longitude: 0,
+                    },
+                },
+                {
+                    id: 2,
+                    firstName: "Papa",
+                    lastName: "Bear",
+                    email: "papa@example.com",
+                    countryCode: "+91",
+                    phoneNumber: this.state.patientPhone,
+                    dob: "1968-01-01",
+                    age: 57,
+                    gender: "MALE",
+                    bloodGroup: "B+",
+                    mrn: "MRN002",
+                    address: {
+                        id: 2,
+                        completeAddress: "123 Main St",
+                        addressLine1: "123 Main St",
+                        addressLine2: "",
+                        city: "Mumbai",
+                        state: "Maharashtra",
+                        country: "India",
+                        zipcode: "400001",
+                        landmark: "",
+                        phoneNumber: this.state.patientPhone,
+                        latitude: 0,
+                        longitude: 0,
+                    },
+                },
+                {
+                    id: 3,
+                    firstName: "Monty",
+                    lastName: "Bear",
+                    email: "monty@example.com",
+                    countryCode: "+91",
+                    phoneNumber: this.state.patientPhone,
+                    dob: "1990-01-01",
+                    age: 35,
+                    gender: "MALE",
+                    bloodGroup: "A+",
+                    mrn: "MRN003",
+                    address: {
+                        id: 3,
+                        completeAddress: "123 Main St",
+                        addressLine1: "123 Main St",
+                        addressLine2: "",
+                        city: "Mumbai",
+                        state: "Maharashtra",
+                        country: "India",
+                        zipcode: "400001",
+                        landmark: "",
+                        phoneNumber: this.state.patientPhone,
+                        latitude: 0,
+                        longitude: 0,
+                    },
+                },
+            ];
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.phone(14)}
-          <span class="medos-section-title">Enter OTP</span>
+          ${VanillaIcons.users(14)}
+          <span class="medos-section-title">Select Patient</span>
         </div>
         <div class="medos-section-body">
-          <p class="medos-section-description">Enter the 6-digit code sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</p>
-          <div class="medos-otp-input-wrapper">
-            <input 
-              type="text" 
-              class="medos-input medos-otp-input" 
-              id="medos-otp" 
-              placeholder="Enter 6-digit OTP" 
-              value="${this.escapeHtml(this.state.otpCode)}" 
-              maxlength="6"
-            />
+          <div class="medos-patient-list">
+            ${patients
+            .map((patient) => `
+              <div class="medos-patient-card ${this.state.selectedPatient?.id === patient.id ? "selected" : ""}" data-patient-id="${patient.id}">
+                <div class="medos-patient-radio">
+                  <input type="radio" name="patient" value="${patient.id}" ${this.state.selectedPatient?.id === patient.id ? "checked" : ""} />
+                </div>
+                <div class="medos-patient-avatar">
+                  ${patient.firstName.charAt(0)}${patient.lastName.charAt(0)}
+                </div>
+                <div class="medos-patient-info">
+                  <div class="medos-patient-name">${this.escapeHtml(patient.firstName)} ${this.escapeHtml(patient.lastName)}</div>
+                  <div class="medos-patient-details">${this.escapeHtml(patient.countryCode)} ${this.escapeHtml(patient.phoneNumber)}</div>
+                </div>
+                <div class="medos-patient-select">select</div>
+              </div>
+            `)
+            .join("")}
           </div>
-          <button class="medos-link-btn" id="medos-btn-change-number">Change phone number</button>
+          
+          <button class="medos-add-patient-btn" id="medos-btn-add-patient">
+            ${VanillaIcons.plus(16)} New Patient
+          </button>
         </div>
       </div>
       <div class="medos-actions">
-        <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
-            ? ""
-            : "disabled"}>${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+        <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" ${this.state.selectedPatient ? "" : "disabled"}>Continue</button>
       </div>
     `;
     }
-    renderStep4() {
-        const canSubmit = this.state.patientName &&
+    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 &&
-            this.state.otpVerified;
+            this.state.patientZipcode;
         return `
+      <!-- Patient Information Section -->
       <div class="medos-section-card">
         <div class="medos-section-header">
           ${VanillaIcons.user(14)}
@@ -857,92 +1300,384 @@ class AppointmentCalendarWidget {
         </div>
         <div class="medos-section-body">
           <div class="medos-form-row">
-            <div class="medos-form-group medos-form-group-flex">
-              <label class="medos-label">Full Name <span class="medos-required">*</span></label>
-              <input type="text" class="medos-input" id="medos-patient-name" placeholder="Enter full name" value="${this.escapeHtml(this.state.patientName)}" />
+            <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-group medos-form-group-small">
-              <label class="medos-label">Age</label>
-              <input type="number" class="medos-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.state.patientAge)}" />
+            <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-group medos-form-group-flex">
-              <label class="medos-label">Email</label>
-              <input type="email" class="medos-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.state.patientEmail)}" />
+            <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-group medos-form-group-small">
-              <label class="medos-label">Gender</label>
-              <div id="medos-gender-container"></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-group">
-            <label class="medos-label">Blood Group <span class="medos-optional">(optional)</span></label>
-            <div id="medos-blood-group-container"></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 Details</span>
+          <span class="medos-section-title">Address Information</span>
         </div>
         <div class="medos-section-body">
-          <div class="medos-form-group">
-            <label class="medos-label">Address Line 1 <span class="medos-required">*</span></label>
-            <input type="text" class="medos-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.state.patientAddress)}" />
+          <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-group">
-              <label class="medos-label">City <span class="medos-required">*</span></label>
-              <input type="text" class="medos-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.state.patientCity)}" />
+            <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-group">
-              <label class="medos-label">State <span class="medos-required">*</span></label>
-              <input type="text" class="medos-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.state.patientState)}" />
+            <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-group">
-              <label class="medos-label">Country <span class="medos-required">*</span></label>
-              <input type="text" class="medos-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.state.patientCountry)}" />
+            <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-group">
-              <label class="medos-label">Zipcode <span class="medos-required">*</span></label>
-              <input type="text" class="medos-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.state.patientZipcode)}" />
+            <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-group">
-            <label class="medos-label">Landmark <span class="medos-optional">(optional)</span></label>
-            <input type="text" class="medos-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.state.patientLandmark)}" />
+
+          <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-secondary" id="medos-btn-back">Back</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-submit" ${canSubmit && !this.state.loading ? "" : "disabled"}>${this.state.loading ? "Booking..." : "Book Appointment"}</button>
+        <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);
+        const appointmentDate = this.state.selectedDate
+            ? this.state.selectedDate.toLocaleDateString("en-US", {
+                weekday: "short",
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+            })
+            : "";
+        const startTime = this.state.selectedSlot?.start
+            ? new Date(this.state.selectedSlot.start).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+            })
+            : "";
+        const usingSessionPack = this.state.bookingOptionType === "session-pack" &&
+            this.state.selectedSessionPack;
+        const usingNewPackage = this.state.bookingOptionType === "explore-packages" &&
+            this.state.selectedNewPackage;
+        const consultationCharge = this.state.consultationMode === "ONLINE" ? 500 : 300;
+        let totalAmount = consultationCharge;
+        let sessionInfo = "";
+        let dateOfExpiry = "";
+        if (usingSessionPack) {
+            totalAmount = 0;
+            sessionInfo = `${this.state.selectedSessionPack?.remainingSessions} appointments now remaining`;
+            dateOfExpiry = this.state.selectedSessionPack?.expiryDate || "";
+        }
+        else if (usingNewPackage) {
+            totalAmount = this.state.selectedNewPackage?.price || 0;
+            sessionInfo = `${this.state.selectedNewPackage?.totalSessions} appointments after purchase`;
+            const validityDays = this.state.selectedNewPackage?.validityDays || 365;
+            const expiryDate = new Date();
+            expiryDate.setDate(expiryDate.getDate() + validityDays);
+            dateOfExpiry = expiryDate.toLocaleDateString("en-US", {
+                day: "numeric",
+                month: "long",
+                year: "numeric",
+            });
+        }
+        const patientName = this.state.selectedPatient
+            ? `${this.state.selectedPatient.firstName} ${this.state.selectedPatient.lastName}`
+            : this.state.patientName || "Patient";
+        return `
+      <div class="medos-appointment-summary">
+        <div class="medos-summary-header">
+          <h3>Appointment Summary</h3>
+          <button class="medos-close-btn" id="medos-btn-close">&times;</button>
+        </div>
+        
+        <div class="medos-summary-section">
+          <label class="medos-form-label">REVIEW APPOINTMENT DETAILS</label>
+          
+          <div class="medos-summary-grid">
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Patient:</span>
+              <span class="medos-summary-value">${this.escapeHtml(patientName)}</span>
+            </div>
+            ${this.state.patientAge
+            ? `<div class="medos-summary-row">
+                <span class="medos-summary-label">Age:</span>
+                <span class="medos-summary-value">${this.escapeHtml(this.state.patientAge)} years</span>
+              </div>`
+            : ""}
+            ${this.state.bloodGroup
+            ? `<div class="medos-summary-row">
+                <span class="medos-summary-label">Blood Group:</span>
+                <span class="medos-summary-value">${this.escapeHtml(this.state.bloodGroup)}</span>
+              </div>`
+            : ""}
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Doctor:</span>
+              <span class="medos-summary-value">${selectedDoctor
+            ? this.escapeHtml(selectedDoctor.name)
+            : "Not selected"}</span>
+            </div>
+            ${selectedAddress
+            ? `<div class="medos-summary-row">
+                <span class="medos-summary-label">Location:</span>
+                <span class="medos-summary-value">${this.escapeHtml(selectedAddress.label || "Unknown Location")}</span>
+              </div>`
+            : ""}
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Date & Time:</span>
+              <span class="medos-summary-value">${appointmentDate}${startTime ? `, ${startTime}` : ""}</span>
+            </div>
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Appointment Type:</span>
+              <span class="medos-summary-value">${this.state.consultationMode === "ONLINE"
+            ? "In Clinic Consultation"
+            : "Online Consultation"}</span>
+            </div>
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Service:</span>
+              <span class="medos-summary-value">${usingSessionPack
+            ? this.escapeHtml(this.state.selectedSessionPack?.name || "Session Pack")
+            : usingNewPackage
+                ? this.escapeHtml(this.state.selectedNewPackage?.name || "Package")
+                : "Standard Consultation"}</span>
+            </div>
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Sessions:</span>
+              <span class="medos-summary-value">${sessionInfo || "1 consultation"}</span>
+            </div>
+            ${usingSessionPack || usingNewPackage
+            ? `
+              <div class="medos-summary-row">
+                <span class="medos-summary-label">Date of Purchase:</span>
+                <span class="medos-summary-value">${usingSessionPack
+                ? this.state.selectedSessionPack?.purchaseDate ||
+                    "Previously"
+                : "Today"}</span>
+              </div>
+              <div class="medos-summary-row">
+                <span class="medos-summary-label">Date of Expiry:</span>
+                <span class="medos-summary-value medos-expiry">${dateOfExpiry}</span>
+              </div>
+            `
+            : ""}
+          </div>
+        </div>
+        
+        <div class="medos-summary-total">
+          <div class="medos-total-row">
+            <span class="medos-total-label">Total Amount</span>
+            <span class="medos-total-note">${usingSessionPack ? "Using credits from bundle sessions." : ""}</span>
+          </div>
+          <div class="medos-total-amount">₹${totalAmount.toLocaleString()}</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-confirm">Confirm Book</button>
+        </div>
       </div>
     `;
     }
-    renderSuccessIcon() {
+    renderSuccessStep() {
+        const duration = this.calculateDuration();
+        const selectedDoctor = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+        const selectedAddress = this.state.addresses.find((addr) => addr.id === this.state.selectedAddress);
+        const appointmentDate = this.state.selectedDate
+            ? this.formatDate(formatDateToISO(this.state.selectedDate))
+            : "";
+        const startTime = this.state.selectedSlot?.start
+            ? this.formatTime(new Date(this.state.selectedSlot.start).toTimeString().slice(0, 5))
+            : "";
+        const patientName = this.state.selectedPatient
+            ? `${this.state.selectedPatient.firstName} ${this.state.selectedPatient.lastName}`
+            : this.state.patientName || "Patient";
+        const usingSessionPack = this.state.bookingOptionType === "session-pack" &&
+            this.state.selectedSessionPack;
         return `
-    <div style="position: relative; display: inline-block;">
-      <svg width="64" height="64" viewBox="0 0 41 41" fill="none">
-        <path
-          d="M31.1309 4.90254C32.388 4.98797 33.0166 5.03069 33.5247 5.25288C34.2598 5.57438 34.8467 6.16126 35.1682 6.8964C35.3904 7.40445 35.4331 8.03302 35.5185 9.29016L35.7135 12.159C35.748 12.6674 35.7653 12.9217 35.8206 13.1645C35.9004 13.5154 36.0391 13.8503 36.2308 14.1549C36.3634 14.3657 36.531 14.5576 36.8661 14.9416L38.7568 17.108C39.5853 18.0574 39.9996 18.532 40.2017 19.0484C40.4942 19.7955 40.4942 20.6255 40.2017 21.3727C39.9996 21.889 39.5853 22.3637 38.7568 23.313L36.8661 25.4795C36.531 25.8634 36.3634 26.0554 36.2308 26.2662C36.0391 26.5708 35.9004 26.9056 35.8206 27.2566C35.7653 27.4994 35.748 27.7536 35.7135 28.2621L35.5185 31.1309C35.4331 32.388 35.3904 33.0166 35.1682 33.5247C34.8467 34.2598 34.2598 34.8467 33.5247 35.1682C33.0166 35.3904 32.388 35.4331 31.1309 35.5185L28.2621 35.7135C27.7536 35.748 27.4994 35.7653 27.2566 35.8206C26.9056 35.9004 26.5708 36.0391 26.2662 36.2308C26.0554 36.3634 25.8634 36.531 25.4795 36.8661L23.313 38.7568C22.3637 39.5853 21.889 39.9996 21.3727 40.2017C20.6255 40.4942 19.7955 40.4942 19.0484 40.2017C18.532 39.9996 18.0574 39.5853 17.108 38.7568L14.9416 36.8661C14.5576 36.531 14.3657 36.3634 14.1549 36.2308C13.8503 36.0391 13.5154 35.9004 13.1645 35.8206C12.9217 35.7653 12.6674 35.748 12.159 35.7135L9.29016 35.5185C8.03302 35.4331 7.40445 35.3904 6.8964 35.1682C6.16126 34.8467 5.57438 34.2598 5.25288 33.5247C5.03069 33.0166 4.98797 32.388 4.90254 31.1309L4.70759 28.2621C4.67304 27.7536 4.65576 27.4994 4.60049 27.2566C4.52063 26.9056 4.38193 26.5708 4.19028 26.2662C4.05764 26.0554 3.89009 25.8634 3.555 25.4795L1.66428 23.313C0.83576 22.3637 0.421499 21.889 0.219363 21.3727C-0.073121 20.6255 -0.0731209 19.7955 0.219363 19.0484C0.421499 18.532 0.83576 18.0574 1.66428 17.108L3.555 14.9416C3.89009 14.5576 4.05764 14.3657 4.19027 14.1549C4.38193 13.8503 4.52063 13.5154 4.60049 13.1645C4.65576 12.9217 4.67304 12.6674 4.70759 12.159L4.90254 9.29016C4.98797 8.03302 5.03069 7.40445 5.25288 6.8964C5.57438 6.16126 6.16126 5.57438 6.8964 5.25288C7.40445 5.03069 8.03302 4.98797 9.29016 4.90254L12.159 4.70759C12.6674 4.67304 12.9217 4.65577 13.1645 4.6005C13.5154 4.52063 13.8503 4.38193 14.1549 4.19028C14.3657 4.05764 14.5576 3.89009 14.9416 3.555L17.108 1.66428C18.0574 0.83576 18.532 0.421499 19.0484 0.219363C19.7955 -0.073121 20.6255 -0.073121 21.3727 0.219363C21.889 0.421499 22.3637 0.83576 23.313 1.66428L25.4795 3.555C25.8634 3.89009 26.0554 4.05764 26.2662 4.19028C26.5708 4.38193 26.9056 4.52063 27.2566 4.6005C27.4994 4.65577 27.7536 4.67304 28.2621 4.70759L31.1309 4.90254Z"
-          fill="#006E0F"
-        />
-      </svg>
-      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
-        <path
-          d="M5.472 11.544L0 6.072L1.368 4.704L5.472 8.808L14.28 0L15.648 1.368L5.472 11.544Z"
-          fill="white"
-        />
-      </svg>
-    </div>
-  `;
+      <div class="medos-success-container">
+        <div class="medos-success-header">
+          <h2>Appointment Confirmed</h2>
+        </div>
+        
+        <div class="medos-success-content">
+          <div class="medos-success-badge">
+            ${VanillaIcons.successBadge(64)}
+          </div>
+          
+          <h3 class="medos-success-title">Appointment Confirmed</h3>
+          
+          <div class="medos-success-details">
+            <h4>Appointment Details</h4>
+            <div class="medos-details-text">
+              <p><strong>Patient:</strong> ${this.escapeHtml(patientName)}</p>
+              <p><strong>Type:</strong> ${this.state.consultationMode === "ONLINE"
+            ? "In Clinic Consultation"
+            : "Online"}</p>
+              <p><strong>Date:</strong> ${appointmentDate}</p>
+              <p><strong>Time:</strong> ${startTime}</p>
+              <p><strong>Duration:</strong> ~${duration} minutes</p>
+              ${selectedAddress?.label
+            ? `<p><strong>Location:</strong> ${this.escapeHtml(selectedAddress.label)}</p>`
+            : ""}
+            </div>
+          </div>
+          
+          <p class="medos-confirmation-message">
+            A confirmation message has been sent to the registered Phone Number.
+          </p>
+          
+          ${usingSessionPack
+            ? `
+            <div class="medos-session-remaining">
+              <span class="medos-remaining-label">Sessions:</span>
+              <span class="medos-remaining-value">${(this.state.selectedSessionPack?.remainingSessions || 1) - 1} appointments now remaining</span>
+            </div>
+          `
+            : ""}
+        </div>
+      </div>
+    `;
     }
     formatDate(dateStr) {
         try {
@@ -980,66 +1715,6 @@ class AppointmentCalendarWidget {
         }
         return 60;
     }
-    renderStep5() {
-        const duration = this.calculateDuration();
-        const selectedAddress = this.state.addresses.find((addr) => addr.id === this.state.selectedAddress);
-        const appointmentDate = this.state.selectedDate
-            ? this.formatDate(formatDateToISO(this.state.selectedDate))
-            : "";
-        const startTime = this.state.selectedSlot?.start
-            ? this.formatTime(new Date(this.state.selectedSlot.start).toTimeString().slice(0, 5))
-            : "";
-        return `
-    <div style="display: flex; flex-direction: column; padding: 0; font-family: Arial, sans-serif; background: #f8f9fa; min-height: 500px;">
-      <!-- Header with border -->
-      <div style="padding: 20px 24px; font-size: 24px; font-weight: bold; color: #1a365d; border-bottom: 2px solid #e2e8f0; background: white;">
-        Appointment Confirmed
-      </div>
-      
-      <!-- Main content with border -->
-      <div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; border: 2px solid #e2e8f0; border-top: none; background: white; text-align: center;">
-        <!-- Success Title -->
-        <h2 style="font-size: 20px; font-weight: 600; color: #006E0F; margin: 0 0 24px 0;">
-          Appointment Confirmed
-        </h2>
-        
-        <!-- Success Icon -->
-        <div style="margin-bottom: 32px;">
-          ${this.renderSuccessIcon()}
-        </div>
-        
-        <!-- Appointment Details -->
-        <div style="width: 100%; max-width: 500px; margin-bottom: 32px;">
-          <h3 style="font-size: 18px; font-weight: 600; color: #006E0F; margin-bottom: 24px;">
-            Appointment Details
-          </h3>
-          
-          <div style="display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.6; color: #4a5568;">
-            <div><strong style="color: #006E0F;">Patient:</strong> ${this.escapeHtml(this.state.patientName || "Patient")}</div>
-            <div><strong style="color: #006E0F;">Visitation Type:</strong> ${this.state.consultationMode === "ONLINE"
-            ? "Online Consultation"
-            : "General"}</div>
-            ${appointmentDate
-            ? `<div><strong style="color: #006E0F;">Date:</strong> ${appointmentDate}</div>`
-            : ""}
-            ${startTime
-            ? `<div><strong style="color: #006E0F;">Time:</strong> ${startTime}</div>`
-            : ""}
-            <div><strong style="color: #006E0F;">Duration:</strong> ~${duration} minutes</div>
-            ${selectedAddress?.label
-            ? `<div><strong style="color: #006E0F;">Location:</strong> ${this.escapeHtml(selectedAddress.label)}</div>`
-            : ""}
-          </div>
-        </div>
-        
-        <!-- Confirmation Message -->
-        <div style="font-size: 16px; font-style: italic; color: #718096; text-align: center; max-width: 600px; line-height: 1.5;">
-          A confirmation email has been sent to the Patient's Email address.
-        </div>
-      </div>
-    </div>
-  `;
-    }
     attachEventListeners() {
         const consultationRadios = this.container.querySelectorAll('input[name="consultationMode"]');
         consultationRadios.forEach((radio) => {
@@ -1049,7 +1724,7 @@ class AppointmentCalendarWidget {
                 this.render();
             });
         });
-        const slotCards = this.container.querySelectorAll(".medos-slot-card");
+        const slotCards = this.container.querySelectorAll(".medos-slot-card, .medos-slot-btn");
         slotCards.forEach((card) => {
             card.addEventListener("click", () => {
                 const slotId = card.dataset.slotId;
@@ -1121,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");
@@ -1131,19 +1807,13 @@ class AppointmentCalendarWidget {
                 this.updateSubmitButtonState();
             });
         }
-        const patientGenderSelect = this.container.querySelector("#medos-patient-gender");
-        if (patientGenderSelect) {
-            patientGenderSelect.addEventListener("change", (e) => {
-                const target = e.target;
-                this.state.patientGender = target.value;
-            });
-        }
         const patientAddressInput = this.container.querySelector("#medos-patient-address");
         if (patientAddressInput) {
             patientAddressInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientAddress = target.value;
                 this.updateSubmitButtonState();
+                this.updatePatientDetailsButtonState();
             });
         }
         const patientCityInput = this.container.querySelector("#medos-patient-city");
@@ -1152,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");
@@ -1160,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");
@@ -1168,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");
@@ -1176,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");
@@ -1185,6 +1859,151 @@ 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", () => {
+                const option = card.dataset.option;
+                if (option === "new-appointment" ||
+                    option === "session-pack" ||
+                    option === "explore-packages") {
+                    this.state.bookingOptionType = option;
+                    this.render();
+                }
+            });
+        });
+        const packCards = this.container.querySelectorAll(".medos-session-pack-card");
+        packCards.forEach((card) => {
+            card.addEventListener("click", () => {
+                const packId = Number.parseInt(card.dataset.packId || "0", 10);
+                const pack = this.state.userSessionPacks.find((p) => p.id === packId);
+                if (pack) {
+                    this.state.selectedSessionPack = pack;
+                    this.state.bookingOptionType = "session-pack";
+                    this.render();
+                }
+            });
+        });
+        const packageCards = this.container.querySelectorAll(".medos-package-card");
+        packageCards.forEach((card) => {
+            card.addEventListener("click", () => {
+                const packageId = parseInt(card.dataset.packageId || "0", 10);
+                const pkg = this.state.availablePackages.length > 0
+                    ? this.state.availablePackages.find((p) => p.id === packageId)
+                    : {
+                        id: packageId,
+                        name: packageId === 1 ? "Silver Package" : "Gold Package",
+                        totalSessions: packageId === 1 ? 3 : 5,
+                        price: packageId === 1 ? 5000 : 8000,
+                        validityDays: packageId === 1 ? 180 : 365,
+                        applicableOnline: true,
+                        applicableOffline: true,
+                    };
+                if (pkg) {
+                    this.state.selectedNewPackage = pkg;
+                    this.render();
+                }
+            });
+        });
+        const patientCards = this.container.querySelectorAll(".medos-patient-card");
+        patientCards.forEach((card) => {
+            card.addEventListener("click", () => {
+                const patientId = parseInt(card.dataset.patientId || "0", 10);
+                const patients = this.state.verifiedPatients.length > 0
+                    ? this.state.verifiedPatients
+                    : this.getPlaceholderPatients();
+                const patient = patients.find((p) => p.id === patientId);
+                if (patient) {
+                    this.state.selectedPatient = patient;
+                    this.render();
+                }
+            });
+        });
         const nextBtn = this.container.querySelector("#medos-btn-next");
         if (nextBtn) {
             nextBtn.addEventListener("click", () => {
@@ -1193,10 +2012,22 @@ class AppointmentCalendarWidget {
                 }
             });
         }
+        const continueBtn = this.container.querySelector("#medos-btn-continue");
+        if (continueBtn) {
+            continueBtn.addEventListener("click", () => {
+                if (!continueBtn.disabled) {
+                    this.goToNext();
+                }
+            });
+        }
         const backBtn = this.container.querySelector("#medos-btn-back");
         if (backBtn) {
             backBtn.addEventListener("click", () => this.goBack());
         }
+        const cancelBtn = this.container.querySelector("#medos-btn-cancel");
+        if (cancelBtn) {
+            cancelBtn.addEventListener("click", () => this.reset());
+        }
         const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
         if (sendOtpBtn) {
             sendOtpBtn.addEventListener("click", () => {
@@ -1226,6 +2057,14 @@ class AppointmentCalendarWidget {
                 this.sendOtp();
             });
         }
+        const confirmBtn = this.container.querySelector("#medos-btn-confirm");
+        if (confirmBtn) {
+            confirmBtn.addEventListener("click", () => {
+                if (!confirmBtn.disabled) {
+                    this.submitAppointment();
+                }
+            });
+        }
         const submitBtn = this.container.querySelector("#medos-btn-submit");
         if (submitBtn) {
             submitBtn.addEventListener("click", () => {
@@ -1238,12 +2077,194 @@ class AppointmentCalendarWidget {
         if (bookAnotherBtn) {
             bookAnotherBtn.addEventListener("click", () => this.reset());
         }
+        const addPatientBtn = this.container.querySelector("#medos-btn-add-patient");
+        if (addPatientBtn) {
+            addPatientBtn.addEventListener("click", () => {
+                this.state.selectedPatient = null;
+                this.state.useExistingPatient = false;
+                this.goToNext();
+            });
+        }
+    }
+    getPlaceholderPatients() {
+        return [
+            {
+                id: 1,
+                firstName: "Mumma",
+                lastName: "Bear",
+                email: "mumma@example.com",
+                countryCode: "+91",
+                phoneNumber: this.state.patientPhone,
+                dob: "1970-01-01",
+                age: 55,
+                gender: "FEMALE",
+                bloodGroup: "O+",
+                mrn: "MRN001",
+                address: {
+                    id: 1,
+                    completeAddress: "123 Main St",
+                    addressLine1: "123 Main St",
+                    addressLine2: "",
+                    city: "Mumbai",
+                    state: "Maharashtra",
+                    country: "India",
+                    zipcode: "400001",
+                    landmark: "",
+                    phoneNumber: this.state.patientPhone,
+                    latitude: 0,
+                    longitude: 0,
+                },
+            },
+            {
+                id: 2,
+                firstName: "Papa",
+                lastName: "Bear",
+                email: "papa@example.com",
+                countryCode: "+91",
+                phoneNumber: this.state.patientPhone,
+                dob: "1968-01-01",
+                age: 57,
+                gender: "MALE",
+                bloodGroup: "B+",
+                mrn: "MRN002",
+                address: {
+                    id: 2,
+                    completeAddress: "123 Main St",
+                    addressLine1: "123 Main St",
+                    addressLine2: "",
+                    city: "Mumbai",
+                    state: "Maharashtra",
+                    country: "India",
+                    zipcode: "400001",
+                    landmark: "",
+                    phoneNumber: this.state.patientPhone,
+                    latitude: 0,
+                    longitude: 0,
+                },
+            },
+        ];
     }
     escapeHtml(text) {
         const div = document.createElement("div");
         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 = "";